Laissez-moi vous deviner. Vous disposez d’un formulaire créé avec Gravity Forms et souhaitez modifier son apparence.

Malgré les nombreuses fonctionnalités proposées par cette excellente extension, il n’est pourtant pas si simple de personnaliser le look de ses formulaires. 

Homme dit que c'est pas facile
Non, c’est pas vraiment easy

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 inciter les internautes à s’inscrire à une 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.

Vous allez découvrir comment procéder, et je vous présenterai plusieurs solutions qui existent autour de Gravity Forms, afin de rendre vos formulaires encore plus attractifs.

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.

Initialement publié en juillet 2015, cet article a été mis à jour en avril 2020.

Maîtrisez Gravity Forms comme un pro en 1h

Les fondamentaux pour manipuler Gravity Forms, l’extension de création de formulaires incontournable.

Les styles par défaut de Gravity Forms

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

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.

Deux hommes hochent la tête

Ceci étant dit, si vous souhaitez vraiment personnaliser l’apparence de vos formulaires, il n’existe pas de solution « facile », si l’on met de côté les widgets de formulaires proposés par les constructeurs de page (Elementor, Divi, Beaver Builder), bien sûr.

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ù, par exemple, 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 gratuite ensuite.

Je vous parlerai également d’un petit plugin 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.

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

Je n’ai 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 :

HTML

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

Un bouton Envoyer bleu
Le bouton « Envoyer » est bleu de base.
Bouton Envoyer noir
Le bouton « Envoyer » est noir après l’ajout du code CSS personnalisé.

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 graphique.

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 dans ma barre latérale (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 :

HTML

Pour l’exemple, j’ai modifié la couleur du bouton Envoyer du formulaire que j’ai appelé Formulaire de contact sur mon site, et qui porte l’ID n°4.

En ligne, cela donne ça :

Couleur des boutons en CSS

La couleur noire s’applique uniquement au bouton du formulaire qui porte l’ID n°4 (chiffre 1 sur la capture). Le reste des boutons de formulaires présents sur le site se voient appliquer la couleur de base, le bleu (chiffre 2 sur la capture).

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.

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

Besoin d’un hébergeur pour votre site ?

Faites comme WPMarmite, choisissez o2switch. Non seulement les performances sont au rendez-vous mais le support est exceptionnel.

Utiliser l’extension Styles & Layouts for Gravity Forms lorsqu’on n’est pas à l’aise avec le CSS

Si toutefois vous n’avez pas envie de mettre les mains dans le cambouis, il existe une extension freemium qui va vous permettre d’arriver au même résultat : Styles & Layouts for Gravity Forms.

Styles & Layouts for Gravity Forms

Il s’agit de l’extension la plus populaire du répertoire officiel WordPress pour styliser vos formulaires. Elle cumule plus de 30 000 installations actives et bénéficie d’avis utilisateurs très positifs (4,5 étoiles/5 au moment d’écrire ces lignes).

Bien que son interface utilisateur ne soit disponible qu’en anglais, sa prise en main est simple et rapide. Une fois le plugin activé, vous retrouvez tous les réglages directement sur l’Outil de personnalisation (Customizer, en anglais), au niveau des réglages de votre thème.

Pour cela, passez par le menu Apparence > Personnaliser. Vous y retrouverez un menu Styles & Layouts Gravity Forms.

Une fois que vous aurez sélectionné le formulaire de votre choix à styliser, vous vous retrouverez avec une quinzaine de menus pour personnaliser votre formulaire (+ de 150 options, au total).

Vous pourrez notamment agir sur les couleurs, la police et sa taille, l’alignement, l’arrière-plan, les bordures, ou encore les marges de nombreux éléments comme : 

  • Le titre du formulaire
  • Les champs et sous-champs
  • La description des champs
  • Le bouton Envoyer
  • Les boutons Radio
  • Les messages de confirmation et d’erreur après l’envoi d’un formulaire
Réglages de Styles & Layouts for Gravity Forms

Les changements sont visibles en temps réel et on apprécie aussi la possibilité de modifier la largeur du formulaire en responsive, afin de l’adapter à différents supports (ordinateur, smartphone et tablette).

Pour celles et ceux d’entre-vous qui en veulent encore plus, il existe deux options premium avec cette extension : 

  • Vous procurer un pack contenant 8 add-ons (à partir de 69,99$ pour une utilisation sur 1 site, soit environ 64€). L’add-on Grid Layout permet par exemple de créer des formulaires sur plusieurs colonnes.
  • Acheter l’un des 8 add-ons à l’unité (29,99$ pour 1 site, soit environ 27€).

Jouer avec l’agencement de vos champs grâce à CSS Ready Classes for Gravity Forms

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 « Classe CSS personnalisée » qui se situe dans l’onglet « Apparence » de vos champs.

Classe CSS personnalisée Gravity Forms
Le champ à utiliser se trouve dans l’onglet Apparence

Mais si vous n’avez pas envie de retourner voir la documentation à chaque fois, je vous invite à installer l’extension gratuite CSS Ready Classes for Gravity Forms.

Pour la petite histoire, il s’agit d’une version modifiée de l’extension Gravity Forms CSS Ready Class Selector. Je vous recommandais cette dernière avant la mise à jour de cet article. 

Elle fonctionne toujours très bien mais elle n’est plus mise à jour depuis 7 ans et n’a pas été testée avec les 3 dernières versions majeures de WordPress. Alors autant s’équiper d’un plugin au goût du jour ;-).

CSS Ready Classes for Gravity Forms, puisque c’est lui qui nous intéresse aujourd’hui, ajoutera un petit lien CSS à côté du champ Classe CSS personnalisée du menu Apparence.

Lien du plugin CSS Ready Classes

En cliquant sur le lien, une fenêtre va s’ouvrir en surbrillance. 

Les classes CSS en popup

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 !

Maîtrisez Gravity Forms comme un pro en 1h

Les fondamentaux pour manipuler Gravity Forms, l’extension de création de formulaires incontournable.

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 :

Et si vous souhaitez jouer sur la disposition de vos champs, le plugin CSS Ready Classes for Gravity Forms 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 !