Widget d'élément de formes gravitaires : ajoutez et stylisez des formes gravitaires sans CSS
Gravity Forms est un widget Pro dans Master Addons qui place n'importe quel Gravity Form sur une page Elementor et vous permet de le styliser à partir du panneau Choisissez le formulaire dans une liste déroulante, commencez à partir de l'une des 11 variantes de conception, puis ajustez les étiquettes, les champs, les cases à cocher, le bouton Soumettre, les barres de progression de plusieurs pages et les messages d'erreur Le formulaire continue de fonctionner exactement comme vous l'avez construit dans Gravity Forms.
11 modèles de formulaires prêts à l'emploi
La liste déroulante Variations de conception comporte 11 styles Choisissez-en un comme point de départ, puis changez tout ce que vous voulez dans l'onglet Style Vous pouvez également masquer le titre et la description définis dans Gravity Forms et écrire un titre personnalisé dans Elementor à la place.
- Basculez entre 11 variantes de conception à partir d’une seule liste déroulante.
- Afficher ou masquer le titre du formulaire, la description, les étiquettes et les espaces réservés.
- Ajoutez un titre et une description personnalisés sans modifier le formulaire lui-même.
Coiffage des boutons de champ, de la case à cocher et de la radio
Les entrées et les zones de texte obtiennent l'arrière-plan, la couleur du texte, la bordure, le rayon, l'ombre de la boîte et la typographie, avec un état Focus séparé Définissez indépendamment les largeurs et les hauteurs pour les entrées et les zones de texte, ainsi que le remplissage et l'indentation du texte. Les boutons radio et les cases à cocher peuvent avoir des tailles, des couleurs et un rayon de bordure personnalisés pour les états normaux et cochés.
- États normaux et Focus pour les champs de saisie.
- Largeur et hauteur séparées pour les entrées et les zones de texte.
- Styles de radio et de cases à cocher personnalisés, séparateurs de sections et couleurs des prix des produits.
Soumettre le bouton, les formulaires et les messages de plusieurs pages
Rendez le bouton de soumission automatique, pleine largeur ou une largeur personnalisée, puis stylisez ses couleurs, sa bordure, son rayon, son remplissage, son ombre de boîte et sa typographie, avec des couleurs de survol Les formulaires multi-pages obtiennent un style pour les boutons de page et la barre de progression Les messages d'erreur, les champs non valides et le message de remerciement ont chacun leurs propres paramètres de couleur, et vous pouvez masquer complètement les messages d'erreur.
- Bouton de soumission automatique, pleine largeur ou largeur personnalisée avec couleurs de vol stationnaire.
- Bouton de page et style de barre de progression pour les formulaires multi-pages.
- Couleurs pour les messages d'erreur, les champs non valides et le message de remerciement.
Widget Shortcode d'Elementor par rapport au widget Gravity Forms
Le widget Shortcode gratuit d'Elementor peut également afficher une forme Gravity avec [gravityform id="1"]. Le formulaire fonctionne, mais il semble cependant que votre thème et vos formes gravitaires le stylisent, et changer cela signifie écrire CSS.
| Widget Shortcode | Formulaires gravitationnels Master Addons | |
|---|---|---|
| Prix | Gratuit | Maître Addons Pro |
| Choisir le formulaire | Tapez l'ID du formulaire dans un shortcode | Choisissez-le dans une liste déroulante |
| Dessins prêts à l'emploi | Aucun | 11 variantes de conception |
| Style des champs et des boutons | Css personnalisé | Onglet de style, avec états de mise au point et de survol |
| Barre de progression et style d'erreur | Css personnalisé | Onglet Style |
| Ajustements mobiles | Requêtes multimédias CSS | Contrôles réactifs pour les tailles et l'espacement |
Utilisation d'un plugin de formulaire différent ? Master Addons a des widgets de style gratuits pour Formulaire de contact 7, Formulaires WP, Formes Ninja et weForms.
Comment ajouter un Formulaire de gravité à Elementor
Vous avez besoin de Gravity Forms avec au moins un formulaire créé et de Master Addons Pro. Suivez ensuite ces étapes :
- Activez le widget Gravity Forms dans le tableau de bord Master Addons.
- Ouvrez votre page dans Elementor, recherchez dans le panneau du widget “Gravity Forms” et faites glisser le widget Master Addons en place.
- Choisissez votre formulaire dans la liste déroulante Formulaire de contact.
- Choisissez l'une des 11 variantes de conception.
- Décidez s'il faut afficher le titre du formulaire, la description, les étiquettes et les espaces réservés Activez Utilisez Ajax pour soumettre le formulaire sans recharger la page.
- Ouvrez l'onglet Style pour définir les couleurs, les bordures, l'espacement et la typographie, puis publiez.
Si la liste déroulante est vide, vérifiez que Gravity Forms est actif et que vous avez créé un formulaire.
Foire aux questions pour les formulaires gravitaires
Ai-je besoin d'installer le plugin Gravity Forms ?
Oui. Les styles de widgets que vous créez dans Gravity Forms, de sorte que le plugin doit être installé et actif. Sans cela, le widget affiche un avis vous demandant d'activer Gravity Forms.
Comment ajouter un Formulaire de gravité à Elementor ?
Installez Gravity Forms et créez votre formulaire Dans Elementor, faites glisser le widget Master Addons Gravity Forms sur la page, choisissez le formulaire dans la liste déroulante Formulaire de contact, choisissez une variante de conception et stylisez-la dans l'onglet Style. Le guide étape par étape ci-dessus couvre chaque paramètre.
Puis-je rendre les formulaires réactifs sur les appareils mobiles ?
Oui. De nombreux contrôles de taille, d'espacement et d'alignement ont des valeurs distinctes pour le bureau, la tablette et le mobile, vous pouvez donc modifier le remplissage, la largeur des champs et la largeur des boutons pour les écrans plus petits.
Les modules complémentaires logique conditionnelle et Gravity Forms fonctionneront-ils toujours ?
Oui. Le widget génère votre formulaire via Gravity Forms lui-même, donc la logique conditionnelle, les formulaires multi-pages et les modules complémentaires fonctionnent de la même manière que vous les configurez. Le widget ne change que l'apparence du formulaire.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
Duplicateur de messages/pages
