Comment personnaliser les formulaires WordPress dans Elementor

La personnalisation des formulaires WordPress dans Elementor peut transformer complètement l'apparence de vos formulaires, les faisant s'intégrer parfaitement au reste de votre site web.

Avec WPForms et le constructeur Elementor, vous pouvez obtenir un contrôle total sur le style, vous permettant d'ajuster tout, des couleurs et polices à l'espacement et à la mise en page.

Dans cet article, je vais vous montrer comment personnaliser vos formulaires WordPress préférés dans Elementor. De plus, je présenterai certains de nos modèles de formulaires les plus populaires que vous pourriez vouloir vous procurer.

Personnalisez les formulaires WordPress dans Elementor ! :)

Comment personnaliser un formulaire dans Elementor ?

Personnaliser un formulaire pour votre site Web est un excellent moyen de présenter votre image de marque, votre personnalisation et votre intention spécifiques. Et avec les constructeurs intuitifs proposés par WPForms et Elementor, la personnalisation est un jeu d'enfant.

Installer et activer les plugins

Il va sans dire que vous aurez besoin de WPForms et d'Elementor pour suivre ces étapes.

Mais nous allons le dire quand même : assurez-vous d'installer et d'activer les plugins WPForms et Elementor dans votre tableau de bord WordPress.

Pour des instructions complètes sur l'installation de plugins sur votre site web, consultez ce guide pratique.

Maintenant, vous êtes prêt à commencer la personnalisation. Nous allons vous montrer comment le faire dans Elementor, en commençant par les éléments essentiels nécessaires pour un contact de base. Ensuite, nous développerons ces éléments (jeu de mots voulu) pour chaque exemple de formulaire à mesure qu'ils deviennent un peu plus complexes.

Envie de plus d'inspiration ? Consultez cette approche différente pour ajouter et personnaliser des formulaires WordPress dans Elementor.

Formulaire de contact

Un formulaire de contact est l'un des formulaires les plus nécessaires sur votre site web, et reste notre modèle de formulaire le plus populaire.

Pour créer un formulaire de contact avec Elementor, naviguez d'abord vers votre tableau de bord WordPress. Cliquez sur Pages dans la barre latérale, puis sur Ajouter.

Ensuite, cliquez sur le bouton bleu Modifier avec Elementor pour charger le constructeur de pages Elementor, qui vous permet d'intégrer votre formulaire de contact et de personnaliser divers éléments de page.

Maintenant, le constructeur de pages Elementor s'ouvrira, où vous pourrez glisser-déposer toutes sortes de blocs et d'éléments à inclure sur une page.

Faites glisser le bloc WPForms et déposez-le sur la page. Vous pouvez maintenant sélectionner un formulaire dans un menu déroulant ici, ou vous pouvez ajouter un nouveau formulaire.

Cliquons sur + Nouveau formulaire pour intégrer notre formulaire dans le bloc.

Le constructeur WPForms se chargera alors pour que vous puissiez personnaliser le formulaire que vous souhaitez utiliser dans Elementor.

Tout d'abord, Nommez votre formulaire en tapant dans la boîte en haut de l'écran. Nous nommerons le nôtre « Formulaire de contact » afin de savoir où et comment l'utiliser plus tard.

Ensuite, Sélectionnez un modèle dans la galerie pour construire votre formulaire.

Vous pouvez utiliser un modèle de formulaire vierge pour construire votre formulaire à partir de zéro, ou vous pouvez prendre de l'avance en utilisant un modèle spécifique pré-fait avec tous les champs nécessaires pour vous lancer.

Pour notre formulaire de contact, nous utiliserons un modèle.

Vous pouvez faire défiler la page pour parcourir les modèles, ou vous pouvez rechercher quelque chose de spécifique. La recherche d'un « Formulaire de contact », par exemple, donnera toutes sortes de modèles de formulaires de contact parmi lesquels vous pourrez choisir.

Nous utiliserons le modèle Simple Contact Form pour créer notre formulaire.

C'est l'un de nos modèles de formulaire les plus populaires, nous vous recommandons donc de l'utiliser pour en tirer également parti !

Et, comme toujours, ce modèle de formulaire est facile à personnaliser avec des champs et des paramètres supplémentaires. Cliquez simplement et maintenez le champ souhaité enfoncé, puis faites-le glisser sur votre formulaire. Ensuite, cliquez simplement sur le champ pour le modifier.

Avec le modèle Simple Contact Form, votre formulaire recueille le nom de votre utilisateur, afin que vous puissiez personnaliser toute correspondance avec lui, et il vous transmet également un message ou un commentaire de sa part.

Un élément de personnalisation supplémentaire à considérer sur votre formulaire est le message de confirmation que vos utilisateurs reçoivent lorsqu'ils soumettent leur formulaire. Accédez à la section Paramètres du générateur de formulaires, puis cliquez sur l'onglet Confirmations.

Ici, vous pouvez modifier le message qui apparaît à l'écran après que l'utilisateur de votre formulaire a cliqué sur « Soumettre ».

Sur notre modèle Simple Contact Form, le message de confirmation dit : « Merci de nous avoir contactés ! Nous vous contacterons sous peu. »

À noter, tous les modèles de formulaire que nous proposons dans notre galerie sont prêts à l'emploi avec un message de confirmation pertinent pour vos utilisateurs, mais nous vous encourageons à modifier ce message comme bon vous semble !

Lorsque vous avez terminé vos personnalisations du formulaire, cliquez sur le bouton Enregistrer en haut. Vous pouvez fermer le générateur de formulaires en cliquant sur le X dans le coin droit de la fenêtre du générateur de formulaires.

Maintenant, nous allons revenir au constructeur de pages Elementor.

Avec notre modèle de formulaire de contact intégré à la page, nous pouvons maintenant personnaliser les styles du formulaire.

Cliquez sur l'onglet Style pour ouvrir toutes les options du menu. Nous pouvons modifier le style des champs, des étiquettes, des boutons, et plus encore.

Ou, utilisez simplement l'un des nombreux Thèmes fournis ici qui ont l'image d'arrière-plan, les couleurs et d'autres styles pré-faits pour vous.

C'est un moyen facile d'obtenir un look cohérent et personnalisé sans beaucoup d'efforts de style !

Sur notre formulaire, nous avons utilisé les paramètres de Style des champs pour augmenter le rayon et la couleur des bordures en quelques clics.

Vous pouvez voir comment quelques personnalisations rapides ont un impact considérable sur le style de cette page de formulaire.

Quels types de styles allez-vous proposer ?

Assurez-vous de publier votre page de formulaire une fois que vous avez terminé la personnalisation des styles du formulaire.

Cliquez simplement sur le bouton Publier dans la barre d'outils inférieure.

Maintenant, nous allons nous appuyer sur ces étapes pour personnaliser davantage de pages de formulaire avec Elementor.

Créez votre formulaire de contact dans Elementor ! 🙂

Formulaire d'inscription à la newsletter

Un autre type de formulaire courant que vous pourriez vouloir sur votre site Web est un formulaire d'inscription à la newsletter.

Pour personnaliser ce formulaire dans Elementor, vous commencerez par les premières étapes ci-dessus : ajouter et modifier une nouvelle page avec Elementor, utiliser le bloc WPForms pour ajouter un nouveau formulaire et sélectionner un modèle à utiliser pour le formulaire.

Étant donné que ce formulaire est celui que les visiteurs de votre site utiliseront pour s’inscrire à votre newsletter, vous voudrez un modèle qui inclut des champs pour collecter leurs noms et adresses e-mail.

Nous utiliserons donc le modèle de formulaire d’inscription à la newsletter.

Ensuite, vous pouvez utiliser le générateur de formulaires pour inclure des champs supplémentaires tels qu'une case à cocher pour les conditions générales, un CAPTCHA personnalisé pour empêcher les inscriptions de spam, et même des fonctionnalités de géolocalisation.

Quant au message de confirmation, il est une fois de plus pris en charge pour vous grâce au modèle.

Comme toujours, nous vous encourageons à écrire le message que vous souhaitez que vos nouveaux abonnés reçoivent. En attendant, il est indiqué : « Merci de vous être inscrit à la newsletter ! Nous vous contacterons bientôt. »

N’oubliez pas d’enregistrer votre formulaire d’inscription à la newsletter une fois que vous avez terminé, avant de quitter.

Ensuite, de retour dans Elementor, nous pouvons à nouveau personnaliser le style du formulaire. Cette fois, modifions les styles des champs, les styles des étiquettes et les styles des boutons.

Nous allons personnaliser les styles des champs ici, comme nous l’avons fait pour le formulaire de contact ci-dessus : augmenter le rayon du bord à 10 pixels et changer sa couleur en noir.

Maintenant, concentrons-nous également sur les styles des étiquettes. Pour rendre les étiquettes du formulaire plus proéminentes, augmentez leur taille. Choisissons également une couleur amusante pour les messages d’erreur. Vous pouvez voir cette couleur utilisée pour les astérisques sur les étiquettes des champs.

Ensuite, tournez votre attention vers le bouton d’envoi.

Comme vous pouvez le voir sur notre formulaire, nous avons utilisé les styles de bouton pour augmenter la taille du bouton, ainsi que les couleurs de l’arrière-plan et du bord pour correspondre au reste de notre style.

Et pour obtenir une correspondance de couleur parfaite, nous avons simplement copié la couleur rose que nous avons choisie avec le sélecteur de couleur dans les styles d’étiquettes, et l’avons collée dans le sélecteur de couleur d’arrière-plan pour les styles de bouton.

Ensuite, nous allons devenir encore plus créatifs avec toutes les options de style de formulaire dans Elementor.

Créez un formulaire de newsletter dans Elementor ! :)

Formulaire d'inscription au camp

Les formulaires d’inscription sont certains de nos modèles les plus recherchés, avec les modèles de formulaires pour les inscriptions de camps étant les plus demandés, récemment.

Nous allons survoler la plupart des étapes que nous avons déjà couvertes ici, et passer directement à la sélection d’un modèle de formulaire de WPForms.

Pour ce formulaire, allez-y et prenez le modèle de formulaire d’inscription au camp des Girl Scouts dans la sélection de notre galerie.

Nous ne nous soucierons pas trop de modifier les champs du formulaire ou le message de confirmation, bien que vous soyez plus que bienvenus pour personnaliser le modèle afin qu’il corresponde aux besoins de votre organisation.

Ensuite, dans le constructeur de pages Elementor, nous allons travailler dans les paramètres avancés.

Cet onglet de paramètres nous permet de faire beaucoup en termes de style avec le bloc WPForms, y compris le téléchargement d’une image pour un arrière-plan personnalisé.

Cliquez sur l'onglet Arrière-plan sous les paramètres avancés pour créer votre arrière-plan. et assurez-vous que le Type d'arrière-plan est défini sur Classique.

Vous pouvez ensuite télécharger une image pour qu'elle serve d'arrière-plan affiché dans le bloc WPForms.

Bien que la configuration de la taille de l'image d'arrière-plan, de sa position et d'autres éléments demande un peu de travail, cette fonctionnalité de personnalisation en vaut la peine.

Avec notre exemple ci-dessus, par exemple, nous aimerions probablement modifier les couleurs du texte, les marges et l'alignement, ainsi que d'autres éléments du formulaire avant de le publier.

Créez un formulaire d'inscription dans Elementor ! 🙂

Formulaire de commande client

Nous ne pouvons pas écrire un article présentant des modèles de formulaires sans mentionner nos modèles de formulaires de commande.

Nous allons une fois de plus sauter les étapes que nous avons déjà couvertes et passer directement aux personnalisations. Pour notre formulaire ici, nous utiliserons notre modèle de formulaire de commande le plus populaire : le Modèle de formulaire de commande client.

Maintenant, nous retournons aux paramètres Avancés du bloc WPForms. Nous revisitons également l'onglet Arrière-plan, mais cette fois, le Type d'arrière-plan est Dégradé.

Avec les paramètres de dégradé, vous pouvez mélanger et assortir toutes sortes de combinaisons de couleurs auxquelles vous pouvez penser, qui seront appliquées en dégradé sur l'arrière-plan de votre formulaire de commande.

Le résultat final est magnifique et les options de personnalisation sont infinies.

Maintenant, ce n'est qu'un aperçu de toutes les options de personnalisation et de style que vous avez avec WPForms et Elementor. Assurez-vous donc de consulter nos tutoriels et articles supplémentaires sur Elementor.

Créez un formulaire de commande dans Elementor ! 🙂

FAQ sur la façon de personnaliser les formulaires WordPress dans Elementor

La personnalisation des formulaires dans Elementor est un sujet d'intérêt populaire parmi nos lecteurs. Voici les réponses à quelques questions courantes à ce sujet :

Ai-je besoin d'Elementor pour WordPress ?

Vous n'avez pas nécessairement besoin du plugin Elementor pour votre site WordPress, mais il est incroyablement utile.

Elementor est un plugin de création de pages qui offre une interface glisser-déposer, ce qui le rend idéal pour ceux qui n'ont pas de solides compétences en codage ou d'expertise en conception. Il offre une personnalisation étendue, vous permettant de créer les mises en page et les conceptions de votre site Web souhaitées.

Ainsi, en avoir besoin pour votre site Web WordPress dépend de vos exigences et préférences spécifiques. Si vous êtes à l'aise avec HTML, CSS et que vous avez de solides compétences en conception, vous n'aurez peut-être pas besoin d'Elementor.

Elementor est disponible en versions gratuite et premium, vous pouvez donc toujours commencer par la version gratuite et passer à la version supérieure si nécessaire, ce qui le rend adaptable à vos besoins.

Comment personnaliser un formulaire dans WordPress ?

Pour personnaliser un formulaire dans WordPress, vous pouvez utiliser WPForms avec Elementor. Tout d'abord, créez votre formulaire dans WPForms, puis ouvrez l'éditeur Elementor, ajoutez le widget WPForms et choisissez le formulaire que vous avez créé. À partir de là, utilisez les outils de conception d'Elementor pour modifier les couleurs, les polices et la mise en page afin qu'ils correspondent au style de votre site.

Comment accéder aux formulaires Elementor ?

Pour accéder aux formulaires Elementor, ajoutez le widget WPForms dans l'éditeur Elementor. Ouvrez une page dans Elementor, faites glisser le widget WPForms sur la page, et sélectionnez le formulaire que vous souhaitez afficher. Cela vous permet de personnaliser l'apparence du formulaire directement dans Elementor.

Ensuite, connectez les formulaires Elementor à Google Sheets

Félicitations ! Vous êtes en bonne voie pour créer des formulaires géniaux dans Elementor. Bien qu'Elementor puisse stocker vos soumissions de formulaires dans votre tableau de bord WordPress, il y a des moments où vous voudrez peut-être conserver une copie de vos soumissions de formulaires et de vos prospects dans une feuille Google. Essayez de connecter ces formulaires à Google Sheets. 

Créez votre formulaire WordPress maintenant

Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de création 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é, suivez-nous sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.