({{, (RefLink[FormPage, paclet:ref/FormPage])[formspec,func] 
represents an active page that takes input from a form and generates results on the same page by applying func to the values obtained from the form whose structure is defined by formspec.}, {, (RefLink[FormPage, paclet:ref/FormPage])[{"(Subscript[name, 1])"->(Subscript[type, 1]),…},func]
represents an active form page with fields named (Subscript[name, i]) interpreted as types (Subscript[type, i]).}, {, (RefLink[FormPage, paclet:ref/FormPage])[{{"(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[FormPage, paclet:ref/FormPage])[{(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[FormPage, paclet:ref/FormPage])[formspec,func,form]
lays out the page according to the layout specification form.}, {, (RefLink[FormPage, paclet:ref/FormPage])[formspec,func,initform->resform]
uses initform as the initial layout specification and resform as the layout specification for result pages.}})

OpenersNotesSection(Spacer1)Details and Options

(RefLink[CloudDeploy, paclet:ref/CloudDeploy])[FormPage[…]] yields a cloud object containing an active form page.

(RefLink[FormPage, paclet:ref/FormPage])[formspec,func][<|"(Subscript[name, k])"->(Subscript[input, k]),…|>] inserts the inputs given into the initial form specified by the (RefLink[FormPage, paclet:ref/FormPage]) object.

(RefLink[Setting, paclet:ref/Setting])[FormPage[formspec,func]] evaluates to func applied to the current values of the form.

Possible layout specifications include:

Possible layout elements include:

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

OpenersPrimaryExamplesSection(Spacer1)Examples  (47)

OpenersExampleSection0(Spacer1)Basic Examples  (1)

Use (RefLink[FormPage, paclet:ref/FormPage]) to continuously interact with a webpage:

CloudDeploy[FormPage["country" -> "Country", GeoGraphics[#country]&]]

OpenersExampleSection1(Spacer1)Scope  (27)

OpenersExampleSubsection0(Spacer1)Interpreter Specifications  (6)

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

CloudDeploy[FormPage[{"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[FormPage[{"x" -> Interpreter["StructuredDate", TimeZone->2], "y" -> Interpreter[ToExpression, Positive]}, func]]

A list can be used to create a menu:

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

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

An entity list can be used as a menu:

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

Choices can be any expression:

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

A list of rules allows for label specification:

CloudDeploy[FormPage[{"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:

Setting @ FormPage[{"first"->"String","second"->"Number"->3}, f]["first"->"str"]

Fields can be optional without having a default:

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

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

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

OpenersExampleSubsection2(Spacer1)Input  (2)

Create a form with input inside:

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

Input can be delayed:

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

OpenersExampleSubsection3(Spacer1)Label  (1)

Change the label for a field:

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

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

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

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

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

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

CloudDeploy[FormPage[{
"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[FormPage[{"key", "Label"} -> "Integer", g]]

Labels can be any expression:

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

Change the appearance of single fields:

CloudDeploy[FormPage[{"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[FormPage[{"x" -><|"Label" -> "Where are you?", "Help" :> GeoGraphics[$GeoLocation]|>}, func]]

Use non-rule elements to change the default appearance:

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

OpenersExampleSubsection5(Spacer1)Controls  (7)

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

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

Or file pickers for file formats:

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

Checkboxes for "Boolean":

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

Change the default controller:

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

Multiple choices support various types of controllers:

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

Labels for radio buttons can be anything you want:

CloudDeploy[FormPage[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[FormPage[{"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[FormPage["where" -> "City", func]["where" -> "springfield"]]

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

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

Sometimes several parts of the expression are ambiguous:

CloudDeploy[FormPage["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:

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

OpenersExampleSection2(Spacer1)Options  (6)

OpenersExampleSubsection8(Spacer1)AppearanceRules  (1)

Write a custom title and description:

CloudDeploy[FormPage["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[FormPage["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[FormPage[{"First" -> "String", "Second" -> "String"}, func, AppearanceRules-><|"ItemLayout" -> "Vertical"|>]]

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

Change the submit label:

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

OpenersExampleSubsection9(Spacer1)FormLayoutFunction  (1)

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

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

OpenersExampleSubsection10(Spacer1)PageTheme  (4)

Deploy a form with a white theme:

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

Deploy a form with a blue theme:

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

Deploy a form with a black theme:

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

Deploy a form with a red theme:

CloudDeploy[FormPage[{"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 @ FormPage[{
"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}]
]
&,
AppearanceRules -> <|
"Title" -> "Demographic data",
"Description" -> "Enter any city and a date range."
|>
]

OpenersExampleSection4(Spacer1)Properties & Relations  (9)

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

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

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

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

And vice versa:

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

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

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

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

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

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

f1 = FormPage["x" -> "Country", #x&]

This is effectively the same as:

f2 = FormPage["x" -> Interpreter["Country"], #x&]

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

CloudDeploy[FormPage[
{"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[FormPage["field" -> RepeatingElement["String", {2,{1, 5}}]]]

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

CloudDeploy[FormPage["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[FormPage, paclet:ref/FormPage]), where the empty string and an empty field are considered equivalent:

Interpreter["String"][""]

FormPage[{"a string"->"String"},f][{"a string" -> ""}]

OpenersExampleSection6(Spacer1)Neat Examples  (1)

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

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

({{DocumentationFooterIconsRelatedFunction.png, ({{See Also}, {(RefLink[FormFunction, paclet:ref/FormFunction])  ▪  (RefLink[FormObject, paclet:ref/FormObject])  ▪  (RefLink[AskFunction, paclet:ref/AskFunction])  ▪  (RefLink[CloudDeploy, paclet:ref/CloudDeploy])  ▪  (RefLink[Interpreter, paclet:ref/Interpreter])  ▪  (RefLink[GalleryView, paclet:ref/GalleryView])}})}})

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

({{(Spacer1), ({{(Spacer1)Related Links}, {(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])}})}})