Advanced Web Form Creation

Though FormFunction and FormObject provide a very terse interface for creating simple web forms, this tutorial will cover the methods and options necessary for the creation of more advanced web forms.
Appearance Rules
FormFunction and FormObject take the option AppearanceRules, which can be used to specify various parts of the form, such as the title and the way the elements are displayed in each field.

Title and Description

You can use AppearanceRules with "Title" and "Description" to add a title and a subtitle to your form.

SubmitLabel and NextLabel

You can use "SubmitLabel" to change the text displayed in the button at the bottom of the form.
Similarly, "NextLabel" can be used to customize the text in all the fields except for the last in a multipage form.

Non-textual Values

Most of the fields in AppearanceRules do not need to be strings.


"RequiredFieldIndicator" applies a function to the labels of the required fields.


"ItemLayout" can be used to decide the way the elements are displayed in a grid. Empty rows and columns are automatically elided. Item layouts are responsive, meaning that layouts adapt to the width of your browser window. Specifically, item layouts may look different in mobile web browsers.
The default "Horizontal" corresponds to a 2×2 grid.
"Inline" corresponds to all the elements laid out on the same row.
"Vertical" corresponds to all the elements laid out on the same column.
Multipage Forms
Forms can span multiple pages; an additional list in the first argument specifies a multipage form.
All pages except the first can be specified as pure functions; doing so will let you have new pages that depend on the old ones.
You can use this technique to create new fields programmatically.
Note that fields in different pages can have the same key. If this happens, the newest value will overwrite the old.
Dynamic Forms
Sometimes it is useful to define a form where one field depends on another and where both appear on the same page. This can be done by using the Wolfram Language templating language, with symbols such as TemplateSlot.
Fields that depend on other fields are automatically hidden until there is enough information to display them, while fields that have other fields depending on them automatically submit when filled in.
You can force a field to automatically submit the whole form when it is filled in by wrapping it with AutoSubmitting.
Note that when selecting the second field after typing in the first, the whole form is submitted, resulting in a failure message below the second field.
RepeatingElement and CompoundElement
Sometimes it is useful to have a variable number of fields in a form. Use RepeatingElement to repeat a field.
Using the second argument of RepeatingElement, you can make a subfield depend on its index.
CompoundElement can be used with RepeatingElement to create a table of fields.
The AppearanceRules options "AddLabel" and "DeleteLabel" can be used to customize the labels of the buttons in a RepeatingElement.