skip to Main Content

Comment ajouter un formulaire de contact sous WordPress avec Contact Form 7

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Contact Form 7 est certainement le plugin le plus utilisé sur WordPress en matière de création de formulaire de contact. Son principal atout est la simplicité qu’il offre lorsqu’il faut créer un formulaire et l’intégration aux différentes pages, articles ou widgets, sans oublier le fait qu’il est disponible en français.

contact-form-7

Si vous souhaitez apprendre à utiliser ce plugin, alors vous êtes au bon endroit, car dans ce tutoriel, je vous monterai où télécharger Contact Form 7 et comment l’utiliser pour ajouter un formulaire de contact sur votre site WordPress.

Si vous ne comprenez pas un point sur cet article, alors n’hésitez pas à nous en faire part à l’aide du formulaire des commentaires. Si l’article vous aide, partagez-le avec vos amis sur les réseaux sociaux.

Comment installer le plugin Contact Form 7

Contact Form 7 est disponible sur WordPress.org, ce qui signifie que vous pouvez l’installer directement à partir de votre tableau de bord WordPress en entrant les termes « Contact Form 7« , l’occurrence qui portera le même nom sera la bonne. Cependant, si vous souhaitez disposer de ce plugin, vous pouvez le télécharger directement sous forme de fichier .ZIP.

Après l’avoir installé, vous remarquerez qu’un nouveau lien est disponible sur votre tableau de bord, il s’agit du menu : « contact ». Il possède deux sous-menus : « formulaires de contact«  (qui rassemble l’ensemble des formulaires que vous avez créé, vous pourrez gérer vos différents formulaires sur cet emplacement) et « créer un formulaire« .

Comment créer un nouveau formulaire

Une petite maîtrise du langage HTML sera un plus à la compréhension de ce pluginPour créer un nouveau formulaire, accédez à l’emplacement suivant : « Contact >> créer un formulaire ». Sur cet emplacement, vous verrez 6 sections :

  • La première (tout en haut) contient le nom du formulaire
  • formulaire: est l’espace de travail où l’on créera nos formulaires
  • Email: permet de modifier la forme de l’email qui sera envoyé à l’administrateur
  • Email 2 : permet d’envoyer à l’expéditeur une copie du message qu’il a envoyé (vous pouvez désactiver cette option)
  • messages: vous donne la possibilité de modifier les messages susceptibles d’apparaître durant l’envoi d’un formulaire de contact. Nous ne modifierons pas ces champs, puisqu’ils sont déjà traduits en français
  • réglages complémentaires: il s’agit du champ de texte où peuvent être ajoutés des codes afin de produire un comportement précis.

Nous allons donc commencer par ajouter un nom à notre formulaire, que l’on nommera ainsi : « Nouveau Formulaire ».

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Remarque : pour ajouter un nom à ce formulaire, il vous faudra double-cliquer sur le texte « Sans titre », un champ de texte apparaitra.

comment-créer-un-nouveau-formulaire

Dans la section « formulaire », le champ de texte situé à gauche offre déjà quelques champs par défaut. Chaque champ commence par une balise ouvrante « <p>», et se termine par une balise fermante « </p>».

Plus bas sur la section formulaire, vous remarquerez qu’il y a un champ de texte à gauche pré-rempli et à droite, un menu déroulant contenant les différents champs que l’on pourra ajouter.

Supposons que nous souhaitons ajouter un champ pour le numéro de téléphone, nous allons choisir l’option « numéro de téléphone » sur le menu déroulant, ce qui fera apparaitre une boite méta avec les options du champ que nous souhaitons ajouter.

Le champ indispensable ici est certainement le nom du champ. Vous pouvez le modifier, mais je vous suggère de laisser l’extension gérer ces noms, sauf si vous savez ce que vous faites. Vous aurez peut-être besoin d’ajouter un texte en filigrane sur le nouveau champ. Pour cela cochez la case « Utiliser ce texte en filigrane ? » et ajouter le texte sur le champ « valeur par défaut ».

Remarque : Vous pouvez déterminer qu’un champ est obligatoire, en cochant la case « champ obligatoire ? ».

Après avoir terminé, le champ « Copiez le code ci-dessous et collez-le dans le formulaire de gauche », contiendra le code de notre nouveau champ. Copiez cette valeur et ajoutez-la surtout avant la ligne de code:

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

<p>[submit "Envoyer"]<p>

 qui est le bouton d’envoi.

Mon nouveau champ vaut ceci :

[tel tel-711 placeholder « Votre numéro de téléphone »]

Je l’ai enveloppé dans une balise « <p>» (comme mentionné plus haut), avec un texte indicatif, pour avoir un code final identique à celui-ci :

<p>Votre numéro de téléphone :<br>
[tel tel-711 placeholder "Votre numéro de téléphone"]</p>

Bien sûr, vous pouvez modifier l’email que vous recevrez, et l’email de notification d’envoi que l’auteur du message recevra, mais pour cela, il vous faut avoir une bonne maitrise du langage HTML pour arriver à des résultats satisfaisants.

Lorsque la modification du formulaire est complète, n’oubliez pas d’enregistrer le formulaire. Seulement après l’avoir fait, vous pourrez récupérer son shortcode (raccourci) et l’ajouter sur une page, un article ou même dans un widget texte.

comment-copier-le-shortcode-d-un-formulaire

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [GRATUIT]

je l’ai essayé, et il fonctionne plutôt bien. Vous pouvez d’ailleurs tester chez vous les différents mails envoyés aux utilisateurs ainsi que ceux que vous recevez.

nouveau-champ-ajouté-au-formulaire

C’est tout pour ce tutoriel, j’espère qu’il vous aidera à créer votre page contact grâce au plugin WordPress gratuit Contact Form 7. N’hésitez pas à poster un commentaire.

Cet article comporte 8 commentaires
  1. Bonjour,
    J’ai intégré le code mentionné ci-dessus dans le formulaire de contact (accès via le bouton « contactez-nous » en header de la page d’accueil). Tout s’affiche dans la page « messagerie » je renseigne tout les champs mais l’e-mail que je réceptionne ne comporte que le nom, le sujet et l’e-mail, pas le numéro de téléphone 🙁
    Où me suis-je trompée??? Merci d’avance si vous pouvez m’aider

Laisser un commentaire

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

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

Back To Top
1 Partages
Partagez
Tweetez
Enregistrer1