# Formulaire

Le bloc **Formulaire** et ses blocs construisent un formulaire de contact, de devis ou d’inscription dans l’éditeur. Cette page décrit chaque bloc, les réglages du formulaire, ceux d’un champ et les formulaires en plusieurs étapes.

## Ajouter le bloc

Insérez le bloc **Formulaire** ([Ajouter un bloc](https://lovelyrender.com/fr/documentation/ajouter-un-bloc/)), ou tapez `contact` ou `devis` dans la recherche des blocs. Saisissez d’abord un nom sous **Donnez un nom à ce formulaire**, puis cliquez sur **Créer le formulaire**. Le formulaire arrive avec une étape, un groupe de champs et un premier champ texte.

Cette page décrit chaque bloc et chaque réglage. Pour construire un formulaire de bout en bout et recevoir ses demandes, suivez [Créer un formulaire](https://lovelyrender.com/fr/documentation/formulaires/).

**Remarque :** Un formulaire ne peut pas être placé dans un autre formulaire. Un message s’affiche alors dans la page : sortez le formulaire du formulaire parent.

## Les blocs qui composent un formulaire

| Bloc | Rôle |
| --- | --- |
| **Formulaire** | Rassemble les champs, les étapes et le bouton d’envoi. Il n’accepte que des étapes, une progression et une invitation à reprendre. |
| **Étape de formulaire** | Une étape. Son numéro vient de sa place dans le formulaire. Un formulaire devient multi-étapes dès qu’il en contient plusieurs. |
| **Groupe de champs** | Les champs d’une étape, disposés en bloc, en rangée ou en grille comme un [Conteneur](https://lovelyrender.com/fr/documentation/bloc-conteneur/). Il accepte du texte, un titre ou une image. |
| **Champ de formulaire** | Un champ, avec son libellé, sa zone de saisie et sa description. Il prend le nom de son type, **Champ Texte** ou **Champ E-mail** par exemple. |
| **Mention d’information** | Dit au visiteur à quoi servent ses données. Sa formulation est archivée avec le formulaire. |
| **Envoi du formulaire** | Le bouton d’envoi. Son libellé s’écrit dans la page. Sans texte, il affiche **Envoyer**. |
| **Navigation entre étapes** | Les boutons **Étape précédente** et **Étape suivante / Envoyer** d’une étape. |
| **Progression du formulaire** | Montre au visiteur où il en est dans les étapes. |
| **Invitation à reprendre** | Habille l’invitation montrée à un visiteur qui a laissé un formulaire en cours. Facultatif. |

Pour enchaîner les champs, sélectionnez un champ puis choisissez **Ajouter avant** ou **Ajouter après** dans le menu **⋮**, ou tapez `Ctrl+Alt+T` ou `Ctrl+Alt+Y`. Un champ texte apparaît juste à côté. Sur une étape, les mêmes raccourcis ajoutent une étape.

## Régler le formulaire

Sélectionnez le bloc **Formulaire**, onglet **Réglages**, panneau **Réglages du formulaire**.

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Nom du formulaire** | Le nom qui désigne le formulaire dans l’administration. Obligatoire. Le renommer ne change pas l’identifiant du formulaire. | Le nom saisi à la création |
| **Suivi statistique** | Compte les soumissions du formulaire dans vos statistiques. | Activé |
| **Message de succès** | Le message affiché après un envoi réussi, en texte simple : du HTML s’affiche tel quel. Vide, le message par défaut s’affiche. | Vide |
| **Mode des étapes** | **Côté navigateur** : toutes les étapes sont chargées d’un coup et partent en un seul envoi à la fin. **Enregistrer à chaque étape** : chaque étape est envoyée à part et le visiteur peut reprendre le formulaire plus tard. Affiché sur tout formulaire, qui a toujours au moins une étape. | **Côté navigateur** |
| **Durée de la session de reprise (jours)** | Le nombre de jours pendant lesquels un visiteur peut reprendre un formulaire laissé en cours, de 0 à 360. À 0, la reprise est désactivée, sans cookie ni invitation. En mode **Enregistrer à chaque étape**. | 7 |
| **Étape de conversion** | L’étape à laquelle une soumission compte comme une conversion. **Dernière étape** suit la dernière étape, même si vous en ajoutez. Une étape précise reste fixe : les étapes suivantes ne font qu’enrichir le contact. En mode **Enregistrer à chaque étape**, même avec une seule étape. | **Dernière étape** |

![Le panneau Réglages du formulaire « Demande de devis » : Nom du formulaire, Suivi statistique activé, le champ Message de succès vide et Mode des étapes sur Côté navigateur.](https://static.lovelyrender.com/uploads/2026/10/913-doc-blocs2-formulaire.png)

Quand la reprise est active, le visiteur qui revient lit « Vous avez un formulaire en cours. Voulez-vous le reprendre ? » avec les boutons **Reprendre** et **Recommencer**. Quand l’étape à reprendre n’est pas la première, son numéro suit le message, par exemple « (étape 2) ».

Le bloc **Invitation à reprendre** change ces textes. Le message s’écrit dans la page, les deux boutons dans son panneau **Libellés des boutons**. Tant qu’ils sont vides, l’éditeur montre les textes que lit le visiteur. Son onglet **Styles** règle l’apparence de l’invitation.

Avec le panneau **Notifications par e-mail**, le site envoie un e-mail à chaque demande. Cliquez sur **Ajouter une notification**, puis réglez ses **Destinataires**, le **Nom de l’expéditeur**, l’**Objet**, le **Champ de réponse**, le **Message** et ses **Conditions d’envoi**. [Être prévenu de chaque demande](https://lovelyrender.com/fr/documentation/notifications-de-formulaire/) détaille chaque réglage.

## Choisir le type d’un champ

Le type se choisit à l’insertion, où chaque type a son entrée dans la liste des blocs. Vous pouvez le changer en haut de l’onglet **Réglages** du champ. Cliquer sur un autre type transforme le champ sur place : il garde son libellé, sa place et vos styles.

| Type | Usage |
| --- | --- |
| **Texte** | Une ligne de texte libre. |
| **E-mail** | Une adresse e-mail, vérifiée par le navigateur. |
| **Téléphone** | Un numéro de téléphone. |
| **Zone de texte** | Un texte de plusieurs lignes. |
| **Nombre** | Un nombre, avec un minimum, un maximum et un pas. |
| **Plage** | Une glissière entre deux valeurs. |
| **Date et heure** | Une date et une heure. |
| **Plage de dates** | Une date de début et une date de fin. |
| **Fichier** | Un fichier envoyé depuis l’appareil du visiteur. |
| **Dépôt de fichier** | Une zone où le visiteur dépose ses fichiers. |
| **Masqué** | Une valeur fixe envoyée avec la demande, invisible du visiteur. |
| **Bouton radio** | Un seul choix parmi plusieurs options. |
| **Case à cocher** | Plusieurs choix parmi plusieurs options. |
| **Interrupteur** | Un choix oui ou non. |
| **Liste de choix** | Une liste déroulante, à un ou plusieurs choix. |
| **Consentement** | Une case par finalité, une lettre d’information par exemple. Jamais obligatoire. |
| **Acceptation** | Une case pour accepter un document légal, le règlement d’un jeu par exemple. Peut être obligatoire. |

![Les réglages d’un Champ Texte : les deux rangées d’icônes des types de champ, puis le panneau Réglages du champ avec Texte indicatif, Champ obligatoire et Afficher le libellé activés, Afficher la description et Curseur au chargement désactivés.](https://static.lovelyrender.com/uploads/2026/10/206-blocs-champ.png)

[Créer un formulaire](https://lovelyrender.com/fr/documentation/formulaires/) explique quand choisir **Consentement** ou **Acceptation**.

## Régler un champ

Sélectionnez un champ, onglet **Réglages**. Les panneaux et leurs réglages dépendent du type du champ.

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Texte indicatif** | Le texte grisé affiché dans la zone de saisie vide. Pour les types Texte, E-mail, Téléphone, Nombre et Zone de texte. | Vide |
| **Champ obligatoire** | Empêche l’envoi tant que le champ est vide. Absent pour un consentement. | Désactivé |
| **Style** | **Moderne** : une liste enrichie. **Classique** : la liste déroulante du navigateur. Pour une liste de choix. | **Moderne** |
| **Activer la recherche** | Ajoute un champ de recherche au-dessus de la liste. Pour une liste de choix. | Désactivé |
| **Choix multiple** | Permet de choisir plus d’une option. Pour une liste de choix. | Désactivé |
| **Afficher le libellé** | Affiche le libellé au-dessus de la saisie. | Activé, sauf pour un champ masqué |
| **Afficher la description** | Affiche un texte d’aide sous la saisie. | Désactivé |
| **Curseur au chargement** | Place le curseur dans ce champ dès qu’il apparaît, quand le formulaire s’ouvre dans une modale par exemple. | Désactivé |

### Les contraintes

Le panneau **Contraintes** limite ce que le visiteur peut saisir. Il s’affiche pour les types qui en ont.

| Réglage | Effet | Types |
| --- | --- | --- |
| **Remplissage automatique** | Indique au navigateur la donnée attendue, **Nom complet** ou **Code postal** par exemple, pour qu’il propose de la remplir. | Texte, E-mail, Téléphone, Zone de texte, Nombre |
| **Min** et **Max** | La plus petite et la plus grande valeur acceptées. | Nombre, Plage, Date et heure, Plage de dates |
| **Pas** | L’écart entre deux valeurs. Vide, seuls les nombres entiers sont acceptés. `0.01` accepte deux décimales. | Nombre, Plage |
| **Longueur minimale** et **Longueur maximale** | Le nombre de caractères attendus. | Texte, E-mail, Téléphone, Zone de texte |
| **Lignes** | La hauteur de la zone de saisie, en lignes. | Zone de texte |
| **Motif (regex)** | Une expression régulière que la saisie doit respecter, vérifiée par le navigateur. | Texte, E-mail, Téléphone, Zone de texte |
| **Types acceptés** | Une case par famille de fichiers. Ne rien cocher accepte tous les types qu’un formulaire peut recevoir. | Fichier, Dépôt de fichier |
| **Taille maximale du fichier (Mo)** | La taille de chaque fichier, 10 Mo par défaut. L’aide du réglage donne la taille totale qu’une soumission peut envoyer. | Fichier, Dépôt de fichier |
| **Valeur fixe** | La valeur envoyée avec la demande. | Masqué |

### Les options d’un champ à choix

Pour un bouton radio, une case à cocher et une liste de choix au style **Moderne**, les options s’écrivent dans la page, rangées en groupes. Le nom d’un groupe est facultatif : il sert d’en-tête. Sur une option ou un groupe, **Ajouter avant** et **Ajouter après** en ajoutent un autre au même endroit. Une option sélectionnée a le réglage **Sélectionnée par défaut**, qui la présélectionne au chargement.

Les options peuvent aussi venir de vos contenus, par le réglage **Source**. Pour une liste de choix au style **Classique**, il est dans le panneau **Options** du champ. Pour les autres champs à choix, il est dans le panneau **Réglages du groupe** de chaque **Groupe d’options**, sauf sur une **Acceptation**.

- **Manuelle** : vous écrivez les options. Sur une liste classique, avec **Ajouter un groupe** et **Ajouter une option**.
- **Type de contenu** : la liste reprend les contenus publiés d’un ou plusieurs types. Une catégorie se coche aussi : ses termes deviennent les options, vos villes ou vos marques par exemple.

Avec plusieurs types cochés, chaque liste prend le nom de son type et le nom de groupe saisi n’est pas repris.

### L’affichage conditionnel

Sans condition, un champ est toujours visible. Le panneau **Affichage conditionnel** l’affiche ou le masque selon la valeur d’un autre champ.

1. Cliquez sur **Ajouter une condition**.
2. Choisissez l’**Action**, **Afficher ce champ** ou **Masquer ce champ**.
3. Dans **Quand le champ**, choisissez le champ déclencheur.
4. Choisissez l’**Opérateur** parmi **est égal à**, **est différent de**, **n’est pas vide** et **est vide**.
5. Indiquez la **Valeur**.

**Conseil :** Un champ « Précisez » peut n’apparaître que si le visiteur choisit « Autre ». Posez sur ce champ la condition **Afficher ce champ** quand la liste **est égal à** « Autre ».

## Les étapes d’un formulaire

Le **+** du formulaire propose **Étape de formulaire**, **Progression du formulaire** et **Invitation à reprendre**.

| Bloc | Réglage | Effet | Valeur par défaut |
| --- | --- | --- | --- |
| Étape de formulaire | **Libellé de l’étape** | Le nom de l’étape dans l’indicateur de progression. Facultatif. | Vide |
| Progression du formulaire | **Afficher les libellés d’étape** | Affiche le libellé de chaque étape sous son indicateur. | Désactivé |
| Étape suivante / Envoyer | **Rôle** | **Auto** : suivant aux étapes intermédiaires, envoyer à la dernière. **Suivant seulement** : passe toujours à l’étape suivante. **Envoyer** : envoie toujours le formulaire. | **Auto** |

Le bouton **Étape précédente** n’apparaît pas à la première étape. Sans texte, les boutons affichent **Précédent** et **Suivant**.

## La mention d’information

Le bloc **Mention d’information** dit au visiteur à quoi servent ses données et combien de temps elles sont gardées. Il porte un lien vers votre politique de confidentialité. Sa formulation est archivée avec chaque version du formulaire.

- Un formulaire qui demande une adresse e-mail ou un numéro de téléphone sans mention d’information affiche un avertissement dans ses réglages.
- Un formulaire qui porte plusieurs mentions affiche un avertissement : seule la dernière est archivée.

## Habiller les champs

Le groupe de champs écarte ses champs de 16 px, par le style **Groupe de champs**. Chaque champ écarte de 8 px son libellé, sa saisie et sa description, par le style **Champ**. La zone de saisie porte le style **Contrôle du champ** : une bordure fine et des coins légèrement arrondis. Pendant la saisie, la bordure prend la couleur principale. Elle est dessinée dans l’éditeur comme sur la page.

L’onglet **Styles** d’un champ propose ses états : **Par défaut**, **Survol**, **Focus**, **Obligatoire**, **Désactivé**, **Valide** et **Invalide**. La case d’un bouton radio ou d’une case à cocher a en plus son état **Coché**. Le curseur d’un interrupteur se règle à part : sélectionnez-le dans la vue d’ensemble du document. Les couleurs et la typographie se règlent comme sur tout bloc : voir [Colorer un bloc](https://lovelyrender.com/fr/documentation/couleurs-d-un-bloc/) et [Mettre en forme un texte](https://lovelyrender.com/fr/documentation/typographie/).

Chaque pièce du formulaire a son onglet **Animations**, sauf le curseur d’un interrupteur ([Animer un bloc](https://lovelyrender.com/fr/documentation/animations/)).

## Sur téléphone

Le groupe de champs se dispose écran par écran, comme un conteneur. Deux champs côte à côte sur ordinateur, le prénom et le nom par exemple, peuvent s’empiler sur téléphone.

## Accessibilité

- Le libellé de chaque champ lui est relié : un lecteur d’écran le lit quand le champ prend le focus. Gardez **Afficher le libellé** activé, sauf raison précise.
- **Curseur au chargement** est utile dans une modale. Sur une page, il fait sauter le visiteur au milieu de la page : réservez-le aux formulaires qui s’ouvrent par-dessus la page.
- Le réglage **Remplissage automatique** permet au visiteur de remplir ses coordonnées sans les retaper.

## Voir aussi

- [Créer un formulaire](https://lovelyrender.com/fr/documentation/formulaires/)
- [Être prévenu de chaque demande](https://lovelyrender.com/fr/documentation/notifications-de-formulaire/)
- [Lire les demandes et leur provenance](https://lovelyrender.com/fr/documentation/demandes/)
- [Ouvrir une modale ou un panneau latéral](https://lovelyrender.com/fr/documentation/modales/)