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

/

Article Contact Form 7

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.

Nous allons personnaliser le formulaire standard de Contact Form 7

formulaire contact form 7 standard

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

formulaire contact form 7 amelioré

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

Crée ton formulaire avec Contact Form 7

Crée ton formulaire avec Contact Form 7

Installe l’extension

Tu te rends dans Extensions puis Ajouter.

wordpress menu ajout d'une extension

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

installer contact form 7

Tu disposes désormais d’un menu Contact.

menu contact form 7

Tu supprimes le formulaire de démonstration.

supprimer le formulaire de démonstration

Crée ton premier formulaire

Tu ajoutes un formulaire.

ajouter formulaire contact form 7

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).

nom formulaire

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

formulaire contact form 7 amelioré

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.

remplacer le code standard

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.

extension simple css

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

menu 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.

code css contact form 7

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

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

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

menu email

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.

destinataire

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

copie cachée du message

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.

objet de l'e-mail

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

corps du message

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.

message d'un envoi réussi

Les suivants sont des messages d’erreurs.

message d'erreur champ obligatoire

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. ».

personnaliser les messages d'erreurs

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.

personnalisation de l'email de réponse

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.

champs personnalisation disponibles

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

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.

bloc gutenberg contact form 7

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

sélection formulaire

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

short code formulaire Contact Form 7

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

vérifier formulaire avant publication

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.

recharger une 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

menu widgets

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

éléments 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

Ajoute des champs supplémentaires à ton formulaire contact form 7

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.

cham obligatoire

Change l’intitulé d’un champ

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

personnalise le texte

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.

champ pré-rempli

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

placeholder

Insère de nouvelles lignes

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

emplacement ajout

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

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

Une ligne avec deux colonnes

champ texte 2 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

champ 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)

cf7 cases à cocher
<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)

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

Ajoute une liste déroulante

cf7 liste déroulante
<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

cf7 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

cf7 joindre 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.

onglet fichier
générateur de balise fichier

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].

changer -taille champ

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

zone de texte ajustable

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.

choix du destinataire

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

Personnalise le design de ton formulaire avec les css

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

comparaison avant/après css

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

css couleurs 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

marges 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

taille étiquettes 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

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

css mise en forme des champs de contact form 7

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

champ 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é

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

bouton mobile 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

change couleur messages d'erreur cf7

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.

flamingo messages entrants

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

messages sauvegardés

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

détails du message

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

déclarer le message en spam

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

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

menu carnet adresses flamingo

Il regroupe les messages par contact.

carnet d'adresses flamingo

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.

sauvegarder acceptation rgpd

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.

quiz contre spam cf7

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.

contact form 7 honeypot

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.
paramètres de Google recaptcha

Tu obtiens tes clés d’activation.

clés captcha google

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

intégration captcha dans WordPress

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.

logo recaptcha

Redirige vers une page de vente

Tu installes l’extension Redirection for Contact Form 7.

redirection contact form 7

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

page atterrissage

Connecte Mailchimp

Tu installes l’extension Contact Form 7 For Mailchimp.

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.

profile

Extras > API keys

Mailchimp menu clé api

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

clé api

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

choix liste

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

champ email

et éventuellement le nom du souscripteur.

champ souscripteur

Tu enregistres pour finaliser.

enregistrer

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

7 conseils pour un formulaire efficace

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.

signature de Jean du site pour pas un rond

Les articles susceptibles de t’intéresser :

Retrouve tous les articles pour Créer seul ton site

bannière pour l'inscription à la newsletter
portrait jean

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.

Jean

contact form 7

113 réponses à “WordPress : Crée et personnalise ton formulaire de contact avec Contact form 7”

  1. Bonjour,
    J’ai construit un formulaire d’inscription simple avec CF7 (Nom, e-mail et identifiant) après soumission l’utilisateur est dirigé vers un formulaire afin de compléter son profil .
    J’aimerai qu’au moins ces trois paramètres soient déjà pré rempli dans le formulaire profil.
    Une extension peut être ?

    Cordialement

    • Je sais qu’il existe des extensions pour réaliser des formulaires CF7 en plusieurs étapes. Cela devrait répondre à ton besoin.

  2. Salut Jean,

    J’ai copié/collé tes deux codes ( css et html) et sur mon mobile le formulaire apparaît avec 3 anomalies d’affichage comme tu peux le voir sur la capture d’écran jointe : https://ibb.co/c6ykwyD
    Les labels « nom, email et objet » sont placés avant le champs et non au-dessus.

    J’ai eu l’impression qu’il manquait une balise mais en ajoutant ceci ça n’a pas fonctionné. Je planche sur la problématique depuis des heures, du coup j’ai besoin de tes lumières pour résoudre cette anomalie !

    Merci à toi.
    Gilles

  3. Merci jean pour cet article qui m’a beaucoup aidée, moi qui ne suis pas du tout une spécialiste en la matière! J’ai maintenant un super formulaire de contact qui fonctionne 🙂
    Bravo pour ta capacité à vulgariser pour les amateurs comme moi.
    Au plaisir de suivre tes prochains articles 🙂

    • Bonjour Monique,

      Je suis heureux que cet article t’ai aidé pour concevoir ton formulaire.
      Ces retours me motivent pour poursuivre.

      Excellente journée,
      Jean

  4. Bonjour, merci pour cet article!
    J’ai un problème d’affichage qui n’avait pas eu lieu jusqu’à maintenant et je ne sais pas quoi faire pour que cela redevienne comme avant.

    Mon formulaire s’affiche correctement lors de la modification cependant lors de la visite du site il se « recroqueville » et rien n’est plus lisible, que faire?

    • Bonjour Angel,

      Si ton formulaire s’affiche parfaitement dans ton administration WordPress et que son comportement se modifie à la publication, cela doit probablement être les éléments de ton thème qui interfèrent.

      Le plus simple est de tester cette solution pour ton formulaire et de voir le résultat si tu n’as pas besoin de fonctionnalités avancées de CF7 : https://www.pourpasunrond.fr/flo-forms/

      Excellente journée,
      Jean

    • Bonsoir Christine,

      Je te remercie de ton gentil commentaire concernant mon article sur Contact Form 7.
      Cela me fait plaisir si j’ai pu t’aider.

      Excellente soirée,
      Jean

  5. Bonjour Jean,
    Tout d’abord, merci beaucoup pour le généreux partage de vos connaissances qui sont d’un grand secours ^^ Il reste cependant un petit obstacle que je peine à franchir seule : les étiquettes des champs sur une seule colonne n’occupent pas la pleine largeur de mon encadré et je ne m’explique pas pourquoi. Comment puis-je déterminer la largeur des différentes colonne ainsi que leur espacement horizontal (si je peux !).
    Je vous remercie d’avance pour votre aide.

    • Bonjour Pauline,

      L’apparence des étiquettes est gérée par les CSS de « form.wpcf7-form label ».
      Je n’ai pas spécifié de restriction de largeur. Cependant, la taille de police « font-size: 0.9em » ne correspond peut-être pas à ton design.

      Excellente journée,
      Jean

      • Bonjour Jean,
        Non, la taille du texte des étiquettes n’influe pas sur la largeur de celles-ci…
        Tant pis, je laisse comme ça.
        Merci quand-même ^^

  6. Bonjour,

    super tutoriel, tu m’as bien aidé!!! merci beaucoup!

    j’ai une chose que je n’arrive pas à faire, c’est que la personne saisisse une adresse mail conforme, j’ai essayé en mettant « xxx@yahoo.zzz » et ça marche… mais du coup je n’ai pas l’adresse mail de celui qui l’nevoi.

    n’y a t’il pas une solution?
    merci par avance.

    Thomas

    • Bonjour Thomas,

      L’extension « Contact Form 7 Email Validation » vérifiait la validité du domaine indiqué. Ce plugin est abandonné.

      Il existe des solutions pour vérifier les adresses e-mails ensuite mais je ne vois pas comment les intégrer à Contact Form 7.

      Excellente journée,
      Jean

  7. Bonjour,

    Merci pour cet excellent tutoriel.

    Je tente de trouver un moyen de faire un retour à la ligne entre les différentes options à cocher dans une checkbox. Est-ce possible sur Contact Form 7?

    • Bonjour Sébastien,

      À ma connaissance, il n’est pas possible de faire un retour à la ligne entre les différentes options à cocher d’une checkbox. Cependant, il est possible d’appliquer des CSS spécifiques avec des hauteurs de lignes doubles.

      Excellente fin de journée,
      Jean

  8. Bonjour,
    J’ai un site web sur lequel j’utilise des formulaires CF7 avec des affichages de champs conditionnels. Cependant, depuis quelques temps, les champs conditionnels ne sont plus cachés lorsqu’ils respectent la condition. Si je change de thème, là ça fonctionne très bien.

    Que manque-t-il à mon thème pour que cela fonctionne ?

    Merci beaucoup !

    • Bonjour Luc,

      Étant donné que ton formulaire fonctionne avec un autre thème, je me rapprocherais de l’éditeur de ton thème pour voir quelle est la source du blocage. Cette question est largement au-delà de mes connaissances.

      Excellent week-end,
      Jean

  9. Bonjour, merci pour ce super article.
    J’ai un problème par contre avec le bouton « envoyer »
    il n’est pas centré, ni sur tel ni sur PC.
    Pouvez-vous m’aider svp?
    merci d’avance

    • Bonsoir Laure,

      J’ai laissé les alignements par défaut du thème.

      Tu peux tenter d’ajouter le code suivant dans les CSS.
      .wpcf7 input , .wpcf7 label {
      width:100%;
      display:block;
      text-align:center;
      }

      Excellente soirée,
      Jean

      • Bonsoir Jean,

        Ce code a pu centrer correctement les champs du formulaire car je rencontrais également le problème sur PC.

        Par contre, sur mobile il y a une anomalie qui subsiste: les champs de remplissage débordent sur la droite et le titre du formulaire n’est pas centré (il est collé à gauche)

        Peut-être faudrait-il spécifier une longueur à ceux-ci ? Je ne sais pas…
        Merci

        • Bonsoir Gilles,

          Le code centre les éléments du formulaire. Tu dois ajouter le titre :
          .wpcf7 input , .wpcf7 label, form.wpcf7-form>h3 {
          width:100%;
          display:block;
          text-align:center;
          }

          Cela peut être une solution de restreindre la taille du formulaire. Sinon, tu peux essayer d’ajouter un espace avec padding sur mobiles :
          @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*/
          }
          }

          Excellente soirée,
          Jean

          • Salut Jean !

            J’ai testé ton code sur mobile mais malheureusement le problème subsiste et j’ai oublié de préciser dans mon message initial que c’est exclusivement sur le champs de message que le problème existe. Lui seul sort de son bloc.
            Je te joins la capture d’écran sur mobile: https://ibb.co/ckYWMcD

          • Bonjour Gilles,

            Tu peux récupérer l’identifiant précis de cet élément et ajouter une largeur spécifique.
            Une autre option sera d’ajouter une marge supplémentaire sur mobiles.

            Excellente journée,
            Jean

  10. Bonjour,
    merci beaucoup pour ce tuto.
    Je voulais savoir s’il était possible de changer les paramètres (couleurs , style, ..) sur plusieurs formulaires différents.
    Parce que pour l’instant si je change par exemple le fond sur un formulaire, tous les formulaires changent de fond or j’aimerai que chaque formulaire ai ses propres couleurs.
    Merci

    • Bonjour Franck,

      Tu peux personnaliser tes formulaires indépendamment.

      Tu définis un nom spécifique supplémentaire dans ton formulaire :
      Par exemple :

      Tu dupliques les lignes pour lesquelles tu souhaites appliquer un format spécifique dans les CSS en ajoutant ton nouveau nom. Si tu veux un fond jaune pour l’accueil :

      La partie commune reste identique :
      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 */
      }
      Tu ajoutes en dessous
      form.wpcf7-form > .cf7respaccueil {
      background: #ffff00; /* Couleur du fond du formulaire */
      }

      Excellente journée,
      Jean

  11. Merci pour le partage, c’est énorme!

    J’aimerais savoir s’il est possible d’intégrer le formulaire via un bouton, c’est-à-dire de manière à ce qu’il n’apparaissent pas sur la page ou en widget mais qu’il faille cliquer dessus pour le faire apparaître?
    J’aimerais également savoir s’il est possible d’intégrer un document (fiche de renseignement) ou s’il vaut l’intégrer directement au formulaire?

    Merci par avance

    • Bonjour Ilham,

      Il existe des extensions pour intégrer Contact Form 7 dans un popup. WPB Popup for Contact Form 7 semble correspondre à ta demande mais je ne l’ai pas testé.

      Tu peux mettre à disposition un document en amont de ton formulaire que tes visiteurs joignent complété dans le formulaire.

      Excellente journée,
      Jean

  12. Hello Jean,

    Un grand merci pour cet article, j’ai pu retravailler le design de mon formulaire aux nouvelles couleurs de ma charte graphique et ENFIN réussi à avoir 2 colonnes au lieu d’une pour les nom et prénom.

    Explications toujours très claires même quand on ne maîtrise pas le sujet. 🙏

    • Hello Valérie,

      Je suis heureux que tu aies personnalisé ton formulaire comme tu le souhaitais.

      Excellente journée,
      Jean

  13. Bonjour,

    Merci pour ce super tuto, très accessible.

    Petit soucis l’extension material-design-for-contact-form-7 est fermé depuis février 2022… Du coup impossible de paramétrer l’ensemble.

    Auriez vous une parade ?

    Merci.

    • Bonjour Robin,

      Je n’ai malheureusement pas de parade à la disparition de cette extension.
      Je vais supprimer cette partie du tutoriel.

      Excellente journée,
      Jean

  14. Je vous remercie pour votre aide et vous félicite pour cette article complet.
    Je rencontre un problème lorsque j’utilise les les conditions avec l’extension  »
    Conditional Fields for Contact Form 7  » j’ai uniquement la première condiotion qui s’affiche mais pas les suivantes.
    Exemple : radio : « bleu » « jaune » « vert »
    afficher groupe-1 si bleu
    afficher groupe-2 si jaune
    afficher groupe-3 si vert

    Mais le contact affiche unique le bleu.

    • Bonjour,

      Je n’ai pas essayé les champs conditionnels sur Contact Form 7.
      J’espère que tu trouveras la solution dans les tutos.

      Excellente journée,
      Jean

  15. Bonjour Jean,

    Merci pour ce tutoriel qui m’aide énormément pour la création d’un site web !
    Cependant lorsque je remplis les champs, l’onglet « email » ainsi que « téléphone » se décalent, hors j’ai correctement copié vos lignes de code

    • Bonjour Léa,

      Je ne vois rien dans le code qui pourrait expliquer le décalage.
      Il s’agit peut-être d’une configuration CSS liée à ton thème.

      Excellente journée,
      Jean

  16. Bonjour Jean.
    Merci pour ton site qui en apprend beaucoup !

    Pour ma part, le formulaire original me plait bien. Je souhaiterais juste changer la taille de police. Quel code faut-il insérer et où excatement l’insérer dans le champ formulaire du plugin Contact-Form 7 ?

    Encore merci et excellente journée à toi

  17. Bonjour Jean
    merci pour ce tuto.

    Toutefois, je souhaite intégrer un formulaire de contact à une landing page. Jusque là rien de compliqué!
    Où cela se complique pour moi, c’est quand je souhaite:
    1- ajouter mon adresse mail (différente de celle de mon site.
    2- ajouter un fichier ( ebook.pdf) en autorépondeur

    can you help me, please?
    David

    • Bonjour David,

      Tu indiques l’e-mail de retour dans Pour de l’onglet E-mail.

      Concernant l’ajout d’un PDF, le plus simple est de la déposer sur ton serveur ou sur un espace de partage comme Google Drive. Cela allègera le message et évitera les filtres antispam. Tu indiques le lien dans le message.

      Magnifique journée,
      Jean

  18. Bonjour,

    Il manque des dans ton code html du formulaire :

    [md-textarea label= »Votre message »][textarea* your-message][/md-textarea]

    il faut en rajouter un pour clôturer la rangé.

  19. Au top ce tuto, un grand merci !
    Il présente la grande qualité d’être hyper complet et de traiter de toutes les problématiques (mise en forme, antispam etc)
    Grâce à l’article, j’ai pu faire 2 beaux formulaires responsive sur le site que je viens de développer. Une seule petite chose me gêne : la coche (pour la case d’ »acceptance ») apparaît blanche sur fond gris, au lieu de noire, et du coup est à peine visible…
    Si quelqu’un a la solution pour la mettre de la même couleur que la police…

  20. Vraiment, merci beaucoup pour cet article détaillé ! Ça change des formulaires classiques.
    Par contre, mon bloc contact sur ma page d’accueil disparaît à chaque fois que je rafraîchis ma page… Du coup, j’ai un bloc vide. Quand je rafraichis, je vois bien le formulaire le temps du chargement, mais il disparaît tout de suite…
    Une idée du problème ? Merci

    • Bonjour Erika,

      Je ne vois pas de raison évidente de la disparition du formulaire s’il s’est correctement affiché.

      Si le fait de vider le cache résout temporairement le problème, il s’agit peut-être de la compression ou de la minification des CSS et JV du site d’une extension comme WP Rocket ou WP-Optimize.

      Magnifique journée,
      Jean

  21. Merci pour cet excellent tuto!
    Un seul petit soucis, notre logo et nos références ont basculés sous le formulaire et en petit, alors que ces visuels étaient placés en face du formulaire. Je ne sais pas les remettre à leur position initiale…
    Manuel

    • Bonjour Manuel,

      Tu peux essayer de mettre au tout début du code de ton formulaire et à la fin.

      Excellente journée,
      Jean

    • Bonjour Nadège,

      Je te remercie de ton commentaire qui m’encourage à poursuivre.
      Je suis heureux si mon tuto t’a aidé.

      Magnifique journée,
      Jean

  22. Bonjour, super tuto néanmoins j’ai rencontré un souci d’affichage.
    J’ai créé une ligne avec 2 colonnes. En mettant ce formulaire dans ma 2ème colonne, mon footer ne prenais plus 100% de mon écran, il devenait héritier du formulaire.
    Pour résoudre ce problème j’ai du insérer des a chaque fin de commande

    .
    Exemple avec ton cas :

    [md-quiz label= » » outlined= »yes » help= »Cette question protège du spam »][quiz quiz-1234 « Que font 7+2 ?|9 »][/md-quiz]
    [md-accept label= » »][acceptance optional] J’accepte que mon adresse e-mail soit stockée pour apporter une réponse [/acceptance][/md-accept]

    [md-submit][submit « J’envoie le message »][/md-submit]

    [/md-form]

    Voila si cela peut aider, en tout cas super boulot

  23. Les couleurs que l’on peut configurer dans Material Design Form n’affecte pas les couleurs des cases à cocher ni du bouton envoyer de votre formulaire de contact. Est ce normal? Auriez-vous le codes CSS pour changer la couleur des case à cocher qui se mettent en bleu dans votre exemple et celui qui permet de mettre les contours des champs dans une autre couleur que votre bleu ?
    Merci pour ce tuto merveilleux!

      • Bonsoir Jean,
        Merci pour votre réponse. Je m’en suis douté. J’ai une autre question. Je souhaiterais mettre un lien hyperlink sur Politique de confidentialité qui dirige vers ma page du même nom. Comment dois je faire ?

        [md-quiz label= » » outlined= »yes » help= »Cette question protège du spam »][quiz quiz-1234 « Que font 7+2 ?|9 »][/md-quiz]
        [md-accept label= » »][acceptance optional] En soumettant ce formulaire, j’accepte que les informations saisies soient exploitées dans le cadre de la relation commerciale qui peut en découler et je reconnais avoir pris connaissance de la Politique de confidentialité. [/acceptance][/md-accept]

        Merci

  24. Bravo, félicitation pour ce tuto extrêmement bien fait et de l’avoir aimablement partagé !

    Je n’ai pas trouvé la possibilité d’avoir un tableau récapitulatif des entrées du formulaire dans le back office avec Flamingo pour retrouver tous les champs renseignés et notamment la fameuse case de consentement RGPD, c’est dommage.

    • Bonjour Yann,

      L’extension Flamingo a été pensée pour ne pas perdre de messages.
      Elle ne recueille effectivement pas les accords de consentements. Je ne connais pas de plug-in qui réalise cette action.

      Magnifique soirée,
      Jean

  25. Bonjour et merci. Au top le tuto.
    Néanmoins, je rencontre un problème ou deux .
    Effectivement, sur le site en construction: https://dawn-events.com , lorsque je rempli les champs j’ai une superposition avec les libellées et la fonction envoie ne fonctionne pas.
    Une idée?

    Merci

    • Bonjour,

      La superposition du champ contre le spam est lié au fait que le texte ne remonte pas. Je ne vois ce qui pourrait bloquer cette fonction.

      Je pense que tu as résolu ton problème d’envoi qui est le plus souvent lié à un problème de connexion avec un service tiers.

      Magnifique journée,
      Jean

  26. Bonjour,

    Super tuto pour un beau formulaire merci pour cette aide précieuse.

    J’ai de mon coté réussi à modifier le background de la case à cocher uniquement quand la case est cochée avec le code suivant :

    #cf7md-form .mdc-text-field .mdc-line-ripple, #cf7md-form .mdc-select:not(.mdc-select–disabled) .mdc-select__native-control:focus ~ .mdc-line-ripple, #cf7md-form .mdc-checkbox .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background, #cf7md-form .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background, #cf7md-form .mdc-checkbox::before, #cf7md-form .mdc-checkbox::after, #cf7md-form .mdc-radio::before, #cf7md-form .mdc-radio::after, #cf7md-form .mdc-switch.mdc-switch–checked .mdc-switch__track, #cf7md-form .mdc-switch.mdc-switch–checked .mdc-switch__thumb, #cf7md-form .mdc-switch.mdc-switch–checked .mdc-switch__thumb-underlay::before, #cf7md-form .mdc-switch.mdc-switch–checked .mdc-switch__thumb-underlay::after, #cf7md-form .mdc-switch.mdc-switch–checked .mdc-switch__thumb, #cf7md-form .mdc-switch.mdc-switch–checked .mdc-switch__thumb-underlay::before, #cf7md-form .mdc-switch.mdc-switch–checked .mdc-switch__thumb-underlay::after, #cf7md-form .mdc-switch:not(.mdc-switch–checked) .mdc-switch__thumb-underlay::before, #cf7md-form .mdc-switch:not(.mdc-switch–checked) .mdc-switch__thumb-underlay::after {
    background-color: #cd1126;
    }

    Par contre je bloque toujours pour la modification de la couleur des bordures après sélection du champ, qui reste bleu violet. Si quelqu’un a trouvé une solution depuis je suis preneur 🙂

    Merci.

    Umberto

  27. Bonjour Jean,

    Je débute dans l’utilisation de WordPress et je tiens à vous remercier car votre article m’a été d’un grand secours ! Cependant, un problème subsiste et, malgré de nombreuses recherches, je ne trouve toujours pas de solution.

    En effet, mon formulaire n’est pas centré sur ma page, il est constamment collé sur la gauche de cette dernière et ce, malgré les nombreuses façon que j’ai essayé pour le changer.

    Avez-vous une idée de ce qu’il se passe ?

    Merci d’avance !

  28. Bonjour et merci pour cet article. Je voudrais savoir si il était possible de récupérer le contenu des champs du formulaire pour créer un nouvel article à valider avant sa publication? Existe-t-il une extension ou autre?
    Arnaud P

    • Bonjour Arnaud,

      Je ne vois pas d’extension qui permettent de publier depuis un formulaire. Tu peux ouvrir des comptes WordPress avec des droits restreints pour valider avant publication.

      Magnifique WE,
      Jean

  29. Bonjour et merci pour ce tuto !
    Malheureusement, l’email que je reçois ne contient que la réponse du champ textaera. Je suis novice, j’imagine que j’ai loupé quelque chose d’évident ?
    Merci d’avance

    • Bonsoir Simon,

      Dans l’onglet E-mail > Corps du message, tu retrouves les éléments transmis entre crochets. Tu peux en ajouter tes autres champs qui sont listés en haut.

      Belle soirée,
      Jean

  30. Bonjour,
    Le code préconisé pour les cases à cocher (choix unique) provoque une page blanche sur le formulaire.
    Le choix multiple fonctionne très bien.
    Merci pour ce tuto clair et précis.
    Xavier
    (thème utilisé Syndney)

    • Bonsoir Xavier,

      Je te remercie de ton retour. Je dois avouer ne pas voir quelle serait la source.

      Je te souhaite une magnifique soirée,
      Jean

      • Je souhaitais disposer d’un choix exclusif avec les cases à cocher et il semble que c’est le code
        « radio radio-1234 default:1 … » qui pose problème. C’est la seule différence avec le code du dessus (choix multiple) qui fonctionne parfaitement.
        bonne soirée

  31. Bonjour,

    je souhaiterais configurer deux champs date pour lequel la date de départ est strictement supérieur (+1jr) à la date d »arrivée.

    Est il possible de le faire ?

    je souhaiterais generer un numero CHIFFRE et LETTRE à chaque email?

    • Bonjour Patrice,

      J’imagine qu’il est possible d’intégrer des champs conditionnels dans Contact Form 7 mais cela dépasse mon champ de compétences.

      Je ne vois pas comment générer un matricule unique qui identifie les e-mails.

      Je te souhaite une magnifique journée,
      Jean

  32. Bonjour Jean !

    Non de Zeus 😉 encore un super tuto. Merci !
    Une petite question. Peut-on utiliser redirection for CF7, afin de renvoyer un robot spammeur vers une fausse page de confirmation, malgré que ce dernier est rempli le champ vide de Honeypot for CF7 ? Je suis nul en code, mais je vois que l’on peut rajouter un script via redirection for CF7.
    Peut-être avez vous une idée ?

    Bonne continuation
    Anthony

    • Bonjour Anthony,

      Ton idée est intéressante mais je ne vois pas comment la mettre en place.

      Pour lutter activement contre le Spam, tu peux essayer WP Cerber qui filtre en entrée.

      Belle journée,
      Jean

  33. Bonjour,

    Il y a un problème pour la case « confirmation »

    [acceptance acceptance-567 optional] J’accepte que mon adresse e-mail soit stockée pour répondre au message [/acceptance]

    J’ai bien mis qu’il était obligatoire de la cocher mais si la personne ne la coche pas, le message est envoyé quand même.

    Comment remédier au problème ?

    Merci pour la réponse.

    Michel

    • Bonjour Moussa,

      Tu ajoutes le code de la pièce jointe en modifiant le chiffre derrière file-1234 en file-1235 par exemple.

      Belle soirée,
      Jean

  34. Merci pour votre article : pour un thème foncé, je ne comprends pas ce qu’il faut remplacer. Pouvez-vous m’éclairer ?

    • Bonjour Madeleine,

      Je comprends ta confusion le code ne s’affiche pas dans l’article.
      J’ai rectifié cette erreur.

      Tu remplaces [md-form spacing= »tight »] par [md-form theme= »dark »] en haut des instructions du formulaire auquel tu as ajouté le code Material Design.

      Je te souhaite une merveilleuse journée.
      Jean

  35. C’est un super tutoriel ! Bravo, il m’a bien servi pour faire mon formulaire, cependant dès que je met le formulaire en place mon header et mon footer se retouve rétréci au lieu d’avoir une pleine largeur, bizarrement quand je mets d’autres formulaire (sans utiliser material design) je n’ai pas de soucis (ormi une formulaire bien moche puisque d’origine).

    Peut-être auriez-vous la solution ?
    Bravo encore pour ce tuto !

    • Bonjour Alexandre,

      Désolé, je dois avouer n’avoir aucune idée pourquoi Material Design interfère avec le design du site.

      Belle fin de journée,
      Jean

  36. Merci, moi qui ne sais pas coder, j’ai tout suivi et nickel ! juste j’ai pas compris où je rajoute le css pour personnaliser les polices « PERSONNALISE LES COULEURS ET POLICES DE TON FORMULAIRE », moi qui débute : à quel endroit je modifie ça ? dans le css additionnel ? dans personnaliser ?
    Merci d’avance pour ta réponse. Cordialement.

    • Bonjour Anne-Sophie,

      Les CSS additionnels sont présents à l’emplacement suivant :
      Apparence > Personnaliser > CSS additionnel

      Il faut sauvegarder ton site avant de réaliser une modification de ton code. C’est très peu probable mais mieux vaut être prudent.

      Belle journée,
      Jean

  37. Bonjour Alexis,

    Je suis heureux que tu aies résolu ton problème d’affichage.

    Belle journée,
    Jean

    • Bonjour Alexis,

      Je ne peux accéder au site et voir ce dont tu me parles.

      Je dirais que tu as forcé une largeur pour ton formulaire qui bloque le responsive.

      Belle soirée,
      Jean

  38. Bonjour Anne-Claire,

    Je te remercie de ton commentaire.
    Les formulaires sont faits pour être adaptés à tes couleurs et répondre à tes besoins.

    Belle journée,
    Jean

  39. Merci! Comme d’habitude, explication hyper claire qui m’a permis de paramétrer mon bloc formulaire. J’ai adapté la fin mais ça a l’air de fonctionner. Merci beaucoup.

  40. Bonsoir Jean-Guillaume,

    Je ne vois pas ce qui cause la disparition des intitulés dans ton formulaire.
    Tu as utilisé Contact Form 7 et Material Design ?
    Quel est ton thème ?
    Ton site avec la page du formulaire est visible ?

    A bientôt,
    Jean

  41. Merci pour le tuto très intéressant
    Le questionnaire de contact est ok, par contre les champs « pré remplis » (ex. prénom) n’apparaissent pas.
    Les rectangles sont blancs et vides
    Une idée ?
    Merci !

  42. Bonjour, je me permets de vous écrire car je viens de créer un site web et j’ai installé contact form 7, ce dernier ne fonctionne pas correctement car je ne reçois pas mes mails or qu’il est bien écrit que ces derniers sont bien envoyé. Pourriez-vous m’aider s’il vous plaît ?

  43. Bonjour,
    1000 mercis pour ce guide ultra détaillé !
    Lorsque j’intègre mon formulaire à une page, tout est parfait, par contre, lorsque je l’intègre à un Popup, le pop-up en question s’affiche un quart de seconde et se ferme.
    J’utilise le plugin Popup maker, je ne vois pas d’où peut venir le problème, une idée ?

    Merci encore 🙂
    Bonne fin de journée

    • Bonjour Sophie,

      Je suis allé voir Popup maker que je ne connaissais pas et ai réalisé un test.
      Je n’ai pas réussi à reproduire le comportement que tu décris.

      Cette extension propose des options payantes comme les intégrations avec Mailchimp et Aweber. Si tu as réalisé une intégration directement vers une solution d’e-mailing, tu es peut être bloquée.

      Une alternative serait d’utiliser un bouton dans le pop-up qui redirige vers ton formulaire.

      Si tu souhaites une intégration avec Mailchimp, je te suggère de regarder Yeloni qui simplifie bien les choses : https://www.pourpasunrond.fr/popup-sortie-wordpress/

      A bientôt,
      Jean

  44. Merci pour cet article très détaillé.

    J’ai cependant une question : comment faites vous pour rendre la case « captcha » avec la petite addition identique aux autres.
    J’ai essayé plusieurs variation mais sans succès.
    En regardant la doc, le bloc a utiliser est celui ci [md-quiz label=…]
    Mais il ne produit pas le même résultat que les autres blocs utilisant le bloc : [md-textarea label=…]
    Comment avez vous fait ?!

    Merci d’avance pour vos lumières !

    • Bonjour Stéphane,

      Je pense que tu fais allusion à l’encadré du champ. Il est obtenu avec outlined= »yes ».
      La ligne est ainsi [md-quiz label= » » outlined= »yes » help= »Cette question protège du spam »][quiz quiz-1234 « Que font 7+2 ?|9 »][/md-quiz].

      A bientôt,
      Jean

  45. Merci pour cet article très complet et, super intéressant. J’ai pu créer un formulaire tel que je le voulais !
    Un petit problème à signaler cependant : sous WP 5.2.3 / thème Ocean / Elementor, la création du formulaire a bloqué l’animation fade in down d’un visuel qui jusque-là fonctionnait très bien. Le visuel a tout simplement disparu de la page (tout en apparaissant encore avec l’animation dans Elementor) > Incompréhensible. Je l’ai donc rendu statique et il a réapparu sur la page.
    Mystère…

    • Bonjour,

      Je n’ai pas remarqué de conflit entre Material Design et des fonctionnalités d’Elementor. Merci pour ce retour. Je vais ajouter ce point de vigilance dans l’article.

      A bientôt,
      Jean

Répondre à Michelle Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *