28. Formulaires : widget Formulaire et Formulaire atomique

Un site d’artisan ne vend pas en ligne : il fait décrocher le téléphone ou remplir une demande de devis. Le formulaire est l’endroit où tout le travail des chapitres précédents se transforme en client. Ce chapitre détaille les deux outils d’Elementor Pro pour le construire, ce qui se passe après le clic sur « Envoyer », et les règles de droit qui encadrent la collecte de coordonnées en 2026.

28.1 — La page la plus importante du site

Pour Camille Roche, chaque demande de devis représente un projet de plusieurs milliers d’euros. Le visiteur qui arrive sur la page « Contact » a déjà décidé de vous écrire ; le formulaire n’a qu’à ne pas le perdre. Or un formulaire se perd de trois façons : il est trop long et le visiteur abandonne ; il « part » mais n’arrive jamais dans votre boîte ; ou il collecte des données sans respecter la loi.

Elementor Pro propose deux outils. Le widget Formulaire (Form), classique et présent depuis des années, est le plus complet : étapes, actions après envoi, protections anti-spam. Le Formulaire atomique (Atomic Form), arrivé avec Elementor Pro 4.0 le 30 mars 2026, se construit avec des éléments atomiques et se met en forme avec les classes et variables du chapitre 18. Ligne du support : le formulaire de devis, qui a besoin d’étapes et d’un anti-spam, se fait avec le widget classique ; les formulaires courts (demande de rappel, lettre d’information) sont de bons candidats pour l’atomique.

28.2 — Construire les champs avec le widget Formulaire

Le widget se dépose dans un Flexbox atomique comme tout widget classique (chapitre 16). Il arrive avec trois champs, Nom, E-mail et Message, que l’on modifie ou complète.

1. Déposez le widget. Sur la page « Contact », cherchez formulaire dans le panneau et glissez Formulaire (catégorie Pro) dans le Flexbox prévu.
2. Nommez-le. Onglet Contenu, section Champs du formulaire (Form Fields) : le Nom du formulaire (Form name), par exemple Contact, identifiera les envois et les e-mails.
3. Réglez chaque champ. Un clic sur un champ ouvre son Type, son Libellé (Label, affiché au-dessus), son Texte indicatif (Placeholder, grisé à l’intérieur), l’interrupteur Obligatoire (Required) et la Largeur de colonne (Column width) : deux champs à 50 % se placent côte à côte.
4. Donnez un identifiant court. Dans le sous-onglet Avancé du champ, remplacez l’ID automatique par nom, email, tel, projet. Le Code court (Shortcode) affiché en dessous, de la forme [field id="nom"], servira dans vos e-mails.
5. Ajoutez, dupliquez, réordonnez avec + Ajouter un élément (Add Item), l’icône de duplication et le glisser-déposer. Puis, dans la section Boutons (Buttons), réglez la taille, l’alignement et le texte du bouton Soumettre (Submit) : « Demander mon devis » plutôt que « Envoyer ».

Les sections Taille du champ (Input Size), Libellé et Marque obligatoire (Required Mark) complètent l’onglet. Gardez les libellés visibles : un texte indicatif disparaît dès que l’on écrit, et le visiteur qui revient sur un champ ne sait plus ce qu’on lui demandait.

Les vingt types de champs

Les libellés français de Pro n’étant pas tous fixés, le tableau donne le nom anglais et une traduction prudente.

Un champ Étape placé entre deux groupes transforme le formulaire en parcours : le visiteur remplit la première page, clique sur Suivant, puis la seconde. La section Réglages des étapes (Steps Settings) choisit l’indicateur : aucun, texte, icône, numéro, barre de progression, ou combinaisons. Commencez toujours par le projet, jamais par l’identité : un visiteur qui a décrit son escalier abandonne rarement à l’étape des coordonnées.

28.3 — Après l’envoi : actions, e-mails et messages

Au clic sur le bouton, Elementor exécute les Actions après envoi (Actions After Submit) dans l’ordre où vous les avez ajoutées avec Ajouter une action (Add Action) ; chaque action ajoutée ouvre sa section de réglages plus bas.

Le Centre d’aide réserve « Form Submissions » et « Form Integrations » aux plans Advanced et supérieurs ; la documentation ne précise pas si l’action Email seule reste disponible en plan Essential. Pour un artisan, la question ne se pose pas : la collecte des envois impose de toute façon un plan Advanced.

Régler Email et Email 2

La section Email demande : À (To), votre adresse ; Objet (Subject), par exemple Demande de devis — [field id="projet"] ; Message, par défaut le code court [all-fields], qui insère tous les champs avec leur libellé ; Adresse e-mail de l’expéditeur (From Email) et Nom de l’expéditeur (From Name), une adresse de votre domaine et le nom de l’entreprise ; Répondre à (Reply To), le code court [field id="email"], pour que « Répondre » dans votre messagerie écrive directement au client. Suivent Cc, Cci (Bcc), les Métadonnées (Meta Data : date, page d’origine, navigateur, adresse IP) et le format HTML ou texte brut.

Email 2 se règle dans l’autre sens : À reçoit [field id="email"], l’objet devient « Votre demande a bien été reçue », et le message annonce la suite (« Camille vous rappelle sous 48 heures ouvrées »). Cet accusé de réception rassure et évite le second envoi « au cas où ».

La section Options supplémentaires (Additional Options) permet enfin de réécrire les messages affichés sous le formulaire (succès, erreur, champ manquant, valeur invalide) et de choisir entre la validation du navigateur et des messages personnalisés. Si vous préférez une page entière, l’action Redirection ouvre une page « Merci », que votre outil de statistiques pourra compter (chapitre 37).

Avec un plan Advanced, chaque envoi est conservé dans Elementor › Envois (Submissions) : on y retrouve une demande même si l’e-mail s’est perdu, on marque les demandes traitées et l’on exporte en CSV (Exporter tout en CSV / Exporter la sélection en CSV). La collecte se désactive globalement dans Elementor › Éditeur › Réglages › Avancé, option Form Submissions ; nous verrons en 28.6 pourquoi il vaut mieux la garder, mais la purger.

28.4 — Le Formulaire atomique

Le Formulaire atomique n’est pas un widget tout-en-un mais un conteneur spécial, dans lequel on dépose des éléments atomiques de formulaire comme on dépose un Titre dans un Flexbox : Libellé (Label), Champ (Input), Zone de texte (Text area), Case à cocher (Checkbox), Bouton radio (Radio button), Sélecteur de date et d’heure (Date picker, Time picker), Sélection (Select), Téléversement de fichier (File Upload) et Bouton Soumettre (Submit button) (Centre d’aide Elementor, page « Atomic Form element »).

1. Déposez le conteneur Formulaire atomique depuis la catégorie des éléments atomiques et réglez-le comme un Flexbox : direction colonne, écart 16 px.
2. Ajoutez un Libellé puis un Champ. Dans l’onglet Général du Champ : Type (Texte, E-mail, Nombre, Tél., Mot de passe), texte indicatif, interrupteurs Obligatoire, Lecture seule, Autocomplétion, et un ID court.
3. Reliez le Libellé au Champ par le réglage Connecté à l’ID du champ (Connected to input ID). C’est ce lien qui permet à un lecteur d’écran d’annoncer « Nom » quand le curseur entre dans le champ.
4. Placez cases et boutons radio dans un Flexbox à l’intérieur du formulaire : la documentation l’exige, et cela permet de les aligner en ligne ou en colonne.
5. Terminez par le Bouton Soumettre, puis, dans les réglages du conteneur, la section Actions après envoi : Email, Email 2, Collecter les envois, Webhook, avec les mêmes champs qu’en 28.3 ; les destinataires acceptent les balises dynamiques (chapitre 26). Stylez enfin les trois états du conteneur, Normal, Succès et Erreur.

L’intérêt est la cohérence : les champs héritent de vos classes et variables, le code produit est léger, chaque réglage est responsive. La contrepartie est un périmètre plus réduit : au moment où nous écrivons, la page d’aide ne mentionne ni les étapes, ni la redirection, ni le reCAPTCHA. D’où notre partage : devis en widget classique, formulaires courts en atomique.

28.5 — Faire partir les e-mails pour de bon

C’est la panne la plus fréquente et la plus sournoise : le formulaire affiche « Merci », l’envoi est dans le menu Envois, et aucun e-mail n’arrive. Par défaut, WordPress confie ses e-mails à la fonction d’envoi du serveur, sans authentification ; pour les messageries destinataires, un tel message ressemble à du courrier indésirable, classé en spam ou supprimé.

Trois remèdes, par ordre de préférence. D’abord, gratuit et indispensable : un expéditeur sur votre propre nom de domaine, et une vérification auprès de l’hébergeur que les enregistrements techniques du domaine (SPF et DKIM, que sa documentation explique) autorisent le serveur du site à envoyer. Ensuite, une extension SMTP (WP Mail SMTP est un exemple courant) qui fait passer les e-mails par une vraie boîte aux lettres, avec identifiant et mot de passe. Enfin, le service Site Mailer d’Elementor, menu Elementor › Email Deliverability, qui achemine les e-mails pour vous et se paie en crédits One (10 crédits par e-mail au tarif relevé en septembre 2026).

28.6 — Le droit : RGPD et rappel téléphonique

Un formulaire collecte des données personnelles, et le Règlement général sur la protection des données (RGPD) s’applique dès le premier envoi, quelle que soit la taille de l’entreprise. Quatre règles suffisent à un site d’artisan.

Ne demander que le nécessaire. Chaque champ doit avoir une raison : pas d’adresse postale avant la visite, jamais de date de naissance, et pas d’adresse IP dans les métadonnées de l’e-mail. Informer au moment de la collecte. Sous les champs, un court texte (champ HTML ou Paragraphe atomique) dit qui collecte, pourquoi, combien de temps, et renvoie à la politique de confidentialité pour les droits d’accès, de rectification et d’effacement. Cette information est obligatoire et ne dépend d’aucune case. Une case d’acceptation jamais pré-cochée. Répondre à une demande de devis n’exige pas de consentement, c’est le visiteur qui demande ; mais dès que vous voulez réutiliser ses coordonnées (lettre d’information, offre ultérieure), il en faut un, et le droit européen est constant : une case déjà cochée ne vaut pas consentement. Le champ Acceptation est prévu pour cela ; laissez-le décoché et gardez la preuve. Fixer une durée de conservation. Pour un prospect qui n’est pas devenu client, la CNIL retient couramment trois ans après le dernier contact : purgez le menu Envois chaque trimestre et annoncez cette durée dans la politique de confidentialité (chapitre 35).

Le rappel téléphonique depuis le 11 août 2026

La loi du 30 mai 2025 a renversé la règle du démarchage téléphonique : depuis le 11 août 2026, un professionnel ne peut plus appeler un consommateur à des fins commerciales sans son consentement préalable, libre, spécifique et informé. La logique de la liste d’opposition, où l’on pouvait appeler tous ceux qui ne s’étaient pas inscrits, est remplacée par son contraire : on n’appelle que ceux qui ont dit oui. Rappeler quelqu’un pour répondre au devis qu’il vient de demander n’est pas du démarchage ; le relancer trois mois plus tard, lui proposer une autre prestation ou l’appeler après un devis refusé en est. La réponse pratique tient en une case, séparée de l’acceptation RGPD, facultative, non pré-cochée, dont le libellé dit qui appelle et pourquoi, avec un champ Téléphone lui aussi facultatif. Comme ce consentement doit pouvoir être prouvé, la ligne du menu Envois, avec sa date et le libellé de la case, est votre preuve : exportez-la en CSV avant de purger le reste.

Le formulaire le plus rentable n’est pas celui qui demande le plus : c’est celui qui arrive, et que l’on a le droit de rappeler.

28.7 — Tenir les robots à distance

Un formulaire public reçoit tôt ou tard des envois automatiques. La première défense est le champ Pot de miel (Honeypot) : invisible pour un humain, rempli par réflexe par les robots, il fait écarter tout envoi où il est rempli, sans rien coûter au visiteur ni charger de ressource extérieure. Ajoutez-le systématiquement. Si le spam persiste, le champ reCAPTCHA de Google existe en version 2 (la case « Je ne suis pas un robot ») ou 3 (invisible, fondée sur un score) ; il faut créer des clés chez Google et les saisir dans Elementor › Éditeur › Réglages › Intégrations avant d’ajouter le champ. Deux réserves : la version 2 ajoute une friction, et reCAPTCHA charge des ressources de Google et dépose des traceurs, ce qui, selon la position de la CNIL, le fait entrer dans le champ du consentement aux cookies (chapitre 35).