Ajout de WPForms à une page Elementor

Souhaitez-vous ajouter un formulaire WordPress à votre site Web à l'aide d'Elementor ? Vous pouvez facilement utiliser le widget WPForms Elementor pour ajouter des formulaires à vos pages et les modifier pour qu'ils aient l'apparence que vous souhaitez. Mieux encore, vous pouvez tout faire directement depuis le constructeur de pages Elementor.

Ce tutoriel vous montrera comment ajouter WPForms à une page Elementor.

---

Avant de commencer, assurez-vous d'avoir installé et activé le plugin WPForms et vérifié votre clé de licence.

1. Activation du balisage moderne

Avant de styliser vos formulaires dans Elementor, vous devrez activer le balisage moderne dans WPForms. Pour ce faire, allez dans WPForms » Paramètres et sélectionnez l'onglet Général.

Ensuite, faites défiler jusqu'à la section Général et assurez-vous que l'option Inclure la stylisation du formulaire est définie sur Style de base et thème du formulaire.

Après cela, réglez le bouton bascule Utiliser le balisage moderne sur la position ACTIVÉ pour l'activer.

Assurez-vous de sauvegarder vos modifications après avoir activé cette option. Une fois le balisage moderne activé, vous êtes prêt à styliser vos formulaires à l'aide d'Elementor, comme décrit dans les sections suivantes.

2. Intégration de votre formulaire

Tout d'abord, vous devrez ouvrir la page ou l'article où vous souhaitez intégrer votre formulaire.

Si vous ne voyez pas le constructeur Elementor lorsque vous ouvrez pour la première fois l'éditeur de page ou d'article, cliquez sur le bouton bleu Modifier avec Elementor.

Une fois que vous avez ouvert le constructeur Elementor, regardez dans la barre latérale gauche. Dans la section des widgets De base, vous devriez voir un widget intitulé WPForms.

Faites glisser le widget WPForms dans la zone de widgets sur le côté droit de l'écran.

Ensuite, vous devrez choisir entre ajouter un formulaire existant ou en créer un tout nouveau dans Elementor.

Ajout d'un formulaire existant

Si vous souhaitez ajouter un formulaire que vous avez déjà créé à cette page, cliquez sur le menu déroulant dans le widget WPForms. Vous verrez tous les formulaires que vous avez créés. Sélectionnez celui que vous souhaitez ajouter à votre page.

Elementor vous montrera un aperçu en direct de votre formulaire tel qu'il apparaîtra sur votre site Web. Si vous avez besoin de modifier le formulaire, cliquez sur le lien Modifier le formulaire sélectionné dans le panneau de gauche.

Le constructeur de formulaires s'ouvrira dans une fenêtre contextuelle afin que vous puissiez apporter des modifications à votre formulaire. Lorsque vous avez terminé la modification, cliquez sur Enregistrer, puis cliquez sur l'icône X dans le coin supérieur droit pour fermer le constructeur.

Vous verrez instantanément toutes les modifications que vous avez apportées dans le constructeur Elementor.

Créer un nouveau formulaire

Si vous n'avez pas encore de formulaires, ou si vous souhaitez simplement en créer un nouveau pour cette page, vous pouvez créer un nouveau formulaire sans jamais fermer le constructeur de pages Elementor. Pour ce faire, cliquez sur le bouton + Nouveau formulaire dans le panneau de gauche.

Le constructeur de formulaires WPForms s'ouvrira alors afin que vous puissiez commencer à créer votre formulaire, en commençant par ajouter un nom et choisir un modèle.

Lorsque vous avez terminé de créer votre formulaire, cliquez sur le bouton Enregistrer dans le coin supérieur droit du constructeur de formulaires, puis cliquez sur l'icône X pour le fermer.

Vous verrez alors votre nouveau formulaire dans le constructeur de pages Elementor. Si vous devez apporter d'autres modifications, cliquez simplement sur le lien Modifier le formulaire sélectionné dans le panneau de gauche.

3. Configuration des options d'affichage

Pour afficher le titre ou la description du formulaire sur la page, cliquez pour développer les Options d'affichage du widget WPForms dans le panneau situé sur le côté gauche du constructeur de pages.

Activez ensuite les paramètres pour Afficher le nom du formulaire et la description du formulaire selon vos préférences.

Vous pouvez également modifier l'apparence du formulaire sur le frontend dans l'onglet Avancé du constructeur d'Elementor.

Pour savoir comment utiliser les paramètres ici, consultez la documentation d'Elementor sur les options de widgets avancés.

4. Personnalisation de votre formulaire

WPForms s'intègre à Elementor et vous permet de personnaliser l'apparence de vos formulaires. Pour commencer, accédez à l'onglet Style depuis le menu latéral d'Elementor.

L'onglet Style dans Elementor vous permet d'ajuster le style des champs de formulaire, des étiquettes et des boutons sans avoir besoin de connaissances en CSS. Vous y trouverez également une option pour copier ces paramètres de style d'un formulaire à un autre dans la section Avancé.

Nous aborderons chacune de ces options plus en détail ci-dessous.

Thèmes

Le paramètre Thèmes vous permet de choisir un thème de couleur prédéfini pour mettre à jour automatiquement le style des champs, des étiquettes, des boutons, du conteneur et de l'arrière-plan de votre formulaire.

Pour appliquer, cliquez simplement sur votre thème préféré, et il ajustera instantanément les couleurs des champs, des étiquettes, des boutons, du conteneur ou de l'arrière-plan de votre formulaire.

Si vous personnalisez des paramètres individuels après avoir sélectionné un thème, ces modifications seront enregistrées sous forme de nouveau thème de formulaire personnalisé. Ce nouveau thème sera ajouté à votre liste de thèmes disponibles et pourra être appliqué à n'importe quel formulaire, comme vous le feriez avec n'importe quel autre thème de formulaire.

Vous pouvez également renommer ce thème pour une identification facile dans le champ Nom du thème.

Pour supprimer un thème de formulaire personnalisé, cliquez simplement sur le bouton SUPPRIMER LE THÈME sous le nom du thème.

Styles de champ

Dans l'option Styles des champs, vous verrez les paramètres de Taille, de Rayon de bordure et les options de couleur pour l'Arrière-plan, la Bordure et le Texte.

Les paramètres de Taille contrôlent la taille de chaque champ de votre formulaire. Les options disponibles incluent : Petit, Moyen et Grand.

Ensuite, vous trouverez le paramètre de Rayon de bordure. Cela modifie l'arrondi des coins de vos champs – un nombre plus élevé signifie des coins plus arrondis.

Ensuite, vous trouverez des options pour mettre à jour les couleurs d'Arrière-plan, de Bordure et de Texte de vos champs de formulaire. Pour modifier les couleurs par défaut, cliquez sur la couleur adjacente à l'étiquette.

Ceci ouvre un sélecteur de couleur, vous permettant de choisir la couleur souhaitée. Si vous avez une couleur de marque spécifique pour vos formulaires, vous pouvez entrer directement le code couleur dans le champ HEXA. Bien que HEXA soit l'unité par défaut, vous pouvez également la remplacer par RGBA ou HSLA selon vos besoins.

Styles d'étiquette

Sous Styles des étiquettes, vous verrez des options pour ajuster la taille et les couleurs de vos étiquettes de formulaire. Dans le menu déroulant Taille, vous pouvez choisir entre Petite, Moyenne ou Grande, selon votre préférence.

Ensuite, vous trouverez des options pour mettre à jour les couleurs de l'Étiquette, de la Sous-étiquette & Aide et du message d'Erreur de vos champs. Ci-dessous, nous avons expliqué les options de couleur disponibles.

• Étiquette : Cette option change la couleur du texte de vos étiquettes.
• Sous-étiquette & Aide : Cette option contrôle la couleur des sous-étiquettes et des aides des champs qui apparaissent lorsque WPForms suggère des valeurs aux utilisateurs sur le frontend.
• Erreur : La couleur des messages d'erreur qui s'affichent si une erreur se produit lorsque les utilisateurs remplissent votre formulaire.

Styles de bouton

Les paramètres Styles des boutons vous permettent de personnaliser le style de vos boutons. Pour changer la taille du bouton, cliquez sur le menu déroulant Taille et sélectionnez l'option que vous souhaitez utiliser.

Pour donner des bords arrondis au bouton, entrez simplement la valeur dans le champ Rayon de bordure.

Ensuite, vous verrez des options pour mettre à jour les couleurs d'arrière-plan et de texte de votre bouton.

Styles du conteneur

Les paramètres Styles de conteneur vous permettent de personnaliser le remplissage, le style de bordure, la taille de la bordure, le rayon de la bordure, l’ombre et les couleurs du conteneur de votre formulaire. Ci-dessous, nous avons détaillé les options de conteneur disponibles.

• Remplissage : Cette option définit l’espace à l’intérieur des bordures du conteneur du formulaire. Vous pouvez augmenter ou diminuer cette valeur pour ajuster l’espacement autour du contenu de votre formulaire.
• Bordure (style) : Ce paramètre vous permet de choisir le contour de votre conteneur, avec des options pour une bordure Pleine, Tirets ou Pointillés.
• Taille de bordure : Détermine l'épaisseur de la bordure de votre conteneur. L'unité par défaut est le pixel (px), mais vous pouvez sélectionner l'unité qui convient le mieux aux besoins de votre conception.
• Rayon de bordure : Ceci ajuste l'arrondi des coins de votre conteneur, ajoutant un bord plus doux ou plus défini à l'apparence de votre formulaire. La mesure par défaut est en pixels (px) mais peut être modifiée pour s'adapter à votre style.
• Ombre : Choisissez la taille de l'effet d'ombre pour votre conteneur afin d'ajouter de la profondeur à la conception de votre formulaire, avec des options allant de aucune à grande.
• Bordure (couleur) : Mettez à jour la couleur de la bordure de votre conteneur pour l'aligner avec votre thème visuel, améliorant ainsi l'esthétique générale du formulaire.

Styles d'arrière-plan

Les paramètres Styles d'arrière-plan vous donnent le contrôle sur l'image et la couleur d'arrière-plan de votre formulaire.

Pour commencer, sélectionnez une source d'image dans le menu déroulant Image. Pour les images déjà téléchargées sur votre site Web ou pour en télécharger de nouvelles, sélectionnez l'option Bibliothèque de médias. Pour explorer une sélection plus large d'images professionnelles, sélectionnez l'option Photos de stock.

Après avoir fait votre sélection, cliquez sur la section Choisir une image pour continuer.

Si vous sélectionnez Bibliothèque de médias dans le menu déroulant Image, la galerie multimédia de votre site Web s'ouvrira, vous permettant de choisir une image ou d'en télécharger une nouvelle. Si Photos de stock est sélectionné, vous serez présenté avec une sélection de photos de stock à choisir pour l'arrière-plan de votre formulaire.

Une fois que vous avez sélectionné votre image, la section Styles d'arrière-plan offre des options de personnalisation supplémentaires :

• Position : Ce paramètre vous permet d'aligner votre image d'arrière-plan dans le formulaire en sélectionnant des options telles que Haut au centre, Bas au centre, et plus encore pour obtenir le placement parfait.
• Répétition : Choisissez comment votre image d'arrière-plan se répète. Les options sont Aucune répétition pour une seule image, Mosaïque pour répéter l'image sur tout l'arrière-plan, Répéter horizontalement pour répéter sur la largeur, et Répéter verticalement pour répéter sur la longueur.
• Taille : Ceci ajuste la façon dont votre image d'arrière-plan s'adapte au formulaire. Couvrir garantit que l'image couvre tout l'arrière-plan, s'adaptant à la taille du formulaire. Si Dimensions est sélectionné, vous pouvez spécifier la largeur et la hauteur exactes de votre image.
• Couleurs : Cette option vous permet de sélectionner une couleur d’arrière-plan, qui sera visible lorsqu’aucune image n’est utilisée.

Style avancé

Dans cette section, vous pouvez ajouter des classes CSS à votre formulaire en tapant le nom de la classe dans le champ Classes supplémentaires.

Ensuite, vous trouverez le code CSS reflétant tous les styles que vous avez ajoutés au formulaire sous Copier / Coller les paramètres de style.

Cette option vous permet de copier les styles d’un formulaire à un autre.

Si vous avez copié les paramètres de style d’un autre formulaire, vous pourrez les coller rapidement ici. Après avoir collé l’extrait de code, le formulaire utilisera les styles du formulaire précédent.

Si vous souhaitez réinitialiser toute personnalisation que vous avez ajoutée à votre formulaire, cliquez sur le bouton Réinitialiser les paramètres de style. Cela restaurera votre formulaire à son état d'origine sans aucun style personnalisé.

Après avoir stylisé votre formulaire, assurez-vous de sauvegarder vos modifications en publiant la page ou en l’enregistrant en tant que brouillon.

5. Publication de votre formulaire

Avant de mettre votre formulaire en ligne, il est conseillé de le tester pour vous assurer qu'il fonctionne comme prévu. Notre guide sur comment tester correctement vos formulaires WordPress avant de les lancer inclut une liste de contrôle complète pour vous aider dans ce processus.

Lorsque vous êtes prêt à publier votre formulaire, cliquez sur le bouton Publier ou Mettre à jour en bas du constructeur de pages Elementor.

C'est tout ! Vous savez maintenant comment intégrer WPForms sur une page à l'aide d'Elementor.

Ensuite, souhaitez-vous afficher ou masquer des champs en fonction des choix ou des saisies de vos utilisateurs dans vos formulaires ? Consultez notre guide simple sur l'utilisation de la logique conditionnelle intelligente pour savoir comment l'implémenter.