Contact Form 7 : créer un formulaire simple

par | Mis à jour le 12/05/2022 | Publié le 04/09/2015 | WordPress | 25 commentaires

Résumé : Contact Form 7 : mise à jour du tutoriel de création d'un formulaire, tags et balises. Extension WordPress pour communiquer, recevoir des mails, administrer un quiz ...
Cet article comporte 840 mots.

3

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

Contact7: choisir le langage utilisé

 

Contact7 : création du 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 :

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

Contact7 : l'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.

Contact Form 7 - Shortcode du formulaire de contact

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.

Les E-books

Rédiger son cahier des charges

Tout ce qu’il faut pour bien s’entendre avec son prestataire

Google Data Studio

Faîtes parler vos données !

Tests de connaissances

Newsletter 5Min/mois

Recevez notre newsletter pour consulter l’essentiel du marketing.

Articles pouvant vous intéresser

DIVI et DIVI Builder : quelle différence ?

DIVI et DIVI Builder : quelle différence ?

Elegant Themes propose 2 produits distincts, mais dont les noms portent à confusion : DIVI et DIVI Builder. Comment et pourquoi les différencier ? Ce sera la question du jour.   DIVI ET DIVI...

AMP for WordPress : l’extension officielle

AMP for WordPress : l’extension officielle

AMP for WordPress est l'extension officielle de Google AMP pour le CMS WordPress. Elle est gérée et maintenue par AMP PROJECT CONTRIBUTORS à titre gratuit (dont font partie Google et Automatic)....

Comment installer le format AMP sur WordPress ?

Comment installer le format AMP sur WordPress ?

Comme nous l'avons expliqué dans notre article précédent, installer AMP sur WordPress comme sur d'autres CMS tel que Joomla!  a surtout un intérêt pour vos articles de blog. Pour les pages, si vous...

25 Commentaires

  1. Rambourg

    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

    Réponse
    • Lisette

      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

      Réponse
      • RAMBOURG

        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.

        Réponse
      • Rambourg

        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

        Réponse
        • Lisette

          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

          Réponse
  2. RAMBOURG

    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

    Réponse
    • Lisette

      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.

      Réponse
      • Claude

        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.

        Réponse
  3. Frédéric

    Merci, ce tutoriel m’a beaucoup servit

    Réponse
  4. rallier

    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

    Réponse
    • Lisette

      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.

      Réponse
  5. Serge

    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

    Réponse
    • Sabine

      Faute avouée, faute à moitié pardonnée 😉 – J’espère vous avoir aidé

      Réponse
  6. Serge

    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

    Réponse
    • Sabine

      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/

      Réponse
  7. Balse didier

    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

    Réponse
    • Sabine

      Bonjour,
      Pour modifier la couleur du texte affiché, utilisez de préférence le CSS du plugin. Sinon, vous pouvez vous inspirer de cela :

       Texte en rose fuchsia.
      soit entre balises font color="fuchsia" et /font aussi entre balises pour finir.
      N'oubliez pas de mettre les balises < et >
      

      Réponse
  8. Eric

    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

    Réponse
    • Sabine

      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 😉

      Réponse
  9. Zou

    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!

    Réponse
    • Sabine

      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.

      Réponse
  10. colomb

    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

    Réponse
    • Sabine

      Bonjour,
      Je ne comprends pas ce que vous voulez dire, désolée

      Réponse
  11. FredAbesoindAide

    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 ?

    Réponse

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Avertissement : L’url du site web ne sera pas affichée dans le commentaire et toute url placée dans le commentaire sera systèmatiquement effacée avant sa publication.

Pin It on Pinterest

Share This