Ajouter un formulaire sur WordPress

Apprenez à ajouter un formulaire sur WordPress dans ce tutoriel ! Les formulaires de contact permettent aux visiteurs, utilisateurs et prospects potentiels de vous contacter.

L’ajout d’un formulaire de contact sur votre site permet aux visiteurs et aux nouveaux clients potentiels de vous contacter s’ils ont des questions, des préoccupations ou des problèmes.

Un formulaire de contact encourage également plus d’interaction des visiteurs sur votre site, renforce la confiance et vous permet de générer de nouveaux prospects et demandes de renseignements pour vos produits et services.

Le plugin Contact Form 7

Dans ce tutoriel, nous vous montrons comment installer un formulaire de contact dans la page « Contactez-nous » de votre site à l’aide d’un plugin WordPress gratuit appelé Contact Form 7 (ou CF7).

Ce plugin vous permet de créer et prévisualiser des formulaires illimités sur WordPress facilement. Le formulaire de contact permettra aux visiteurs de votre site de vous envoyer un email et même d’envoyer une demande de réunion pour parler avec vous par téléphone ou par vidéo.

Comment installer le plugin Contact Form 7

La première étape de la configuration de Contact Form 7 consiste à installer le plugin sur votre site WordPress. Pour ce faire, dans votre tableau de bord WordPress, sélectionnez Plugins > Ajouter un plugin dans le menu.

Tapez ensuite le Contact Form 7 dans la fonction de recherche. Une fois le plugin Contact Form 7 affiché, cliquez sur Installer > Activer.

Une fois activé, vous pouvez trouver la fonctionnalité du plugin dans la nouvelle zone Contact de votre tableau de bord WordPress.

Comment configurer le plugin Contact Form 7

Cliquez sur Contact > Formulaires de contact. Ici, vous verrez le panneau d’administration central où vous pouvez gérer plusieurs formulaires de contact. Vous trouverez également le formulaire de contact par défaut de Contact Form 7, intitulé Contact Form 1.

Le formulaire de contact 1 contient tous les champs dont un formulaire de contact de base peut avoir besoin. Ce formulaire est prêt à l’emploi et peut être inséré dans n’importe quelle page et publication de votre site web, si vous le souhaitez (voir plus loin). Vous pouvez également créer votre propre formulaire de contact en sélectionnant Contact > Ajouter un nouveau.

Comment ajouter un formulaire sur WordPress

Donnez un nom à votre nouveau formulaire de contact, puis faites défiler jusqu’à Formulaire. Ici, vous pouvez modifier le nouveau modèle de formulaire de contact.

Votre modèle définit les différents champs qui apparaîtront sur votre formulaire, ainsi que les étiquettes qui apparaissent à côté de ces champs.

Par défaut, Contact Form 7 ajoute un certain nombre de champs aux nouveaux formulaires, notamment le nom, l’email, l’objet, le message et l’envoi. Vous voudrez certainement conserver tous ces champs. Cependant, vous souhaiterez peut-être ajouter des champs supplémentaires, en fonction des besoins de votre site. Pour ce faire, vous pouvez sélectionner le bouton générateur de balises approprié pour générer la balise de formulaire correcte. Par exemple, pour ajouter un champ URL, il vous suffit de cliquer sur le bouton URL (comme indiqué ci-dessous).

Si vous souhaitez ajouter une étiquette à votre champ, vous pouvez copier le code HTML qui accompagne une balise de formulaire à partir des autres champs. Par exemple, lorsque nous avons cliqué sur le bouton URL, le formulaire de contact 7 a pré-généré la balise form [url url-935]. Nous avons ensuite ajouté le code HTML supplémentaire pour l’étiquette, de sorte que le champ URL final se lit comme suit :

<label> URL de votre site web
        [url url-935] </label>

Vous pouvez maintenant ajouter autant de champs supplémentaires que nécessaire pour le formulaire de contact de votre site. N’oubliez pas de cliquer sur Enregistrer en bas de la page lorsque vous avez terminé.

Configuration de la messagerie pour contrôler les notifications par email

Les champs supplémentaires que vous ajoutez à votre formulaire de contact ne sont pas automatiquement reflétés dans les paramètres du modèle de notification par e-mail. Par conséquent, une fois que vous avez fini de personnaliser le Formulaire, passez à l’onglet Email.

Il s’agit du modèle de l’email que vous recevrez lorsqu’un formulaire de contact est envoyé. Dans le champ Pour, vérifiez que l’adresse email est correcte, car c’est là que toute correspondance du formulaire de contact sera envoyée. (Le plugin Contact Form 7 ajoutera par défaut l’email administrateur lié à votre site web).

Faites défiler jusqu’à la section du Corps de message et ajoutez les balises de formulaire supplémentaires que vous avez générées pour votre formulaire. Cela garantira que lorsque vous recevrez un email via votre formulaire de contact, il affichera toutes les informations que vous avez demandé à l’expéditeur de partager.

Pour ajouter un champ à votre modèle d’email, copiez simplement le champ de formulaire de votre modèle. Vous pouvez également ajouter du texte normal autour de vos champs. Vous pouvez voir comment nous avons procédé dans la capture d’écran ci-dessous :

Encore une fois, n’oubliez pas de cliquer sur Enregistrer une fois vos paramètres de messagerie terminés.

Insérer un formulaire de contact

Vous savez maintenant comment configurer Contact Form 7, créer un formulaire de contact et ajuster les paramètres du mail envoyé. La dernière étape du processus consiste maintenant à insérer le formulaire de contact dans une page et/ou à publier sur votre site WordPress. Sélectionnez Contact > Formulaires de contact. Copiez ensuite le shortcode à côté du formulaire que vous souhaitez ajouter à votre site.

Ensuite, ouvrez la page ou la publication où vous souhaitez insérer le formulaire de contact. Collez le shortcode dans la zone de texte de l’éditeur de publication où vous souhaitez que le formulaire de contact s’affiche.

Prévisualisez la page et si vous êtes satisfait des résultats, cliquez sur Publier. Une fois votre formulaire de contact mis en ligne, testez-le pour vérifier qu’il fonctionne. Votre réponse au formulaire de contact doit être envoyée directement à l’adresse email que vous avez spécifiée dans les paramètres de Email. Si votre boîte de réception reste vide, vérifiez vos spams/courriers indésirables avant de commencer le dépannage.

Comment ajouter de nouvelles fonctionnalités à vos formulaires

[membership show_noaccess= »true »]

Enregistrer vos messages :

Flamingo est à l’origine une extension créée pour permettre le stockage des messages soumis par Contact Form 7.

Après avoir activé l’extension, vous trouverez Flamingo sur l’écran d’administration de WordPress. Tous les messages envoyés via les formulaires de contact sont listés là et sont consultables. Avec Flamingo, vous n’avez plus besoin de vous en faire de perdre des messages importants à cause de problèmes sur le serveur de messagerie ou de mauvaise configuration de messagerie.

Pour des informations plus détaillées, reportez-vous à la page de documentation Contact Form 7.

Afficher des champs sous certaines conditions :

Le plugin Conditional Fields for Contact Form 7 ajoute une logique conditionnelle à vos formulaires de contact.

Si vous modifiez votre formulaire CF7, vous verrez une balise supplémentaire appelée « Groupe de champs conditionnels ». Tout ce que vous mettez entre les balises de début et de fin sera masqué par défaut.
Après avoir ajouté le(s) groupe(s) de champs, cliquez sur Enregistrer et allez dans l’onglet « Champs conditionnels » pour créer une ou plusieurs conditions qui feront apparaître le(s) groupe(s).

Vous trouverez plus de détails sur la configuration de ce plugin sur ce tutoriel.

Afficher des champs de couleurs :

Color Picker for Contact Form 7 permet d’ajouter un champ de couleur pour le plugin WordPress du formulaire de contact 7

Afficher des champs répétables :

Contact Form 7 – Repeatable Fields ajoute des groupes de champs répétables à vos formulaires.

Pré-remplissez certains champs :

Contact Form 7 Dynamic Text vous permet de créer des champs pré-remplis en fonction d’autres valeurs dynamiques (alors que les valeurs par défaut dans Contact Form 7 sont statiques).

Affichez votre formulaire en plusieurs étapes :

Multi Step for Contact Form 7 vous permet de transformer votre long formulaire de contact en un formulaire WordPress en plusieurs étapes. Imaginez que votre formulaire comporte plus de 20 champs et semble être une longue liste… Ne découragez pas votre public avec ça ! Rendons votre formulaire plus simple !

[/membership]

Et voilà, vous avez les bases nécessaires à la manipulation de formulaires sur votre site WordPress !