({{, (RefLink[FormFunction, paclet:ref/FormFunction])[formspec,func]
represents an active form that, when submitted, applies func to the values obtained from the form specified by formspec.}, {, (RefLink[FormFunction, paclet:ref/FormFunction])[{"(Subscript[name, 1])"->(Subscript[type, 1]),…},func]
represents an active form with fields named (Subscript[name, i]) interpreted as types (Subscript[type, i]).}, {, (RefLink[FormFunction, paclet:ref/FormFunction])[{{"(Subscript[name, 1])",(Subscript[label, 1])}->(Subscript[type, 1]),…},func]
uses (Subscript[label, i]) as the label for the field named (Subscript[name, i]).}, {, (RefLink[FormFunction, paclet:ref/FormFunction])[{(Subscript[namespec, 1])->(Subscript[type, 1])->(Subscript[default, 1]),…},func]
uses (Subscript[default, i]) as the default for the field specified by (Subscript[namespec, i]).}, {, (RefLink[FormFunction, paclet:ref/FormFunction])[formspec,func,fmt]
specifies that in the cloud, the result from applying func should be returned in format fmt.}, {, (RefLink[FormFunction, paclet:ref/FormFunction])[{(Subscript[formspec, 1]),(Subscript[formspec, 2]),…},func,…]
represents a multipage form, in which the successive (Subscript[formspec, i]) can be functions that are applied to the values obtained so far.}})

OpenersNotesSection(Spacer1)Details and Options

(RefLink[FormFunction, paclet:ref/FormFunction])[formspec,func] displays the form specified by formspec, together with a "submit" button.

In (RefLink[FormFunction, paclet:ref/FormFunction])[formspec,func], formspec can be (RefLink[FormObject, paclet:ref/FormObject])[…].

(RefLink[FormFunction, paclet:ref/FormFunction])[formspec,func] evaluates to give (RefLink[FormFunction, paclet:ref/FormFunction])[(RefLink[FormObject, paclet:ref/FormObject])[…],func], where the (RefLink[FormObject, paclet:ref/FormObject]) contains full specifications for all fields in the form.

(RefLink[CloudDeploy, paclet:ref/CloudDeploy])[FormFunction[…]] yields a cloud object containing an active version of the form.

(RefLink[FormFunction, paclet:ref/FormFunction])[formspec,func][] evaluates by first evaluating (RefLink[Setting, paclet:ref/Setting])[formspec] to give an association of values for fields in the form. If no validation errors are generated, func is applied to the association, and the result is returned.

(RefLink[FormFunction, paclet:ref/FormFunction])[formspec,func][<|"(Subscript[name, k])"->(Subscript[input, k]),…|>] inserts the inputs given into the form specified by (RefLink[FormFunction, paclet:ref/FormFunction]) before evaluating the effect of the (RefLink[FormFunction, paclet:ref/FormFunction]).

(RefLink[FormFunction, paclet:ref/FormFunction])[…][] evaluates to an active form, which, assuming it has valid input given, is replaced by the result from applying func when it is submitted.

The (Subscript[type, i]) for each field can be any of the following:

In multipage forms represented by (RefLink[FormFunction, paclet:ref/FormFunction])[{(Subscript[formspec, 1]),(Subscript[formspec, 2]),…},…], the successive forms specified by the (Subscript[formspec, i]) are displayed, with the last form by default having a "done" button, and earlier forms by default having "next" buttons.

In (RefLink[FormFunction, paclet:ref/FormFunction])[{(Subscript[formspec, 1]),(Subscript[formspec, 2]),…},…], the (Subscript[formspec, i]) after (Subscript[formspec, 1]) are typically always pure functions. They are applied to an association giving the values of all inputs obtained from all earlier (Subscript[formspec, i]).

Overall options for (RefLink[FormFunction, paclet:ref/FormFunction]) include:

When called in the cloud, (RefLink[FormFunction, paclet:ref/FormFunction])[formspec,func] by default returns the result in a format suitable for web output.

Possible result specifications fmt in (RefLink[FormFunction, paclet:ref/FormFunction])[formspec,func,fmt] are:

When called in the cloud, (RefLink[FormFunction, paclet:ref/FormFunction])[formspec,func,"fmt"] is equivalent to (RefLink[FormFunction, paclet:ref/FormFunction])[formspec,(RefLink[ExportForm, paclet:ref/ExportForm])[func[#],"fmt"]&].

When called directly in the notebook interface, the result specification fmt in (RefLink[FormFunction, paclet:ref/FormFunction])[formspec,func,fmt] is ignored.

OpenersPrimaryExamplesSection(Spacer1)Examples  (49)

OpenersExampleSection0(Spacer1)Basic Examples  (2)

Set up a form function:

form=FormFunction[{"first"->"String","second"->"Number"},f]

Activate it, then fill in inputs:

form[]

Deploy the form function to the cloud:

CloudDeploy[form]

Programmatically fill in the form:

form[{"first" -> "str", "second" -> "55"}]

A partially submitted form will not be activated:

form[{"first" -> "str"}]

Create dynamic forms:

FormFunction[{"x"-> "Boolean","y"-> TemplateIf[TemplateSlot["x"], "Number", "String"]}, foo]

OpenersExampleSection1(Spacer1)Scope  (28)

OpenersExampleSubsection0(Spacer1)Interpreter Specifications  (6)

Use rich (RefLink[Interpreter, paclet:ref/Interpreter]) specifications:

CloudDeploy[FormFunction[{"x" -> Restricted["Integer",{1,10}]}, func]]

The (RefLink[Interpreter, paclet:ref/Interpreter]) head is optional, but useful to specify options or other arguments to (RefLink[Interpreter, paclet:ref/Interpreter]):

CloudDeploy[FormFunction[{"x" -> Interpreter["StructuredDate", TimeZone->2], "y" -> Interpreter[ToExpression, Positive]}, func]]

A list can be used to create a menu:

CloudDeploy[FormFunction[{"x" -> {1,2,3}}, func]]

CloudDeploy[FormFunction[{"question" -> {"Yes"->True,"No"->False}}, func]]

An entity list can be used as a menu:

CloudDeploy[FormFunction[{"Country" ->EntityList["Country"]}, func]]

Choices can be any expression:

CloudDeploy[FormFunction[{"Image" :>Map[ImageResize[ExampleData[#], {100, 100}] &, ExampleData["TestImage"][[1;;6]]]}, Composition[EdgeDetect, First], "PNG"]]

A list of rules allows for label specification:

CloudDeploy[FormFunction[{"x" ->{"A" -> 1,"B"->2,"C"->3}}, func]]

OpenersExampleSubsection1(Spacer1)Defaults  (3)

Specify a default for a field; fields that have a default are not required:

FormFunction[{"first"->"String","second"->"Number"->3},f]["first"->"str"]

Fields can be optional without having a default:

FormFunction[{"first"->"String","second"-><|"Interpreter"->"Number", "Required"-> False|>},f]["first"->"str"]

Use (RefLink[RuleDelayed, paclet:ref/RuleDelayed]) to evaluate a new default every time:

FormFunction[{"name"->"String","date"-><|"Interpreter"->"DateTime", "Default":> DateObject[]|>},f][<|"name" -> "Bob", "date" -> None|>]

OpenersExampleSubsection2(Spacer1)Input  (2)

Create a form with input inside:

CloudDeploy[FormFunction[{"x" -> <|"Input" -> "Apple"|>}, Identity]]

Input can be delayed:

CloudDeploy[FormFunction[{"DateTime" -> <|"Interpreter" -> "DateTime","Input" :> DateString[]|>}, Identity]]

OpenersExampleSubsection3(Spacer1)Label  (1)

Change the label for a field:

CloudDeploy[FormFunction[{"x", "First Name"} -> "String", Identity]]

You can use (RefLink[RuleDelayed, paclet:ref/RuleDelayed]) and return any expression:

CloudDeploy[FormFunction["pc" -> <|"Label" :> "PC: " <> $MachineID|>, Identity]]

CloudDeploy[FormFunction[
"pc" -> <|"Label" :> GeoGraphics[
$GeoLocation,
GeoRange->Quantity[2,"Miles"]
]|>,
Identity
]]

Use (RefLink[None, paclet:ref/None]) to remove the label:

CloudDeploy[FormFunction["Query"-> <|"Label" -> None, "Hint" -> "Search"|>, Identity]]

CloudDeploy[FormFunction[{
"First"-> <|"Label" -> None, "Hint" -> "First Name"|>,
"Last" -><|"Label" -> None, "Hint" -> "Last Name"|>
}, Identity]]

OpenersExampleSubsection4(Spacer1)Appearance  (4)

Change the default label to be something different from the key:

CloudDeploy[FormFunction[{"key", "Label"} -> "Integer", g]]

Labels can be any expression:

CloudDeploy[FormFunction[{"Number", } -> "Number", g]]

Change the appearance of single fields:

CloudDeploy[FormFunction[{"x" -><|"Interpreter" -> Restricted["Integer",{1,10}], "Control" -> InputField, "Help" -> "help text", "Hint" -> "write something"|>}, func]]

Use (RefLink[RuleDelayed, paclet:ref/RuleDelayed]) to evaluate an expression in the cloud:

CloudDeploy[FormFunction[{"x" -><|"Label" -> "Where are you?", "Help" :> GeoGraphics[$GeoLocation]|>}, func]]

Use non-rule elements to change the default appearance:

CloudDeploy[FormFunction[{"x" ->"String", "text",Graphics3D[Sphere[]], "y"-> "Integer"}, func]]

OpenersExampleSubsection5(Spacer1)Controls  (7)

Different types have different controllers. Color pickers for "Color":

CloudDeploy[FormFunction[{"x" ->"Color"}, func]]

Or file pickers for file formats:

CloudDeploy[FormFunction[{"x" ->"Image"}, func]]

Checkboxes for "Boolean":

CloudDeploy[FormFunction[{"x" ->"Boolean"}, func]]

Change the default controller:

CloudDeploy[FormFunction[{"x" -><|"Interpreter" -> Restricted["Integer",{1,10}], "Control" -> Slider|>}, func]]

Multiple choices support various types of controllers:

CloudDeploy[FormFunction[FormObject[<|"x"-><|"Interpreter"->{"A"->1,"B"->2,"C"->3}, "Control" -> RadioButtonBar|>|>],func]]

Labels for radio buttons can be anything you want:

CloudDeploy[FormFunction[FormObject[<|"x"-><|"Interpreter"->{Plot[Sin[x],{x,0,10}]->1,Graphics3D[Sphere[]]->2,EntityValue[(Entity["domestic cat", Entity["Species","Species:FelisCatus"], "Entity[\"Species\", \"Species:FelisCatus\"]", "species specification"]),(EntityProperty["image", EntityProperty["Species","Image"], "EntityProperty[\"Species\", \"Image\"]"])]->3}, "Control" -> RadioButtonBar|>|>],func]]

The control specification also accepts pure functions:

CloudDeploy[FormFunction[{"x"-><|"Interpreter"->"String", "Control" -> Function[Tooltip[InputField[##], EntityValue[(Entity["domestic cat", Entity["Species","Species:FelisCatus"], "Entity[\"Species\", \"Species:FelisCatus\"]", "species specification"]),(EntityProperty["image", EntityProperty["Species","Image"], "EntityProperty[\"Species\", \"Image\"]"])]]]|>}, func]]

OpenersExampleSubsection6(Spacer1)Disambiguation  (3)

For strings that are interpreted from natural language in the Wolfram Cloud, sometimes results might be ambiguous:

CloudDeploy[FormFunction["where" -> "City", func]["where" -> "springfield"]]

Disambiguation is off for most types by default, but it can be easily activated:

CloudDeploy[FormFunction["amount" -><|"Interpreter"->"Quantity", "Disambiguation" -> All|>, func]["amount" -> "2 ounces"]]

Sometimes several parts of the expression are ambiguous:

CloudDeploy[FormFunction["expr" -><|"Interpreter"->"SemanticExpression", "Disambiguation" -> All|>, func]["expr" -> "log log 3"]]

OpenersExampleSubsection7(Spacer1)Dynamic forms  (1)

Parts of forms that contain (RefLink[TemplateSlot, paclet:ref/TemplateSlot]) are not evaluated until the keys mentioned in (RefLink[TemplateSlot, paclet:ref/TemplateSlot])[key] are bound to a proper value:

FormFunction[{{"name" , "what's your name?"} -> "GivenName", "gender" -><|"Interpreter" -> {"Male", "Female"}, "Input" ->TemplateIf[TemplateSlot["name"][[-1,-1]] == "male", "Male", "Female"]|>}][]

OpenersExampleSubsection8(Spacer1)Multipage forms  (1)

(RefLink[FormFunction, paclet:ref/FormFunction]) supports forms that span several pages. The fields depend on values in previous pages:

FormFunction[{{{"rooms" ,"number of rooms"} -> "Integer"}, Function[Table[{"room" <> ToString[i], "guests in room" <> ToString[i]} -> "Integer", {i, #rooms}]]}][]

OpenersExampleSection2(Spacer1)Options  (6)

OpenersExampleSubsection9(Spacer1)AppearanceRules  (1)

Write a custom title and description:

CloudDeploy[FormFunction["Start" -> "Country", func, AppearanceRules-><|"Title" -> "Where do you want to go?", "Description" -> "Enter a country and we will find you an accomodation"|>]]

Use an image for branding:

CloudDeploy[FormFunction["Product" -> {"Flyers", "Business cards", "Leflets"}, func, AppearanceRules-><|"Title" ->, "Description" -> "What do you want to print today?"|>]]

Use an "ItemLayout" to change form fields' appearance:

CloudDeploy[FormFunction[{"First" -> "String", "Second" -> "String"}, func, AppearanceRules-><|"ItemLayout" -> "Vertical"|>]]

CloudDeploy[FormFunction[{"First" -> <|"Help" ->  "Insert a value"|>, "Second" -> <|"Help" ->  "Insert a value"|>}, func, AppearanceRules-><|"ItemLayout" -> "Inline"|>]]

Change the submit label:

CloudDeploy[FormFunction["Product" -> {"Flyers", "Business cards", "Leflets"}, func, AppearanceRules-><|"SubmitLabel" -> "Buy now!"|>]]

OpenersExampleSubsection10(Spacer1)FormLayoutFunction  (1)

A pure function can be specified to give a specific layout to a form:

CloudDeploy[FormFunction["x" -> "Integer", func,FormLayoutFunction->Function[Row[{#["x"], Graphics3D[Sphere[]]}]]]]

OpenersExampleSubsection11(Spacer1)PageTheme  (4)

Deploy a form with a white theme:

CloudDeploy[FormFunction[{"age" -> "Number"}, First, PageTheme -> "White"]]

Deploy a form with a blue theme:

CloudDeploy[FormFunction[{"age" -> "Number"}, First, PageTheme -> "Blue"]]

Deploy a form with a black theme:

CloudDeploy[FormFunction[{"age" -> "Number"}, First, PageTheme -> "Black"]]

Deploy a form with a red theme:

CloudDeploy[FormFunction[{"age" -> "Number"}, First, PageTheme -> "Red"]]

OpenersExampleSection3(Spacer1)Applications  (2)

Draw the flight path between two airports:

CloudDeploy[FormFunction[{"from"->"Airport","to"->"Airport"},GeoGraphics[GeoPath[{GeoPosition[#from],GeoPosition[#to]}]]&,"PNG"]]

Get demographic data for a city:

CloudDeploy @ FormFunction[{
"city" -> <|"Interpreter"->"City", "Input" -> "NYC"|>, 
"years" -> <|
"Input"-> "2000 - 2010",
"Interpreter"->Restricted[
DelimitedSequence[
Restricted["Integer", {1900, 2014}],
"-"
],
{1, 2}
]|>
},
Module[{data,range},
range = Range @@ PadRight[Sort[#years], 2, First[#years]];
data =  EntityValue[
#city,
Table[
EntityProperty[
"City",
"Population",
{"Date"->DateObject[{year}]}
],
{year, range}
]
];
Grid @ Transpose[{range,data}]
]
&,
"HTML",
AppearanceRules -> <|
"Title" -> "Demographic data",
"Description" -> "Enter any city and a date range."
|>
]

OpenersExampleSection4(Spacer1)Properties & Relations  (8)

(RefLink[FormFunction, paclet:ref/FormFunction]) is designed to be interchangeable with (RefLink[APIFunction, paclet:ref/APIFunction]):

CloudDeploy[FormFunction @@ APIFunction["x" -> "String", Identity]]

And vice versa:

CloudDeploy[APIFunction @@ FormFunction["x" -> "String", Identity]]

The first argument of (RefLink[FormFunction, paclet:ref/FormFunction]) can be given as a full (RefLink[FormObject, paclet:ref/FormObject]):

FormFunction[FormObject["x" -> "Integer"], Identity]

(RefLink[FormFunction, paclet:ref/FormFunction]) evaluates so that the first argument becomes a full (RefLink[FormObject, paclet:ref/FormObject]):

FormFunction["x" -> "String", Identity]//InputForm

The single fields of a (RefLink[FormFunction, paclet:ref/FormFunction]) use (RefLink[Interpreter, paclet:ref/Interpreter]) to transform the input in Wolfram Language expressions:

ff1 = FormFunction["x" -> "Country", #x&]

This is effectively the same as:

ff2 = FormFunction["x" -> Interpreter["Country"], #x&]

And the same as applying (RefLink[Interpreter, paclet:ref/Interpreter]) directly:

ff1["x" -> "france"] === ff2["x"-> "france"]=== Interpreter["Country"]["france"]

(RefLink[AnySubset, paclet:ref/AnySubset]) can be used to generate a controller where more than one choice can be picked:

CloudDeploy[FormFunction[
{"choose one or more"-> AnySubset[{1,2,3}]}]]

(RefLink[RepeatingElement, paclet:ref/RepeatingElement]) can be used to create a group of fields that can be added and deleted:

CloudDeploy[FormFunction["field" -> RepeatingElement["String", {2,{1, 5}}]]]

(RefLink[CompoundElement, paclet:ref/CompoundElement]) can be used to create an extensible table of fields:

CloudDeploy[FormFunction["names" -> RepeatingElement[CompoundElement[<|"first"-> "String", "last" -> "String"|>]]]]

OpenersExampleSection5(Spacer1)Possible Issues  (1)

(RefLink[Interpreter, paclet:ref/Interpreter])[(StringTypeLink["String", paclet:ref/format/String])] accepts an empty string. This is not true for (RefLink[FormFunction, paclet:ref/FormFunction]), where the empty string and an empty field are considered equivalent:

Interpreter["String"][""]

form=FormFunction[{"a string"->"String"},f];
form[{"a string" -> ""}]

OpenersExampleSection6(Spacer1)Neat Examples  (2)

Create a search engine that redirects to a URL:

CloudDeploy[FormFunction[{"Website" -> <|"Interpreter" -> "SemanticURL", "Input" -> "Wikipedia"|>}, Composition[HTTPRedirect, First], AppearanceRules-><|"Title" -> "WebGo!", "Description" -> "Write the name of any website, and we will take you there!", "SubmitLabel" -> "Go!"|>]]

Make a simple web application to apply a filter to an image:

CloudDeploy[FormFunction[{"image" ->"Image", "filter" -> ImageEffect[]}, ImageEffect[#image, #filter]&, "JPEG",AppearanceRules-> {"Title" -> "Wolf(g)ram"}]]

({{DocumentationFooterIconsRelatedFunction.png, ({{See Also}, {(RefLink[FormObject, paclet:ref/FormObject])  ▪  (RefLink[FormPage, paclet:ref/FormPage])  ▪  (RefLink[APIFunction, paclet:ref/APIFunction])  ▪  (RefLink[AskFunction, paclet:ref/AskFunction])  ▪  (RefLink[CloudDeploy, paclet:ref/CloudDeploy])  ▪  (RefLink[ExportForm, paclet:ref/ExportForm])  ▪  (RefLink[URLDispatcher, paclet:ref/URLDispatcher])  ▪  (RefLink[Function, paclet:ref/Function])  ▪  (RefLink[AutoSubmitting, paclet:ref/AutoSubmitting])  ▪  (RefLink[RepeatingElement, paclet:ref/RepeatingElement])  ▪  (RefLink[CompoundElement, paclet:ref/CompoundElement])  ▪  (RefLink[FormControl, paclet:ref/FormControl])}})}})

({{DocumentationFooterIconsRelatedTutorial.png, ({{Tutorials}, {▪(RefLinkPlain[Advanced Web Form Creation, paclet:tutorial/AdvancedWebFormCreation])}})}})

({{DocumentationFooterIconsRelatedGuide.png, ({{Related Guides}, {▪(RefLinkPlain[Custom Interface Construction, paclet:guide/CustomInterfaceConstruction])}, {▪(RefLinkPlain[Web Operations, paclet:guide/WebOperations])}, {▪(RefLinkPlain[Automated Reports, paclet:guide/AutomatedReports])}, {▪(RefLinkPlain[Cloud Functions & Deployment, paclet:guide/CloudFunctionsAndDeployment])}, {▪(RefLinkPlain[Creating Form Interfaces & Apps, paclet:guide/CreatingFormsAndApps])}, {▪(RefLinkPlain[Setting Up Input Interpreters, paclet:guide/InterpretingStrings])}, {▪(RefLinkPlain[Form Structure & Layout, paclet:guide/FormStructureAndLayout])}, {▪(RefLinkPlain[Control Objects, paclet:guide/ControlObjects])}, {▪(RefLinkPlain[Setting Up User Interactions, paclet:guide/SettingUpUserInteractions])}})}})

({{(Spacer1), ({{(Spacer1)Related Links}, {(WebLink[DocumentationFooterIconsRelatedLinks-FastIntro.png(Spacer1)Fast Introduction for Programmers: Cloud Deployment, http://www.wolfram.com/language/fast-introduction-for-programmers/cloud-deployment/])}, {(WebLink[DocumentationFooterIconsRelatedLinks-EIWL.png(Spacer1)An Elementary Introduction to the Wolfram Language, https://www.wolfram.com/language/elementary-introduction/36-creating-websites-and-apps.html])(WebLink[: Creating Websites and Apps, https://www.wolfram.com/language/elementary-introduction/36-creating-websites-and-apps.html])}})}})