Tag

formulaire Archives - Site Web Facile

ninja forms 300x225

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

By | CMS, Formulaire

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 

ninja forms 300x225

Labels Ninja Forms – jouer avec leurs positions dans vos champs de saisie

By | Formulaire

Introduction

Dans ce billet, nous allons nous focaliser sur la position des labels Ninja Forms par rapport à vos champs de saisie du formulaire.

Comparaison des positions des labels Ninja Forms

Les deux Formulaires suivant proviennent de Ninja Forms. Dans le premier les labels des champs sont en position par défaut en haut du champs de saisie, en revanche dans le deuxième formulaire les labels sont bien inséré directement dans les champs de saisie.

 

Labels Ninja Forms a l exterieur des Champs - Formulaire - Contact

Positionner vos Labels Ninja Forms par rapport à vos champs de saisie

Ninja Forms positionne par défaut les labels des champs du formulaire « au-dessus » du champs à remplir, comme sur l’exemple suivant:

Formulaire NinjaForms Salient Label Nom au-dessus du Champs

Suivant vos besoins il peut être placé ailleurs:

  1. à gauche
  2. à droite
  3. en-bas
  4. Masquer

Si l’on comprend aisément les 3 premiers cas, le dernier : « Masquer » est plus énigmatique mais est grandement important, car il permet de placer un label directement dans le champs de saisie

Pourquoi mettre le texte de vos Labels Ninja Forms à l’intérieur de vos champs de saisie

il peut s’agir d’une question de goût ou de présentation mais cette fonction intéressante qui est proposé pour gérer au mieux les labels Ninja Forms permettent aussi :

  • un visualisation plus moderne du formulaire
  • un gain de place, ce qui facilite le remplissage des champs sur son smartphone (*)
  • est donc plus Responsive Design

Positionner vos Labels à l’intérieur de vos champs de saisie

une fois que vous êtes connecté au Back-office de votre WordPress,

  1. Aller dans Ninja Forms
  2. Choisir le Formulaire à créer ou à modifier
  3. Aller sur le(s) champs à changer et
  4. mettre :
    POSITION DE TITRE = « Masquer« , dans cette exemple du champs « Nom »
    MODE AVANCE / ETIQUETTE = « le label que vous voulez« , dans cette exemple du champs « Nom » s’est: « Votre Nom« 
  5. puis bouton terminé et aussi publier le formulaire

 

Notes:

(*) Depuis Fin 2016 : Pour la première fois, Internet est plus utilisé sur mobile que sur PC