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

**Tip:** The creations catalog offers ready-to-use forms, such as a contact page or a newsletter sign-up. [Start from a ready-made creation](https://lovelyrender.com/documentation/start-from-creation/) explains how to place one.

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

![The Quote request form in the editor, the Your project field selected: on the right, the rows of field type icons, Radio button chosen, then the field Settings with Required field and Show the label turned on.](https://static.lovelyrender.com/uploads/2026/10/213-formulaires-editeur.png)

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

| Type | Purpose |
| --- | --- |
| **Text** | A short answer, such as a name or a city. |
| **Textarea** | A message over several lines. |
| **Email** | An email address. The site checks its format and that its domain exists. |
| **Phone** | A phone number. |
| **Number** | A quantity or a budget. |
| **Range** | A value chosen on a slider. |
| **Date and time** | An appointment or a time slot. |
| **Date range** | A start date and an end date in a single field, such as a stay. |
| **File** | One or more files chosen with a button. |
| **File drop** | One or more files dropped in an area. |
| **Hidden** | A fixed value sent with the submission, which the visitor does not see. |
| **Radio button** | A single choice among displayed options. |
| **Checkbox** | One or more choices among displayed options. |
| **Switch** | Yes or no. |
| **Select** | One or more choices in a dropdown list. |
| **Consent** | One box per use beyond the request, such as signing up for a newsletter. Never required nor checked by default. |
| **Acceptance** | A box to accept a legal document, such as the rules of a contest. It can be required. |

## Set a field

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

| Setting | Effect | Default value |
| --- | --- | --- |
| **Placeholder** | The grayed text shown in the empty field. Input types only. | Empty |
| **Required field** | The submission is not sent while the field is empty. | Off |
| **Show label** | Shows the label above the field. Turned off, the written label is still read by screen readers. | On |
| **Show description** | Shows the description under the field. It is read after the label. | Off |
| **Focus on load** | Places the cursor in the field as soon as it appears, for example in a modal. | Off |
| **Style** | Dropdown only. With **Modern**, the list takes the site’s colors. With **Classic**, it keeps the browser’s. | Modern |
| **Enable search** | Modern dropdown only. The visitor filters the options by typing. | Off |
| **Multiple selection** | Dropdown only. The visitor chooses several options. | Off |

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.

**Note:** On a **Number** field, an empty **Step** accepts only whole numbers. For an amount with cents, enter `0.01`.

**Warning:** Always write a field’s label. A field with no label has no name for a screen reader. To hide it on screen, keep the text and turn off **Show label**.

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

**Warning:** The value sent comes from the option’s text. Renaming an option changes what the tools connected to the form receive. Renaming the form or a field’s label changes nothing.

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

**Tip:** A contact form does not need an “I accept” box. Reserve the **Consent** field for a use beyond the request, such as a newsletter. Plan one box per use.

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

![The Form settings panel: the name Quote request, Statistics tracking turned on, the Success message “Thank you, we will reply within 48 hours.” and the Steps mode set to Browser side.](https://static.lovelyrender.com/uploads/2026/10/952-doc-demandes-reglages.png)

| Setting | Effect | Default value |
| --- | --- | --- |
| **Form name** | The name of the form in the **Forms** menu, the export and the notifications. | The name given at creation |
| **Analytics tracking** | Counts the form’s submissions in your analytics. | On |
| **Success message** | The text shown to the visitor after sending. Left empty, the site shows **Your message has been sent.** | Empty |
| **Step mode** | The way steps are sent. Present on every form, which always has at least one step. The section Split a form into steps details it. | **Client-side** |

**Note:** The success message is plain text. An HTML tag, such as a link, is displayed as you typed it.

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

**Warning:** Without the **Step navigation** block, the visitor cannot move to the next step. The **Form progress** block does not appear on its own either.

| Mode | Effect |
| --- | --- |
| **Client-side** | All the steps are sent in a single submission at the end. The default mode. |
| **Save per step** | Each step is sent and saved when the visitor moves forward. A returning visitor finds their form where they left it. |

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

| Setting | Effect | Default value |
| --- | --- | --- |
| **Resume session duration (days)** | The number of days, from 0 to 360, during which the visitor can resume their form. At 0, nothing is kept and no invitation is shown. | 7 |
| **Conversion step** | The step where the submission counts as a request received. **Last step** follows the last step even if you add more. A chosen step stays fixed. The following steps complete the request. | **Last step** |

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](https://lovelyrender.com/documentation/get-notified-every-request/) details the notifications.

**Tip:** If the last steps are optional, place the conversion step before them. A visitor who stops after the essentials then counts as a request received.

## 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](https://lovelyrender.com/documentation/read-requests/) explains this badge.

## See also

- [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/)
- [Form](https://lovelyrender.com/documentation/form-block/)
- [Send your requests to your tool](https://lovelyrender.com/documentation/send-requests-to-tool/)