# Créer un formulaire

Cet article explique comment poser un formulaire, choisir ses champs, les rendre obligatoires et régler le message vu après l’envoi. Vous saurez découper un long formulaire en étapes et le protéger du spam.

## Avant de commencer

- Un formulaire se construit avec des blocs dans l’éditeur, sur une page, une entrée ou un gabarit. Sa validation, sa protection contre le spam, ses notifications et l’enregistrement de ses soumissions font partie de votre site.
- Vos visiteurs envoient leurs soumissions en Production. Celles que vous envoyez depuis le Staging restent à part. Vous pouvez essayer votre formulaire sans fausser vos chiffres.
- Un formulaire ne se place pas à l’intérieur d’un autre formulaire.

## Ajouter le bloc Formulaire

1. Dans l’éditeur, ajoutez le bloc **Formulaire** à l’endroit voulu. [Ajouter un bloc](https://lovelyrender.com/fr/documentation/ajouter-un-bloc/) explique comment.
2. Dans le champ **Donnez un nom à ce formulaire**, saisissez son nom, par exemple `Demande de devis`. Le nom compte au moins quatre caractères.
3. Cliquez sur **Créer le formulaire**. Le formulaire apparaît avec une étape, un groupe de champs et un premier champ de type **Texte**.

Le nom sert à retrouver le formulaire dans le menu **Formulaires**. Pour le corriger à tout moment, modifiez le champ **Nom du formulaire** du panneau **Réglages du formulaire**. Le formulaire renommé garde ses soumissions, ses notifications et son adresse d’envoi.

**Conseil :** Le catalogue des créations propose des formulaires prêts à l’emploi, comme une page de contact ou une inscription à une lettre d’information. [Partir d’une création toute faite](https://lovelyrender.com/fr/documentation/creations/) explique comment en poser un.

## Ajouter des champs

1. Sélectionnez le champ après lequel le champ à ajouter doit venir.
2. Ouvrez l’outil d’insertion.
3. Tapez `champ` dans sa recherche. Chaque type a son entrée, par exemple **Champ E-mail** ou **Champ Date et heure**.
4. Cliquez sur le type voulu. Le champ s’ajoute après le champ sélectionné et dans le même groupe.
5. Dans la page, cliquez sur le libellé du champ et écrivez-le, par exemple `Votre e-mail`.

Pour changer le type d’un champ, sélectionnez-le. En haut de l’onglet **Réglages**, cliquez sur un autre type dans les rangées d’icônes. Le champ garde son libellé, sa place et ses réglages communs. Son allure suit le type choisi : un champ **Texte** passé en **Interrupteur** devient une piste.

![Le formulaire Demande de devis dans l’éditeur, le champ Votre projet sélectionné : à droite, les rangées d’icônes des types de champ, Bouton radio choisi, puis les Réglages du champ avec Champ obligatoire et Afficher le libellé activés.](https://static.lovelyrender.com/uploads/2026/10/213-formulaires-editeur.png)

Un groupe de champs range ses champs l’un sous l’autre. Pour en placer deux côte à côte, réglez la disposition du bloc **Groupe de champs** comme celle d’un conteneur.

## Ajouter le bouton d’envoi

Un formulaire neuf n’a pas de bouton. Sans lui, le visiteur ne peut pas envoyer sa demande.

1. Sélectionnez le dernier champ du formulaire.
2. Dans l’outil d’insertion, choisissez **Envoi du formulaire**. Le bouton se place après le champ.
3. Dans la page, cliquez sur le bouton et écrivez son texte, par exemple `Demander mon devis`.

Sur un formulaire en plusieurs étapes, le bouton de la dernière étape est celui du bloc **Navigation entre étapes**. La section Découper un formulaire en étapes le détaille.

## Choisir le type d’un champ

| Type | Usage |
| --- | --- |
| **Texte** | Une réponse courte, comme un nom ou une ville. |
| **Zone de texte** | Un message sur plusieurs lignes. |
| **E-mail** | Une adresse e-mail. Le site vérifie son format et l’existence de son domaine. |
| **Téléphone** | Un numéro de téléphone. |
| **Nombre** | Une quantité ou un budget. |
| **Plage** | Une valeur choisie sur un curseur. |
| **Date et heure** | Un rendez-vous ou un créneau. |
| **Plage de dates** | Une date de début et une date de fin dans un seul champ, comme un séjour. |
| **Fichier** | Un ou plusieurs fichiers choisis par un bouton. |
| **Dépôt de fichier** | Un ou plusieurs fichiers déposés dans une zone. |
| **Masqué** | Une valeur fixe envoyée avec la soumission, que le visiteur ne voit pas. |
| **Bouton radio** | Un seul choix parmi des options affichées. |
| **Case à cocher** | Un ou plusieurs choix parmi des options affichées. |
| **Interrupteur** | Oui ou non. |
| **Liste de choix** | Un ou plusieurs choix dans une liste déroulante. |
| **Consentement** | Une case par usage en plus de la demande, comme l’inscription à une lettre d’information. Jamais obligatoire ni cochée d’avance. |
| **Acceptation** | Une case pour accepter un document légal, comme le règlement d’un jeu. Elle peut être obligatoire. |

## Régler un champ

Sélectionnez le champ. Ses réglages sont dans l’onglet **Réglages**, panneau **Réglages du champ**.

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Texte indicatif** | Le texte grisé affiché dans le champ vide. Types à saisie seulement. | Vide |
| **Champ obligatoire** | La soumission ne part pas tant que le champ est vide. | Désactivé |
| **Afficher le libellé** | Affiche le libellé au-dessus du champ. Désactivé, le libellé écrit reste lu par les lecteurs d’écran. | Activé |
| **Afficher la description** | Affiche la description sous le champ. Elle est lue après le libellé. | Désactivé |
| **Curseur au chargement** | Place le curseur dans le champ dès qu’il apparaît, par exemple dans une modale. | Désactivé |
| **Style** | Liste de choix seulement. Avec **Moderne**, la liste prend les couleurs du site. Avec **Classique**, elle garde celle du navigateur. | Moderne |
| **Activer la recherche** | Liste de choix moderne seulement. Le visiteur filtre les options en tapant. | Désactivé |
| **Choix multiple** | Liste de choix seulement. Le visiteur choisit plusieurs options. | Désactivé |

Le panneau **Contraintes** dépend du type de champ. Selon le type, il porte ces réglages.

- **Remplissage automatique**
- **Min**, **Max** et **Pas**
- **Longueur minimale** et **Longueur maximale**
- **Lignes**
- **Motif (regex)**
- **Types acceptés** et **Taille maximale du fichier (Mo)**
- **Valeur fixe**, pour le champ masqué

Le site vérifie chaque contrainte à la réception de la soumission, même si le navigateur a été contourné.

**Remarque :** Sur un champ **Nombre**, un **Pas** vide n’accepte que des nombres entiers. Pour un montant avec des centimes, saisissez `0.01`.

**Attention :** Écrivez toujours le libellé d’un champ. Un champ sans libellé n’a aucun nom pour un lecteur d’écran. Pour le cacher à l’écran, gardez le texte et désactivez **Afficher le libellé**.

### Proposer des options

Un champ **Bouton radio**, **Case à cocher** ou **Consentement** est créé avec une première option. Écrivez son texte dans la page, puis ajoutez les suivantes avec **Ajouter une option**. **Ajouter un groupe** range les options sous un titre facultatif.

Les options peuvent aussi venir de vos contenus. Une **Liste de choix** classique a le réglage **Source** dans son panneau **Options**. Les autres champs à choix l’ont dans le panneau **Réglages du groupe** de chaque **Groupe d’options**. Choisissez **Manuelle** pour écrire les options vous-même, ou **Type de contenu** pour reprendre les contenus publiés des types cochés. Vos catégories y figurent : leurs termes deviennent les options, par exemple vos villes ou vos marques.

**Attention :** La valeur envoyée vient du texte de l’option. Renommer une option change ce que reçoivent les outils branchés sur le formulaire. Renommer le formulaire ou le libellé d’un champ ne change rien.

### Accepter des fichiers

Sur un champ **Fichier** ou **Dépôt de fichier**, cochez sous **Types acceptés** les familles de fichiers que vous attendez. Les six familles sont les images, les documents, les tableurs, l’audio, la vidéo et les archives ZIP. Ne rien cocher les accepte toutes.

Le curseur **Taille maximale du fichier (Mo)** règle la taille de chaque fichier. Elle vaut 10 Mo par défaut. Une soumission pèse au plus 64 Mo, tous fichiers compris. Le site lit le vrai type de chaque fichier dans son contenu et refuse un programme renommé en document.

## Afficher un champ selon une réponse

Un champ peut n’apparaître que pour certaines réponses, par exemple **Nom de la société** quand le visiteur a coché **Je suis une entreprise**.

1. Sélectionnez le champ à afficher ou à masquer.
2. Dans l’onglet **Réglages**, ouvrez le panneau **Affichage conditionnel**.
3. Cliquez sur **Ajouter une condition**.
4. Dans **Action**, choisissez **Afficher ce champ** ou **Masquer ce champ**.
5. Dans **Quand le champ**, choisissez le champ qui décide.
6. Dans **Opérateur**, choisissez **est égal à**, **est différent de**, **n’est pas vide** ou **est vide**.
7. Saisissez la **Valeur**.

Sans condition, le champ est toujours visible. Avec plusieurs conditions, le champ apparaît dès que l’une est remplie. Un champ masqué n’est ni exigé ni enregistré.

## Dire à quoi servent les données

Dès qu’un formulaire demande une adresse e-mail ou un téléphone, le visiteur doit savoir ce que vous en faites. Le bloc **Mention d’information** porte cette phrase.

1. Sélectionnez un champ du formulaire.
2. Ajoutez le bloc **Mention d’information**.
3. Écrivez à quoi servent les données et combien de temps elles sont gardées. Par exemple, « Vos coordonnées servent à préparer votre devis et sont conservées 13 mois. »
4. Sélectionnez les mots qui nomment votre politique de confidentialité.
5. Liez ces mots au document de votre politique, comme à une page.

Le texte de la mention est gardé avec chaque soumission. Si vous le reformulez, les soumissions reçues gardent la phrase que leur visiteur avait sous les yeux. Quand la politique est un [document légal](https://lovelyrender.com/fr/documentation/documents-legaux/), chaque soumission garde l’édition en vigueur au moment de l’envoi.

Un formulaire qui demande un e-mail ou un téléphone sans mention affiche un avertissement dans ses réglages. Avec plusieurs mentions, seule la dernière est gardée.

**Conseil :** Un formulaire de contact n’a pas besoin d’une case « J’accepte ». Réservez le champ **Consentement** à un usage en plus de la demande, comme une lettre d’information. Prévoyez une case par usage.

## Régler le message de confirmation

1. Sélectionnez le bloc **Formulaire**, par exemple dans la vue en liste.
2. Dans l’onglet **Réglages**, panneau **Réglages du formulaire**, écrivez le **Message de succès**, par exemple `Merci, nous vous répondons sous 48 heures.`

![Le panneau Réglages du formulaire : le nom Demande de devis, le Suivi statistique activé, le Message de succès « Merci, nous vous répondons sous 48 heures. » et le Mode des étapes sur Côté navigateur.](https://static.lovelyrender.com/uploads/2026/10/952-doc-demandes-reglages.png)

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Nom du formulaire** | Le nom du formulaire dans le menu **Formulaires**, l’export et les notifications. | Le nom donné à la création |
| **Suivi statistique** | Compte les soumissions du formulaire dans vos statistiques. | Activé |
| **Message de succès** | Le texte affiché au visiteur après l’envoi. Laissé vide, le site affiche **Votre message a bien été envoyé.** | Vide |
| **Mode des étapes** | La façon dont les étapes sont envoyées. Présent sur tout formulaire, qui a toujours au moins une étape. La section Découper un formulaire en étapes le détaille. | **Côté navigateur** |

**Remarque :** Le message de succès est du texte simple. Une balise HTML, comme un lien, s’affiche telle que vous l’avez tapée.

## Découper un formulaire en étapes

Un formulaire long se lit mieux en plusieurs étapes. Le visiteur avance, recule et peut revenir corriger une étape franchie.

1. Sélectionnez le formulaire.
2. Cliquez sur son « + » et choisissez **Étape de formulaire**. L’étape ajoutée contient un groupe de champs.
3. Dans chaque étape, ajoutez le bloc **Navigation entre étapes**. Il porte les boutons **Étape précédente** et **Étape suivante / Envoyer**. Le second envoie le formulaire à la dernière étape.
4. Pour montrer l’avancement, ajoutez une fois le bloc **Progression du formulaire**. Il affiche une pastille numérotée par étape.
5. Dans **Réglages du formulaire**, choisissez le **Mode des étapes**.

**Attention :** Sans le bloc **Navigation entre étapes**, le visiteur ne peut pas passer à l’étape suivante. Le bloc **Progression du formulaire** n’apparaît pas tout seul non plus.

| Mode | Effet |
| --- | --- |
| **Côté navigateur** | Toutes les étapes partent en une seule soumission à la fin. Le mode par défaut. |
| **Enregistrer à chaque étape** | Chaque étape est envoyée et enregistrée quand le visiteur avance. Le visiteur qui revient retrouve son formulaire là où il l’avait laissé. |

Avec **Enregistrer à chaque étape**, deux réglages s’ajoutent, même sur un formulaire d’une seule étape.

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Durée de la session de reprise (jours)** | Le nombre de jours, de 0 à 360, pendant lesquels le visiteur peut reprendre son formulaire. À 0, rien n’est gardé et aucune invitation ne s’affiche. | 7 |
| **Étape de conversion** | L’étape où la soumission compte comme une demande reçue. **Dernière étape** suit la dernière étape même si vous en ajoutez. Une étape choisie reste fixe. Les étapes suivantes complètent la demande. | **Dernière étape** |

Le visiteur qui revient voit **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**, ajouté avec ce mode, porte ce texte. Vous pouvez le modifier.

Les notifications partent une seule fois, quand la soumission atteint l’étape de conversion. [Être prévenu de chaque demande](https://lovelyrender.com/fr/documentation/notifications-de-formulaire/) détaille les notifications.

**Conseil :** Si les dernières étapes sont facultatives, placez l’étape de conversion avant elles. Un visiteur qui s’arrête après l’essentiel compte alors comme une demande reçue.

## Protéger le formulaire du spam

Vous n’avez rien à régler et vos visiteurs ne résolvent aucun CAPTCHA. Le site écarte les robots en arrière-plan. Il juge la façon dont le formulaire est rempli et la réputation de l’adresse qui l’envoie.

Une soumission partie d’une adresse Internet douteuse porte le badge **Suspect** dans la liste des soumissions. Elle a passé ces contrôles et c’est à vous de juger si vous y répondez. [Lire les demandes et leur provenance](https://lovelyrender.com/fr/documentation/demandes/) explique ce badge.

## Voir aussi

- [Ê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/)
- [Formulaire](https://lovelyrender.com/fr/documentation/bloc-formulaire/)
- [Envoyer vos demandes vers votre outil](https://lovelyrender.com/fr/documentation/envoyer-vos-demandes/)