Dans ce tutoriel nous allons voir comment créer et ajouter un formulaire sur son site WordPress avec WPForms.
Pour rappel : WPForms, l’un des plugins de création de formulaires les plus conviviaux et les plus puissants pour WordPress. Que vous soyez un entrepreneur, un blogueur, ou simplement quelqu’un qui souhaite ajouter une fonctionnalité de formulaire à son site WordPress, WPForms est conçu pour vous faciliter la vie. Avec une interface glisser-déposer intuitive, des modèles de formulaires prédéfinis, et une multitude d’options de personnalisation, créer des formulaires devient un jeu d’enfant.
Création du formulaire
Il est désormais temps d’initier la conception de notre premier formulaire.
Accéder à l'interface de WPForms
- Ouvrir WPForms : Dans votre tableau de bord WordPress, trouvez et cliquez sur « WPForms » dans le menu latéral. Cela vous amènera à l’écran de WPForms.
- Créer un nouveau formulaire : Cliquez sur le bouton « Ajouter » pour commencer la création de votre formulaire. Vous serez dirigé vers la page de sélection de modèle.
Choisir un modèle de formulaire
- Nommez votre formulaire : Donnez un nom à votre formulaire pour faciliter son identification plus tard. Ce nom n’est pas visible pour les visiteurs de votre site.
- Sélectionnez un modèle : WPForms offre une variété de modèles prédéfinis pour différents usages, tels que les formulaires de contact, les sondages, les inscriptions à des newsletters, etc. Choisissez un modèle qui correspond le mieux à vos besoins en cliquant sur « Utiliser le modèle« . Pour un débutant, le « Formulaire de contact simple » est un excellent point de départ.
Personnalisation du formulaire
Après avoir cliqué sur « Utiliser le modèle » Une fois que vous avez choisi un modèle et cliqué sur « Utiliser le modèle » vous serez dirigé vers l’éditeur de formulaire de WPForms. C’est ici que la personnalisation commence.
Par défaut, WPForms propose une ébauche initiale pour votre formulaire de contact qui comprend les champs suivants : nom et prénom, adresse e-mail, commentaire ou message, et un bouton d’envoi. Dès maintenant, il est possible de supprimer les champs non désirés simplement en survolant ces derniers et en cliquant sur l’icône en forme de corbeille.
Glisser-déposer des champs
Le fonctionnement par glisser-déposer des champs dans WPForms vous permet d’ajouter, de supprimer et de réorganiser les champs de formulaire très facilement.
Choisir les champs à ajouter : Sur la gauche de l’écran, vous trouverez la liste des champs disponibles que vous pouvez ajouter à votre formulaire. WPForms offre une large gamme de champs tels que les champs de texte simple, email, numéro de téléphone, cases à cocher, boutons radio, champs de date, et bien plus encore.
Ajouter un champ : Pour ajouter un champ à votre formulaire, cliquez simplement sur le champ souhaité dans la liste ou glissez-le depuis le menu des champs jusqu’à votre formulaire. Lorsque vous relâchez le bouton de la souris, le champ sera ajouté à l’emplacement choisi.
Réorganiser les champs : Si vous souhaitez changer l’ordre des champs dans votre formulaire, cliquez simplement sur le champ que vous souhaitez déplacer et faites-le glisser à sa nouvelle position. Relâchez le bouton de la souris pour fixer le champ à son nouvel emplacement.
Personnalisation des champs
Personnaliser les champs dans votre formulaire WPForms est essentiel pour s’assurer qu’ils répondent parfaitement à vos besoins.
A noter que selon les champs sélectionner les options de personnalisation seront différentes.
Sélection du champ à personnaliser : Dans l’éditeur de formulaire WPForms, cliquez sur le champ que vous souhaitez personnaliser. Cela fera apparaître le panneau de configuration du champ sur le côté gauche de l’écran.
Vous pourrez par exemple :
- Modifier le libellé du champ : Le libellé est le texte qui apparaît au-dessus ou à côté du champ pour indiquer à l’utilisateur ce qu’il doit saisir.
- Ajouter ou modifier la description : La description est un petit texte qui apparaît sous le champ pour donner plus d’informations ou des instructions.
- Rendre le champ obligatoire : Si vous souhaitez que vos lecteurs remplissent obligatoirement ce champ avant de soumettre le formulaire, cherchez l’option « Necessaire » dans le panneau de configuration et activez-la. Cela ajoutera une étoile (*) à côté du label du champ et empêchera la soumission du formulaire si le champ est laissé vide.
Options avancées : Pour certains types de champs, des options avancées peuvent être disponibles pour une personnalisation plus poussée. Cela peut inclure la personnalisation des classes CSS, la définition de valeurs par défaut, ou l’ajustement des paramètres de validation, la possibilité de masquer les libellés, etc.
- Tester et prévisualiser : Après avoir appliqué les modifications souhaitées, vous pouvez voir le résultat en cliquant sur « Prévisualisations« .
- Sauvegarder les modifications : Si votre formulaire vous convient, cliquez « Sauvegarder » pour enregistrer vos modifications.
Configuration des paramètres du formulaire
Une fois votre formulaire créé, il vous faut configurer ses paramètres pour assurer son bon fonctionnement et adapter sa gestion à vos besoins. WPForms vous permet de personnaliser les paramètres généraux, les notifications par email, et les messages de confirmation de manière simple et efficace.
Pour commencer cliquez sur l’onglet « Réglages » situé à gauche. Ce dernier est divisé en 4 sections : Général, Protection anti-spam et sécurité., notifications, confirmations.
Onglet Général
- Nom et description du formulaire : Modifiez le nom de votre formulaire et ajoutez une description si nécessaire. Ces informations sont internes et aident à identifier le formulaire dans votre tableau de bord WPForms.
- Étiquettes : Vous pouvez choisir de changer, d’afficher ou de masquer les étiquettes des champs dans votre formulaire. Les étiquettes sont les titres des champs, comme « Nom », « Email », etc. Cela peut être utile pour créer des formulaires au design minimaliste ou lorsque les étiquettes sont intégrées directement dans les champs comme placeholders.
- Texte du bouton d’envoi : Modifiez le texte qui apparaît sur le bouton d’envoi du formulaire. Cela vous permet de fournir des instructions plus spécifiques à vos lecteurs, comme « Envoyer ma demande », « Rejoignez-nous » ou tout autre texte qui correspond mieux à l’action souhaitée.
- Classe CCS du formulaire : Ajoutez des classes CSS personnalisées au formulaire lui-même pour affiner son style sans affecter les autres éléments de votre site. Cela est particulièrement utile pour appliquer des styles spécifiques directement depuis votre feuille de style CSS.
- Classe CSS du bouton d’envoi : De manière similaire, vous pouvez ajouter des classes CSS personnalisées au bouton d’envoi pour le styliser indépendamment du reste du formulaire. Cela permet une personnalisation visuelle plus poussée du bouton, comme changer la couleur de fond, la bordure, ou l’ombre.
- Activer le pré-remplissage par URL : Activez cette option pour permettre le pré-remplissage des champs du formulaire via des paramètres URL. Cela est utile pour pré-remplir des formulaires basés sur les interactions précédentes du lecteur avec votre site.
- Activer l’envoi de formulaire en AJAX : En activant l’envoi de formulaire via AJAX, les utilisateurs peuvent soumettre le formulaire sans avoir à recharger la page entière. Cela permet une soumission plus fluide et rapide.
- Désactiver le stockage d’information de l’entrée dans WordPress : Pour des raisons de confidentialité ou de conformité, vous pouvez choisir de ne pas stocker les soumissions de formulaire dans la base de données de WordPress. Cela garantit que les données sensibles des utilisateurs ne sont pas conservées plus longtemps que nécessaire sur votre serveur.
Protection anti-spam et sécurité
Protection
Cette section est consacrée à des mécanismes de protection anti-spam qui opèrent en arrière-plan, sans impacter l’expérience utilisateur sur votre site.
- Activer la protection anti-spam : Cette option active une protection de base contre le spam, comme le honeypot, qui est une technique invisible pour l’utilisateur et qui vise à tromper les robots spammeurs sans déranger vos lecteurs.
- Activer la protection anti-spam Akismet : Si vous avez Akismet installé et activé sur votre site WordPress, cette option vous permet d’intégrer WPForms à Akismet pour une protection anti-spam renforcée. Akismet analyse les soumissions de formulaires et les compare à sa base de données de spam connu pour filtrer les entrées indésirables.
- Stocker les entrées indésirables dans la base de données : Vous avez la possibilité de conserver les soumissions marquées comme spam dans votre base de données pour révision. Cela peut être utile pour vérifier l’efficacité de vos filtres anti-spam et s’assurer que des soumissions légitimes ne sont pas incorrectement classées comme spam.
- Autoriser un délai minimal pour l’envoi : Cette option permet de définir un temps minimum que l’utilisateur doit passer sur le formulaire avant de pouvoir le soumettre. Cela aide à prévenir les soumissions automatiques par des bots qui remplissent et envoient des formulaires presque instantanément.
Filtering
WPForms vous permet également de restreindre les soumissions de formulaire en fonction de filtres ou de conditions personnalisables, offrant une couche supplémentaire de contrôle et de sécurité.
- Activer le filtre par pays : Restreindre les soumissions de formulaires aux utilisateurs de certains pays ou en exclure d’autres. Cela peut être particulièrement utile si vous ciblez ou souhaitez éviter des régions spécifiques pour des raisons légales, de marketing, ou de sécurité.
- Activer le filtre par mot-clé : Vous pouvez définir des mots-clés spécifiques qui, lorsqu’ils sont détectés dans une soumission de formulaire, marqueront cette soumission comme spam ou la bloqueront. Cela est utile pour filtrer les soumissions contenant des langages inappropriés, du contenu promotionnel non sollicité, ou d’autres termes que vous souhaitez surveiller.
Notifications
- Activer les notifications : Pour commencer, assurez-vous que les notifications par email sont activées pour votre formulaire. Par défaut, WPForms active les notifications pour envoyer un email à l’administrateur du site chaque fois qu’un formulaire est soumis. Vous pouvez activer ou désactiver cette fonction dans les paramètres de notification de votre formulaire.
- Adresse email du destinataire : Ici, vous spécifiez à quelle(s) adresse(s) email les notifications de soumission de formulaire doivent être envoyées. Vous pouvez entrer plusieurs adresses email en les séparant par une virgule.
- Ligne du sujet de l’e-mail : Déterminez le sujet de l’email de notification. Utilisez des balises intelligentes pour inclure des informations dynamiques, comme le nom du soumetteur ou un champ spécifique du formulaire.
- Nom de l’expéditeur : Indiquez le nom qui apparaîtra comme expéditeur de l’email de notification. Cela pourrait être le nom de votre entreprise ou de votre site web.
- E-mail d’expédition : Précisez l’adresse email à partir de laquelle les notifications doivent être envoyées. Il est recommandé d’utiliser une adresse email associée à votre domaine pour augmenter la délivrabilité de vos emails.
- Répondre à : Si vous souhaitez que les réponses à l’email de notification soient envoyées à une adresse email différente de l’adresse d’expédition, spécifiez-la ici.
- Message de l’e-mail : Personnalisez le corps de l’email de notification. Utilisez à nouveau des balises intelligentes pour inclure des données spécifiques soumises via le formulaire.
- Activer les conditions logiques : WPForms permet d’activer les notifications par email basées sur certaines conditions. Par exemple, vous pouvez choisir d’envoyer un email spécifique si un utilisateur sélectionne une certaine option dans votre formulaire.
- Email Template : Pour les utilisateurs avancés, WPForms offre la possibilité de personnaliser le template de l’email de notification, vous permettant de modifier son design et sa mise en page.
- Enable File Upload Attachments : Si votre formulaire inclut un champ de téléchargement de fichiers, vous pouvez choisir de joindre ces fichiers aux emails de notification.
- Enable Entry CSV Attachment : Pour une analyse facile, activez cette option pour recevoir les soumissions de formulaires sous forme de fichier CSV attaché à l’email de notification.
Confirmations
Les confirmations dans WPForms sont un moyen direct de communiquer avec vos lecteurs après qu’ils ont soumis un formulaire, leur fournissant un retour immédiat sur l’action qu’ils viennent de réaliser. Voici comment configurer les différents types de confirmations et leurs options.
- Confirmation par défaut : WPForms propose par défaut un message de confirmation simple qui s’affiche après la soumission d’un formulaire. Cette confirmation peut être personnalisée pour correspondre à vos besoins spécifiques et pour fournir une réponse appropriée aux utilisateurs.
- Type de confirmation : WPForms offre trois types principaux de confirmations que vous pouvez choisir après la soumission d’un formulaire :
- Message : Affiche un message personnalisé directement sur la page, remerciant les lecteurs pour leur soumission ou fournissant des instructions supplémentaires. C’est l’option par défaut et la plus couramment utilisée.
- Page : Redirige les lecteurs vers une page spécifique de votre site, telle qu’une page de remerciement ou une page avec des informations supplémentaires liées à leur soumission.
- URL (Redirection) : Redirige les lecteurs vers un site externe ou une page spécifique non hébergée sur votre site WordPress. Cela peut être utile pour des promotions spéciales, des enquêtes supplémentaires, ou des pages de confirmation personnalisées.
- Message de confirmation : Pour le type de confirmation « Message« , vous pouvez écrire un texte personnalisé qui répond aux besoins de vos lecteurs. Utilisez ce message pour exprimer votre gratitude, informer les utilisateurs de ce qui se passera ensuite, ou tout autre message pertinent.
- Défilement automatique vers le message de confirmation : Activer cette option garantit que la page défile automatiquement vers le haut où le message de confirmation est affiché, s’assurant ainsi que les utilisateurs ne manquent pas le message après avoir soumis le formulaire.
- Afficher l’aperçu de l’entrée après le message de confirmation : Pour les formulaires où il serait utile pour le lecteur de voir un résumé de ses réponses soumises, vous pouvez activer cette option. Cela peut renforcer la confiance des utilisateurs en leur montrant que leurs informations ont été correctement envoyées.
Ajout du formulaire à votre site WordPress
Après avoir créé et configuré votre formulaire avec WPForms, l’étape suivante est de l’intégrer à votre site WordPress. WPForms simplifie le processus au maximum et offre plusieurs méthodes pour ajouter votre formulaire là où vous le souhaitez.
Via un widget
- Aller dans l’administration de WordPress : Naviguez vers le tableau de bord de votre site WordPress.
- Accédez aux Widgets : Allez dans Apparence > Widgets. Ici, vous verrez une liste de zones de widget disponibles pour votre thème.
- Ajouter le widget WPForms : Trouvez le widget WPForms dans la liste des widgets disponibles et glissez-le dans la zone de widget où vous souhaitez afficher votre formulaire.
- Sélectionnez votre formulaire : Dans les options du widget WPForms, vous aurez un menu déroulant listant tous vos formulaires. Sélectionnez le formulaire que vous souhaitez ajouter.
- Enregistrez : Après avoir sélectionné votre formulaire, cliquez sur Enregistrer pour appliquer vos changements.
Dans une page ou un article
- Créer ou éditer une page/un article : Ouvrez l’éditeur pour la page ou l’article où vous souhaitez ajouter le formulaire.
- Ajouter un bloc WPForms : Cliquez sur le bouton Ajouter un formulaire (+) et recherchez WPForms. Sélectionnez le bloc WPForms pour l’ajouter à votre page ou article.
- Sélectionnez votre formulaire : Dans le bloc WPForms, vous verrez un menu déroulant pour sélectionner le formulaire que vous avez créé. Choisissez le formulaire approprié.
- Publiez ou mettez à jour votre page : Une fois le formulaire sélectionné, continuez à éditer votre page ou votre article comme d’habitude, puis publiez ou mettez à jour pour rendre le formulaire visible sur votre site.
Dans une page ou un article
- Créer ou éditer une page/un article : Ouvrez l’éditeur pour la page ou l’article où vous souhaitez ajouter le formulaire.
- Ajouter un bloc WPForms : Cliquez sur le bouton Ajouter un formulaire (+) et recherchez WPForms. Sélectionnez le bloc WPForms pour l’ajouter à votre page ou article.
- Sélectionnez votre formulaire : Dans le bloc WPForms, vous verrez un menu déroulant pour sélectionner le formulaire que vous avez créé. Choisissez le formulaire approprié.
- Publiez ou mettez à jour votre page : Une fois le formulaire sélectionné, continuez à éditer votre page ou votre article comme d’habitude, puis publiez ou mettez à jour pour rendre le formulaire visible sur votre site.
Utilisation des shortcodes
WPForms génère un shortcode unique pour chaque formulaire que vous créez, vous offrant une méthode flexible pour ajouter des formulaires n’importe où sur votre site qui accepte les shortcodes.
- Trouvez le shortcode de votre formulaire : Dans le tableau de bord de WordPress allez sur WPForms et cliquez sur tous les formulaires.
- Sélectionnez votre formulaire : Dans la liste qui apparait cliquez sur votre formulaire.
- Copiez le shortcode : Copiez le shortcode fourni qui se trouve a droite.
- Collez le shortcode : Allez à l’endroit où vous souhaitez afficher le formulaire (dans une page, un article, ou même dans un widget de texte) et collez y le shortcode.
Intégration de WPForms avec Elementor
Si vous utilisez Elementor pour utiliser le widget dédié a WPForms
- Ouvrez la page avec Elementor : Allez sur la page où vous souhaitez ajouter votre formulaire WPForms. Cliquez sur « Modifier avec Elementor » pour lancer l’éditeur d’Elementor.
- Glissez et déposez le widget WPForms : Cliquez sur le widget WPForms et faites-le glisser vers la zone de contenu où vous souhaitez que votre formulaire apparaisse. Elementor affichera une section dédiée pour ce widget une fois que vous l’aurez placé sur la page.
- Sélectionnez votre formulaire : Dans le panneau de configuration du widget WPForms sur la gauche, vous verrez un menu déroulant listant tous vos formulaires WPForms existants. Sélectionnez le formulaire que vous souhaitez intégrer à votre page. Le formulaire sélectionné s’affichera automatiquement dans l’aperçu en direct sur la droite.
- Personnalisez l’affichage : Bien que WPForms gère la plupart des aspects de la conception de votre formulaire, Elementor vous permet d’ajuster la mise en page autour de votre formulaire, comme les marges, le padding, ou l’arrière-plan de la section contenant le formulaire.
- Publiez ou mettez à jour la page : Une fois que vous êtes satisfait de l’intégration de votre formulaire, cliquez sur « Publier » ou « Mettre à jour » pour sauvegarder vos modifications. Votre formulaire est maintenant intégré à votre page et prêt à être utilisé par vos visiteurs.
Conseils pour maximiser l'efficacité de vos formulaires
Créer un formulaire est une chose ; concevoir un formulaire qui maximise l’engagement et les conversions en est une autre. Voici des conseils essentiels pour rendre vos formulaires WPForms non seulement fonctionnels mais aussi incroyablement efficaces.
- Gardez vos formulaires simples et directs: La simplicité est la clé d’un formulaire efficace. Chaque champ que vous ajoutez peut potentiellement réduire votre taux de conversion. Demandez-vous pour chaque champ : est-ce vraiment nécessaire ? Limitez votre formulaire aux informations essentielles pour augmenter les chances qu’il soit complété.
- Utilisez des étiquettes de champ claires: Vos utilisateurs doivent comprendre immédiatement ce que vous attendez d’eux. Utilisez des étiquettes de champ explicites et si nécessaire, ajoutez une courte description ou un exemple de réponse. Cela réduit la confusion et les erreurs, rendant l’expérience utilisateur plus fluide.
- Optimisez pour les appareils mobiles: Avec la prédominance des smartphones, il est crucial que vos formulaires soient réactifs. WPForms crée par défaut des formulaires adaptés aux mobiles, mais il est toujours bon de tester votre formulaire sur différents appareils pour s’assurer qu’il apparaît correctement et est facile à utiliser, quel que soit l’écran.
- Sécurisez vos formulaires contre le spam: Le spam de formulaire peut être un problème majeur. Utilisez des outils comme la validation CAPTCHA ou le honeypot (invisible pour les utilisateurs) pour filtrer les soumissions automatisées sans gêner vos utilisateurs.
- Fournissez des messages de confirmation personnalisés: Après la soumission d’un formulaire, un message de confirmation personnalisé peut améliorer l’expérience utilisateur. Cela peut être un simple « Merci pour votre soumission ! » ou quelque chose de plus spécifique lié à leur action. C’est aussi une opportunité d’indiquer les prochaines étapes ou de partager des informations supplémentaires.
- Testez et améliorez vos formulaires régulièrement:Les besoins de votre audience peuvent changer avec le temps. Testez différents designs, structures de formulaire et types de champs pour voir ce qui fonctionne le mieux. L’utilisation de l’A/B testing peut révéler des insights précieux pour optimiser les performances de vos formulaires.
- Utilisez les notifications et les automatisations à bon escient: Configurez des notifications par email pour vous-même ou votre équipe à chaque nouvelle soumission, assurant un suivi rapide. Les automatisations peuvent également aider à diriger les données des formulaires vers d’autres outils que vous utilisez, améliorant l’efficacité opérationnelle.
- Rendez vos formulaires accessibles: Assurez-vous que vos formulaires sont accessibles à tous, y compris aux personnes utilisant des technologies d’assistance. Cela signifie utiliser un contraste de couleurs adéquat, des étiquettes de champ descriptives et permettre la navigation au clavier.
Conclusion
En suivant ce guide, vous avez non seulement appris à installer et configurer WPForms, mais vous avez également créé votre premier formulaire, l’avez intégré à votre site et êtes prêt à gérer les soumissions. Ce n’est que le début de ce que vous pouvez accomplir avec WPForms.
WPForms est conçu pour offrir une expérience utilisateur exceptionnelle, vous permettant de créer des formulaires de contact, des sondages, des formulaires de paiement, et bien plus encore, avec une facilité déconcertante. Les possibilités sont pratiquement illimitées, grâce à la richesse des add-ons et des intégrations disponibles. En explorant ces extensions, vous pouvez étendre les fonctionnalités de vos formulaires pour répondre à des besoins spécifiques et contribuer au succès de votre site Web.
