Formulaire de contact avec e-mail

Dans ce tutoriel, vous ajoutez un formulaire de contact à une page, vous configurez ses champs, vous concevez ce que voient les visiteurs après l’envoi, vous le publiez et vous lisez les soumissions dans l’espace de travail Forms. Ensuite, vous activez un e-mail pour chaque nouveau message. Il vous faut un site que vous pouvez modifier, par exemple celui du tutoriel sur la landing page.

Ajouter le formulaire

1. Insérer un formulaire

   Ouvrez la page du formulaire et sélectionnez le cadre qui doit le contenir. Cliquez sur + dans l’onglet Layers et choisissez Form dans le groupe Forms. Le formulaire arrive avec trois champs et deux cadres masqués. Dans l’onglet Layers, ce sont Email (un champ de saisie), Textarea (libellé Message), Submit (le bouton Send), Success et Error.

2. Nommer le formulaire

   Dans la section Form de l’inspecteur, réglez Name sur Contact. L’espace de travail Forms liste le formulaire sous ce nom. Laissez Action sur Store submissions et Redirect sur Stay on page.

Configurer les champs

1. Ajouter un champ nom

   Le formulaire sélectionné, cliquez sur + et choisissez Input. Les nouveaux champs vont à la fin du formulaire : faites donc glisser le champ au-dessus de Email dans l’onglet Layers. Dans la section Field, réglez Name sur name, Label sur Name et activez Required.

2. Vérifier le champ e-mail

   Sélectionnez Email. Son Type est Email et Required est activé : le navigateur vérifie donc l’adresse avant l’envoi du formulaire. Name est la clé sous laquelle la soumission est enregistrée ; gardez-la courte et unique dans le formulaire.

3. Ajouter une liste de sujets

   Sélectionnez le formulaire, cliquez sur + et choisissez Select, puis faites-le glisser au-dessus de Textarea. Réglez Name sur topic et Label sur Topic. Sous Options, remplacez les deux lignes par Sales et Support (chacune avec un libellé et une valeur) et cliquez sur Add option pour en ajouter une troisième, Other.

4. Limiter le message

   Sélectionnez Textarea, le champ du message. Required est déjà activé. Réglez Max length sur 2000 pour que personne ne puisse coller un roman.

5. Ajouter une case de consentement

   Ajoutez une Checkbox de la même façon et faites-la glisser au-dessus de Submit. Réglez Label sur I agree to be contacted about my message et activez Required.

6. Vérifier le bouton

   Sélectionnez Submit. Dans la section Button, Type vaut Submit : c’est ce qui envoie le formulaire. Modifiez Text si vous voulez un autre libellé que Send. Un bouton dans un formulaire l’envoie toujours, donc sa section Link n’a pas de cible.

Concevoir les états de succès et d’erreur

1. Afficher l’état de succès

   Sélectionnez le formulaire et réglez Show sur Success dans la section Form. Le canevas affiche le cadre Success à la place des champs. Modifiez son texte, par exemple Thanks, we will reply within one working day., et stylisez-le comme le reste de la page.

2. Afficher l’état d’erreur

   Réglez Show sur Error et écrivez un message pour les cas où l’envoi échoue, par exemple quand un visiteur envoie trop de messages d’affilée. Remettez Show sur Form quand vous avez terminé.

Publier et tester

1. Publier en préproduction

   Cliquez sur Publish dans la barre d’outils, laissez Staging sélectionné et cliquez sur Publish to staging. Les formulaires ne reçoivent des soumissions que sur le site publié.

2. Envoyer un message de test

   Ouvrez le lien de préproduction et remplissez le formulaire. Une vérification Cloudflare Turnstile apparaît au-dessus du bouton et passe généralement toute seule. Cliquez sur Send : les champs sont remplacés par votre message de succès.

Lire les soumissions

1. Ouvrir l’espace de travail Forms

   De retour dans l’éditeur, cliquez sur Forms sous les onglets de la barre latérale. Basculez l’interrupteur en haut de la liste sur Staging : les soumissions de test ne se mélangent jamais aux vraies, qui sont dans Production.

2. Ouvrir une soumission

   Sélectionnez Contact. L’onglet Submissions liste chaque message avec son heure d’arrivée. Cliquez sur une ligne pour lire tous ses champs et la page depuis laquelle il a été envoyé. Cliquez sur Export CSV pour les télécharger.

Recevoir un e-mail pour chaque message

1. Vous ajouter aux notifications

   Ouvrez l’onglet Settings de Contact. Sous Notifications, ajoutez votre e-mail et cliquez sur Save. Seuls les membres du site ou de son espace de travail peuvent être ajoutés.

2. Choisir ce que vous conservez

   Sous Storage, laissez Store submissions activé. Utilisez Keep for pour supprimer les anciennes soumissions au bout d’un certain temps. Ne désactivez Store submissions que si vous voulez les e-mails sans rien enregistrer.

3. Publier en production

   Les e-mails de notification ne sont envoyés que pour les soumissions en production. Cliquez sur Publish, choisissez Production et cliquez sur Publish to production. Il faut pour cela être administrateur du site.

Ce que vous avez appris

• Un formulaire contient des champs ; le Name de chaque champ est la clé sous laquelle sa valeur est enregistrée, et Required, Type et les longueurs sont vérifiés avant l’envoi.
• La commande Show vous permet de concevoir les états de succès et d’erreur sur le canevas.
• Les soumissions sont conservées par environnement, et celles de production peuvent être envoyées par e-mail aux membres du site.

Continuez avec les tutoriels suivants, ou lisez les guides sur lesquels celui-ci s’appuie :