Comment styliser les formulaires de Gravity Forms

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. 

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.

Initialement publié en juillet 2015, cet article a été mis à jour en mai 2021.

Hébergez votre site chez o2switch

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

ESSAYEZ O2SWITCH

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.

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

Découvrir la formation

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.

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 :

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

Voici ce que ça donne :

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 e-mail 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 :

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 :

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’œil.

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.

Il s’agit de l’extension la plus populaire du répertoire officiel WordPress pour styliser vos formulaires. Elle cumule plus de 40 000 installations actives et bénéficie d’avis utilisateurs très positifs (4,6 é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.

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 7 add-ons (à partir de 69,99 $ pour une utilisation sur 1 site, soit environ 64 €). L’add-on Theme Pack propose par exemple une trentaine de templates de formulaires prêts-à-l’emploi permettant de relooker vos formulaires en un clic.
• Acheter l’un des 7 add-ons à l’unité (29,99 $ pour 1 site, soit environ 27 €).

Télécharger le plugin Styles & Layouts for Gravity Forms :

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.

Depuis la version 2.5 de Gravity Forms, il est possible d’agencer les champs des formulaires en colonnes, 4 maximum, sans utiliser de plugin ou de classes CSS.

Mais grâce à ces dernières, on peut notamment organiser les éléments de notre liste en colonnes et modifier leur hauteur.

L’équipe de Gravity Forms met les classes CSS à 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.

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.

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

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 cœur !

Télécharger le plugin CSS Ready Classes for Gravity Forms :

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 Styles & Layouts for Gravity Forms.

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 !

Recevez gratuitement les prochains articles et accédez à des ressources exclusives. Plus de 20000 personnes l'ont fait, pourquoi pas vous ?

Je m'inscris

À propos de l'auteur

Nicolas Richer

Je suis formateur WordPress chez WPChef et grand fan de Divi.