Avant propos
Ninja Forms (1) est une extension (plug-in) WordPress (2) puissante afin de générer simplement et facilement des formulaires de saisies (Contact, Commentaires, eMailing, News Letter …).
Cette extension de base (version gratuite) est amplement suffisante pour gérer les cas simple voir complexe de gestion de vos formulaires.
Introduction
Comme toute extension qui a des ajouts payantes, Ninja Forms ne déroge pas à la règle, il pousse à la consommation pour installer Layout & Styles
mais en cherchant bien sur internet on trouve de l’information afin de contourner l’achat de ce plug-in parfaitement inutile dans la plus part des cas.
Tout d’abord sur le site même de Ninja Forms, l’on trouve suffisamment d’information pour démarrer ne serait-ce que le positionnement des champs sur plus d’une colonne :
Styler votre Formulaire (Anglais)
Exemple :
PS: multiplier les colonnes c’est bien, on gagne en ergonomie et l’on arrive à tout mettre (les champs) sur une seules page, mais garder à l’esprit tout de même qu’au delà de 2 colonnes, Ninja Forms perd de sa superbe et est moins Responsive Resign sur vos smartphone.
Positionner les paramètres de base en Français / Européen
Ninja Forms étant développé en anglais, les paramètres de bases (ex: Format de date = M/D/Y, devise=$) sont positionnés comme tel.
Afin de corriger cela, il suffit donc d’aller sur :
- Ninja Forms
- Réglages
- Format de date : « D/M/Y« , où D = Jour, M = Mois, Y = Année
- Devise = « Euros«
- Captcha je conseil de passer par le Captcha Google, pour cela il suffit de se rendre dans votre console Google ici : ReCaptcha Google
cela évite les SPAM sur votre formulaire de Contact- Clé de site reCAPTCHA = « <Votre Clé du site >«
- Clé secrète reCAPTCHA = « <Votre Clé secrète >«
- Langue de reCAPTCHA = « fr«
Retirer ou modifier le texte par défaut :
Les champs marqués d’un astérisque * sont obligatoires.
- Aller dans Ninja Forms
- Sélectionner votre formulaire à modifier
- Aller dans l’onglet : « Mode Avancée«
- Rester dans « Paramètre d’affichage«
- Déployer : « Mode Avancée«
- Modifier ou supprimer le message:
- pour modifier le message: mettre « Votre Message Personnalisé » dans le champs : « Les champs marqués d’un astérisque * sont obligatoires. «
- pour supprimer le message: mettre un » » « espace » dans le champs : « Les champs marqués d’un astérisque * sont obligatoires. «
Pour aller plus loin
Contexte
Les bouts de code CSS suivants ont été testé dans le cadre d’un WordPress installer avec le Thème Salient (3) mais cela devrait fonctionner avec d’autres installations et Thèmes WordPress.
Le Thème Salient est dit « Responsive Multi-purpose » c.a.d: qu’il est compatible avec tout type de terminaux PC, Mac, iPad, iPhone, Android…, et permet une faciliter d’édition des pages et des articles grâce entre autre à l’utilisation de l’extension intégrée : Visual Composer mais aussi de Snipets et autres bouts de codes.
Afficher le contour des champs textes
Salient est épuré, et parfois cela joue des tours, je m’explique, voulant intégrer une gestion de formulaire comme Ninja Forms, au démarrage les champs de type texte ne s’affichent pas ou sont invisible comme par exemple :
PS: n’oubliez pas à chaque modification de paramétrage d’appuyer sur le bouton : « Enregistrer les modifications »
en changeant simplement dans l’écran d’administrateur de votre WordPress (Back Office) le paramètre suivant :
Salient / Form Styling / Overall Form Style à inherit from theme skin
cela permet d’afficher les contours des champs de type texte comme sur l’exemple :
PS: n’oubliez pas à chaque modification de paramétrage d’appuyer sur le bouton : « Enregistrer les modifications »
Exemples de Codes CSS
les codes suivants sont à placer pour le Thème Salient
Salient > General Settings > CSS/Script Related > Custom CSS Code
à adapter en fonction de votre Thème WordPress
Changer les couleurs du bouton
input[type="button"].ninja-forms-field {
color: #11FF18!important;
background-color: #D011FF!important;
}
où
- color : permet de changer le code couleur HTML du texte
- background-color : permet de changer le code couleur HTML de l’arrière plan du bouton
Pour changer aussi la couleur de fond lorsque l’on passe au-dessus du bouton
input[type="button"].ninja-forms-field:hover{
background-color: #46000D!important;
}
où
- background-color : permet de changer le code couleur HTML de l’arrière plan du bouton lorsque la souris passe dessus.
Pour changer un seul formulaire spécifique
Afin de ce référer par exemple à « Contact me » qui est le formulaire Ninja Forms par défaut, son nom unique est « form-1″, voici comment ne mettre que du code s’appliquant à ce formulaire:
#nf-form-1-cont {
color: black;
background-color: #939393;
}
Pour changer le style (effet d’ombre, couleur de fond …) d’un seul formulaire spécifique
Afin de donner un effet d’ombre à votre formulaire, voici un code d’exemple :
#nf-form-1-cont {
color: black;
background-color: #939393;
padding: 15px;
box-shadow: 0px 3px 5px #444; /* Creer une ombre autour du formulaire */
color: white;
border-radius: 9px; /* Creer des coins de bordure du formulaire incurves */
text-shadow: 2 5 1px #453f3f; /* effets sur les textes */
}
Résultat:
Effet simple (couleur de fond, coins incurvés…) sur les champs d’un formulaire spécifique
#nf-form-1-cont .ninja-forms-field {
background-color: #0000FF!important; /* couleur bleu pour le fond du champs */
color:#58FAF4; /* couleur turquoise pour les textes a remplir */
border: 1px solid #0000FF; /* bordure des champs */
font-size: 16px; /* taille des caracteres */
border-radius: 5px; /* bordures des champs incurvees */
}
Résultat:
Conclusion
Ce n’est pas exhaustif mais cela donne déjà un bonne aperçu de ce qui est possible de faire avec Ninja Forms.
J’espère que cela vous aidera bien à avancer sur le style de votre formulaire sans passer par les extensions payantes.
Amusez-vous bien !
Notes
(1) Ninja Forms
(2) extension (plug-in) WordPress
(3) Salient
