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.
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.
In[10]:=10

✖
https://wolfram.com/xid/0qciosvrm2e9op6q8-8bxqkz
Out[10]=10

SubmitLabel and NextLabel
In[11]:=11

✖
https://wolfram.com/xid/0qciosvrm2e9op6q8-idyw6h
Out[11]=11

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.
In[12]:=12

✖
https://wolfram.com/xid/0qciosvrm2e9op6q8-7zbqs2
Out[12]=12

RequiredFieldIndicator
In[13]:=13

✖
https://wolfram.com/xid/0qciosvrm2e9op6q8-mf6bpm
Out[13]=13

ItemLayout
"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.

In[14]:=14

✖
https://wolfram.com/xid/0qciosvrm2e9op6q8-ql8dok
Out[14]=14

In[16]:=16

✖
https://wolfram.com/xid/0qciosvrm2e9op6q8-2y0657
Out[16]=16

In[17]:=17

✖
https://wolfram.com/xid/0qciosvrm2e9op6q8-zp0jum
Out[17]=17

In[18]:=18

✖
https://wolfram.com/xid/0qciosvrm2e9op6q8-50gm68
Out[18]=18

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.
In[19]:=19

✖
https://wolfram.com/xid/0qciosvrm2e9op6q8-rxy1ll
Out[19]=19

In[20]:=20

✖
https://wolfram.com/xid/0qciosvrm2e9op6q8-ife1ia
Out[20]=20

Note that fields in different pages can have the same key. If this happens, the newest value will overwrite the old.
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.
In[21]:=21

✖
https://wolfram.com/xid/0qciosvrm2e9op6q8-ieehlp
Out[21]=21

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.
In[22]:=22

✖
https://wolfram.com/xid/0qciosvrm2e9op6q8-5lvuuq
Out[22]=22

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.
Sometimes it is useful to have a variable number of fields in a form. Use RepeatingElement to repeat a field.
In[23]:=23

✖
https://wolfram.com/xid/0qciosvrm2e9op6q8-cael9i
Out[23]=23

Using the second argument of RepeatingElement, you can make a subfield depend on its index.
In[24]:=24

✖
https://wolfram.com/xid/0qciosvrm2e9op6q8-gmprvt
Out[24]=24

In[25]:=25

✖
https://wolfram.com/xid/0qciosvrm2e9op6q8-k52ks
Out[25]=25

The AppearanceRules options "AddLabel" and "DeleteLabel" can be used to customize the labels of the buttons in a RepeatingElement.
In[26]:=26

✖
https://wolfram.com/xid/0qciosvrm2e9op6q8-4723sk
Out[26]=26
