Form

The Form block and its blocks build a contact, quote or sign-up form in the editor. This page describes each block, the form settings, those of a field and multi-step forms.

Add the block

Insert the Form block (Add a block), or type contact or quote in the block search. First enter a name under Give a name to this form, then click Create form. The form arrives with one step, a group of fields and a first text field.

This page describes each block and each setting. To build a form from start to finish and receive its requests, follow Create a form.

The blocks that make up a form

To chain fields, select a field then choose Add before or Add after in the ⋮ menu, or type Ctrl+Alt+T or Ctrl+Alt+Y. A text field appears right next to it. On a step, the same shortcuts add a step.

Set the form

Select the Form block, Settings tab, Form settings panel.

When resuming is active, the returning visitor reads “You have a form in progress. Do you want to resume it?” with the Resume and Start over buttons. When the step to resume is not the first, its number follows the message, for example “(step 2)”.

The Resume prompt block changes these texts. The message is written in the page, the two buttons in its Button labels panel. While they are empty, the editor shows the texts the visitor reads. Its Styles tab sets the look of the prompt.

With the Email notifications panel, the site sends an email for each request. Click Add notification, then set its Recipients, the Sender name, the Subject, the Reply-to field, the Message and its Send conditions. Get notified of every request details each setting.

Choose the type of a field

The type is chosen at insertion, where each type has its entry in the block list. You can change it at the top of the field’s Settings tab. Clicking another type transforms the field in place: it keeps its label, its place and your styles.

Create a form explains when to choose Consent or Acceptance.

Set a field

Select a field, Settings tab. The panels and their settings depend on the field type.

Constraints

The Constraints panel limits what the visitor can enter. It shows for the types that have any.

The options of a choice field

For a radio button, a checkbox and a choice list in the Modern style, the options are written in the page, arranged in groups. A group’s name is optional: it serves as a header. On an option or a group, Add before and Add after add another one in the same place. A selected option has the Selected by default setting, which preselects it on load.

Options can also come from your content, through the Source setting. For a choice list in the Classic style, it is in the field’s Options panel. For the other choice fields, it is in the Group settings panel of each Options group, except on an Acceptance.

• Manual: you write the options. On a classic list, with Add group and Add option.
• Content type: the list takes the published content items of one or several types. A category can also be checked: its terms become the options, your cities or your brands for example.

With several types checked, each list takes the name of its type and the group name entered is not used.

Conditional display

Without a condition, a field is always visible. The Conditional display panel shows or hides it depending on the value of another field.

1. Click Add condition.
2. Choose the Action, Show this field or Hide this field.
3. In When field, choose the trigger field.
4. Choose the Operator among equals, does not equal, is not empty and is empty.
5. Enter the Value.

The steps of a form

The form’s + offers Form step, Form progress and Resume prompt.

The Previous step button does not appear on the first step. Without text, the buttons show Previous and Next.

The information notice

The Information notice block tells the visitor what their data is used for and how long it is kept. It carries a link to your privacy policy. Its wording is archived with each version of the form.

• A form that asks for an email address or a phone number without an information notice shows a warning in its settings.
• A form that carries several notices shows a warning: only the last one is archived.

Style the fields

The field group spaces its fields 16 px apart, through the Form fields group style. Each field spaces its label, input and description 8 px apart, through the Field style. The input area carries the Field control style: a thin border and slightly rounded corners. While typing, the border takes the main color. It is drawn in the editor as on the page.

A field’s Styles tab offers its states: Default, Hover, Focus, Required, Disabled, Valid and Invalid. The box of a radio button or a checkbox also has its Checked state. A switch’s knob is set separately: select it in the document overview. Colors and typography are set as on any block: see Color a block and Format a text.

Each piece of the form has its Animations tab, except a switch’s knob (Animate a block).

On a phone

The field group is laid out screen by screen, like a container. Two fields side by side on a computer, first name and last name for example, can stack on a phone.

Accessibility

• Each field’s label is tied to it: a screen reader reads it when the field takes focus. Keep Show label on, unless you have a specific reason.
• Focus on load is useful in a modal. On a page, it makes the visitor jump to the middle of the page: reserve it for forms that open over the page.
• The Autocomplete setting lets the visitor fill in their details without retyping them.

See also

• Create a form
• Get notified of each request
• Read requests and where they come from
• Open a modal or a side panel