Comment ajouter un formulaire de contact sur WordPress

par | 19 Jan 2022 | Formulaire WordPress

Un formulaire de contact est indispensable à presque tout site WordPress. Nous avons déjà vu différentes façons de le créer, mais aussi de l’optimiser. Le but est qu’il permette à votre entreprise d’évoluer positivement, par exemple en répondant aux messages de nouveaux prospects rapidement. Dans cet article, nous allons voir comment ajouter un formulaire de contact sur WordPress avec Gutenberg ou avec un code court (shortcode, en anglais).

 

 
Certains des liens figurant dans cet article sont des « liens affiliés ». Cela signifie que si vous cliquez sur le lien et réalisez un achat, je recevrai une commission d’affiliation, sans frais supplémentaires pour vous. Si c’est le cas, merci de soutenir ce blog !

 
Vous pouvez ajouter un formulaire de contact à différents emplacements de votre site. La plupart du temps, je vous recommande d’avoir une page “Contact” avec votre formulaire. Mais vous pouvez aussi l’ajouter dans un pied de page et même à la fin des articles de blog. Il peut également se trouver dans votre barre latérale. L’idée est d’offrir aux visiteurs un moyen rapide et facile de vous contacter.

 

Ajouter un formulaire de contact sur WordPress dans la barre latérale et le pied de page
Ajouter un formulaire de contact sur WordPress dans la barre latérale et le pied de page

 

1. Comment ajouter un formulaire de contact sur WordPress avec les blocs Gutenberg

Si vous ne savez pas comment ajouter un formulaire de contact sur WordPress, sachez que depuis l’arrivée de Gutenberg, le processus est devenu très simple. Les blocs vous offrent la possibilité d’ajouter des formulaires à vos pages ou articles, mais également à vos widgets. Ceux-ci vous permettront de placer votre formulaire dans votre pied de page ou votre barre latérale, selon les possibilités qu’offre votre thème.

 

1.1 Comment ajouter un formulaire de contact sur WordPress avec Contact Form 7

 

 
Pour ajouter un formulaire Contact Form 7 à votre site, il suffit de vous rendre sur la page, l’article ou le widget auquel vous souhaitez l’ajouter, puis de sélectionner le bloc Contact Form 7.

 

Choisir un bloc pour l’ajouter à une page
Choisir un bloc pour l’ajouter à une page

 

Sélectionner le bloc Contact Form 7
Sélectionner le bloc Contact Form 7

 
Il vous reste alors à choisir le formulaire que vous désirez ajouter et à enregistrer vos modifications.

 

Sélectionner le formulaire approprié
Sélectionner le formulaire approprié

 

1.2 Comment ajouter un formulaire de contact sur WordPress avec Gravity Forms

 

 
Pour ajouter un formulaire Gravity Forms à votre site, il faudra simplement suivre les mêmes étapes que pour Contact Form 7. Rendez-vous sur la page, l’article ou le widget de votre choix, cherchez le bloc Gravity Forms et sélectionnez le formulaire approprié avant de sauvegarder vos modifications.

 

Sélectionner le bloc Gravity Forms
Sélectionner le bloc Gravity Forms

 

Sélectionner le formulaire adéquat
Sélectionner le formulaire adéquat

 

1.3 Comment ajouter un formulaire de contact sur WordPress avec WPForms

 

 
Pour WPForms, il faudra suivre la même procédure et vous rendre sur la page, l’article ou le widget adéquat, puis chercher le bloc WPForms et sélectionner le formulaire que vous souhaitez afficher. Après enregistrement, vous avez terminé.

 

Sélectionner le bloc WPForms
Sélectionner le bloc WPForms

 

Sélectionner le formulaire
Sélectionner le formulaire

 

2. Comment ajouter un formulaire de contact sur WordPress avec un code court

Si vous n’utilisez pas les blocs Gutenberg, il est aussi très facile d’ajouter un formulaire à votre site. Pour ce faire nous allons employer un code court (ou shortcode, en anglais). Il est possible d’ajouter celui-ci presque n’importe où sur un site, mais son utilisation peut être facilitée par le thème que vous utilisez.

 

2.1 Module formulaire de contact dans Divi

Pour ajouter un formulaire de contact à votre site Divi, vous pouvez tout d’abord utiliser le module de contact disponible dans le constructeur.

 

Module formulaire de contact dans Divi
Module formulaire de contact dans Divi

 
Néanmoins, si vous préférez créer vos formulaires à l’aide d’une extension, souvent plus robuste que ce qu’offre Divi en termes de formulaires, vous pourrez les ajouter à vos pages à l’aide d’un code court. Par ailleurs, la procédure pour ajouter des codes courts est la même, quel que soit votre thème.

 

2.2 Contact Form 7 et Divi

Pour ce faire, il suffit d’ajouter un module texte à une page Divi et d’y insérer le code court spécifique à l’extension que vous utilisez.

 

Module texte dans Divi
Module texte dans Divi

 

Ajouter un code court à un module texte dans Divi
Ajouter un code court à un module texte dans Divi

 

Ajouter un formulaire de contact sur WordPress
Le formulaire a été ajouté

 
Dans le cas de Contact Form 7, ces codes courts se trouvent très facilement dans les paramètres des formulaires. En vous rendant dans Contact > Formulaires de contact, vous pourrez copier le code du formulaire de votre choix.

 

Naviguer vers les formulaires de contact
Naviguer vers les formulaires de contact

 

Code court Contact Form 7
Code court Contact Form 7

 

2.3 Gravity Forms et Divi

Dans le cas de Gravity Forms, les codes courts ont toujours le même format et vous pouvez y ajouter des paramètres si vous le souhaitez. Il faudra notamment changer le paramètre id que vous pourrez remplacer par le numéro identifiant votre formulaire. Pour trouver ce numéro, il faut se rendre dans Formulaires > Formulaires et le repérer dans la colonne ID à la droite de votre formulaire.

 

Naviguer vers les formulaires Gravity Forms
Naviguer vers les formulaires Gravity Forms

 

Identifier le numéro de formulaire
Identifier le numéro de formulaire

 
Ensuite, vous pourrez copier ce numéro et l’ajouter au code court avant d’insérer celui-ci dans un bloc texte de Divi. Voici un exemple de code court Gravity Forms avec trois paramètres. Le paramètre id est le seul paramètre obligatoire.

  
  [gravityform id="1" title="false" description="false"]
  

 
Vous devrez donc changer le numéro id pour qu’il corresponde au formulaire désiré. Et vous pouvez modifier les paramètres optionnels title et description en indiquant true à la place de false pour afficher le titre et la description du formulaire.

Il existe trois autres paramètres optionnels et plus techniques pour ce code court que vous pouvez retrouver sur la page de référence.

 

2.4 WPForms et Divi

Si vous utilisez WPForms, sachez qu’il existe un module dans Divi qui vous permet directement d’insérer votre formulaire WPForms sur une page.

 

Insérer un module WPForms dans Divi
Insérer un module WPForms dans Divi

 
Ce système fonctionne de la même manière que les blocs Gutenberg. Après avoir ajouté le module, il faudra sélectionner le formulaire à afficher et enregistrer les changements.

 

Sélectionner un formulaire
Sélectionner un formulaire

 

2.5 Elementor

La version Pro d’Elementor offre, tout comme Divi, un élément formulaire. Cependant, il est aussi possible d’ajouter un formulaire de contact créé avec une extension en utilisant l’élément code court d’Elementor, et ce même dans la version gratuite. Pour ce faire, il faudra ajouter cet élément à une page ou un article et y ajouter les codes courts mentionnés dans la section précédente.

 

Ajouter un élément code court dans Elementor
Ajouter un élément code court dans Elementor

 

Ajouter un formulaire de contact sur WordPress grâce à un code court
Insérer le code court du formulaire

 
Tout comme pour Divi, WPForms ne nécessite pas de code court et possède aussi son propre élément dans Elementor. Il suffit simplement de l’ajouter et de choisir le formulaire adéquat.

 

Ajouter un élément WPForms dans Elementor
Ajouter un élément WPForms dans Elementor

 

Sélectionner le formulaire adéquat ou créer un nouveau formulaire
Sélectionner le formulaire adéquat ou créer un nouveau formulaire

 

3. Conclusion

Lorsque vous savez comment ajouter un formulaire de contact sur WordPress, la procédure se révèle simple et rapide. Que vous utilisiez les blocs Gutenberg ou un code court, il ne vous faudra que quelques minutes pour le mettre en place. La partie la plus difficile reste de concevoir un formulaire efficace.

Dites-moi dans les commentaires à quels emplacements de votre site vous préférez ajouter un formulaire de contact ?

0 commentaires

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.

Réservez votre audit SEO gratuit et recevez un rapport personnalisé sur la santé de votre site web