Accueil / Tutoriels Wordpress / Comment créer un formulaire de contact avec WordPress
Formulaire de contact Wordpress

Comment créer un formulaire de contact avec WordPress

Votre blog attire de plus en plus de lecteurs ? Fantastique ! Et si vous y ajoutiez un formulaire de contact ? Certains de vos visiteurs ont certainement envie de vous envoyer un message par rapport à votre contenu ou un produit que vous exposez sur votre blog. Suivez-moi dans ce tutoriel. Nous allons apprendre ensemble comment créer un formulaire de contact et l’intégrer à un blog.

Nous procéderons en trois étapes :

  1. installer l’extension WPForms
  2. créer un formulaire
  3. intégrer le formulaire à une page

Installer le plugin WPForms

Pour pouvoir créer un formulaire de contact sous WordPress, on peut installer parmi les dizaines de plugins disponibles dans la base de données de WordPress. Certains d’entre eux sont très célèbres et utilisés un peu partout mais ont tendance à ralentir votre blog.

Ce qu’il vous faut, c’est un plugin facile à utiliser, qui ne consomme pas les ressources de votre blog. Et pour cela, je vous ai trouvé le candidat idéal : WPForms. J’ai fait cette découverte après avoir testé et comparé les 10 meilleurs plugins de contact pour WordPress. C’est aussi un plugin très populaire auprès des utilisateurs de WordPress. Il est installé et activé sur plus d’un million de blogs/sites WordPress. Coté avis, le plugin s’en sort avec un 5 étoiles.

Le plugin WPForms dispose de toutes les fonctionnalités dont vous aurez besoin pour être contacté en privé depuis votre blog ou site WordPress. Il existe en deux versions : une version gratuite et une version premium. La version gratuite fait aussi bien que la payante et répondra presque à 99% de vos besoins. Le plugin dispose d’une interface de gestion simple et assez intuitive, offrant la possibilité de créer un nombre infini de formulaires de contact, des options « drag and drop » ou « glisser – déposer »

Pour installer le plugin WPForms, vous devez d’abord vous connecter à votre tableau de bord WordPress puis allez au menu « Extension » puis « Ajouter ».

Installer un plugin WordPress

Ensuite, rechercher le plugin WPForms en le saisissant au niveau de la barre de recherche. Une fois le plugin trouvé, vous pouvez l’installer et l’activer.

Installer WPForms

Vous venez de réussir cette première étape. Passons maintenant à la création de notre premier formulaire de contact.

Créer un formulaire de contact avec WPForms

Pour créer un formulaire de contact avec WPForms, il vous suffit d’aller au menu « WPForms » puis de cliquer sur « Nouveau« . Ainsi, vous pouvez

  1. donner un nom à votre formulaire de contact : ce nom permettra de l’identifier aux autres formulaires de votre blog
  2. ensuite, choisir un modèle

WPForms met à votre disposition différents modèles de formulaires de contact, déjà pré-configurés :

  • Vierge : c’est un formulaire vide sur lequel vous pouvez ajouter les champs de votre choix
  • Contact simple : sur ce formulaire, vous avez les champs de base usuels (nom, adresse email, message)
  • Inscription à une lettre d’information : il permet à vos visiteurs de souscrire à vos bulletins d’informations.

Créer un formulaire de contact simple

Puisque nous voulons juste créer un formulaire de contact, nous pouvons choisir le modèle (2). N’oubliez pas de donner le nom du formulaire.

Créer un formulaire de contact

L’étape suivante vous permettra de personnaliser les champs de votre formulaire de contact. Tous les champs de ce modèle sont modifiables. Alors, n’hésitez surtout pas à les personnaliser à votre guise. Vous avez la possibilité de réorganiser les champs avec un simple « glisser-déposer ». Si vous voulez modifier un champ, il vous suffit de cliquer là-dessus. Dans l’exemple ci-dessous, on modifie la structure du champ « Nom », de sorte à avoir une seule zone de texte au lieu de deux.

Créer un formulaire de contact

Après avoir cliqué sur le champ, vous verrez apparaître les options pour le modifier. Ces options dépendent exclusivement du type de champ.

Créer un formulaire de contact

Pour plus d’options, vous pouvez cliquer sur le menu « Options avancées ». Vous pourrez ainsi définir la taille du champ, fournir un texte pour guider le visiteur ou donner une valeur par défaut pour ce champ.

Créer un formulaire de contact

En dehors de la personnalisation du modèle, vous pouvez ajouter des champs à votre formulaire de contact. Les champs disponibles avez la version gratuite sont listés ci-dessous :

Créer un formulaire de contact

Pour en ajouter, vous pouvez cliquer sur le type du champ à intégrer à votre formulaire. Essayons d’ajouter un champ « Code postal » au formulaire. Afin d’éviter des saisies incorrectes pour le code postal, il est plus adéquat de choisir « Nombres » comme type du champ.

Créer un formulaire de contact

Il ne reste plus qu’à le personnaliser : utiliser le label « Code Postal », décider si le champ sera obligatoire ou non. Pour cela, vous procéderez comme tout à l’heure, lorsque vous modifiez le champ « Nom ».

Créer un formulaire de contact

Configuration du formulaire

Vous y êtes presque. Normalement, tout est déjà pré-configuré par WPForms pour que vous puissiez utiliser votre formulaire après les étapes précédentes. Vous pouvez néanmoins effectuer quelques réglages : style, choix du bouton et texte d’envoi du message, adresse email d’envoi et adresse email de réception, corps du message, etc. Pour cela, vous cliquez sur le menu « Réglages« .

Créer un formulaire de contact 10

Si vous avez besoin de personnaliser la façon dont les messages sont envoyés et reçus, il vous suffit de cliquer sur « Notifications ». Ainsi, vous avez la possibilité de :

  1. Choisir l’adresse du destinataire des messages.
  2. Définir l’objet du message
  3. Définir le nom de l’expéditeur du message
  4. Changer l’adresse email de l’expéditeur.
  5. Préciser l’adresse de réponse
  6. Indiquer les champs du formulaire qui apparaîtront dans le corps du message.

Créer un formulaire de contact 10

Pour rassurer le visiteur que son message a été bien envoyé et reçu, vous pouvez personnaliser la confirmation d’envoi. Pour cela, vous avez trois options : afficher un texte de confirmation ou rediriger l’utilisateur vers une page de votre site ou un URL pouvant contenir un message de confirmation.Créer un formulaire de contact 10

Vous êtes arrivé à la dernière étape. Une fois les réglages effectués, il ne vous reste plus qu’à

  1. enregistrer votre formulaire,
  2. quitter l’outil.

Créer un formulaire de contact 10

Voilà, c’est tout pour la création du formulaire de contact. Et je suis presque certain que vous êtes impatient de l’intégrer à votre page de contact et commencer à recevoir des retours de vos visiteurs.

Intégrer le formulaire de contact à votre blog

L’intégration du formulaire de contact fraîchement créé se fait en deux clics. Vous avez la possibilité d’ajouter votre formulaire de contact à une page, un article ou un widget de la barre latérale de votre blog.

Ajouter le formulaire de contact à une page

Si vous aviez déjà prévue une page de contact, c’est une excellente chose. À défaut, vous pouvez créer rapidement une nouvelle page et en faire votre page de contact. Pour cela, vous aurez besoin d’aller au menu « Pages » de votre tableau de bord, puis cliquer sur « Ajouter ».

Créer un formulaire de contact WordPress

Après avoir fourni le titre de votre page et un texte introductif, vous pouvez cliquer sur « Ajouter un formulaire ».

Créer un formulaire de contact WordPressAinsi, vous pouvez

  1. Choisir le formulaire à ajouter parmi ceux que vous avez créés.
  2. Insérer le formulaire à la page

Créer un formulaire de contact WordPress

WPForms ajoute ainsi un shortcode ou code court à votre page. Ce code n’est rien d’autre que votre formulaire. Il ne vous reste plus qu’à publier votre page de contact.

Créer un formulaire de contact WordPressVoyons maintenant à quoi ressemble notre page de contact.

Créer un formulaire de contact WordPressWaouh ! Vous avez fait du très bon boulot. Vous venez de créer un formulaire et l’intégrer à votre page de contact.

Afin que cette page de contact soit accessible à vos visiteurs, vous pouvez l’ajouter à votre menu. L’autre possibilité consistera à l’intégrer à un widget de votre barre latérale (sidebar).

Intégration du formulaire de contact à la barre latérale

Si vous souhaitez apporter beaucoup plus de visibilité à votre formulaire de contact, alors la barre latérale est l’endroit idéal. Pour ajouter votre formulaire de contact à la barre latérale ou sidebar de votre blog, vous devez vous rendre au menu « Apparence » puis « Widgets ».

Ajouter un formulaire de contact au sidebar

 

Défilez ensuite jusqu’à WPForms, puis cliquez là-dessus. Choisissez ensuite l’emplacement du formulaire de contact. Certains thèmes WordPress offre la possibilité d’avoir des zones de widgets à des emplacements différents comme le footer ou bas de page. Après avoir choisi votre emplacement, vous pouvez cliquer sur « Ajouter le widget » pour le personnaliser.

Ajouter un formulaire de contact au sidebar

Il ne vous reste plus qu’à choisir un formulaire de contact et donner le titre du widget. N’oubliez pas d’enregistrer les modifications et probablement réorganiser vos widgets. Ajouter un formulaire de contact au sidebar

Votre formulaire de contact est maintenant  visible sur tout votre blog.

Ajouter un formulaire de contact au sidebarVoilà, c’est tout pour aujourd’hui. Si vous avez rencontré des difficultés sur l’une de ces étapes ou si vous avez des suggestions, merci de laisser un petit commentaire. Je vous reviendrai avec plaisir.

Voir aussi

Connexion au Tableau de Bord Wordpress - Administration

Connexion au Tableau de Bord WordPress – Administration

Vous venez de finir l’installation de votre blog ou site WordPress ? Alors, vous avez …

Laisser un commentaire

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