Comment créer un formulaire d'inscription personnalisé dans Elementor

La plupart des petites entreprises commettent une erreur cruciale : elles utilisent des formulaires d'inscription assez standards qui ressemblent à tous les autres formulaires d'inscription sur le web.

Nous constatons ce schéma à plusieurs reprises chaque fois que nous avons l'occasion de vérifier les formulaires de nos clients tout en répondant à leurs requêtes.

Nous avons donc voulu rassembler un guide rapide pour aider nos lecteurs à créer des formulaires d'inscription impressionnants afin de constituer votre liste de diffusion.

Dans ce guide, nous allons vous expliquer les étapes pour créer votre propre formulaire d'inscription personnalisé à l'aide de l'outil de création de pages le plus populaire pour WordPress : Elementor.

Créer des formulaires d'inscription personnalisés dans Elementor

Création d'un formulaire d'inscription personnalisé dans Elementor

Utilisez les liens rapides ci-dessous pour accéder immédiatement à n'importe quelle section du tutoriel :

Commençons.

Étape 1 : Installer Elementor et WPForms

Étant donné que la majorité des gens utilisent Elementor pour publier leurs pages, nous allons vous montrer comment créer des formulaires d'inscription personnalisés à l'aide d'Elementor.

Si vous ne l'avez pas encore, installez Elementor sur votre site.

Vous n'aurez pas besoin d'une licence Elementor premium pour ce tutoriel. Au lieu de cela, vous pouvez utiliser Elementor avec WPForms pour créer des formulaires d'inscription gratuitement ! 😎

Si vous ne savez pas comment installer des plugins, consultez ce guide pour débutants sur l'installation de plugins.

Bien que vous puissiez créer de magnifiques formulaires d'inscription personnalisés en combinant Elementor et WPForms entièrement gratuitement, nous vous recommandons d'essayer la licence WPForms Pro pour accéder à des outils avancés afin d'obtenir de meilleurs résultats.

Une fois que vous avez installé les deux plugins, il est temps de commencer à créer votre formulaire d'inscription entièrement personnalisé !

Étape 2 : Créer ou modifier une page avec Elementor

Vous pouvez ajouter un formulaire d'inscription à une page existante ou à une page toute nouvelle. Habituellement, un formulaire de newsletter est intégré comme l'une des plusieurs sections d'une page de destination plus grande. Mais nous allons créer une nouvelle page contenant uniquement un formulaire d'inscription pour plus de simplicité.

Pour commencer, ouvrez votre tableau de bord WordPress et cliquez sur Pages » Ajouter une nouvelle page.

Une fois dans l'éditeur de blocs WordPress, cliquez sur le bouton Modifier avec Elementor en haut.

Après avoir cliqué sur le bouton, l'éditeur Elementor se chargera en quelques secondes. Vous pouvez créer une page de destination complète à l'aide de l'éditeur glisser-déposer.

Dans l'étape suivante, nous utiliserons le widget WPForms pour créer un formulaire d'inscription personnalisé.

Étape 3 : Créer un nouveau formulaire d'inscription

Comme nous avons juste besoin d'ajouter un formulaire d'inscription personnalisé ici, recherchons le widget WPForms et faisons-le glisser dans la zone de droite.

Lorsque vous avez inséré le widget WPForms dans votre page, vous pouvez sélectionner un formulaire enregistré que vous avez créé avec WPForms ou en créer un nouveau.

Nous allons créer un nouveau formulaire d'inscription en cliquant sur le bouton + Nouveau formulaire dans le panneau de gauche.

À ce stade, le constructeur de formulaires WPForms commencera à se charger en superposition. Ici, vous pouvez créer le formulaire d'inscription que vous devez intégrer sur votre page.

Commencez par nommer votre formulaire. C'est utile pour pouvoir le référencer et le retrouver plus tard dans votre tableau de bord WordPress.

Ensuite, faites défiler vers le bas et utilisez la barre de recherche sous le panneau de sélection des modèles pour trouver un modèle approprié. Nous utiliserons le modèle de formulaire d'inscription à la newsletter pour ce tutoriel.

Après avoir sélectionné le modèle, le constructeur de formulaires se chargera sur votre écran. Vous remarquerez que ce modèle inclut déjà les champs Nom et E-mail, ce qui est essentiellement tout ce dont vous avez besoin pour l'inscription à la newsletter.

Mais le plaisir ne s'arrête pas là ! Nous pouvons améliorer ce formulaire et lui donner un véritable coup de jeune.

L'une des façons d'y parvenir est d'ajouter un titre amusant qui invite plus de personnes à s'inscrire.

Vous pouvez le faire en utilisant le champ Contenu disponible dans WPForms Pro. Nous insérerons le champ Contenu en haut du formulaire.

Après avoir ajouté le champ, cliquez dessus pour ouvrir ses Options de champ associées dans le panneau de gauche.

L'éditeur de texte dans le panneau de gauche vous permet d'ajouter n'importe quel morceau de texte sans aucun code. Nous ajouterons du texte et le formaterons en Titre 4. Ajoutons également un emoji pour que le texte se démarque davantage ! 🕺

Assurez-vous d'appuyer sur le bouton Mettre à jour l'aperçu sous l'éditeur pour voir les modifications prendre effet sur votre formulaire à droite.

Et tant qu'à faire, changeons également le texte du bouton d'envoi et rendons-le plus pertinent par rapport à la nature du formulaire.

Depuis la barre latérale du constructeur de formulaires, cliquez sur Paramètres » Général. Faites défiler vers le bas jusqu'à ce que vous trouviez le champ Texte du bouton d'envoi. Vous pouvez remplacer le texte par défaut simplement en tapant ici.

Génial ! Le formulaire prend déjà une belle forme. C'est le bon moment pour enregistrer le formulaire en appuyant sur Enregistrer en haut.

Mais un formulaire d'inscription à la newsletter serait inutile sans être intégré à votre outil de marketing par e-mail.

Dans l'étape suivante, nous vous montrerons comment intégrer votre formulaire à votre application de marketing afin que les nouveaux abonnés soient automatiquement copiés dans votre liste d'abonnés.

Étape 4 : Connecter le formulaire d'inscription à une plateforme marketing

WPForms prend en charge diverses intégrations marketing à partir des plans Plus et supérieurs. Si vous utilisez WPForms Lite, vous pouvez toujours accéder gratuitement à l'intégration Constant Contact.

Pour cet exemple, nous allons vous montrer rapidement comment connecter votre formulaire d'inscription avec Brevo.

Accédez simplement à l'onglet Marketing dans la barre latérale.

Ensuite, sélectionnez le service auquel vous souhaitez connecter votre formulaire. À l'exception de Constant Contact, toutes les intégrations marketing prises en charge nécessitent que vous installiez d'abord le module complémentaire approprié.

Si vous n'avez pas encore le module complémentaire, WPForms l'installera pour vous lorsque vous cliquerez dessus.

Dans ce cas, nous utilisons Brevo. En cliquant sur Brevo dans l'onglet Marketing, nous avons reçu une invite pour l'installer. Après avoir appuyé sur Oui, installer et activer, il n'a fallu qu'environ 5 secondes pour que le module complémentaire Brevo soit installé et prêt.

Ensuite, avec Brevo sélectionné dans le panneau de gauche, cliquez sur Ajouter un nouveau compte en haut à droite.

Maintenant, entrez simplement votre clé API Brevo et le pseudonyme de votre compte. Si vous avez besoin d'aide supplémentaire pour trouver votre clé API Brevo, consultez notre documentation sur le module Brevo pour plus de détails.

Après avoir saisi les informations requises, cliquez sur Ajouter.

Une fois connecté à votre compte Brevo, une nouvelle liste de paramètres s'affichera dans le panneau de droite.

Utilisez les champs déroulants pour configurer le fonctionnement de votre formulaire avec votre compte Brevo. Vous pouvez définir des actions telles que l'action à effectuer dans Brevo lors de la soumission du formulaire, la liste où les nouveaux abonnés doivent être ajoutés ou supprimés, le mappage des champs d'e-mail, et plus encore.

Lorsque vous avez terminé, assurez-vous d'appuyer sur Enregistrer en haut.

L'intégration marketing est maintenant terminée. C'était facile, n'est-ce pas !

Étape 5 : Styliser votre formulaire d'inscription et publier

À ce stade, nous avons terminé la configuration des fonctionnalités requises pour le formulaire d'inscription. Mais comme nous l'avons souligné au début de ce tutoriel, un formulaire percutant doit être plus qu'une simple fonctionnalité : il doit également être visuellement impressionnant.

Bien que nous ayons déjà rendu notre formulaire beaucoup plus attrayant en ajoutant du texte et des emojis avec le champ Contenu, nous pouvons aller encore plus loin grâce à la puissance combinée de WPForms et Elementor.

Une fois votre formulaire prêt, quittez simplement WPForms en appuyant sur le bouton croix. Vous devriez maintenant avoir l'éditeur Elementor avec votre formulaire nouvellement créé intégré en tant que widget.

Cliquez sur le formulaire, puis sélectionnez l'onglet Styles situé dans le panneau de gauche.

 

Sous cet onglet, vous trouverez des options pour personnaliser les styles des différents composants du formulaire. Par exemple, vous pouvez personnaliser les styles de vos champs, de vos étiquettes et de vos boutons sans aucun code.

Dans notre formulaire, les bordures des champs sont rectangulaires avec des coins droits par défaut. Mais si vous avez besoin de bordures de champ plus arrondies, vous pouvez le faire en augmentant simplement la valeur du rayon de bordure sous Styles de champ.

De même, vous pouvez changer la couleur de vos champs, de vos étiquettes et de vos boutons en un seul clic. Nous utiliserons les couleurs par défaut car elles correspondent parfaitement à notre thème. Mais vous êtes libre d'expérimenter avec différentes couleurs sur votre formulaire.

Dans Elementor, vous pouvez également modifier les styles de votre conteneur de formulaire. Pour ce faire, cliquez sur l'onglet Avancé.

Vous y trouverez une multitude de paramètres fascinants, notamment des ajustements de mise en page, des effets d'animation, des personnalisations d'arrière-plan, et plus encore.

Ajoutons une couleur d'arrière-plan au conteneur du formulaire pour lui donner un aspect plus vivant. Cliquez sur l'option Arrière-plan pour développer le menu avec des paramètres supplémentaires.

Nous ajouterons une couleur unie en cliquant sur l'icône de sélection de couleur à droite.

L'outil de sélection de couleur vous permet de sélectionner facilement n'importe quelle couleur en un clic.

Après avoir sélectionné la couleur, le formulaire est immédiatement beaucoup plus attrayant visuellement !

Cependant, les éléments à l'intérieur du formulaire touchent les bordures du conteneur, ce qui n'est pas très esthétique.

C'est une solution facile !

Cliquez sur l'option Disposition dans le menu Avancé du volet de gauche pour accéder aux paramètres de marge et de remplissage. Nous avons simplement ajouté du remplissage et les résultats sont superbes !

À ce stade, nous sommes prêts à publier votre formulaire. Mais si vous souhaitez essayer d'autres personnalisations, n'hésitez pas à passer plus de temps ici et à explorer différentes options.

Lorsque vous êtes prêt, appuyez sur le bouton Publier en bas.

Vous verrez immédiatement un message apparaître vous demandant si vous souhaitez afficher votre page publiée maintenant.

Allez-y et visualisez votre page après la publication.

Et c'est tout !

Vous venez d'ajouter un formulaire d'inscription personnalisé à l'aide d'Elementor et de WPForms.

Avec cela, vous pouvez vous assurer que votre formulaire est unique pour votre site Web et qu'il est équipé d'intégrations permettant de gagner du temps pour vous aider à développer vos abonnés par e-mail sans aucun tracas !

FAQ sur les formulaires d'inscription Elementor

Vous avez encore des questions sur la création de formulaires d'inscription dans Elementor ? Voici quelques questions que nos clients nous ont posées auparavant.

Ai-je besoin d'Elementor Pro pour créer un formulaire d'inscription ?

Non, vous n'avez pas besoin d'Elementor Pro pour créer un formulaire d'inscription tant que vous avez WPForms installé. Vous pouvez accéder au widget WPForms dans Elementor sans avoir besoin de passer à la version Pro. Cependant, Elementor dispose également de son propre constructeur de formulaires distinct. Si vous souhaitez créer des formulaires d'inscription uniquement avec Elementor, vous aurez besoin d'une licence Pro.

Bien qu'Elementor soit un excellent outil de création de pages, le constructeur de formulaires Elementor est plus basique et présente diverses limitations par rapport aux constructeurs de formulaires avancés comme WPForms.

Comment puis-je styliser mon formulaire d'inscription pour qu'il corresponde à la marque de mon site Web ?

La façon la plus simple de faire correspondre vos formulaires d'inscription à la marque de votre site Web est d'utiliser les couleurs de thème de votre site pour différents aspects de votre formulaire. WPForms sélectionne automatiquement les couleurs primaires et secondaires de votre thème, vous pouvez donc facilement utiliser ces couleurs pour différents composants de votre formulaire tels que les bordures, les étiquettes et les boutons.

Vous pouvez accéder à ces paramètres de personnalisation du style dans le widget Elementor WPForms en cliquant sur l'onglet Style. Là, vous trouverez l'option de changer la couleur de différentes parties de votre formulaire en choisissant parmi les couleurs de thème disponibles pour correspondre à votre marque. Aucun codage n'est nécessaire !

Puis-je utiliser du CSS personnalisé pour styliser mon formulaire d'inscription ?

Oui, vous pouvez ajouter des classes CSS personnalisées à votre formulaire d'inscription si vous utilisez WPForms. Pour ce faire, cliquez sur Style après avoir sélectionné le widget WPForms dans Elementor, puis cliquez sur Avancé. Vous pouvez ensuite insérer du CSS personnalisé pour styliser votre formulaire d'inscription.

Comment puis-je créer un formulaire d'inscription en plusieurs étapes ?

WPForms vous offre plusieurs façons de créer un formulaire d'inscription en plusieurs étapes. Vous pouvez ajouter des sauts de page pour diviser votre formulaire en plusieurs pages, ou vous pouvez utiliser le module complémentaire Lead Forms qui transforme automatiquement un formulaire régulier en un formulaire d'inscription en plusieurs étapes avec des sauts de page entre les deux.

Ensuite, créez un formulaire ConvertKit personnalisé

WPForms s'intègre à diverses plateformes marketing, y compris ConvertKit. Nous avons un guide dédié vous montrant comment créer un formulaire ConvertKit personnalisé. Assurez-vous de le consulter !

Vous pouvez également comparer des options gratuites de formulaires de commande si vous vendez des produits en ligne.

Créer des formulaires d'inscription personnalisés dans Elementor

Prêt à créer votre formulaire d'inscription personnalisé ? Commencez dès aujourd'hui avec le plugin constructeur de formulaires WordPress le plus simple. WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, veuillez nous suivre sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.