Publié par le 22 juillet 2015 • 32 Commentaires
Formation Gravity Forms

Dans un précédent article, je vous présentais les fonctionnalités phares de Gravity Forms et pourquoi il est considéré par beaucoup comme la Rolls des extensions de formulaires.

Aujourd’hui je voudrais m’attarder sur un autre sujet : celui de l’apparence. Et surtout des solutions qui existent autour de Gravity Forms pour modifier le look des formulaires.

Vous me direz probablement que ce ne sont pas les éléments les plus importants dans le design d’un site. Mais tout de même ! Il ne faudrait pas qu’ils deviennent la verrue qui vient tout gâcher.

Alors si vous souhaitez harmoniser vos formulaires à votre charte graphique, cet article est pour vous.

Mais on peut également aller plus loin. J’utilise parfois Gravity Forms comme formulaire de capture d’adresse mail pour inscrire les internautes à la newsletter. Placé en sidebar, il faut que le formulaire soit visible. Qu’il attire le regard.

Et c’est pourquoi une mise en forme particulière est nécessaire. Nous verrons comment faire dans cet article.

Au programme aujourd’hui :

  1. Les styles par défaut de Gravity Forms
  2. Comment utiliser du CSS personnalisé pour personnaliser l’apparence de vos formulaires
  3. Utiliser une extension payante pour effectuer vos modifications
  4. Modifier l’agencement de vos champs, notamment au travers de colonnes

Pour information, si vous décidez de vous procurer un des plugins payants que l’on cite dans cet article, nous toucherons une petite commission grâce à l’affiliation.

Cela nous permet notamment de financer nos recherches et l’acquisition des extensions que l’on vous présente. Mais vous verrez que l’on vous présente tout aussi bien des plugins gratuits que payants : notre but n’est pas de maximiser nos revenus mais de vous apporter les meilleurs conseils possibles.

Commençons déjà par parler des styles contenus dans le plugin ou le thème que vous utilisez.

Les styles par défaut de Gravity Forms

Sachez tout d’abord que Gravity Forms embarque ses propres fichiers CSS.

C’est à dire qu’il y a déjà un style basique qui est appliqué. On peut aussi le désactiver si l’on veut partir de zéro et que l’on sait manipuler le CSS.

Mais on le voit régulièrement : de nombreux thèmes – notamment Premium – proposent une compatibilité avec Gravity Forms.

Cela veut dire qu’ils auront prévu des fichiers CSS pour que vos formulaires s’intègrent encore mieux dans l’apparence de votre site.

Là encore, ce sera basique la plupart du temps. Il sera juste question de polices, de marges, de couleurs… Mais cela peut permettre d’avoir une meilleure homogénéité dans votre design.

Ceci étant dit, si vous souhaitez vraiment personnaliser l’apparence de vos formulaires, il n’existe pas de solution « facile ».

Vous ne trouverez pas d’éditeur pensé pour les débutants pour faire un design sur-mesure, il faudra très vite passer par du CSS.

C’est d’ailleurs là où le plugin Formidable Pro se démarque : il permet de créer très facilement des « styles » que l’on peut ensuite appliquer aux formulaires que l’on sélectionne. Hélas, vous l’aurez compris, ce ne sera pas aussi facile avec Gravity Forms.

C’est pourquoi je vais vous présenter la façon de procéder par le CSS dans un premier temps, puis en utilisant une extension premium ensuite.

Je vous parlerai également d’un petit add-on gratuit très pratique pour jouer avec la mise en forme « structurelle » des champs de vos formulaires.

Styliser les formulaires par le CSS

Si vous désirez modifier l’apparence de vos formulaires, il vous faudra donc ajouter du code CSS personnalisé. Et nous vous conseillons de l’ajouter dans le fichier style.css de votre thème enfant.

Si toutefois vous n’en avez pas et que vous utilisez le plugin Jetpack, son module « Custom CSS » vous permettra d’arriver au même résultat.

Je vais ici vous expliquer le fonctionnement basique des modifications que vous pourrez apporter à vos formulaires.

Je n’ai pas cependant pas prétention à vous expliquer les bases du CSS. Par contre, la formation qu’Alex vous a concocté, CSS Express, sera parfaite si vous souhaitez vous y mettre.

Apprenez le CSS une bonne fois pour toutes

Créez des sites au rendu impeccable sans y passer des heures avec CSS Express.

Quoi qu’il en soit, on n’est pas non plus lâchés dans la nature. L’équipe de Gravity Forms a préparé une documentation sur les classes CSS utilisées par leur extension.

Vous la trouverez sur le site de RocketGenius, la maison-mère qui édite le plugin.

On y voit une liste plutôt conséquente nous permettant de comprendre quelles classes utiliser pour modifier les éléments de nos formulaires.

Par exemple, si je veux modifier la couleur du bouton « Envoyer », je vais utiliser la classe correspondante (trouvée dans la documentation dont je vous parle plus haut) et faire comme ceci :

Modifier la couleur du bouton 'Envoyer' sur tous les formulaires

J’ai ainsi mon bouton qui passe de noir (thème par défaut sur TwentyFifteen, le thème utilisé pour mes tests) à bleu.

Changer la couleur du bouton "Envoyer" avec Gravity Forms
Le bouton « Envoyer » est noir à gauche, bleu à droite.

Mais en procédant ainsi, j’applique cette modification à tous mes formulaires. Dans ce cas-ci, c’est quand même plutôt approprié : je fais en sorte que tous les boutons de formulaire sur mon site aient la couleur principale de ma charte.

Mais imaginons que je ne souhaite apporter une modification qu’à un seul de mes formulaires ? Pour une mise en forme particulière ou pour un formulaire de capture d’adresse email en sidebar par exemple.

Et bien il me suffira d’ajouter l’ID du formulaire en question juste avant les classes que je veux modifier. Mon code ressemblera à ceci :

Modifier la couleur du bouton 'Envoyer' sur le formulaire 1 seulement

Pour trouver l’ID du formulaire en question, vous pouvez vous rendre dans le tableau de bord de vos formulaires. Vous pouvez également utiliser l’inspecteur de code de Chrome ou Firefox pour le voir en un coup d’oeil.

Liste des formulaires Gravity Forms
Trouver l’ID d’un formulaire dans le tableau de bord
Trouver l'ID d'un formulaire Gravity Forms
Trouver l’ID d’un formulaire à l’aide de l’inspecteur. Ici avec Google Chrome.

Utiliser Gravity Forms Styler lorsqu’on est pas à l’aise avec le CSS (Premium)

Si toutefois vous n’avez pas envie de mettre les mains dans le cambouis, il existe une extension payante qui va vous permettre d’arriver au même résultat. Il s’agit de Gravity Forms Styler, qui vous coûtera 33$ pour une licence valide sur un seul site.

Il a été vendu plus de 1500 fois à l’heure où j’écris ces lignes et sa note moyenne est de 4,25/5. Ce qui est franchement honorable.

Son fonctionnement est assez simple : on va manipuler des « styles ». Vous pouvez donc en créer plusieurs et les assigner à des formulaires.

Un shortcode est alors généré : il vous suffira de l’insérer dans la page où se situe le formulaire pour qu’il entre en action.

Maintenant, pour ce qui est des options disponibles, elles sont nombreuses.

Vous aurez droit à une loooongue page de paramètres pour personnaliser chaque partie de vos formulaires. Cela veut néanmoins dire que vous connaissez les noms anglais de chaque élément.

Par exemple si je vous parle du border-radius du form wrapper, vous voyez à quoi cela correspond ?

Même si vous ne savez pas utiliser le CSS, il vous faudra de bonnes notions pour comprendre quel élément modifier pour arriver au résultat voulu.

Voici un exemple de ce que cela peut donner. Mais j’aurais également pu le faire seulement avec du CSS.

Utilisation de Gravity Forms Styler pour personnaliser l'apparence d'un formulaire
Avant / Après l’utilisation de Gravity Forms Styler

Je tiens à vous prévenir quand même : malgré toutes les options proposées, il m’a fallu recourir à du CSS personnalisé.

C’est notamment les « sub-labels » (Nom et Prénom que vous voyez) qui ne sont pas modifiables par l’extension. Donc bon, si vous pouvez tout faire avec du CSS, cela n’en sera que mieux !

Jouer avec l’agencement de vos champs grâce à Gravity Forms CSS Ready Classes Selector (gratuit)

On a vu comment modifier l’apparence des formulaires pour avoir un look unique. Mais il existe une autre astuce pratique pour introduire des colonnes dans vos formulaires.

Ce que je veux dire par là c’est que vous pouvez rassembler des champs sur une même ligne plutôt que de les faire apparaître les uns en dessous des autres.

Voici un exemple en image :

Utiliser les colonnes pour gérer les champs de Gravity Forms
À gauche les champs Email et Site Internet sont normaux, à droite ils sont sur 2 colonnes

Il est également possible de jouer sur la disposition des éléments d’une liste, toujours dans le même esprit. On peut ici ajouter des colonnes ou bien également modifier la hauteur entre les éléments de notre liste.

Boutons radio et cases à cocher sous Gravity Forms
L’affichage classique des listes
Affichage en colonnes des listes sous Gravity Forms
Ici on gagne de la place et de la visibilité grâce à l’affichage en colonnes

Pour les deux cas, ce sont en réalité des classes CSS que l’on utilise. Et l’équipe de Gravity Forms les met à la disposition de tous dans sa documentation.

Il ne vous restera alors plus qu’à ajouter ces classes dans le paramètre « Custom CSS Class » qui se situe dans l’onglet « Appearance » de vos champs.

Trouver la custom CSS class dans Gravity Forms
Le champ à utiliser est dans l’onglet « Appearance »

Mais si vous n’avez pas envie de retourner voir la documentation à chaque fois, je vous invite à installer l’extension gratuite Gravity Forms CSS Ready Classes Selector qui vous ajoutera un petit bouton à côté de ce champ.

Utiliser Gravity Forms CSS Ready Classes Selector
Une fois l’extension activée, vous verrez ce petit bouton apparaître

Vous n’aurez alors plus qu’à sélectionner la classe que vous souhaitez appliquer. C’est un gain de temps non négligeable si vous êtes amené à faire de nombreux formulaires. Sauf si vous préférez apprendre les classes CSS par coeur !

En résumé

L’apparence de vos formulaires a son importance : elle vient contribuer au look professionnel de votre site ou elle peut aider vos formulaires à attirer le regard.

Si vous voulez personnaliser le style de Gravity Forms vous pourrez :

  • le faire avec en ajoutant du CSS personnalisé ;
  • ou utiliser l’extension payante Gravity Forms Styler.

Et si vous souhaitez jouer sur la disposition de vos champs, le plugin Gravity Forms CSS Ready Classes Selector viendra vous faciliter la tâche.

Et si vous cherchez d’autres solutions, je vous invite à regarder le comparatif des plugins de formulaire.

Et vous, avez-vous des astuces pour styliser vos formulaires ? Des bonnes pratiques à partager ?

On en discute dans les commentaires !