# 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](https://lovelyrender.com/documentation/add-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](https://lovelyrender.com/documentation/create-form/).

**Note:** A form cannot be placed inside another form. A message then appears in the page: take the form out of the parent form.

## The blocks that make up a form

| Block | Role |
| --- | --- |
| **Form** | Gathers the fields, the steps and the submit button. It only accepts steps, a progress indicator and a resume prompt. |
| **Form step** | A step. Its number comes from its place in the form. A form becomes multi-step as soon as it contains several. |
| **Form fields group** | The fields of a step, laid out as a block, in a row or in a grid like a [Container](https://lovelyrender.com/documentation/container-block/). It accepts text, a heading or an image. |
| **Form field** | A field, with its label, its input area and its description. It takes the name of its type, **Text field** or **Email field** for example. |
| **Information notice** | Tells the visitor what their data is used for. Its wording is archived with the form. |
| **Form submit** | The submit button. Its label is written in the page. Without text, it shows **Send**. |
| **Step navigation** | The **Previous step** and **Next step / Submit** buttons of a step. |
| **Form progress** | Shows the visitor where they are in the steps. |
| **Resume prompt** | Styles the prompt shown to a visitor who left a form in progress. Optional. |

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.

| Setting | Effect | Default value |
| --- | --- | --- |
| **Form name** | The name that designates the form in the admin. Required. Renaming it does not change the form’s identifier. | The name entered at creation |
| **Analytics tracking** | Counts the form’s submissions in your analytics. | On |
| **Success message** | The message displayed after a successful submission, as plain text: HTML displays as is. When empty, the default message displays. | Empty |
| **Step mode** | **Client-side**: all the steps are loaded at once and sent in a single submission at the end. **Save per step**: each step is sent separately and the visitor can resume the form later. Shown on every form, which always has at least one step. | **Client-side** |
| **Resume session duration (days)** | The number of days during which a visitor can resume a form left in progress, from 0 to 360. At 0, resuming is disabled, with no cookie or prompt. In **Save per step** mode. | 7 |
| **Conversion step** | The step at which a submission counts as a conversion. **Last step** follows the last step, even if you add more. A specific step stays fixed: the following steps only enrich the contact. In **Save per step** mode, even with a single step. | **Last step** |

![The Form settings panel of the “Quote request” form: Form name, Analytics tracking on, the empty Success message field and Step mode on Browser side.](https://static.lovelyrender.com/uploads/2026/10/913-doc-blocs2-formulaire.png)

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](https://lovelyrender.com/documentation/get-notified-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.

| Type | Purpose |
| --- | --- |
| **Text** | A line of free text. |
| **Email** | An email address, checked by the browser. |
| **Phone** | A phone number. |
| **Textarea** | A multi-line text. |
| **Number** | A number, with a minimum, a maximum and a step. |
| **Range** | A slider between two values. |
| **Date and time** | A date and a time. |
| **Date range** | A start date and an end date. |
| **File** | A file sent from the visitor’s device. |
| **File drop** | An area where the visitor drops their files. |
| **Hidden** | A fixed value sent with the request, invisible to the visitor. |
| **Radio button** | A single choice among several options. |
| **Checkbox** | Several choices among several options. |
| **Switch** | A yes or no choice. |
| **Select** | A dropdown list, with one or several choices. |
| **Consent** | One checkbox per purpose, a newsletter for example. Never required. |
| **Acceptance** | A checkbox to accept a legal document, the rules of a contest for example. Can be required. |

![The settings of a Text field: the two rows of field type icons, then the Field settings panel with Placeholder, Required field and Show label on, Show description and Cursor on load off.](https://static.lovelyrender.com/uploads/2026/10/206-blocs-champ.png)

[Create a form](https://lovelyrender.com/documentation/create-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.

| Setting | Effect | Default value |
| --- | --- | --- |
| **Placeholder** | The grayed text shown in the empty input area. For the Text, Email, Phone, Number and Text area types. | Empty |
| **Required field** | Prevents submission while the field is empty. Absent for a consent. | Off |
| **Style** | **Modern**: an enhanced list. **Classic**: the browser’s dropdown. For a choice list. | **Modern** |
| **Enable search** | Adds a search field above the list. For a choice list. | Off |
| **Multiple selection** | Lets the visitor choose more than one option. For a choice list. | Off |
| **Show label** | Shows the label above the input. | On, except for a hidden field |
| **Show description** | Shows a help text under the input. | Off |
| **Focus on load** | Places the cursor in this field as soon as it appears, when the form opens in a modal for example. | Off |

### Constraints

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

| Setting | Effect | Types |
| --- | --- | --- |
| **Autocomplete** | Tells the browser the expected data, **Full name** or **Postal code** for example, so that it offers to fill it in. | Text, Email, Phone, Text area, Number |
| **Min** and **Max** | The smallest and largest values accepted. | Number, Range, Date and time, Date range |
| **Step** | The gap between two values. When empty, only whole numbers are accepted. `0.01` accepts two decimals. | Number, Range |
| **Min length** and **Max length** | The number of characters expected. | Text, Email, Phone, Text area |
| **Rows** | The height of the input area, in lines. | Text area |
| **Pattern (regex)** | A regular expression that the input must match, checked by the browser. | Text, Email, Phone, Text area |
| **Accepted types** | One checkbox per family of files. Checking nothing accepts all the types a form can receive. | File, File drop |
| **Max file size (MB)** | The size of each file, 10 MB by default. The setting’s help gives the total size a submission can send. | File, File drop |
| **Static value** | The value sent with the request. | Hidden |

### 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**.

**Tip:** A “Please specify” field can appear only if the visitor chooses “Other”. Put on this field the condition **Show this field** when the list **equals** “Other”.

## The steps of a form

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

| Block | Setting | Effect | Default value |
| --- | --- | --- | --- |
| Form step | **Step label** | The name of the step in the progress indicator. Optional. | Empty |
| Form progress | **Show step labels** | Shows each step’s label under its indicator. | Off |
| Next step / Send | **Role** | **Auto**: next on intermediate steps, send on the last. **Next only**: always goes to the next step. **Send**: always sends the form. | **Auto** |

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](https://lovelyrender.com/documentation/color-block/) and [Format a text](https://lovelyrender.com/documentation/format-text/).

Each piece of the form has its **Animations** tab, except a switch’s knob ([Animate a block](https://lovelyrender.com/documentation/animate-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](https://lovelyrender.com/documentation/create-form/)
- [Get notified of each request](https://lovelyrender.com/documentation/get-notified-every-request/)
- [Read requests and where they come from](https://lovelyrender.com/documentation/read-requests/)
- [Open a modal or a side panel](https://lovelyrender.com/documentation/open-modal-side-panel/)