Formulaires

Le principe

Contact Form 7 est l’extension derrière l’entrée Contact du menu de gauche. Un formulaire y réunit quatre choses, chacune dans un onglet :

• les champs que remplit le visiteur — Formulaire ;
• l’e-mail envoyé à chaque réponse — E-mail ;
• les messages affichés après l’envoi — Messages ;
• l’inscription à l’infolettre, s’il y a lieu — Brevo.

On ne compose pas le formulaire dans la page où il doit paraître : on y colle son code court, une ligne entre crochets qui l’appelle.

[contact-form-7 id="cd79f14" title="Formulaire Infolettre"]

Le même formulaire peut ainsi paraître à plusieurs endroits, et une modification vaut partout à la fois.

Trouver un formulaire

Contact › Formulaires de contact

Cliquer sur un titre ouvre le formulaire.

L’écran d’un formulaire

• En haut, le titre : il sert à s’y retrouver, le visiteur ne le voit pas.
• Dessous, le code court, à copier.
• Les onglets : Formulaire, E-mail, Messages, Réglages additionnels, Brevo.
• À droite, la boîte État : Enregistrer, Dupliquer, Supprimer.

Les champs — onglet Formulaire

Le grand cadre contient le modèle du formulaire. Chaque champ y est une balise entre crochets, comme celle de l’e-mail de l’infolettre :

[email* your-email autocomplete:email placeholder "Email"]

Le texte hors des crochets s’affiche tel quel : c’est le cas de la phrase d’acceptation, écrite entre [acceptance …] et [/acceptance]. Un retour à la ligne dans le modèle, en revanche, ne crée pas de ligne sur le site : la mise en page vient du thème.

Ajouter un champ

Les boutons au-dessus du cadre fabriquent les balises : texte, e-mail, URL, tél., nombre, date, Zone de texte, menu déroulant, Cases à cocher, Boutons radio, confirmation — la case d’acceptation —, quiz, fichier, envoyer.

1. Cliquer dans le cadre, à l’endroit où placer le champ.
2. Cliquer sur le bouton du type voulu. Une fenêtre s’ouvre.
3. Cocher This is a required field. si le champ est obligatoire.
4. Dans Field name, remplacer le nom tiré au hasard par un nom parlant : une lettre d’abord, puis des lettres sans accent, des chiffres ou des tirets — your-telephone, par exemple.
5. Pour un texte grisé dans le champ vide, l’écrire dans Valeur par défaut et cocher Use this text as the placeholder.
6. Insérer la balise : elle arrive dans le cadre, à l’endroit du curseur.
7. Reprendre l’onglet E-mail pour y faire figurer le nouveau champ, puis Enregistrer.

Les champs de l’infolettre

Qui reçoit les réponses — onglet E-mail

Au-dessus de ces champs, Contact Form 7 liste les étiquettes disponibles : une par champ du formulaire, entre crochets — [your-email], [your-firstname]… Dans l’objet ou le corps du message, chacune est remplacée par ce que le visiteur a saisi. Une étiquette en gras n’est encore reprise nulle part dans l’e-mail.

Plus bas, E-mail (2) est un second e-mail, envoyé en général au visiteur pour accuser réception. Il ne part que si Utiliser l’e-mail (2) est coché — ce n’est pas le cas pour l’infolettre.

Messages et réglages additionnels

L’onglet Messages contient les phrases que le visiteur lit sous le bouton : réussite, champ oublié, adresse invalide, mauvaise réponse à la question antispam… Chacune est précédée de la situation qu’elle couvre. Celle d’un envoi réussi vient en premier, sous Le message de l’expéditeur a bien été envoyé. : « Merci pour votre message. Il a été envoyé. » Toutes se réécrivent ; celles de l’infolettre sont restées celles d’origine, pensées pour un formulaire de contact.

L’onglet Réglages additionnels porte des lignes de réglage technique. L’infolettre en a une, acceptance_as_validation: on : tant que la case d’acceptation n’est pas cochée, le formulaire affiche un message d’erreur au lieu de griser le bouton Envoyer. Ne pas y toucher.

L’inscription à l’infolettre — onglet Brevo

L’onglet décide de ce que devient le visiteur une fois le formulaire envoyé. Il a deux rangées :

• Listes de contacts : cocher Ajouter des émetteurs de formulaires à vos listes de contacts, puis la ou les listes Brevo où inscrire le visiteur. Sans liste cochée, le contact est bien créé dans Brevo, mais abonné à rien.
• E-mail de bienvenue : un e-mail que Brevo envoie au nouvel inscrit, choisi parmi ses modèles. Facultatif.

L’inscription ne part que si le visiteur a coché la case qui porte consent_for:sendinblue. Contact Form 7 transmet alors chaque réponse sous le nom de son champ, en majuscules et sans le préfixe your- : your-email devient EMAIL, your-firstname FIRSTNAME, your-lastname LASTNAME, your-pays PAYS. Pour qu’un nouveau champ se range dans la fiche du contact, son nom doit correspondre à un attribut de contact de Brevo.

La connexion au compte Brevo se règle dans Contact › Intégration, réservé aux administrateurs. Ne pas y toucher.

Insérer un formulaire

1. Copier le code court : colonne Code court de la liste, ou cadre sous le titre du formulaire.
2. Le coller seul sur sa ligne, dans l’un des champs du tableau ci-dessous.
3. Enregistrer, puis vérifier sur le site que le formulaire s’affiche.

Créer un formulaire

Contact › Add Contact Form

1. Donner un titre qui dise à quoi sert le formulaire.
2. Onglet Formulaire : partir du modèle proposé et l’adapter — retirer les champs inutiles, ajouter les autres avec les boutons.
3. Onglet E-mail : Pour, De en @quebeclemag.com, un objet, et un corps qui reprend les étiquettes du formulaire, et elles seules.
4. Onglet Messages : relire au moins le message de réussite.
5. Pour un formulaire d’inscription, onglet Brevo : cocher la liste. Le formulaire doit alors avoir une case d’acceptation avec consent_for:sendinblue.
6. Enregistrer. Un point d’exclamation sur un onglet signale une erreur de configuration : la corriger avant d’insérer le formulaire.
7. Copier le code court, l’insérer, puis faire un essai sur le site avec sa propre adresse.

Pour partir d’un formulaire existant, l’ouvrir et cliquer Dupliquer, dans la boîte État : la copie prend son titre suivi de _copy, et un code court à elle.

Erreurs fréquentes