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
- Dans l’éditeur, ajoutez le bloc Formulaire à l’endroit voulu. Ajouter un bloc explique comment.
- Dans le champ Donnez un nom à ce formulaire, saisissez son nom, par exemple
Demande de devis. Le nom compte au moins quatre caractères. - 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.
Ajouter des champs
- Sélectionnez le champ après lequel le champ à ajouter doit venir.
- Ouvrez l’outil d’insertion.
- Tapez
champdans sa recherche. Chaque type a son entrée, par exemple Champ E-mail ou Champ Date et heure. - Cliquez sur le type voulu. Le champ s’ajoute après le champ sélectionné et dans le même groupe.
- 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.
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.
- Sélectionnez le dernier champ du formulaire.
- Dans l’outil d’insertion, choisissez Envoi du formulaire. Le bouton se place après le champ.
- 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. |
| 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é.
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.
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.
- Sélectionnez le champ à afficher ou à masquer.
- Dans l’onglet Réglages, ouvrez le panneau Affichage conditionnel.
- Cliquez sur Ajouter une condition.
- Dans Action, choisissez Afficher ce champ ou Masquer ce champ.
- Dans Quand le champ, choisissez le champ qui décide.
- Dans Opérateur, choisissez est égal à, est différent de, n’est pas vide ou est vide.
- 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.
- Sélectionnez un champ du formulaire.
- Ajoutez le bloc Mention d’information.
- É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. »
- Sélectionnez les mots qui nomment votre politique de confidentialité.
- 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, 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.
Régler le message de confirmation
- Sélectionnez le bloc Formulaire, par exemple dans la vue en liste.
- 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.
| 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 |
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.
- Sélectionnez le formulaire.
- Cliquez sur son « + » et choisissez Étape de formulaire. L’étape ajoutée contient un groupe de champs.
- 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.
- Pour montrer l’avancement, ajoutez une fois le bloc Progression du formulaire. Il affiche une pastille numérotée par étape.
- Dans Réglages du formulaire, choisissez le Mode des étapes.
| 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 détaille les notifications.
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 explique ce badge.