Widget d'élémenteur Ninja Forms : Style Ninja Forms sans CSS
Le widget Form Ninja dans Master Addons est gratuit Il place un formulaire que vous avez construit dans le plugin Ninja Forms sur une page Elementor et vous donne des contrôles de style pour le titre, les étiquettes, les champs, les boutons radio et les cases à cocher, le bouton de soumission et les messages Quatre variantes de conception sont gratuites, et sept autres sont livrées avec Master Addons Pro. Ninja Forms gère toujours les champs, les notifications et les soumissions.
Comment ajouter des formes Ninja à Elementor
Vous avez besoin du plugin gratuit Ninja Forms et d'au moins un formulaire intégré.
- Installer et activer Formes Ninja depuis WordPress.org, puis construisez votre formulaire dans le tableau de bord Ninja Forms.
- Vérifiez que le Forme Ninja le widget est activé dans les paramètres du widget Master Addons.
- Modifiez votre page avec Elementor, recherchez dans le panneau Forme Ninja et faites glisser le widget.
- Choisissez votre formulaire dans le Formulaire de contact déposez et choisissez de montrer Étiquettes et Espace réservé texte.
- Dans l'onglet Style, choisissez un Variation de conception(en), puis ajustez les entrées, les cases à cocher, le bouton de soumission et les messages.
- Mettez à jour la page et envoyez une entrée de test pour vérifier que Ninja Forms la reçoit.
Variations de conception : 4 gratuites, 7 pro
Variation de conception dans l'onglet Style applique un look prêt à l'ensemble du formulaire Style Un à Style Quatre sont gratuits, et Style Cinq à Style Onze ont besoin de Master Addons Pro. Choisissez-en un comme point de départ, puis modifiez les détails dans les sections ci-dessous.
- Gratuit: Style un, style deux, style trois et style quatre.
- Pro : Style cinq à style onze.
- Options de contenu : afficher ou masquer les étiquettes et le texte de l'espace réservé, ainsi que les messages d'erreur et les erreurs de validation.
Style de saisie, zone de texte et cases à cocher
Entrée et zone de texte dispose d'onglets Normal et Focus avec couleur d'arrière-plan et bordure, plus couleur du texte, rayon de bordure, alignement, retrait du texte, largeur et hauteur de la zone de saisie et de texte, remplissage, espacement et typographie. Radio et boîte à coches peut remplacer les valeurs par défaut du navigateur par des styles personnalisés : taille, couleur, largeur de bordure et couleur de bordure, rayon de bordure séparé pour les cases à cocher et les boutons radio, et une couleur cochée.
- Étiquettes et espace réservé : couleur du texte et typographie pour les étiquettes, et une couleur du texte pour les espaces réservés.
- Description du champ : couleur, typographie et espacement pour le texte d'aide sous un champ.
- Titre et description : alignement, couleur, typographie et marge pour le titre et la description du formulaire.
Soumettre des messages de bouton et de formulaire
Soumettre le bouton définit l'alignement, la largeur complète ou personnalisée, la couleur de l'arrière-plan et du texte, la bordure, le rayon de la bordure, le rembourrage, la marge supérieure, la typographie et l'ombre de la boîte, avec un onglet de survol pour l'arrière-plan, le texte et la couleur de la bordure. Les sections de message stylisent ce que les visiteurs voient
- Message de réussite : couleur du texte et typographie.
- Avis sur les champs obligatoires : couleur, espacement et typographie.
- Erreurs: couleur du texte pour les messages d'erreur, ainsi que les couleurs de description et de bordure pour les champs qui échouent à la validation.
Widget de code court d'élément vs le widget de forme Ninja
Free Elementor peut déjà afficher une forme Ninja : collez son shortcode dans le widget Shortcode La forme fonctionne de la même manière de toute façon La différence est la façon dont vous la stylisez.
| Caractéristique | Widget Elementor Shortcode | Widget Master Addons Form Ninja |
|---|---|---|
| Prix | Gratuit (Cœur de l'élément) | Gratuit, Pro pour 7 autres variantes de conception |
| Ajout du formulaire | Collez un shortcode tel que [ninja_form id=« 1 »] | Choisissez le formulaire dans une liste déroulante |
| Style | Votre propre CSS | Contrôles des onglets de style pour les champs, les cases à cocher, les boutons et les messages |
| Regards prédéfinis | Non | 4 gratuits, 7 Pro |
| Masquer les étiquettes ou les espaces réservés | CSS | Commutateurs |
| Champs, notifications, soumissions | Formes Ninja | Formes Ninja |
Les deux itinéraires exécutent le même formulaire Ninja Forms. Le widget vous enregistre en écrivant CSS pour faire correspondre le formulaire au reste de la page.
Autres widgets de formulaire : Formulaire de contact 7 (gratuit), Formulaires WP (gratuit) et Formes Gravitaires (Pro).
Foire aux questions pour le formulaire Ninja
Ai-je besoin de l'installation du plugin Ninja Forms ?
Oui. Installez et activez le plugin gratuit Ninja Forms et construisez-y votre formulaire en premier. Sans cela, le widget affiche un avis de” “Ninja Forms is Not Activated au lieu d'un formulaire.
Le widget Ninja Form est-il gratuit ?
Oui. Le widget et le Style Un à Style Quatre sont gratuits dans les modules complémentaires principaux. Style Cinq à Style Onze ont besoin de Master Addons Pro.
Puis-je rendre le formulaire réactif sur les appareils mobiles ?
Oui. De nombreux contrôles de taille et d'espacement, tels que la largeur et la hauteur d'entrée, le remplissage, l'alignement et la largeur des boutons, prennent des valeurs distinctes pour le bureau, la tablette et le mobile.
Comment styliser les messages d'erreur ou la notification de réussite ?
Utilisez les sections Message de réussite, Avis sur les champs obligatoires et Erreurs dans l'onglet Style Ils définissent la couleur du texte et la typographie pour le message de réussite, ainsi que les couleurs du texte, de la description et de la bordure pour les erreurs. Il n'y a pas de paramètre de couleur d'arrière-plan pour ces messages.
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
