Accueil
/
Tutoriels WordPress
/
Comment ajouter un formulaire de contact dans WordPress

Comment ajouter un formulaire de contact dans WordPress

Le formulaire de contact d’un site web vous aide à établir une communication claire et efficace avec vos clients et à mieux contrôler la conversation. Ainsi, vous attirez plus de visiteurs et de clients réguliers et recevez de précieux commentaires.

Vous trouverez ci-dessous un exemple de formulaire de contact standard sur une page WordPress.

Contact form on a page in WordPress

Dans ce guide, nous verrons pourquoi vous devez ajouter un formulaire de contact à votre site web WordPress et comment l’installer.

Pourquoi devriez-vous ajouter un formulaire de contact dans WordPress

Une communication productive avec les clients est le fondement de toute entreprise prospère. Étant donné que la plupart des entreprises mènent leurs activités en ligne, votre site Web WordPress ne fait pas exception.

Un formulaire de contact crée un canal de communication entre les visiteurs et vous, créant de nouvelles opportunités pour attirer des clients potentiels.

Ci-dessous, nous énumérerons les principaux avantages d’avoir un formulaire de contact sur votre site web WordPress.

  • Un formulaire de contact protège votre adresse électronique contre l’exploitation – Publier votre adresse électronique sur une page web publique n’est pas toujours une bonne idée. Il est visible par tout le monde, y compris les spammeurs, les visiteurs malintentionnés ou les robots malveillants. Ainsi, il y a une forte probabilité qu’il finisse par être la cible d’attaques de spam et de hameçonnage. Le formulaire de contact masque l’adresse e-mail administrative de votre site web, réduisant ainsi le risque d’être ciblé.
  • Un formulaire de contact vous aide à détecter les messages de spam – Les spams sont tellement omniprésents de nos jours que, à un moment donné, tous les sites web sont victimes de leurs attaques. Un formulaire de contact aide à prévenir les attaques de spam automatisées en mettant en œuvre divers mécanismes de protection.
  • Un formulaire de contact vous permet d’extraire les informations essentielles des requêtes de vos visiteurs – Certains clients préfèrent aller droit au but, d’autres aiment les longs exposés. Même si ce n’est pas une mauvaise chose, lire de longues requêtes et ne filtrer que les informations essentielles peut s’avérer éprouvant. Un formulaire de contact vous permet de mieux contrôler la conversation en divisant le formulaire de contact en plusieurs champs, en demandant au visiteur de fournir des informations spécifiques.
  • Un formulaire de contact vous permet de recevoir les commentaires de vos visiteurs – Tout comme les commentaires, un formulaire de contact permet aux visiteurs d’exprimer leurs opinions sur vos services ou votre contenu. La différence est que leurs retours ne sont pas publics, et vous serez les seuls à les voir.
  • Un formulaire de contact vous aide à augmenter vos ventes – Vos services peuvent nécessiter une négociation de prix. Grâce à un formulaire de contact, vous pouvez négocier un accord avec des clients potentiels sur un canal privé.

Ajout d’un formulaire de contact à WordPress

WordPress est livré avec de nombreuses fonctionnalités intégrées, mais un formulaire de contact n’en fait pas partie. Cependant, vous n’avez pas à vous inquiéter. Il existe une large sélection de plugins de formulaire de contact parmi lesquels choisir, chacun ayant ses propres spécificités et fonctionnalités uniques.

Lisez la suite pour savoir comment choisir, installer et ajouter un plugin de formulaire de contact à votre site web WordPress.

  • Étape 1.3

    Votre configuration devrait commencer par effectuer des recherches sur les greffons disponibles pour les formulaires de contact. Tous les formulaires de contact offrent les mêmes fonctionnalités de base, mais il existe des plugins avec des fonctionnalités exclusives qui pourraient mieux convenir à votre entreprise.

    Nous recommandons WPForms , l’un des plugins WordPress les plus populaires et les plus polyvalents. Il possède une interface intuitive avec un générateur par glisser-déposer, vous permettant de créer facilement des formulaires de contact beaux et fonctionnels. Sans parler du fait qu’il est assez convivial, il est donc idéal pour les débutants.

    La version gratuite de WPForms Lite est livrée avec toutes les fonctionnalités clés qu’un formulaire de contact devrait posséder et est parfaite pour démarrer votre entreprise.

    La version premium de WPForms Pro ajoute diverses fonctionnalités précieuses telles que l’intégration avec PayPal, Stripe, des outils de personnalisation et de nombreuses autres fonctions avancées.

    Les utilisateurs de SiteGround peuvent acheter WPForms Pro à un prix promotionnel depuis leur espace client> Place de marché> Avantages des partenaires.

  • Étape 2.3

    Une fois que vous avez fait votre choix, il est temps de télécharger et d’installer le plugin de formulaire de contact. Pour cet exercice, nous allons utiliser WPForms .

    Pour commencer, connectez-vous à votre tableau de bord WordPress. Si vous rencontrez des difficultés pour vous connecter, consultez ce guide sur comment se connecter à votre site web WordPress.

    Naviguez jusqu’à la section Plugins et sélectionnez Ajouter un nouveau . Utilisez la barre de recherche en haut à droite et saisissez « wpforms » . Le premier résultat est Contact Form by WPForms – Drag & Supprimer l’outil de création de formulaire pour WordPress . Cliquez sur le bouton Installer maintenant pour télécharger le greffon sur votre site web.

    How to install a contact form in WordPress

    Une fois le téléchargement terminé, Installer se transformera en un bouton Activer . Appuyez dessus pour activer le plugin.

    How to activate a contact form plugin in WordPress

  • Étape 3.3

    L’activation créera une nouvelle section pour WPForms dans votre tableau de bord WordPress. Cliquez sur WPForms> Tous les formulaires pour voir la liste de tous les formulaires créés avec le greffon. Pour en créer un nouveau, cliquez sur le bouton Ajouter nouveau .

    How to create a new form in WordPress

    Vous allez entrer dans un nouveau panneau de contrôle où vous pouvez configurer votre nouveau formulaire. Commencez par saisir un nom pour votre formulaire dans le champ Nommer votre formulaire . Ensuite, sélectionnez l’un des modèles prédéfinis en survolant celui-ci et en appuyant sur le bouton Utiliser le modèle . Si vous souhaitez recommencer à zéro, survolez le modèle Formulaire vierge et appuyez sur Créer un formulaire vierge .

    Name your contact form and select a template

    Le panel basculera automatiquement vers la section Champs , où vous pourrez ajouter, modifier ou supprimer des champs de votre formulaire de contact.

    Appuyez sur Ajouter des champs pour voir les types de champs disponibles sur la gauche. Pour ajouter un champ, cliquez et maintenez le bouton de la souris dessus, faites-le glisser vers la section droite sous le libellé de votre formulaire et relâchez-le.

    How to add a field to a contact form in WordPress

    Vous pouvez ajouter plusieurs champs et les placer dans l’ordre descendant. Après avoir ajouté tous les champs, vous pouvez les réorganiser en maintenant le bouton de la souris sur un champ et en le déplaçant vers le haut ou vers le bas pour déplacer les autres champs.

    Les champs ont des étiquettes prédéfinies, mais vous pouvez les modifier. Pour modifier un champ, cliquez dessus, et la partie gauche de l’éditeur affichera l’onglet Options des champs .

    Dans la sous-section Général , vous pouvez changer le nom du champ (Label) et ajouter une description qui apparaîtra sous forme de texte sous le champ (Description) .

    Positionner le curseur sur Obligatoire , vous pouvez rendre le champ obligatoire pour remplir ou non le formulaire. Les champs obligatoires sont signalés par une étoile rouge à côté de leurs étiquettes.

    How to change the name of a field in a contact form in WordPress

    Dans Advanced et Smart Logic , vous pouvez ajuster des paramètres avancés comme les textes d’emplacement, les classes CSS, etc.

    Pour enregistrer le formulaire de contact ou toute nouvelle modification, cliquez sur le bouton Enregistrer .

    How to save a contact form in WordPress

  • Étape 4.3

    Les notifications de formulaire de contact sont des e-mails envoyés automatiquement depuis votre site web à votre adresse e-mail. De cette façon, vous serez informé chaque fois qu’un utilisateur soumet une demande dans votre formulaire de contact.

    IMPORTANT ! Nous vous recommandons fortement d’utiliser un plugin SMTP pour l’envoi de courriels afin d’améliorer la distribution des courriels sur votre site web. Consultez ce guide pour configurer WordPress pour utiliser SMTP.

    Vous pouvez contrôler les paramètres des notifications depuis le panneau de configuration WPForms > Paramètres> Notifications . WPForms active les notifications par défaut, mais vous pouvez les activer ou les désactiver en utilisant le bouton du curseur Activer les notifications .

    Contact form Notifications Settings

    L’activation des notifications active la section des paramètres qui contrôle divers paramètres des e-mails. À côté de chaque paramètre, vous pouvez voir le menu Afficher les balises actives . Il permet au formulaire de contact d’extraire des informations de l’entrée du visiteur et de les afficher dans le courriel.

    Default Notification Settings

    Envoyer à l’adresse électronique définit l’adresse électronique qui recevra une notification chaque fois qu’un visiteur soumet une entrée dans votre formulaire de contact. Par défaut, WPForms définit automatiquement l’adresse électronique administrative de votre site web WordPress. Cette adresse est spécifiée par la balise {admin_email} . Vous pouvez remplacer l’adresse par une autre ou ajouter plusieurs adresses séparées par une virgule.

    How to add multiple email addresses for the contact form in WordPress

    Ligne d’objet de l’e-mail définit la ligne d’objet de chaque e-mail de notification envoyé par votre formulaire de contact. Vous pouvez modifier le texte ou même ajouter des balises actives qui peuvent afficher des informations fournies par les visiteurs dans les champs du formulaire de contact.

    Par exemple, vous pouvez définir la ligne d’objet pour afficher le nom du visiteur envoyé au formulaire de contact. Pour ce faire, ouvrez le bouton Afficher les balises actives à côté de Objet du courrier électronique et sélectionnez Nom parmi Champs disponibles .

    How to set the notification's subject line to show the visitor's name

    Désormais, chaque nouvelle notification inclura le nom du visiteur dans la ligne d’objet avec le texte de la ligne d’objet.

    Contact form notification's subject line

    Nom de l’expéditeur définit le nom de l’expéditeur qui apparaît dans votre client de messagerie lorsque vous recevez la notification. Étant donné que votre site web envoie le formulaire, WPForms extrait le titre du site des paramètres généraux de WordPress. Vous pouvez définir un nom personnalisé ou ajouter une balise active qui extrait le nom du visiteur qui a envoyé le formulaire.

    From Name contact form setting

    From Email affiche l’adresse de l’expéditeur de la notification. Étant donné que votre site web envoie les notifications du formulaire de contact, l’adresse est automatiquement définie sur la messagerie administrative de votre site web WordPress. Si vous utilisez un plugin SMTP et envoyez des courriels depuis une autre adresse, vous pouvez le configurer dans le paramètre From Email .

    Contact form's From Email Setting

    IMPORTANT ! Assurez-vous d’avoir défini l’adresse électronique que vous utilisez réellement pour envoyer les notifications par courrier électronique. Les filtres anti-spam sont extrêmement sensibles aux incohérences entre l’adresse De l’e-mail et l’adresse réelle de l’expéditeur.

    Adresse électronique de réponse à définit l’adresse dans le champ Répondre à de l’e-mail de notification. Si vous choisissez de répondre à la notification, cette adresse sera le destinataire de la réponse. Si Adresse électronique de réponse est vide, l’adresse du destinataire est l’adresse De l’adresse électronique .

    En général, c’est une bonne idée d’inclure l’adresse électronique du visiteur qui a envoyé le formulaire. De cette façon, vous pouvez communiquer davantage si vous avez des questions sur l’envoi de formulaire par l’utilisateur. Vous pouvez ajouter une balise active qui récupère le courriel envoyé par le visiteur dans le formulaire de contact.

    How to set the Reply-to address in the contact form notifications

    Message électronique définit le contenu du corps de la notification. Par défaut, WPForms définit la balise active {all_fields} , qui affiche les informations de tous les champs du formulaire de contact. Vous pouvez personnaliser le corps du texte en n’affichant que les champs sélectionnés ou en ajoutant d’autres informations sur le site Web en utilisant d’autres balises actives.

    How to define what the text of the contact form notifications contains

    Une fois que vous avez fini de configurer les paramètres de notification, cliquez sur le bouton Enregistrer pour les confirmer.

  • Étape 5.3

    La confirmation est l’action de suivi qui notifie aux visiteurs la réussite de l’envoi du formulaire. Il peut s’agir d’un court message, d’une redirection vers une autre page de votre site web ou d’une redirection vers une URL externe.

    Vous pouvez configurer les paramètres de confirmation depuis le panneau de contrôle WPForms > Paramètres> Confirmations .

    Contact form's confirmations settings

    WPForms propose trois types de confirmation que vous pouvez sélectionner dans le menu déroulant Type de confirmation .

    Contact form confirmation types

    WPForms a déjà défini le type de confirmation à Message et a ajouté un message par défaut. Vous pouvez modifier le texte dans la boîte de l’éditeur de texte.

    Au lieu d’envoyer un message, vous pouvez choisir de rediriger les visiteurs qui ont rempli le formulaire vers une autre page de votre site web. Pour ce faire, choisissez Afficher la page depuis le menu Confirmation Type .

    Le menu Page de confirmation liste toutes les pages publiées sur votre site WordPress. Vous pouvez choisir ici la page que les visiteurs verront comme confirmation d’avoir rempli le formulaire de contact.

    How to select a confirmation page for the contact form

    Le dernier type de confirmation est Aller à l’URL (Redirection) . Un formulaire de contact envoyé avec succès redirige les visiteurs vers l’adresse que vous avez spécifiée dans le champ URL de redirection de confirmation . La redirection peut mener à une page de votre site web ou à n’importe quelle adresse web externe.

    How to set a redirect for contact form confirmation

    Pour enregistrer les paramètres de confirmation, cliquez sur le bouton Enregistrer du panneau de configuration WPForms .

  • Étape 6.3

    Sans protection anti-spam, votre formulaire de contact pourrait être une cible facile pour les robots spammeurs. Cela pourrait encombrer votre boîte de réception de nombreux messages indésirables. De plus, les attaques de spam pourraient surcharger votre serveur SMTP, car le formulaire de contact envoie des courriels depuis votre site web.

    Par conséquent, il est essentiel de protéger votre formulaire de contact des attaques de spam.

    Dans le panneau de configuration de votre formulaire, accédez à Paramètres> Protection contre le courrier indésirable et sécurité .

    How to set the spam protection for a contact form in WordPress

    WPForms dispose de divers mécanismes de protection contre le courrier indésirable qui fonctionnent en arrière-plan. Vous pouvez les activer ou désactiver en actionnant le curseur Activer la protection anti-spam .

    Nous vous recommandons de laisser cette option activée pour renforcer la sécurité de votre formulaire de contact contre le spam.

    Vous pouvez aussi installer des modules complémentaires pour augmenter davantage la sécurité de votre formulaire. Dans la liste Également disponible , vous pouvez choisir parmi une large gamme de modules de sécurité premium et gratuits que vous pouvez intégrer à votre formulaire de contact. Certains d’entre eux nécessitent une mise à niveau vers WPForms Pro , tandis que d’autres nécessitent des étapes supplémentaires pour être activés. Cliquez sur le bouton Commencer du module choisi pour voir les instructions détaillées.

 

Comment ajouter un formulaire de contact à une page ou à un message WordPress

Une fois que vous avez créé un formulaire de contact, vous devez déterminer son emplacement sur votre site web. WordPress vous permet d’ajouter le formulaire de contact sur n’importe quelle page ou n’importe quel article.

La configuration standard de la plupart des sites web est une page statique contenant le formulaire de contact. Habituellement, cette page s’appelle Contactez-nous ou Contacts, et c’est la dernière page de votre menu de navigation WordPress. Pour plus d’informations, consultez ce didacticiel sur les menus de navigation WordPress.

L’ajout du formulaire de contact se fait en modifiant une page ou un article depuis votre générateur de page WordPress.

Ajout d’un formulaire de contact dans l’éditeur de blocs Gutenberg

Gutenberg est l’éditeur par défaut de WordPress depuis la version 5.0. Pour l’ouvrir, allez dans la section Pages ou messages de votre site web, survolez la page ou le message et cliquez sur Modifier . Si vous êtes sur le point de créer une nouvelle page pour le formulaire de contact, appuyez sur Ajouter un nouveau .

How to edit a WordPress page to add a contact form

Dans l’éditeur, sélectionnez la zone où vous voulez placer le formulaire et cliquez sur le bouton Ajouter un bloc (signe « + ») . Une nouvelle fenêtre contextuelle avec les blocs disponibles apparaîtra. Utilisez la barre de recherche, tapez « wpforms » et sélectionnez le bloc WPForms .

How to add a contact form block in Gutenberg WordPress editor

Gutenberg insèrera le formulaire de contact dans la zone sélectionnée. Choisissez votre formulaire existant dans le menu déroulant Sélectionnez un formulaire .

Select the form for the contact form block in WordPress

Le formulaire sera affiché tel qu’il est vu par les visiteurs. Pour confirmer les modifications apportées à la page, cliquez sur le bouton Publier (pour une nouvelle page) ou Mettre à jour (pour une page existante).

Save a contact form to a page in Gutenberg WordPress editor

 

Vous pouvez également insérer le formulaire de contact en utilisant son shortcode. Tout d’abord, retournez à la section WPForms de votre tableau de bord WordPress et sélectionnez Tous les formulaires. Vous pouvez voir ici vos formulaires existants. Copiez le code sous la colonne correspondante du formulaire Shortcode.

How to see and copy a contact form's shortcode

Allez dans l’éditeur de pages et cliquez sur le bouton Ajouter un bloc ( signe « + ») . Utilisez la barre de recherche pour trouver le bloc Shortcode ou sélectionnez-le dans la liste complète des blocs.

How to add a contact form's shortcode in Gutenberg WordPress editor

Le bloc sera inséré dans la page. Collez le shortcode précédemment copié dans le champ Shortcode . Gutenberg ne visualisera pas le formulaire de contact. Cliquez sur le bouton Mettre à jour ou Publier et visitez la page pour confirmer que le formulaire de contact a été inséré.

How to save the contact form's shortcode in Gutenberg

Si cela est fait correctement, la page devrait afficher le formulaire de contact à la place du shortcode.

Contact form showing on a page after its shortcode was added

Ajout d’un formulaire de contact dans l’éditeur classique

Si vous préférez utiliser Classic Editor , l’ajout d’un formulaire de contact se fait en insérant son shortcode directement dans le corps de la page.

WPForms rend les choses un peu plus faciles. Au lieu de retourner dans le panneau de contrôle du greffon pour obtenir le shortcode, WPForms ajoute un bouton Ajouter un formulaire dans la barre d’outils de Classic Editor .

How to add a contact form in WordPress Classic Editor

Une fois que vous avez appuyé dessus, une nouvelle fenêtre contextuelle apparaît. Choisissez votre formulaire dans le menu déroulant Sélectionnez un formulaire ci-dessous à insérer et confirmez avec le bouton Ajouter un formulaire .

How to select a contact form in WordPress Classic Editor

Le shortcode du formulaire de contact sera automatiquement inséré dans le corps de la page. Pour enregistrer les modifications, cliquez sur le bouton Mettre à jour ou Publier .

Save a contact form on a page in WordPress Classic Editor

Comment ajouter un formulaire de contact dans la barre latérale

Tous les thèmes comportent une zone de site Web latérale. WPForms vous permet d’ajouter votre formulaire de contact en tant que widget à cette section.

Dans votre tableau de bord WordPress, accédez à la section Apparence> Widgets . Cliquez sur l’onglet Barre latérale et appuyez sur le signe « + » (Ajouter un bloc) .

How to a contact form widget to the sidebar in WordPress

Une fenêtre pop-up listant les éléments disponibles apparaîtra. Utilisez la barre de recherche pour trouver WPForms et sélectionnez son widget.

How to insert a contact form's widget in WordPress sidebar

Le bloc widget du formulaire apparaîtra dans l’onglet de la barre latérale. Choisissez le formulaire de contact dans le menu déroulant Sélectionnez un formulaire.

How to choose a contact form in a sidebar widget in WordPress

L’éditeur de widgets affichera le formulaire de contact dans l’onglet de la barre latérale. Cliquez sur le bouton Update pour enregistrer les modifications.

How to save a contact form in a WordPress sidebar

Désormais, le formulaire de contact sera affiché dans la barre latérale sur toutes les pages et tous les articles.

Contact form in a sidebar on a WordPress site

Tester la fonctionnalité du formulaire de contact

Maintenant que le formulaire de contact est ajouté à votre site web à l’endroit souhaité, vous devez confirmer qu’il fonctionne correctement. Pour ce faire, visitez simplement la page d’accueil de votre site web et naviguez jusqu’à la page où se trouve le formulaire de contact, remplissez les informations requises dans le formulaire et soumettez-le.

Si vous ne recevez aucun message de votre formulaire de contact, vous devez configurer votre WordPress pour utiliser SMTP à la place de PHP mail() fonction. Par défaut, WordPress utilise la fonction PHP mail() pour envoyer des courriels lorsque cela est nécessaire. Cela inclut l’envoi des e-mails à partir de vos formulaires de contact. De nombreux fournisseurs de messagerie marquent les messages envoyés de cette manière comme spam, de sorte que ces messages peuvent ne jamais parvenir à leurs destinataires.

SMTP utilise une authentification qui conduit à une délivrabilité élevée des e-mails et il est donc plus probable que vos e-mails du formulaire de contact soient livrés. Pour configurer votre WordPress afin qu’il utilise SMTP, vous pouvez suivre les instructions de notre didacticiel complet.

Demander l’aide d’un professionnel pour ajouter un formulaire de contact

L’ajout d’un formulaire de contact est une tâche simple, mais elle est compréhensible si vous débutez avec WordPress et que vous n’avez pas le temps de vous occuper de tous les détails techniques. Vous souhaitez démarrer votre entreprise le plus rapidement possible, et vous avez besoin du formulaire de contact pour commencer à établir des relations avec des clients potentiels.

SiteGround offre une assistance professionnelle pour diverses tâches liées à WordPress, et l’installation d’un formulaire de contact en fait partie. Nos experts techniques installeront le plugin de formulaire de contact et s’assureront de son bon fonctionnement.

Vous pouvez commander l’installation depuis votre Espace client> Icône « Point d’interrogation »> Afficher le centre d’aide> Nous contacter.

Sous Sélectionnez une catégorie , choisissez la section WordPress et sélectionnez Configurer un formulaire de contact . Sur l’écran suivant, choisissez le site web sur lequel le formulaire de contact sera installé à partir du menu Sélectionner le site web .

Lisez attentivement les instructions et utilisez la zone de texte pour ajouter les informations requises ou vos préférences personnelles, puis confirmez la commande. Une fois le formulaire de contact installé, vous recevrez une notification sur votre adresse électronique administrative.

Résumé

En un mot, vous ne pouvez que profiter d’un formulaire de contact sur votre site web. Que vous dirigiez une boutique en ligne ou un blog, il vous permet de communiquer avec vos visiteurs, de recevoir des commentaires précieux ou d’attirer plus de clients.

Il existe des tonnes de plugins qui peuvent ajouter cette fonctionnalité à votre site WordPress. Il suffit de choisir celui qui convient le mieux à votre entreprise. Nous espérons que cet article vous aidera à faire le bon choix.

Menu du didacticiel

Partager cet article