Ce nouveau tutoriel de Contact Form 7 est une mise à jour. Depuis le premier tuto, cette extension a beaucoup évolué. Il est temps de mettre à jour sa notice de conception du formulaire.
L’installation de Contact Form 7 n’a pas changé. Vous pouvez retrouver la procédure dans l’ancien tutoriel : Contact Form 7 configuration simple : Tutoriel WordPress.
Création d’un formulaire
Pour créer un nouveau formulaire, rendez-vous dans le menu Contact > Créer un formulaire.
La création du formulaire débute par le choix de la langue.
Par défaut, le français sera utilisé si votre WordPress est paramétré dans ce langage. Cliquez ensuite sur le bouton Créer un formulaire.
Vous remarquerez que l’interface de création du formulaire a complétement changé. Le système de marqueurs a été supprimé et seuls les shortscodes (tag) sont dorénavant utilisés. Ils vous servent à simplifier la conception de votre formulaire sans avoir à vous soucier du code.
Commencez par donner un titre explicite à votre formulaire pour mieux l’identifier dans la liste des formulaires par la suite. Ce titre n’apparaitra pas sur la page où le formulaire sera inséré par la suite, il sert uniquement à l’identifier dans la liste des formulaires.
L’onglet Formulaire
Je vous le disais, maintenant, la création du formulaire est simplifié par des Tags. Certains sont déjà pré-formatés : ce sont les boutons au-dessus de l’écran de personnalisation du formulaire.
Les balises
Lorsque vous sélectionnez l’un de ces tags, cela ajoute une balise dans le formulaire après sa configuration, comme par exemple :
[text* your-name]
Cette balise indique que le champ est de format Text et s’appelle your-name. Notez que your-name sert au code : il ne faut donc pas laisser d’espace ou mettre un caractère spécial. Retenez aussi que le nom de vos balises doit se différencier de celles utilisées par WordPress : pour éviter des incidents, nommez originalement vos balises. Vous préferez des termes en français plutôt qu’en anglais, et s’ils sont en anglais, vous ajouterez un autre terme comme par exemple my-name. En effet, name est une balise WordPress.
Lorsque vous cliquez sur l’un de ces tags, un formulaire de création de la balise s’ouvre pour vous aider… Si vous n’avez pas de connaissance en développement, faites simple ! Sinon, prenez un peu de temps pour consulter la notice de Contact Form 7. Comme dirait un de mes collègues : ne réinventons pas la roue ! Je vais donc juste vous indiquer où trouver l’info en fonction du type de champ :
- Champs de texte
- Nombre (nombre, numéro, plage)
- Date
- Cases à cocher, boutons radio et menus
- Téléchargement de fichiers Champ
- CAPTCHA
- Quiz (questionnaire)
- Case à cocher d’acceptation des conditions
- Bouton de soumission
Vous pouvez aussi consulter les commentaires sur les champs dans le tuto de la version précédente de Contact Form 7. Ils sont toujours d’actualité.
C’est la même chose pour la mise en pages du questionnaire. Rien de compliqué si vous avez quelques bases en HTML… Vous utiliserez principalement les balises :
<p>je mets le texte de l'intitulé du champ et je mets une balise <br /> pour le retour à la ligne</p>
L’onglet Email
Dans cet onglet, le principe des tags est repris. Pour personnaliser vos mails, vous pouvez utiliser ceux pré-formatés : [your-name][your-email][your-subject][your-message] comme dans le texte fourni par défaut :
N’oubliez pas qu’un mail doit respecter un certain format pour ne pas être déclaré en Spam. Je vous conseille donc de personnaliser uniquement le texte du message et de laisser les balises insérées dans les champs To, From et Sujet.
L’onglet Messages
L’internaute en utilisant le formulaire va déclencher des actions. Contact Form 7 vous permet de personnaliser les messages liés à ces actions. Vous noterez que la traduction de ces messages est partielle. Il vous faut donc traduire personnellement les derniers messages soit par ces champs, soit en créant le fichier contact-form-7-fr_FR.po, dans le dossier Langages accessible par le chemin : /wp-content/plugins/contact-form-7/languages. Si nécessaire, vous trouverez la procédure pour la traduction dans ce tutoriel : Tutoriel WordPress : traduire les expressions de son thème en français ?.
L’onglet Réglages complémentaires
Cet onglet est réservé aux développeurs. Dans ce cas, les informations pour réaliser ces réglages sont disponibles dans la notice de l’auteur de Contact Form 7. Vous pourrez aussi y configurer le suivi analytics. J’y reviendrais dans une prochain article.
Mise en ligne et tests
Validez vos modifications en cliquant sur le bouton Sauvegarder et la configuration de votre formulaire est terminée. Il vous reste encore à insérer le formulaire dans votre site et à le tester.
Après la validation de votre configuration, vous êtes renvoyé vers la liste des formulaires que vous avez créés. Copiez le shortcode de celui que vous venez de créer.
Ouvrez la page où vous souhaitez insérer votre formulaire et collez ce shortcode (par exemple, dans la page contact). Enregistrez vos modifications.
Vérifiez que le questionnaire apparaît bien sur la page en question. Si c’est le cas, il ne vous reste plus qu’à tester votre questionnaire et visualiser les mails reçus. Quelques ajustements seront peut-être nécessaires selon le rôle de votre formulaire.
bonjour Lisette,
je rencontre un problème avec CF7 au moment de placer un CAPTCHA dans le code
une fenêtre s’ouvre pour me demander notamment:
id attribute
Class attribute
que dois-je y inscrire
merci
Claude
Bonsoir,
Si votre CF7 est à jour (j’ai un doute par ce que vous notez), dans le menu Contact de l’administration WordPress, vous avez Intégration. Cela vous permet d’intégrer Recaptcha à votre CF7.
Si vous n’avez pas les clés Captcha, cliquez sur le lien google.com/recaptcha pour les obtenir (https://www.google.com/recaptcha/intro/index.html). Créez un compte etc..
Quand vous avez obtenu vos clés, complétez les champs dans le menu Contact/Intégration/ zone captcha. Validez.
Ensuite, lors que vous voudrez intégrer celui-ci dans votre formulaire, cela devrait être plus simple.
Documentation officielle : http://contactform7.com/recaptcha/
En espérant avoir répondu à votre question.
Bonne journée
merci pour votre réponse,
mais çà ne fonctionne pas; j’ai bien intégré les clés…
les tests d’envois sont réussis sans reCaptcha, mais pas si je le place dans mon formulaire.
Lisette,
j’ai réglé mon problème (dans le cas où vous auriez souhaité poursuivre la conversation)
concernant le CSS, je peux apporter du code dans le CSS de mon thème enfant, ce qui me permet de modifier la taille des champs entre autre.
merci
Claude
Bonjour,
Je rentre de congés et je constate que vous avez réglé seul voter problème. Pouvez-vous nous dire comment vous avez fait ?
Concernant le CSS, que voulez-vous savoir exactement ?
Bonne journée
bonsoir,
en pause depuis un moment, je travaille un nouveau thème dans un sous-domaine et n’ai pas autant de temps qu’espéré,
je reprends le sujet CF7 et recaptcha
je suis à jour je pense avec CF7 4.3, j’ai obtenu et intégré les clés et retrouve, après insertion du recaptcha dans mon formulaire, les champs suivants à remplir:
id: (id) : id valeur d’attribut du widget.
classe: (classe) : classe valeur de l’attribut du widget. Pour définir deux ou plusieurs catégories, vous pouvez utiliser plusieurs classes: l’option, comme [classe recaptcha: classe y2008: classe m01: d01] .
que faut-il y mettre?
je vous remercie pour votre attention
Claude
Bonjour,
Cela correspond à du css. si vous n’avez pas les notions (ce qui semble être le cas), laissez vide.
Sinon, si vous souhaitez remplir ces champs, il vous faudra acquérir des notions en CSS.
merci pour votre réponse,
mais çà ne fonctionne pas; j’ai bien intégré les clés…
les tests d’envois sont réussis sans reCaptcha, mais pas si je place dans mon formulaire.
Merci, ce tutoriel m’a beaucoup servit
A votre service 😉
Bonjour,
Je ne comprends l’onglet e-mail.
Dans le premier champs, on renseigne notre mail de destination, mais dans le deuxième champs, pourquoi remettez vous le même mail ?
Cordialement,
Stéphane
Bonjour,
C’est un exemple. Et comme des petits malins sur le web exploitent toutes les adresses… Vous pouvez donc mettre l’adresse vers laquelle vous adressez le mail et celui dont il provient comme vous le souhaitez.
Totalement désolé
Complètement oublié l’essentiel
Les remerciements et les formules de politesse
Ca ne me ressemble carrément pas
Alors merci d’avance si vous avez une idée
Bonne soirée
Faute avouée, faute à moitié pardonnée 😉 – J’espère vous avoir aidé
Bonjour
Merci pour cet article, j’ai pu eclaircir certains points
Juste une question
Je suis en train de tourner en rond depuis 1/2h
Comment faire pour mettre une zone prénom
Si je pose
[your-name]
il va envoyer au destinataire
le nom ou le prénom + le mail
si je double la balise [your-name]
[your-name] [your-name]
le destinataire va recevoir deux fois le prénom
aussi bizarre que cela puisse paraitre
Comme c’est pour un formulaire d’inscription
il me faut impérativement le prénom et le nom
Bonjour,
vous pouvez mettre [mon-prenom] par exemple, sans accent (cela n’existe pas en anglais) ou un autre mot. Néanmoins, ce dernier ne doit pas être en doublon avec un autre champ de votre BD WordPress. c’est pourquoi, il y a un prefixe (my dans my-name).
En espérant avoir été claire…
sinon, vous pouvez lire : http://contactform7.com/tag-syntax/
Bonjour,
Merci pour ce travail.
Je cherche comment modifier la couleur du texte affiché,
j’ai essayé color cela ne fonctionne pas.
Merci.
Cordialement.
DB
Bonjour,
Pour modifier la couleur du texte affiché, utilisez de préférence le CSS du plugin. Sinon, vous pouvez vous inspirer de cela :
Bonjour Sabine,
J’ai un problème (apparemment récurrent) : j’ai créé un formulaire d’inscription pour une activité que j’organise en avril et tout a l’air de bien se passer y compris l’envoi, que j’ai testé en m’envoyant le formulaire rempli mais je ne reçois JAMAIS aucun message dans ma boîte (YahooMail). J’ai demandé à un ami de le tester: pareil! je n’ai jamais reçu son mail d’inscription (test) non plus.
J’ai essayé de modifier dans “e-“mail :
– [nom] [prenom] par [nom] [prenom]
– j’ai laissé vide la case “en-têtes additionnelles”, j’y ai ajouté “Reply-to: mon adresse e-mail”. En effet ce qui fonctionnait avant “[your-name] ” ne fonctionne plus (message d’erreur : “Cette adresse de messagerie n’appartient pas au même domaine que le site”.).
Je ne sais plus que faire ! Et je ne trouve pas où j’ai m…é.
Pouvez-vous m’aider ? Merci
Bonjour,
si j’ai bien compris le problème, la réponse est dans le message. Il ne faut pas utiliser une adresse Yahoo ou autre serveur de messagerie, mais bien une adresse du domaine (ex:monadresse@monsite.com).
si ce n’est pas cela, ne pas hésiter à revenir approfondir la question 😉
Bonjour,
J’ai réalisé le formulaire avec Contact Form 7; à la fois des boutons radios et des zones de texte pour certaines questions qui exigent une réponse écrite relativement détaillée.
Mais déception, lorsque je teste en remplissant les cases, je ne reçois pas le formulaire complet rempli comme je m”y attendais mais simplement l’annonce qu’un message m’ a été envoyé, le nom et l’adresse de l’expéditeur mais pas le contenu du formulaire (même avec flamingo).
J’ai dû manquer une étape mais laquelle?
Merci de votre aide!
Bonsoir,
Est-ce que le mail reprend tous les champs ? Il ne se fait pas automatiquement : il faut l’élaborer.
Pour cela, il faut se rendre dans Contact, ouvrir le formulaire et prendre l’onglet Email. Les champs du questionnaire (formulaire) sont repris au dessus du premier Email en [crochet]. Il faut construire le mail en reprenant ces champs.
bonjour je viens d installer le plugin pour mon site WP. j’ai une difficulté que je ne parviens à résoudre, sur le champ MAIL je n’ai pas l encadre grisé pour indiquer l’endroit ou compléter la rburique. avez vous une idée pour resoudre mon souci, merci par avance
Bonjour,
Je ne comprends pas ce que vous voulez dire, désolée
bonjour, je ne recois pas les mails malgré le faite que j’ai remplis les champs dans la catégorie E-mail , pourtant les mails recus s’affichent bien dans la base de données.
Comment puis-je faire ?