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), 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.
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. 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 |
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 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. |
| 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. |
Créer un formulaire 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.
- Cliquez sur Ajouter une condition.
- Choisissez l’Action, Afficher ce champ ou Masquer ce champ.
- Dans Quand le champ, choisissez le champ déclencheur.
- Choisissez l’Opérateur parmi est égal à, est différent de, n’est pas vide et est vide.
- Indiquez la Valeur.
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 et Mettre en forme un texte.
Chaque pièce du formulaire a son onglet Animations, sauf le curseur d’un interrupteur (Animer un bloc).
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.