Create a form

This article explains how to place a form, choose its fields, make them required and set the message seen after sending. You will learn to split a long form into steps and protect it from spam.

Before you start

• A form is built with blocks in the editor, on a page, a content item or a template. Its validation, its spam protection, its notifications and the saving of its submissions are part of your site.
• Your visitors send their submissions in Production. The ones you send from Staging are kept apart. You can try your form without skewing your numbers.
• A form cannot be placed inside another form.

Add the Form block

1. In the editor, add the Form block where you want it. Add a block explains how.
2. In the Give a name to this form field, enter its name, for example Quote request. The name has at least four characters.
3. Click Create form. The form appears with one step, a group of fields and a first field of type Text.

The name is used to find the form in the Forms menu. To correct it at any time, edit the Form name field in the Form settings panel. The renamed form keeps its submissions, its notifications and its sending address.

Add fields

1. Select the field after which the new field should come.
2. Open the inserter.
3. Type field in its search. Each type has its own entry, for example Email field or Date and time field.
4. Click the type you want. The field is added after the selected field and in the same group.
5. In the page, click the field’s label and write it, for example Your email.

To change the type of a field, select it. At the top of the Settings tab, click another type in the rows of icons. The field keeps its label, its place and its common settings. Its look follows the chosen type: a Text field changed to a Switch becomes a track.

A field group stacks its fields one under the other. To place two side by side, set the layout of the Form fields group block like that of a container.

Add the submit button

A new form has no button. Without it, the visitor cannot send their request.

1. Select the last field of the form.
2. In the inserter, choose Form submit. The button is placed after the field.
3. In the page, click the button and write its text, for example Request my quote.

On a multi-step form, the button of the last step is the one in the Step navigation block. The section Split a form into steps details it.

Choose the type of a field

Set a field

Select the field. Its settings are in the Settings tab, Field settings panel.

The Constraints panel depends on the field type. Depending on the type, it holds these settings.

• Autocomplete
• Min, Max and Step
• Min length and Max length
• Rows
• Pattern (regex)
• Accepted types and Max file size (MB)
• Static value, for the hidden field

The site checks each constraint when it receives the submission, even if the browser was bypassed.

Offer options

A Radio button, Checkbox or Consent field is created with a first option. Write its text in the page, then add the next ones with Add option. Add group arranges the options under an optional heading.

Options can also come from your content. A classic Select has the Source setting in its Options panel. The other choice fields have it in the Group settings panel of each Options group. Choose Manual to write the options yourself, or Content type to take the published content of the checked types. Your categories are listed there: their terms become the options, for example your cities or your brands.

Accept files

On a File or File drop field, check under Accepted types the families of files you expect. The six families are images, documents, spreadsheets, audio, video and ZIP archives. Checking none accepts them all.

The Max file size (MB) slider sets the size of each file. It is 10 MB by default. A submission weighs at most 64 MB, all files included. The site reads the real type of each file from its content and refuses a program renamed as a document.

Show a field depending on an answer

A field can appear only for certain answers, for example Company name when the visitor checked I am a business.

1. Select the field to show or hide.
2. In the Settings tab, open the Conditional display panel.
3. Click Add condition.
4. In Action, choose Show this field or Hide this field.
5. In When field, choose the field that decides.
6. In Operator, choose equals, does not equal, is not empty or is empty.
7. Enter the Value.

With no condition, the field is always visible. With several conditions, the field appears as soon as one is met. A hidden field is neither required nor saved.

Say what the data is used for

As soon as a form asks for an email address or a phone number, the visitor must know what you do with it. The Information notice block carries this sentence.

1. Select a field of the form.
2. Add the Information notice block.
3. Write what the data is used for and how long it is kept. For example, “Your contact details are used to prepare your quote and are kept for 13 months.”
4. Select the words that name your privacy policy.
5. Link these words to your policy document, as to a page.

The text of the notice is kept with each submission. If you reword it, the submissions already received keep the sentence their visitor had before their eyes. When the policy is a legal document, each submission keeps the edition in force at the time of sending.

A form that asks for an email or a phone number with no notice shows a warning in its settings. With several notices, only the last one is kept.

Set the confirmation message

1. Select the Form block, for example in the list view.
2. In the Settings tab, Form settings panel, write the Success message, for example Thank you, we will reply within 48 hours.

Split a form into steps

A long form reads better in several steps. The visitor moves forward, goes back and can return to correct a step already passed.

1. Select the form.
2. Click its “+” and choose Form step. The added step contains a field group.
3. In each step, add the Step navigation block. It carries the buttons Previous step and Next step / Submit. The second one sends the form at the last step.
4. To show progress, add the Form progress block once. It shows one numbered dot per step.
5. In Form settings, choose the Step mode.

With Save per step, two settings are added, even on a single-step form.

A returning visitor sees You have an unfinished form. Would you like to continue? with the buttons Resume and Start over. When the step to resume is not the first, its number follows the message, for example (step 2). The Resume prompt block, added with this mode, carries this text. You can edit it.

Notifications are sent only once, when the submission reaches the conversion step. Get notified of every request details the notifications.

Protect the form from spam

You have nothing to set and your visitors solve no CAPTCHA. The site screens out robots in the background. It judges how the form is filled in and the reputation of the address that sends it.

A submission sent from a doubtful Internet address carries the Suspect badge in the submissions list. It passed these checks and it is for you to judge whether you reply. Read requests and where they come from explains this badge.

See also

• Get notified of each request
• Read requests and where they come from
• Form
• Send your requests to your tool