Ninja Forms – garder la main sur le style de présentation de vos formulaires

By 31 janvier 2018CMS, Formulaire
ninja forms 300x225

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 :

  1. Ninja Forms
  2. Réglages
    1. Format de date : « D/M/Y« , où D = Jour, M = Mois, Y = Année
    2. Devise = « Euros« 
    3. 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

      1. Clé de site reCAPTCHA = « <Votre Clé du site >« 
      2. Clé secrète reCAPTCHA = « <Votre Clé secrète >« 
      3. Langue de reCAPTCHA = « fr« 

Retirer ou modifier le texte par défaut :

Les champs marqués d’un astérisque * sont obligatoires.

  1. Aller dans Ninja Forms
  2. Sélectionner votre formulaire à modifier
  3. Aller dans l’onglet : « Mode Avancée« 
  4. Rester dans « Paramètre d’affichage« 
  5. Déployer : « Mode Avancée« 
  6. Modifier ou supprimer le message:
    1. pour modifier le message: mettre « Votre Message Personnalisé » dans le champs : « Les champs marqués d’un astérisque * sont obligatoires. « 
    2. 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 :

Formulaire Ninja Forms Salient champs invisible

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 StylingOverall Form Style  à inherit from theme skin

 

cela permet d’afficher les contours des champs de type texte comme sur l’exemple :

Formulaire Ninja Forms Salient champs visible

 

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;
}

  • 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;
}

  • 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:

Formulaire Ninja Forms - fond gris - avec effet d ombre

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:

Formulaire Ninja Forms - fond bleu des champs et leurs coins incurves

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 

bzels

Author bzels

More posts by bzels