Utilisé par plus de 5 millions de sites, Contact Form 7 est l’extension gratuite de WordPress idéale pour créer ton formulaire de contact.
Je t’accompagne pas à pas dans ce tutoriel. Chaque étape est illustrée.
Tu intègres facilement ton formulaire où tu le souhaites :
- ta page de contact
- ta page d’accueil
- ton pied de page…
Cela ne prends que quelques minutes pour un formulaire simple. Tu n’auras qu’à réaliser un copier-coller.
Honnêtement, la version standard est moche et encombrante. Je te dévoile comment disposer d’une version esthétique avec des astuces de personnalisation.
Je suis passé de ce formulaire qui faisait le travail
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 88 formulaire d'origine](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/formulaire-origine.png)
à celui-ci que je te propose d’intégrer sur ton site.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 89 formulaire Contact Form 7 attractif](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/formulaire-attractif.png)
Nous verrons également comment le protéger du spam qui sinon représente une vraie plaie.
Si tu es client Mailchimp, je te montre comment connecter facilement ton formulaire.
Sommaire
Cet article prend environ 14 minutes à lire. Si tu n’as pas le temps, tu peux l’épingler sur Pinterest pour le lire plus tard.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 90 visuel Pinterest de l'article Comment créer gratuitement un beau formulaire de contact avec Contact Form 7](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/contact-form-7-pinterest-a.png)
Débutant
Avant de nous lancer dans l’installation de l’extension sous WordPress, je te présente synthétiquement des 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 le 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.
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.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 92 wordpress menu ajout d'une extension](https://www.pourpasunrond.fr/wp-content/uploads/2019/08/wordpress-menu-ajout-extension.png)
Tu recherches Contact form 7.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 93 rechercher contact form 7](https://www.pourpasunrond.fr/wp-content/uploads/2019/08/rechercher-contact-form-7.png)
Tu l’installes
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 94 installer contact form 7](https://www.pourpasunrond.fr/wp-content/uploads/2019/08/installer-contact-form-7.png)
et actives l’extension.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 95 activer contact form 7](https://www.pourpasunrond.fr/wp-content/uploads/2019/08/activer-extension.png)
Pour gagner du temps, tu recommences la même opération avec Material Design for Contact Form 7.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 96 extension Material Design for Contact Form 7](https://www.pourpasunrond.fr/wp-content/uploads/2019/08/material-design.png)
Tu disposes désormais d’un menu Contact.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 97 menu contact](https://www.pourpasunrond.fr/wp-content/uploads/2019/08/menu-contact.png)
Tu peux supprimer le formulaire de démonstration.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 98 supprimer le formulaire de démonstration](https://www.pourpasunrond.fr/wp-content/uploads/2019/08/supprimer-formulaire-demonstration.png)
Crée ton premier formulaire
Tu cliques sur créer un formulaire.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 99 créer un formulaire](https://www.pourpasunrond.fr/wp-content/uploads/2019/08/creer-formulaire.png)
Tu nommes ton formulaire.
Un nom descriptif qui indique où tu vas l’insérer te permettra de le retrouver plus facilement par la suite (par exemple : Formulaire page d’accueil).
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 100 nom formulaire](https://www.pourpasunrond.fr/wp-content/uploads/2019/08/nom-formulaire.png)
Voici le formulaire standard.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 101 formulaire standard](https://www.pourpasunrond.fr/wp-content/uploads/2019/08/formulaire-standard.png)
En dehors de ne pas être super attractif, il lui manque surtout la case RGPD obligatoire en Europe.
Je te propose le formulaire suivant.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 102 formulaire attractif](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/formulaire-attractif.png)
Si celui-ci te convient, tu copies le code ci-dessous en supprimant la première ligne ( <! — ) et la dernière ligne ( –>) .
<! --
[md-form spacing="tight"]
<div id="responsive-form" class="clearfix">
<div class="form-row">
<div class="column-half">[md-text label="Prénom" outlined="yes"][text* Prenom][/md-text]</div>
<div class="column-half">[md-text label="Nom" outlined="yes"][text* your-name akismet:author][/md-text]</div>
</div>
<div class="form-row">
<div class="column-half">[md-text label="E-mail" outlined="yes"][email* your-email akismet:author_email][/md-text]</div>
<div class="column-half">[md-text label="Téléphone" outlined="yes"][tel Tel][/md-text]</div>
</div>
<div class="form-row">
<div class="column-full">[md-text label="Objet" outlined="yes"][text* your-subject][/md-text]</div>
</div>
<div class="form-row">
<div class="column-full">[md-textarea label="Votre message"][textarea* your-message][/md-textarea]
</div>
<div class="form-row">
<div class="column-half">[md-quiz label="" outlined="yes" help="Cette question protège du spam"][quiz quiz-1234 "Que font 7+2 ?|9"][/md-quiz]</div>
<div class="column-half">[md-accept label=""][acceptance optional] J'accepte que mon adresse e-mail soit stockée pour apporter une réponse [/acceptance][/md-accept]
</div>
<div class="form-row">
<div class="column-full">[md-submit][submit "J'envoie le message"][/md-submit]
</div>
</div><!--fin des instructions pour deux colonnes-->
[/md-form]
-->
et remplaces le code présent à cet emplacement puis enregistres.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 103 remplacer le code standard](https://www.pourpasunrond.fr/wp-content/uploads/2019/08/remplacer-code-standard.png)
Ajoute le code pour l’affichage sur deux colonnes
J’ai utilisé comme base de travail cet excellent article : Creating a responsive two column form using Contact form 7. Il crée deux colonnes pour certains champs qui passent sur une colonne en version mobile.
Tu vas ajouter du code à ton thème pour lui indiquer que tu souhaites modifier la mise en page du formulaire. Tu vas voir rien de sorcier.
Dans le menu de gauche : Apparence > Personnaliser
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 104 menu personnaliser le thème](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/personnaliser-theme.png)
Tu sélectionnes le menu de l’extension Material Design for Contact Form 7
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 105 menu extension material design for contact form 7](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/menu-material-design.png)
Tu copies le code ci-dessous,
#responsive-form{
max-width:600px /* Tu peux modifier la largeur du formulaire ici*/;
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-half, .column-full{
float: left;
position: relative;
padding: 0.3em;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
/*Instructions pour le responsive*/
@media only screen and (min-width: 48em) {
.column-half{
width: 50%;
}
}
tu le colles en bas dans CSS Personnalisé puis tu publies.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 106 intégrer css pour le formulaire](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/integrer-css.png)
Si tu as des besoins plus précis, je te détaille les différents champs de personnalisation dans la prochaine section.
Sinon, tu passes directement à l’étape de configuration de l’e-mail.
Modifie et ajoute des champs à ton formulaire
Tu vas ajouter ou modifier des éléments du formulaire réalisé au chapitre précédent.
Ajoute de nouvelles lignes
Si tu souhaites disposer de plus de champs de texte, tu copies-colles les instructions suivantes à l’emplacement désiré.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 107 insérer de nouvelles lignes](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/inserer-nouvelles-lignes.png)
Une ligne avec deux éléments :
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 108 2 champs](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/2-champs.png)
<div class="form-row">
<div class="column-half">[md-text label="TEXTE A AFFICHER A GAUCHE" outlined="yes"][text* NOM-CHAMP-GAUCHE][/md-text]</div>
<div class="column-half">[md-text label="TEXTE A AFFICHER A DROITE" outlined="yes"][text* NOM-CHAMP-DROITE][/md-text]</div>
</div>
Une ligne avec un seul champ :
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 109 champ unique](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/champ-unique.png)
<div class="form-row">
<div class="column-full">[md-text label="TEXTE A AFFICHER" outlined="yes"][text NOM-CHAMP][/md-text]</div>
</div>
Tu remplaces ensuite le texte en majuscule.
Il existe d’autres éléments que tu peux intégrer.
Insère des cases à cocher
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 110 cases à cocher](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/cases-cocher.png)
Tu peux avoir un modèle qui accepte de multiples choix
<div class="form-row">
<div class="column-full">[md-checkbox label="Échantillons souhaités" display="columns-2" outlined="yes"][checkbox checkbox-1234 "bleu" "vert" "rouge" "jaune" "orange" "noir"][/md-checkbox]
</div>
ou une seule option acceptée.
<div class="form-row">
<div class="column-full">[md-checkbox label="Échantillon souhaité" display="columns-2" outlined="yes"][radio radio-1234 default:1 "bleu" "vert" "rouge" "jaune" "orange" "noir"][/md-checkbox]
</div>
Tu modifies le titre Échantillons souhaités. Les intitulés sont entourés de “” et séparés d’un espace.
Ajoute un menu déroulant
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 111 menu déroulant](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/menu-deroulant.png)
Le code à ajouter :
<div class="form-row">
<div class="column-full">[md-select label="Fonction" outlined="yes"][select menu "RH" "Comptabilité" "Ingénieur" "Autre"]
[/md-select]
</div>
Les menus déroulants sont difficiles à utiliser sur mobile. Tu dois réaliser un test pour valider que ce choix est pertinent pour les utilisateurs.
Intègre un champ date
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 112 champ date](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/date.png)
Le code pour ajouter une date :
<div class="form-row">
<div class="column-full">[md-text label="Date de rendez-vous souhaitée" outlined="yes"][date date-1234][/md-text]</div>
</div>
Donne la possibilité de joindre un fichier
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 113 joindre un fichier](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/joindre-fichier.png)
Ce champ permet de limiter le poids du fichier (en Bytes) et les extensions acceptées (jpg, png, pdf, xls…).
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 114 limitations pour joindre un fichier](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/options-joindre-fichier.png)
J’ai paramétré l’exemple pour un fichier Word ou PDF inférieur à 5 Mo.
<div class="form-row">
<div class="column-full">[md-file label="Transmettez nous votre CV" nofile="Doc, DocX et PDF" btn_text="Joindre un fichier" help="La limite de taille est de 5 Mo."][file file-1234 limit:5242880 filetypes:doc|docx|pdf][/md-file]
</div>
Modifie le caractère obligatoire d’un champ
Un champ est obligatoire s’il comporte une * à la suite de son nom : [email* Votre-email].Ajoute une liste de destinataires
J’ai découvert cette astuce dans l’article Ajoutez un formulaire de contact à votre site avec Contact Form 7 de WPmarmite.
Tu ajoutes le code suivant en haut de formulaire.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 115 code destinataires multiples](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/code-destinataires-multiples.png)
<div class="form-row"><div class="column-full">[md-checkbox label="Service destinataire du message"][checkbox* Destinataire exclusive "Comptabilité | [email protected]" "RH | [email protected]" "Direction | [email protected]"][/md-checkbox]
</div>
Tu intègres les différentes options sous la forme “Service ou personne | email” séparés par un espace en remplacement du texte d’exemple puis tu enregistres. Tu peux également changer l’intitulé du champ : Service destinataire du message.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 116 remplacer destinataires](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/remplacer-destinataires.png)
Dans l’onglet E-mail, tu indiques [Destinataire] dans le champ De.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 117 installer emails destinataires multiples](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/installer-destinataires-multiples-email.png)
Passe sur une version sombre
Si tu as choisi un thème foncè, la version classique ne sera pas approprié. Tu peux basculer sur une version avec le texte en blanc.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 118 formulaire sombre - pour pas un rond](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/formulaire-sombre.png)
Tu remplaces
[md-form spacing="tight"]
par
[md-form theme="dark"]
en haut des instructions du formulaire.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 119 Contact Form 7 passer le texte en blanc](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/passe-texte-blanc.png)
Ajuste la hauteur du pavé du message
Cela ne s’applique que pour les formulaires sans l’extension Material Design qui le réalise automatiquement.
Je trouvais le champ de saisie du message trop massif.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 120 votre message : hauteur classique](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/hauteur-standard-votre-message.png)
Le résultat pour deux lignes en hauteur :
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 121 votre message : hauteur 2 lignes](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/hauteur-2-lignes-votre-message.png)
Pour réduire sa hauteur, j’ai ajouté X2 pour n’afficher que deux lignes en hauteur dans [textarea your-message x2]. Tu peux tester différentes hauteurs.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 122 code hauteur champ de saisi texte](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/code-hauteur-boite.png)
Configure l’e-mail et les messages d’erreurs
Les réglages se situent dans le menu interne de la page.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 123 menu email](https://www.pourpasunrond.fr/wp-content/uploads/2019/08/onglet-email.png)
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.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 124 destinataire](https://www.pourpasunrond.fr/wp-content/uploads/2019/08/destinataire.png)
Tu peux ajouter un e-mail en copie cachée en ajoutant “cc: [email protected]” dans En-têtes additionnelles.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 125 copie cachée du message](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/copie-cachee.png)
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.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 126 objet de l'e-mail](https://www.pourpasunrond.fr/wp-content/uploads/2019/08/objet.png)
Tu peux supprimer dans le corps du message : “– Cet e-mail a été envoyé […]” qui n’apporte rien.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 127 corps du message](https://www.pourpasunrond.fr/wp-content/uploads/2019/08/corps-message.png)
Il n’est pas nécessaire de toucher aux autres champs.
Onglet messages
Il s’agit des messages qui apparaissent dans le formulaire.
Le premier indique que l’envoi s’est déroulé correctement.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 128 message d'un envoi réussi](https://www.pourpasunrond.fr/wp-content/uploads/2019/08/message-envoi-reussi.png)
Les suivants sont des messages d’erreurs.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 129 message d'erreur champ obligatoire](https://www.pourpasunrond.fr/wp-content/uploads/2019/08/message-champ-obligatoire.png)
Les messages sont correctement traduits et formels.
Ils doivent refléter le ton utilisé sur ton site. J’ai modifié le premier en “Ton message est expédié. Je te remercie de m’écrire. Je te répondrai le plus rapidement possible.”. J’ai appliqué le tutoiement dans les messages comme sur l’ensemble du site.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 130 personnaliser les messages d'erreurs](https://www.pourpasunrond.fr/wp-content/uploads/2019/08/messages-erreurs.png)
Teste et intègre ton formulaire
Il est intéressant de tester tranquillement ton formulaire pour vérifier que tout fonctionne avant de le mettre en ligne.
Crée une page de test
Tu copies le code généré par Contact Form 7 présent sous le titre. Il apparait dès que tu enregistres ton formulaire.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 131 short code formulaire Contact Form 7](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/short-code-formulaire.png)
Tu crées une nouvelle page : Pages > Ajouter que tu supprimeras par la suite.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 132 ajouter une page](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/ajouter-page.png)
Je te recommande d’ajouter Test ou A supprimer au nom pour bien l’identifier.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 133 page de test](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/page-test.png)
Tu colles le code dans un paragraphe. WordPress va automatiquement reconnaître le type d’informations et transformer le bloc en Code court (Shortcode).
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 134 ajout du short code du formulaire dans une page WordPress](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/ajout-short-code.png)
Tu enregistres le brouillon puis cliques sur Prévisualiser.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 135 prévisualiser le formulaire](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/previsualiser.png)
Tu vérifies l’aspect visuel (sur ordinateur et sur mobile en réduisant la largeur de ta fenêtre) ainsi que les éléments suivants :
- le message d’erreur avec un champ obligatoire vide
- le message si la réponse au quiz contre les spams est incorrect
- la bonne réception de l’e-mail
- l’e-mail reçu contient tous les champs du formulaire
Quand tu réalises une modification, tu enregistres ton formulaire et recharges ta page.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 136 recharger une page](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/recharge-page.png)
Une fois que ton test est validé, tu peux copier ton code où tu le souhaites dans tes pages et articles.
Je n’ai pas remarqué de conflit entre Material Design et Elementor. Un lecteur m’a remonté qu’une de ses animations à disparu.
Il l’a résolu en supprimant l’animation. Tu vérifies ta page après publication.
Intègre ton formulaire dans le pied de page ou la barre latérale
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 137 formulaire en barre latérale](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/formulaire-barre-laterale.png)
Menu de gauche : Apparence > Widget
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 138 menu widgets](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/menu-widgets.png)
Tu sélectionnes Texte et l’endroit où tu souhaites intégrer ton formulaire.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 139 ajouter un widget texte](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/ajouter-widget-texte.png)
Tu donnes, si tu le souhaites, un nom qui apparaîtra en titre au-dessus du formulaire et colles le code de Contact Form 7.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 140 intègre un formulaire dans la barre latérale](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/integre-formulaire-barre-laterale.png)
Sauvegarde tes messages
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.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 141 Flamingo extension WordPress de sauvegarde des messages de Contact Form 7](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/flamingo.png)
Tu disposes d’un nouvel élément dans ton menu.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 142 flamingo messages entrants](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/flamingo-messages-entrants.png)
Dans messages entrants, tu retrouves la liste des messages réceptionnés.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 143 messages sauvegardés](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/messages-sauvegardes.png)
Que tu peux retrouver en intégralité en cliquant dessus.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 144 détails du message](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/detail-message.png)
Tu peux déclarer un expéditeur comme spammeur.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 145 déclarer le message en spam](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/declarer-message-spam.png)
Tu retrouveras d’autres moyens efficaces contre le spam dans le prochain chapitre.
Le carnet d’adresses collecte toutes les adresses e-mail.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 146 menu carnet adresses flamingo](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/menu-carnet-adresses-flamingo.png)
Il regroupe les messages par contact.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 147 carnet d'adresses flamingo](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/carnet-adresses-flamingo.png)
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.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 148 spam reçus par le formulaire en deux heures](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/spam-deux-heures.png)
Quiz
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 149 quiz antispam standard](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/quiz-antispam-standard.png)
Le plus simple et le moins gênant pour l’utilisateur est l’ajout d’une question simple que les robots ne pourront pas résoudre. Je l’ai intégré dans mon exemple.
Le code à ajouter :
[quiz quiz-1234 "Question anti-spam : Que font 7+2 ?|9" "Question anti-spam : Que font 4+2 ?|6" "Question anti-spam : Que font 3+5 ?|8"]
Si tu souhaites avoir un meilleur rendu, tu peux utiliser le code que je présente.
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] (déjà réalisé dans la version communiquée dans cet article)
- E-mail : [email* your-email akismet:author_email] (déjà réalisé dans la version communiquée dans cet article)
Honeypot
Contact Form 7 Honeypot installe une question invisible pour les utilisateurs mais que les robots peuvent compléter ce qui déclenche la mise en spam.
Tu la retrouves dans le répertoire des extensions WordPress.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 150 contact form 7 honeypot](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/contact-form-7-honeypot.png)
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.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 151 really simple captcha extension de lutte contre le spam dans les formulaires](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/really-simple-captcha.png)
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.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 152 paramètres de Google recaptcha](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/parametres-recaptcha.png)
Tu obtiens tes clés d’activation.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 153 clés captcha google](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/cles-captcha-google.png)
Dans WordPress, tu cliques sur Configuration de l’intégration dans Contact > Intégration.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 154 intégration captcha dans WordPress](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/integration-captcha.png)
Tu colles les deux clés.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 155 coller les clés captcha de google dans wordpress](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/cles-captcha-google-wordpress.png)
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.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 156 logo recaptcha](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/logo-recaptcha.png)
Adresse une réponse automatique (autorépondeur)
Tu peux adresser un message automatiquement 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ées aux FAQ, diriger vers la nouvelle collection…
Tu actives l’e-mail (2) et complètes les champs.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 157 email de réponse destinataire, expéditeur et objet](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/email-reponse-destinataire-objet.png)
Il est possible de reprendre des champs complétés par l’internaute pour personnaliser le message.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 158 personnalisation de l'email de réponse](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/personnalisation-email-reponse.png)
Nous pourrions par exemple avoir :
Bonjour [Prenom],
Nous avons reçu votre demande concernant [your-subject]. Nous essayons de répondre le plus rapidement possible sous maximum 2 jours travaillés.
Cordialement,
M. Pink
[email protected]
Les champs de personnalisation disponibles sont visibles en haut de page.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 159 champs personnalisation disponibles](https://www.pourpasunrond.fr/wp-content/uploads/2019/09/champs-disponibles.png)
Pour éviter que ton texte ne perde son sens, mieux vaut n’utiliser que des champs obligatoires.
Personnalise les couleurs et polices de ton formulaire
Je monte le niveau d’un cran en te détaillant les CSS que tu peux modifier dans ton formulaire. Si tu débutes, honnêtement, tu peux passer cette étape et y revenir plus tard.
Ces codes sont valables uniquement pour les formulaires réalisés avec Material Design for Contact Form 7.
Bouton d’envoi
Si tu veux modifier la couleur du bouton, tu as deux couleurs à renseigner.
Celle quand la case RGPD est décochée,
.mdc-button
{
background-color: #eeeeee!important;
}
et celle quand le formulaire est prêt à être envoyé.
.mdc-button--raised:not(:disabled)
{
color:#ff33f0!important;
background-color: #ff9f33!important
}
Pour modifier l’apparence du texte du bouton :
.mdc-button
{
color:#55ff33!important;
font-family:impact, sans-serif!important;
font-style:italic;
font-size:1em!important
}
Couleurs des fonds
Tu peux modifier la couleur générale d’arrière-plan du formulaire :
.cf7md-form
{
background: #E04B4D;
}
et celles des champs :
.mdc-text-field__input
{
background-color: #fcff33!important;
}
Polices
Voici les instructions pour modifier la police et la taille de tous les éléments du formulaire.
cf7md-form,
.mdc-text-field__input,
.cf7md-item,
#cf7md-form input,
#cf7md-form label,
#cf7md-form textarea,
#cf7md-form p,
#cf7md-form h1,
#cf7md-form h2,
#cf7md-form h3,
#cf7md-form h4,
#cf7md-form h5,
#cf7md-form h6
{
color:#55ff33!important;
font-family:impact, sans-serif!important;
font-size:1em!important;
padding-bottom:0.3em;
padding-top:0.3em
}
Fond et bordure de la case à cocher
Je n’ai pas réussi à différencier quand la case est ou non cochée.
.mdc-checkbox__background
{
background-color: #ff9f33!important;
border-color:#eeeeee!important
}
Redirige vers une page de vente
Tu installes l’extension Redirection for Contact Form 7.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 160 redirection contact form 7](https://www.pourpasunrond.fr/wp-content/uploads/2020/04/redirection-contact-form-7.png)
Tu choisis la page de destination dans le nouvel onglet : Redirect Settings et tu enregistres.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 161 page atterrissage](https://www.pourpasunrond.fr/wp-content/uploads/2020/04/page-atterrissage.png)
Connecte Mailchimp
Tu installes l’extension Contact Form 7 For Mailchimp.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 162 extension contact form 7 for mailchimp](https://www.pourpasunrond.fr/wp-content/uploads/2019/10/extension-contact-form-a-mailchimp.png)
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.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 163 connecter Mailchimp à Contact form 7 avec l'api](https://www.pourpasunrond.fr/wp-content/uploads/2019/10/connecter-mailchimp.png)
Pour trouver ta clé API Mailchimp, tu te rends sur Profile dans les paramètres de ton compte Mailchimp.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 164 profile](https://www.pourpasunrond.fr/wp-content/uploads/2019/10/profile.png)
Extras > API keys
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 165 Mailchimp menu clé api](https://www.pourpasunrond.fr/wp-content/uploads/2019/10/mailchimp-menu-cle-api.png)
Tu reprends ton code. Si tu n’as pas crée de clé, tu commences par le bouton Create a key.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 166 clé api](https://www.pourpasunrond.fr/wp-content/uploads/2019/10/cle-api.png)
Quand ton compte est connecté avec l’extension, tu choisis ta liste.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 167 choix liste](https://www.pourpasunrond.fr/wp-content/uploads/2019/10/choix-liste.png)
Tu détermines le champ que tu as utilisé pour la collecte d’emails
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 168 champ email](https://www.pourpasunrond.fr/wp-content/uploads/2019/10/champ-email.png)
et éventuellement le nom du souscripteur.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 169 champ souscripteur](https://www.pourpasunrond.fr/wp-content/uploads/2019/10/champ-souscripteur.png)
Tu enregistres pour finaliser.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 170 enregistrer](https://www.pourpasunrond.fr/wp-content/uploads/2019/10/enregistrer.png)
Conclusion
Le filtrage des spams issus du formulaire de contact représente un gain de temps considérable. J’ai reçu jusqu’à 11 e-mails indésirables en deux heures.
J’ai cherché comment obtenir le formulaire le plus attractif possible avec les solutions gratuites.
Le plus compliqué a été de limiter la partie technique au maximum pour que le tutoriel soit accessible au plus grand nombre.
Contact Form 7 est une extension fiable et mise à jour régulièrement. Cela t’assure de ne pas devoir tout refaire demain.
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 171 signature de Jean du site pour pas un rond](https://www.pourpasunrond.fr/wp-content/uploads/2019/07/signature-jean-pour-pas-un-rond.png)
Les articles susceptibles de t’intéresser :
- Une barre des cookies qui respecte le RGPD
- Crée les images de ton site
- Assure la sécurité de ton site
- Le contenu de ta page d’accueil
- Personnalise le thème Twenty Seventeen
Retrouve tous les articles pour Créer seul ton site
![Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] 173 portrait jean lochet fondateur pourpasunrond.fr 1](https://www.pourpasunrond.fr/wp-content/uploads/2019/11/portrait-jean-lochet-fondateur-pourpasunrond.fr_-1.png)
Jean
Fondateur, auteur et homme à tout faire
J’ai créé pour pas un rond pour que tu puisses réaliser seul ton site et le faire grandir avec des tutoriels pas à pas.
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
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
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
Bonsoir Umberto,
J’ai essayé la solution préconisée par l’auteur sans succès : https://wordpress.org/support/topic/change-outline-border-color/
Il a dû changer quelque chose depuis dans l’extension.
Magnifique soirée,
Jean
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 !
Bonjour André,
Tu peux tenter dans tes CSS
div.wpcf7 {text-align: center;}
Magnifique journée,
Jean
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
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
Bonjour JEAN,
Déjà bravo pour ce tutos vraiment très bien fait et dont je me sert pour mon site !..
Pourrais tu m’indiquer ou changer la couleur bleu quand on clique pour remplir les champs
Voilà la capture d’écran : .https://www.hebergeur-image.fr/uploads/20201001/3adcd4b7bbbbb5c12e57a2cfafd1e75e4cf1baf1.jpg
Merci à toi et bonne journée
lionel
Bonjour Lionel,
Le créateur de l’extension a livré une solution : https://wordpress.org/support/topic/change-outline-border-color/
Cependant cela ne semble pas fonctionner.
Quand tu utilises border-color elle apparaît quelques secondes avant d’être modifiée.
Belle journée,
Jean
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
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
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
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 Michel,
Il faut retirer la notion d’optional.
Belle journée,
Jean
Bonjour M. Jean Merci du tuto. comment faire si on veut ajouter 2 fichiers a joindre dans le contact form ?
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
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
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
Merciiii ! Belle journée aussi !
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
Bonjour Alexis,
Je suis heureux que tu aies résolu ton problème d’affichage.
Belle journée,
Jean
Bonjour Yves,
Je te remercie de ton gentil commentaire qui m’encourage à poursuivre.
Belle journée,
Jean
Bonjour Jean,
bravo et un grand merci pour tout tes tutos très bien réalisés
Salut,
Sur un site : http://beta.blue-estate.fr/contact/, les champs du formulaire, sur mobile, débordent sur le côté droit. Comment règles-tu ce souci ? J’ai uniquement Contact Form 7.
Merci d’avance pour ton aide !
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
C’est parfait, l’utilisation de Material Design est top pour l’affichage responsive.
Merci beaucoup !
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
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.
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
Bonjour Jean,
Merci pour ta réponse
J’ai bien utilisé Contact Form 7 et Material Design, je suis sur le thème Flatsome
Mon site est offline pour l’instant (j’ai un plugin coming soon), le temps de créer et de le lancer
Bonjour Jean-Guillaume,
Je n’ai pas pu tester ton thème car il est payant.
En regardant ton thème, je vois qu’il applique, à priori, un formatage spécifique à Contact Form 7 : https://flatsome3.uxthemes.com/elements/forms/
Tu pourrais essayer de modifier la couleur du texte du champ : https://www.pourpasunrond.fr/creer-un-formulaire-de-contact/#33-polices
Belle journée,
Jean
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 !
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 ?
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
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
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