WordPress : Crée et personnalise ton formulaire de contact avec Contact form 7

Jean

18 avril 2022

Cet article prend environ 17 minutes à lire en intégralité.

U Utilisé par plus de 5 millions de sites, Contact Form 7 est l’extension gratuite de WordPress la plus populaire pour créer un formulaire de contact complet.

Tu intègres facilement ton formulaire où tu le souhaites :

ta page de contact
ta page d’accueil
ton pied de page…

Tu vas gagner du temps car je t’ai préparé les codes à copier-coller dans ce tutoriel.

Tu pourras personnaliser ton formulaire et le protéger du spam.

Sommaire

Nous allons personnaliser le formulaire standard de Contact Form 7

pour le rendre plus attractif et surtout ajouter la mention RGPD obligatoire en Europe.

Rentrons, si tu le veux bien, dans le vif du sujet.

Crée ton formulaire avec Contact Form 7

Installe l’extension

Tu te rends dans Extensions puis Ajouter.

Tu installes et tu actives Contact form 7 dans le répertoire officiel de WordPress.

Tu disposes désormais d’un menu Contact.

Tu supprimes le formulaire de démonstration.

supprimer le formulaire de démonstration

Crée ton premier formulaire

Tu ajoutes un formulaire.

Tu nommes ton formulaire.

Un nom descriptif qui précise où tu vas l’insérer te permettra de le retrouver plus facilement par la suite (par exemple : Formulaire page d’accueil).

Je te propose le template de formulaire suivant avec un test antispam et la case RGPD.

Tu copies le code ci-dessous.

<h3>Formulaire de contact</h3>
<div class="cf7resp">
<table>
<tr><td><label> Prénom [text* your-surname] </label></td><td><label> Nom [text* your-name] </label></td></tr>
<tr><td colspan="2"><label> E-mail [email* your-email] </label></td></tr>
<tr><td colspan="2"><label> Objet [text* your-subject] </label></td></tr>
<tr><td colspan="2"><label>Message</label>[textarea* your-message  60x3 placeholder "Votre message"]</td></tr>
<tr><td>[quiz quiz-form "Que font 7 + 2 ? |9" "Que font 5 + 1 ? |6" "Que font 6 + 1 ? |7"]</td><td>[checkbox* validation-rgpd use_label_element "J'accepte que mon e-mail soit stocké pour apporter une réponse"]</td></tr>
<tr><td colspan="2">[submit "J'envoie le message"]</td></tr>
</table>
</div>

Tu remplaces le code présent et tu enregistres.

Nous verrons comment l’enrichir avec des éléments supplémentaires dans la suite de l’article.

Ajoute le code CSS pour le personnaliser

Tu ajoutes l’extension Simple CSS pour intégrer facilement du code CSS si la procédure ne t’est pas familière.

Cela va te permettre de personnaliser ton formulaire. J’ai intégré, par exemple, la superposition des cases en colonnes sur mobile.

Dans le menu de gauche : Apparence > Simple CSS

Tu copies le code ci-dessous.

/* Personnalisation formulaire CF7 */
form.wpcf7-form {
background: transparent; /* Couleur du fond du formulaire */
padding: 2em; /* Espace autour du formulaire */
box-shadow: 0 0 1em rgba(0,0,0,.03); /* Ombre autour du formulaire */
color: #0B1529; /* Couleur de texte des étiquettes */
}

@media screen and (max-width: 800px) {
form.wpcf7-form {
padding: 0; /* Espace autour du formulaire sur mobile */
box-shadow: none; /* Supprime ombre autour du formulaire sur mobile*/
}
}

form.wpcf7-form>h3 {
margin-bottom: 0.3em; /* Marge en bas du titre H3 du formulaire */
margin-top: 0em; /* Marge en haut du titre H3 du formulaire */
}

form.wpcf7-form * {
transition: 225ms; /* Tempère les transitions */
}

form.wpcf7-form label {
cursor: pointer; /* Transforme le curseur en main */
font-size: 0.9em; /* Gère la taille de la police des étiquettes */
font-weight: bold; /* Passe les étiquettes en gras */
}

.wpcf7-checkbox, .wpcf7-radio {
color : #1C3669; /* Couleur listes */
}

form.wpcf7-form input,
form.wpcf7-form select,
form.wpcf7-form textarea {
background: #fefefe; /* Couleur du fond des cases */
font-size: 0.8em; /* Gère la taille de la police des cases */
border: 1px solid #ececed; /* Bordures des cases */
color: #122345; /* Couleur du texte des cases */
margin: 5px; /* Ajout d'un espace autour des cases */
}


form.wpcf7-form input:hover,
form.wpcf7-form select:hover,
form.wpcf7-form textarea:hover {
cursor: pointer; /* Transforme le curseur en main au survol */
box-shadow: 0 0 2px #cccccd; /* Ombre autour de la case au survol */
}

form.wpcf7-form input:focus,
form.wpcf7-form select:focus,
form.wpcf7-form textarea:focus {
border: 2px solid #cccccd; /* Bordure de la case sélectionnée */
outline: none; /* Supprime l'effet de halo */
}


form.wpcf7-form input[type="submit"] {
padding: 1em; /* Ajout d'un espace dans le bouton */
border: 2px solid #010f18; /* Bordure du bouton */
box-shadow: none; /* Supprime l'ombre du bouton */
background: #022136; /* Couleur de fond du bouton */
color: #ffffff; /* Couleur du texte du bouton */
text-decoration:none;  /* Supprime soulignement */
font-size: 1em; /* Taille du texte du bouton */
}

@media screen and (max-width: 800px) {
form.wpcf7-form input[type="submit"] {
padding: 0.5em; /* Ajout d'un espace dans le bouton sur mobile */
font-size: 1em; /* Taille du texte du bouton sur mobile */
}
}

form.wpcf7-form input[type="submit"]:hover {
background-color: #010f18; /* Couleur de fond du bouton au survol */
text-decoration:none;  /* Supprime soulignement */
}

span.wpcf7-not-valid-tip {
color: #38abf9; /* Couleur du texte d'erreur */
font-size: 15px; /* Gère la taille du texte d'erreur */
margin-top: 5px; /* Marge en haut du texte d'erreur */
}

div.wpcf7-response-output {
padding: 1em !important;
margin: 0 !important;
}

/* Supprimer couleur bordures tableau */
.cf7resp table, .cf7resp table * {
border-color: transparent;
}

/* Empiler tableau mobiles */
@media screen and (max-width: 640px) {
.cf7resp table,
.cf7resp tbody,
.cf7resp tr,
.cf7resp td {
display: block;
}
}

Tu colles et tu sauvegardes.

J’ai annoté le code pour que tu puisses facilement le modifier. Nous verrons comment personnaliser l’apparence de ton formulaire dans la suite de l’article.

Configure l’e-mail et les messages d’erreurs

Tu cliques sur l’onglet E-mail dans les onglets sur Contact Form 7.

Onglet e-mail

Tu définis le message que tu recevras lorsqu’un visiteur utilisera ton formulaire de contact.

Tu complètes ton adresse e-mail de réception des messages dans Pour.

Tu ajoutes un e-mail en copie cachée en ajoutant « cc: emailencopie@cmonsite.com » dans En-têtes additionnelles.

Je te recommande d’indiquer dans l’objet de l’e-mail la provenance du message avant « [your-subject] » par exemple : Formulaire page d’accueil.

L’objet complété dans le formulaire représenté par « [your-subject] » est utile pour visualiser immédiatement les messages prioritaires et supprimer les éventuels spams sans ouvrir le message.

Tu peux supprimer dans le corps du message : « — Cet e-mail a été envoyé […] » qui n’apporte rien.

Il n’est pas nécessaire de toucher aux autres champs.

Tu pourras ajouter toutes les informations collectées dans ton formulaire dans ce message.

Onglet messages

Il s’agit des messages qui apparaissent dans le formulaire.

Le premier indique que l’envoi s’est déroulé correctement.

Les suivants sont des messages d’erreurs.

Les messages sont bien rédigés et formels.

Ils correspondent à la majorité des usages. Cependant, ils doivent refléter le ton utilisé sur ton site.

J’ai, par exemple, modifié le premier en « Ton message est expédié. Je te remercie de m’écrire. Je te répondrai le plus rapidement possible. ».

Adresse une réponse automatique (autorépondeur)

Tu peux adresser un message dès qu’un visiteur valide le formulaire.

Le plus naturel est d’indiquer que la demande de l’internaute est prise en compte et qu’une réponse lui sera adressée sous un certain délai.

Tu peux également adresser un code de réduction, renvoyer vers la page dédiée aux FAQ, diriger vers la nouvelle collection…

Tu actives l’e-mail (2) et tu complètes les champs.

email de réponse destinataire, expéditeur et objet

Tu reprends les champs complétés par l’internaute pour personnaliser ton message.

Nous pourrions envoyer le message suivant :

Bonjour [your-surname],

Nous avons reçu votre demande concernant [your-subject]. Nous essayons de répondre le lendemain de votre demande du lundi au vendredi.

Cordialement,
M. Pink
contact@reservoir.fr

Les champs de personnalisation disponibles sont visibles en haut de page.

Pour éviter que ton texte ne perde son sens, mieux vaut n’utiliser que des champs obligatoires.

Teste et ajoute ton formulaire sur ton site

Tu ajoutes ton formulaire dans tes pages et tes articles ainsi que dans ton pied de page et ta barre latérale avec le bloc Gutenberg dédié à Contact Form 7.

Tu sélectionnes le formulaire que tu souhaites présenter.

Si tu utilises l’éditeur classique, tu copies et colles le code présent sous le titre.

Tu utilises la prévisualisation pour valider ton formulaire avant de publier ta page.

Tu vérifies l’aspect visuel, le message d’erreur avec un champ obligatoire vide et le message si la réponse au quiz contre les spams est incorrecte.

Quand tu réalises une modification, tu enregistres ton formulaire et tu recharges ta page.

Tu publies ta page une fois que tu es satisfait.

Tu testes la bonne réception de l’e-mail et que l’e-mail reçu contient tous les champs du formulaire. Tu vérifies que tout est conforme sur mobile.

Intègre ton formulaire dans le pied de page ou la barre latérale

Apparence > Widget

Tu sélectionnes l’emplacement où tu souhaites intégrer ton formulaire et tu ajoutes le bloc Contact Form 7.

ajout formulaire colonne et pied de page

Pour les thèmes en Full Site Editing (comme Twenty Twenty Two), tu retrouves ton footer dans Apparence > Editeur > Eléments de modèle > Footer

ajout formulaire modèle full site editing

Tu peux intégrer un numéro de téléphone, l’ajout de fichier, des questions à choix multiples… ou passer directement au design au chapitre suivant.

Ajoute des champs supplémentaires à ton formulaire

Voici un exemple d’un formulaire plus complet.

template formulaire contact form 7 complet

Le code correspondant.

<h3>Formulaire de contact</h3>
<div class="cf7resp">
<table>
<tr>
<td><label> Prénom [text* your-surname] </label></td>
<td><label> Nom [text* your-name] </label></td>
</tr>
<tr>
<td colspan="2"><label> Téléphone [tel your-tel] </label></td>
</tr>
<tr>
<td colspan="2"><label> E-mail [email* your-email] </label></td>
</tr>
<tr>
<td colspan="2"><label> Objet [text* your-subject] </label></td>
</tr>
<tr>
<td colspan="2"><label> Message</label> [textarea* your-message  60x3 placeholder "Votre message"]</td>
</tr>
<tr>
<td><label> Qui souhaitez-vous joindre ?</label> [select choix-contact "Administratif" "Commercial" "RH"] </td>
<td><label> Jours de prédilection</label>[checkbox box-formulaire use_label_element "Lundi" "Mardi" "Mercredi" "Jeudi" "Vendredi"]</td>
</tr>
<tr>
<td colspan="2"><label> Horaire souhaité</label> [radio radio-346 use_label_element default:1 "Matin" "Midi" "Après-midi"]
</td>
</tr>
<tr>
<td>[quiz quiz-form "Que font 7 + 2 ? |9" "Que font 5 + 1 ? |6" "Que font 6 + 1 ? |7"]</td>
<td>[checkbox* validation-rgpd use_label_element "J'accepte que mon e-mail soit stocké pour apporter une réponse"]</td>
</tr>
<tr><td colspan="2">[submit "J'envoie le message"]</td>
</tr>
</table>
</div>

Je te montre comment ajouter ou modifier des éléments du formulaire.

Modifie le caractère obligatoire d’un champ

Un champ est obligatoire s’il comporte une * à la suite de son nom.

Change l’intitulé d’un champ

Tu modifies le texte qui se situe entre <label> et </label> pour indiquer tes intitulés de champs.

Ajoute un texte d’exemple ou des instructions dans le champ

Comme tu le remarques ici, du texte est déjà présent dans la case.

Tu ajoutes placeholder "Votre message" à l’intérieur des crochets pour intégrer du texte prérempli dans les champs.

Insère de nouvelles lignes

Tu sautes une ligne après </tr> et avant <tr> avant de coller ton code.

Ajoute de nouveaux champs texte

Si tu souhaites disposer de plus de champs de texte, tu copies-colles les instructions suivantes à l’emplacement désiré en remplaçant les XXXXXX.

Une ligne unique

<tr>
<td colspan="2"><label> XXXXXXX [text* champ-XXXXX] </label></td>
</tr>

Une ligne avec deux colonnes

<tr>
<td><label> XXXXXXX1 [text* champ-XXXXX1] </label></td>
<td><label> XXXXXXX2 [text* champ-XXXXX2] </label></td>
</tr>

Ajoute un numéro de téléphone

<tr>
<td colspan="2"><label> Téléphone [tel your-tel] </label></td>
</tr>

Insère des cases à cocher et des boutons radio

Les cases à cocher (plusieurs choix)

<tr>
<td colspan="2"><label> Jours souhaités</label>[checkbox box-formulaire use_label_element "XXXX1" "XXXX2" "XXXX3" "XXXX4" "XXXX5"]</td>
</tr>

Les boutons radio (un choix possible)

<tr>
<td colspan="2"><label> Horaire souhaité</label> [radio radio-346 use_label_element default:1 "XXXX1" "XXXXX2" "XXXXXX3"]
</td>
</tr>

<tr>
<td colspan="2"><label> Vous souhaitez joindre</label> [select choix-contact "XXXXX1" "XXXXX2" "XXXXXX3"] </td>
</tr>

Les menus déroulants sont difficiles à utiliser sur mobile. Tu testes pour valider que ce choix est pertinent pour les utilisateurs.

Intègre un champ date

<tr>
<td colspan="2"><label> Date de rappel souhaitée [date your-date] </label></td>
</tr>

Donne la possibilité de joindre un fichier

<tr>
<td colspan="2"><label> Joignez votre fichier </label>[file champ-fichier]</td>
</tr>

Il est possible de limiter la taille du fichier et d’indiquer les formats acceptés.

Tu utilises l’outil de génération de code de Contact Form et tu remplaces [file champ-fichier] dans le code ci-dessus.

Ajuste la hauteur du pavé du message

Tu spécifies un nombre de caractères en largeur (chiffre avant le x) et le nombre de lignes en hauteur (chiffre après le x) dans [textarea your-message 60x2].

Certains thèmes ne prennent pas en compte cette instruction et proposent une zone adaptable par l’utilisateur.

Ajoute une liste de destinataires

Le répondant peut choisir la personne ou le service qu’il souhaite contacter. L’e-mail du destinataire n’apparaît pas dans le formulaire mais peut-être utilisé dans le paramétrage des destinataires des e-mails.

Tu ajoutes un | XXXX@email.com après un champ comme ici dans une liste déroulante.


<tr>
<td colspan="2"><label> Choisissez votre destinataire [select* destinataire "Accueil | accueil@youpi.com" "Service technique | tech@youpi.com" "Commercial | jean-paul@youpi.com" "Service technique | tech@youpi.com" "Direction | direction@youpi.com"] </label></td>
</tr>

Ce champ doit être obligatoire pour être valide. Tu renseignes une adresse e-mail générique en premier qui sera utilisée par défaut.

Dans l’onglet E-mail, tu indiques « [destinataire] » dans le champ Pour.

J’ai découvert cette astuce dans l’article Ajoutez un formulaire de contact à votre site avec Contact Form 7 de WPmarmite.

Personnalise le design de ton formulaire avec les css

Les CSS permettent de designer et de personnaliser l’apparence de ton formulaire.

Ces codes sont valables uniquement pour les formulaires réalisés avec Contact Form 7 comme dans mes exemples.

Ils sont sous forme de table en 2 colonnes

<table>

<tr>
<td colspan="2">...</td>
</tr>

<tr>
<td>....</td>
<td>....</td>
</tr>

</table>

et comportent les codes suivants en haut et en bas.

<div class="cf7resp">
....
</div>

Je détaille toutes les options dans l’ordre du code CSS communiqué en tout début d’article.

Tu retrouves les numéros des lignes dans Simple CSS. De plus, j’ai annoté toutes les lignes pour que tu puisses facilement trouver le point qui t’intéresse.

Couleurs et présentation du formulaire

Tu personnalises la couleur du fond du formulaire en indiquant la référence Hex de ta couleur. Il est transparent par défaut.

background: #ffffff;

J’ai ajouté un espace autour du formulaire pour aérer. Tu peux le supprimer ou ajuster la taille en em ou en pixels.

padding: 10px;

Tu supprimes cette ligne si tu ne souhaites pas la légère ombre autour de ton formulaire.

box-shadow: 0 0 1em rgba(0,0,0,.03);

Cette ligne définit la couleur du texte des étiquettes.

color: #0B1529;

Présentation du formulaire sur mobiles

J’ai retiré l’ombre et l’espace autour du formulaire sur les mobiles.

padding: 0;
box-shadow: none;

Marges du titre

Tu ajustes les marges en haut du titre (en pixels ou en em)

margin-top: 0px;

et en bas.

margin-bottom: 0.3em;

Mise en forme des étiquettes des champs

Le curseur se transforme en main au survol des champs.

cursor: pointer;

Tu gères la taille de la police des étiquettes.

font-size: 0.9em;

J’indique que la police des étiquettes passe en gras.

font-weight: bold;

Couleur des listes

J’ai précisé une couleur spécifique pour les textes des listes et des boutons radio en vue de simplifier la compréhension visuelle.

color : #1C3669;

Mise en forme des champs

Tu personnalises la couleur de fond des champs.

background: #fefefe;

Tu gères la taille de la police à l’intérieur des champs.

font-size: 0.8em;

Tu précises l’épaisseur du trait et la couleur de la bordure autour des champs.

border: 1px solid #ececed;

Tu personnalises la couleur du texte dans les champs.

color: #122345;

Tu ajustes l’espace autour des champs.

margin: 5px;

Champs au survol

J’indique que le pointeur conserve sa forme de main au survol

cursor: pointer;

et j’ajoute une ombre très légère à l’extérieur.

box-shadow: 0 0 2px #cccccd;

Champ sélectionné

Je remplace l’effet de halo d’origine

outline: none;

par une bordure un peu plus épaisse et plus foncée.

border: 2px solid #cccccd;

Personnalisation du bouton

personnalisation des css du bouton contact form 7

J’ajoute un espace à l’intérieur du bouton.

padding: 1em;

L’épaisseur et la couleur de la bordure du bouton.

border: 2px solid #010f18;

Ce code supprime l’effet d’ombre du bouton.

box-shadow: none;

Tu changes la couleur de fond du bouton

background: #022136;

et de son texte

color: #ffffff;

Je retire le soulignement du lien.

text-decoration:none;

Tu adaptes la taille de la police du bouton.

font-size: 1em;

Adaptation du bouton sur mobile et au survol

J’adapte les marges du bouton et la taille de son texte sur mobile.

padding: 0.5em;
font-size: 1em;

Je change la couleur du fond du bouton au survol.

background-color: #010f18;

Tu peux ajouter la ligne suivante pour adapter la couleur du texte du bouton au survol.

color: #ffffff;

Personnalise les messages d’erreur

Tu personnalises les messages d’erreur qui apparaissent en dessous des champs lorsque des erreurs sont identifiées.

Couleur du texte d’erreur

color: #38abf9;

Taille de la police du texte d’erreur

font-size: 15px;

Ajout d’une marge en haut du texte d’erreur

margin-top: 5px;

Flamingo te préserve des catastrophes.

Extensions : sauvegarde, redirection, spam, Mailchimp

Extensions contact form 7 : sauvegarde, redirection, spam, Mailchimp

Sauvegarde tes messages avec Flamingo

Contact Form 7 n’enregistre pas les messages qui te sont adressés. Si tu souhaites une sauvegarde, tu installes et actives l’extension Flamingo.

Flamingo extension WordPress de sauvegarde des messages de Contact Form 7

Tu disposes d’un nouvel élément dans ton menu.

Dans messages entrants, tu retrouves la liste des messages réceptionnés.

Ils s’affichent en intégralité en cliquant dessus.

Tu peux déclarer un expéditeur comme spammeur.

Tu retrouveras d’autres moyens efficaces contre le spam dans le prochain chapitre.

Le carnet d’adresses collecte toutes les adresses e-mail.

Il regroupe les messages par contact.

Flamingo peut stocker les autorisations RGPD. Il faut pour cela utiliser le champ spécial « acceptance ». Je ne l’ai pas intégré dans mes exemples car il bloque l’accès au bouton sans explication tant qu’il n’est pas coché.

Je pense que ce sera une bonne idée de le positionner à gauche de ton bouton pour donner du contexte.

Le code simple pour un affichage sur une ligne distincte.

<tr>
<td colspan="2"> [acceptance rgpd-formulaire] J'accepte que mon e-mail soit stocké pour apporter une réponse [/acceptance]</td>
</tr>

Le code pour le positionner à gauche du bouton

<tr>
<td> [acceptance rgpd-formulaire] J'accepte que mon e-mail soit stocké pour apporter une réponse [/acceptance]</td>
<td>[submit "J'envoie le message"]</td>
</tr>

Protège-toi contre le spam (4 outils)

Comme beaucoup de sites, j’ai reçu des quantités incroyables de spam par le formulaire. Voici ce que je recevais en deux heures.

spam reçus par le formulaire en deux heures

Quiz

Le plus simple et le moins gênant pour l’utilisateur est l’ajout d’une question simple pour filtrer. Je l’ai intégré dans mes exemples.

Le code à ajouter :

<tr>
<td colspan="2">[quiz quiz-form "Que font 7 + 2 ? |9" "Que font 5 + 1 ? |6" "Que font 6 + 1 ? |7"]</td>
</tr>

Akismet

Dans l’article Spam Filtering with Akismet, l’équipe de Contact Form 7 propose d’ajouter les codes suivants aux champs pour utiliser l’anti-spam intégré :

URL : [text your-url akismet:author_url]
Auteur : [text* your-name akismet:author]
E-mail : [email* your-email akismet:author_email]

Honeypot

Contact Form 7 Honeypot installe une question invisible pour les utilisateurs mais que les robots complètent, ce qui déclenche la mise en spam.

Tu la retrouves dans le répertoire des extensions WordPress.

Elle ne demande aucun réglage

Captcha

Je ne suis pas un fan des captchas pour l’expérience utilisateurs. Le quiz est normalement suffisant pour filtrer les messages indésirables.

Cependant, Google a amélioré le système. Il donne une note de probabilité de spam et déclenche le capcha en fonction.

Installe l’extension dédiée aux Captchas de Contact Form 7

Tu installes et actives l’extension Really Simple CAPTCHA.

really simple captcha extension de lutte contre le spam dans les formulaires

Enregistre ton site sur Google

Tu te connectes sur une de tes adresses Gmail. Tu te rends sur la page Google reCaptcha.

Tu nommes le Captcha (par exemple Page d’accueil Mon Site),
choisis reCAPTCHA version 3,
complètes le nom de domaine de ton site sans https://www.,
acceptes les conditions
et valides.

Tu obtiens tes clés d’activation.

Dans WordPress, tu cliques sur Configuration de l’intégration dans Contact > Intégration.

Tu colles les deux clés.

coller les clés captcha de google dans wordpress

Aucune autre action n’est nécessaire.

Le capcha ne s’affiche que si le visiteur possède un profil suspect. Tu vois cependant qu’il est actif avec ce logo qui apparaît en bas à droite.

Redirige vers une page de vente

Tu installes l’extension Redirection for Contact Form 7.

Tu choisis la page de destination dans le nouvel onglet : Redirect Settings et tu enregistres.

Connecte Mailchimp

Tu installes l’extension Contact Form 7 For Mailchimp.

Tu disposes désormais d’un nouvel onglet dans tes formulaires. Pour ceux que tu souhaites connecter à Mailchimp, tu complètes ta clé API et la connectes.

connecter Mailchimp à Contact form 7 avec l'api

Pour trouver ta clé API Mailchimp, tu te rends sur Profile dans les paramètres de ton compte Mailchimp.

Extras > API keys

Tu reprends ton code. Si tu n’as pas créé de clé, tu commences par le bouton Create a key.

Quand ton compte est connecté avec l’extension, tu choisis ta liste.

Tu détermines le champ que tu as utilisé pour la collecte d’e-mails

et éventuellement le nom du souscripteur.

Tu enregistres pour finaliser.

Pour conclure, je te présente 7 astuces pour un formulaire performant.

7 conseils pour un formulaire efficace

Limite au maximum le nombre de champs à ceux dont tu as besoin à court terme. Il sera toujours temps de demander le numéro de TVA intracommunautaire plus tard dans la relation.

Précise clairement les champs facultatifs. Le mieux est de les éliminer.

Les menus déroulants sont à limiter au maximum. L’expérience utilisateurs est désastreuse sur mobile. Les cases à cocher sont à privilégier.

Le texte du bouton d’action doit être clair. Un texte d’action à la première personne est plus parlant :
- J’envoie mon message
- Je communique mon CV
- Je reçois les prochains articles

Si la demande est particulière, un exemple aide à visualiser le résultat attendu : Votre numéro de facture est situé en haut à droite du devis sous la forme F2019.328.

Si une question est personnelle ou sort de l’ordinaire, une explication est la bienvenue. Je précise que le calcul 5+2 est destiné à lutter contre le spam.

Toute information personnelle comme l’e-mail doit faire l’objet d’un consentement actif sur sa destination dans le RGPD.

Conclusion

Contact Form 7 est une extension fiable et mise à jour régulièrement. Cela t’assure de ne pas devoir tout refaire demain.

L’extension Material Design qui assurait un design minimaliste n’est plus disponible. J’ai cherché à obtenir le formulaire le plus attractif possible avec Contact Form 7.

Découvre l'extension la plus populaire pour ajouter gratuitement un formulaire de contact sur ton site WordPress. Cliquez pour tweeter

Cet exemple réalisé dans CodePen est très pratique pour réaliser des tests facilement.

Les articles susceptibles de t’intéresser :

Retrouve tous les articles pour Créer seul ton site

bannière pour l'inscription à la newsletter

Je partage mes apprentissages et mes expériences depuis 2017 avec + de 100 tutoriels et ressources.

Tu devrais trouver ton bonheur pour créer ta marque, construire ton site puis le faire grandir et développer ton entreprise sur pour pas un rond.