Créer un formulaire de contact

Un formulaire permet au visiteur de vous laisser une demande sans quitter votre site. Préparez quelques champs utiles, un bouton clair et une confirmation qui explique ce qui vient de se passer.

Dans cet exemple, le studio fictif Alma demande un nom, une adresse électronique et un message. Aucun message n’est envoyé à un client réel.

1. Ajouter et sélectionner le formulaire

Dans Design, sélectionnez un élément de la section, ouvrez Ajouter, puis Éléments. Choisissez Formulaire pour l’insérer après l’élément sélectionné. Vous pouvez ensuite personnaliser son aspect dans les réglages de design.

Sélectionnez son cadre, puis retrouvez Formulaire dans le panneau de réglages. Si vous sélectionnez un texte ou le bouton à l’intérieur, remontez au formulaire dans Calques.

La première vidéo montre l’insertion. Le modèle propose des libellés initiaux en anglais : adaptez-les à la langue de votre site. La deuxième vidéo détaille l’ajout et les réglages d’un champ dans la page de contact Alma. Le test visiteur utilise ensuite trois champs : nom, adresse électronique et message.

2. Ajouter et nommer les champs

Dans Champs, ouvrez Ajouter un champ. Choisissez Champ texte pour une réponse courte ou Champ zone de texte pour un message sur plusieurs lignes. Ouvrez ensuite les réglages du champ ajouté.

Après un ajout, le sélecteur revient à Ajouter un champ. Vous pouvez choisir de nouveau le même type pour ajouter une autre réponse courte. Donnez à chaque champ son propre nom et son propre libellé.

Le libellé est ce que lit le visiteur, comme Votre nom. Le nom identifie la réponse dans les données, comme nom. Donnez à chaque champ un nom distinct et stable. Pour aider à la saisie, vous pouvez aussi renseigner un texte indicatif ; il ne remplace pas le libellé.

Dans Alma, les trois noms sont nom, email et message. La saisie du nom « email » ne suffit pas à transformer un champ texte en validation d’adresse électronique. Testez les contraintes du champ réellement utilisé.

3. Proposer des choix et plusieurs étapes

Pour proposer une liste, ouvrez Ajouter un champ, puis choisissez Sélectionner un champ. Ce choix crée une liste déroulante. Donnez-lui un nom et un libellé, puis utilisez Ajouter une option pour chaque possibilité.

Chaque option possède un libellé, lu par le visiteur, et une valeur, conservée dans les réponses. Par exemple, « Prendre un rendez-vous » peut enregistrer la valeur « rendezvous ». Gardez des valeurs distinctes. Le test présenté vérifie que le choix sélectionné arrive dans la demande reçue.

Pour répartir les questions, ajoutez Saut de formulaire entre deux groupes de champs. Son libellé nomme le bouton de passage, par exemple Continuer. Ajoutez ensuite les champs de la deuxième étape. Un saut placé à la fin, sans champ après lui, ne crée pas une deuxième étape utile.

Dans l’aperçu visiteur, vérifiez le passage à la suite et le retour. Le bouton de retour affiche actuellement Previous. Le test Alma confirme que les réponses et le choix sont conservés lors du retour, puis que l’envoi final reçoit les informations des deux étapes, sur ordinateur et mobile. Le saut organise la saisie ; ce test ne démontre pas une validation obligatoire avant chaque changement d’étape.

Un formulaire en plusieurs étapes n’est pas nécessaire pour une courte demande. Préférez une seule étape lorsque toutes les questions se lisent facilement ensemble.

4. Demander seulement les informations nécessaires

Activez le caractère obligatoire pour une réponse dont vous avez besoin. Un champ facultatif peut rester vide. Gardez le formulaire court : une première prise de contact ne nécessite pas toutes les informations d’un dossier client.

Avant de publier, essayez d’envoyer le formulaire avec un champ obligatoire vide. Le visiteur doit pouvoir comprendre ce qui manque et le corriger.

5. Préparer le bouton et les messages

Dans Libellé d’envoi, saisissez un texte comme Envoyer ma demande. Pour Succès, expliquez le résultat : Merci ! Votre demande a été enregistrée. Pour Erreur, proposez une action simple, comme réessayer dans un instant.

Une confirmation ne doit pas promettre un courriel si vous n’avez pas vérifié sa réception. « Demande enregistrée » décrit le résultat conservé dans le site.

6. Choisir la destination et tester

Choisissez où enregistrer les réponses avant le test. Pour la copie dans une collection CMS, consultez Choisir le traitement et la destination d’un formulaire.

Enregistrez vos modifications, publiez votre site et ouvrez son aperçu visiteur. Remplissez le formulaire avec des coordonnées de démonstration, puis vérifiez la confirmation et la ligne créée dans la collection choisie. Pour un formulaire de contact déjà configuré avec une notification par courriel, consultez aussi les demandes reçues.