Category

CMS

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 

wordpress logo horizontal

Pourquoi utiliser WordPress pour faire son Site Web plutôt qu’un autre système ?

By | CMS

Un peu d’histoire

WordPress à l’origine permettait seulement de gérer des Blog. Avant que le rouleau compresseur Facebook n’écrase tout sur son passage, le Blog était le moyen le plus facile et le plus populaire pour écrire et fédérer sur un sujet, tenir un journal …, car les « billets » (ou articles) se succédaient dans un ordre chronologique.

Qui n’a pas connu les heures de gloire d’Over-Blog ou SkyRock lève le doigt ! WordPress entre autre est né du besoin pour certains d’être indépendant (voir Open Source) des plateformes qui hébergeaient justement ces plateformes de Blog comme SkyRock et consoeurs et en profitaient pour placer de la publicité intempestive qui en irritaient plus d’un.

Communauté active de WordPress

Comme WordPress (wordpress.org) est une plateforme Open Source : toute le monde peut l’utiliser gratuitement et aussi pour les développeurs y contribuer pour enrichir de fonctionnalités du système.

Toute plateforme dont la communauté est active est certain:

  • de garder la pérennité d’un support via des forums et autres blog dans le temps,
  • d’avoir accès à une bibliothèque d’extensions (1) qui s’agrandi de jour en jour
  • de trouver des ressources accessible rapidement

D’ailleurs les hébergeurs de Site Web l’ont bien compris puisqu’ils proposent pratiquement tous de créer vos Site Web sour WordPress pratiquement en 1 click.

Transformation de gestionnaire de Blog en CMS

Au début d’Internet, les pages HTML étaient dites « statiques », c’est à dire que le contenu et sa présentation étaient mélangés. L’apparition de système de gestion des pages dynamiques s’est fait vite sentir car elles permettent :

  • la séparation du contenu (articles, pages, images, videos …) de sa forme (de sa présentation ou le rendu graphique) permet une grande flexibilité lors de la création des pages et articles de votre Site Web.
  • un « Editeur » de contenu (Journaliste, rédacteur de blog, Freelance, patron de PME, responsable Marketing, Comm Internet ou externe…) n’a plus réellement besoin de connaitre la technique pour gérer un Site Web simple.

Grâce à cette communauté très active, des fonctions de créations de Site Web sont apparues dans WordPress au fil du temps, d’où la transformation de Blog vers la dénomination CMS (2)

WordPress sans nulle doute le numéro 1 mondial des CMS, il suffit de vérifier les chiffres chez X3techs :

  • 28% des Sites Web dans le monde
  • 59% des CMS dans le monde
Sites Web
28
CMS
59

 Conclusion

Pour toutes les raisons détaillés ci-dessus, le recourt à WordPress comme système gérant votre Site Web va de soi.

Notes :

(1) une bibliothèque d’extensions (plug-ins) permet d’enrichir  WordPress par exemple en lui ajoutant des fonctionnalités de SEO (Yoast…), de formulaires avancés (Forms 7, …) de protection contre le hack, phishing, ou autres squatting de

(2) CMS: Content Management System autrement dit : Gestionnaire de Système de Contenu