Vous êtes ici : Accueil | Plugins WordPress | Comment styliser les formulaires de Gravity Forms

Comment styliser les formulaires de Gravity Forms

css-gravity-forms

Formation Gravity FormsDans 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, le livre qu’Alex vous prépare, Relooker son Thème, sera parfait si vous souhaitez vous y mettre.

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 :


body .gform_wrapper .gform_footer input[type=submit] {
background-color: #3ea8ec;
}
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 :


body #gform_wrapper_1 .gform_footer input[type=submit] {
background-color: #3ea8ec;
}
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 !

Si vous avez apprécié cet article, inscrivez-vous à la newsletter

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

C'est parti, je m'inscris !

18 commentaires Ajoutez le vôtre

  1. Merci pour ce tuto! J’ai une petite question concernant le css.. Doit-on obligatoirement mettre le css par défaut du thème sur off si on souhaite personnaliser GF?
    En effet, en le laissant sur on, le style me plait à deux exceptions. Je veux enlever la bordure autour de mes champs et changer la couleur du bouton. J’ai beau mettre le bon code dans ma feuille de style, il ne semble pas pris en compte. J’ai même essayé en ajoutant des !important … (j’ai vidé maintes fois le cache..)
    Quand on veut personnaliser, doit-on donc TOUT personnaliser (css sur off) ou peut-on garder le style de son thème (css sur on) et modifier seulement quelques éléments sur sa feuille de style.. Sur ce point j’ai un doute..
    Merci!

    Répondre
    • Bonjour Christelle,

      De mon côté, je laisse le CSS sur « on » et je n’ai pas besoin d’utiliser de !important pour que mes règles CSS soient prises en compte.

      Est-ce que tu as bien utilisé la doc de RocketGenius que j’ai cité dans l’article pour faire tes modifications ? (Même avec l’inspecteur ça marche bien sinon)

    • @Nicolas

      En fait il y avait un code css pour un media queries qui était mal écrit. Comme ce n’est pas moi qui l’avais mis en place, je n’aurais jamais pensé à ça et je n’ai pas fait attention.. Mais ce code empêchait mes changements css de gravity form. Je commençais à croire que c’est moi qui avait un problème parce que pourtant j’appliquais les bons codes CSS de Gravity.
      Donc finalement tout fonctionne parfaitement depuis que l’erreur est corrigée. 🙂

  2. Bonjour,
    comment faire pour voir les messages poster via le formulaire gravity form
    sur le site directement sans passer par le tableau de bord.
    Cordialement
    Merci bq
    Elsa

    Répondre
    • Bonjour Elsa,

      Pour afficher les messages reçus via Gravity Forms je passe par Gravity View.
      C’est ainsi que j’ai pu créer un concours national où les internautes pouvaient voir les dossiers soumis par les candidats.

    • Merci pour votre réponse mais je ne trouve pas dans ajouter une extension
      Gravity View ?
      Sur le site ou vous m’envoyez il et a 59 dollars……
      Et je me dit pourquoi utilisé un formulaire gratuit et payez 59 dollars juste pour voir les messages dans ce cas peu être que je n’utilise pas le bon formulaire ?
      Merci encore pour votre temps.
      Elsa

    • Elsa,

      Je pense que j’ai mal compris votre demande alors.

      Et c’est pourquoi je vais vous inviter à lire mon article de présentation de Gravity Forms où je vous invite à lire en détail la partie sur les Notifications.

  3. Bonjour,
    Je n’arrive pas à paramétrer les conditions logiques.
    j’ai épluché votre tuto sur la présentation de Gravity forms; il est très complet mais ne détaille justement pas ce point…
    merci de m’aiguiller!

    Répondre
  4. Merci de votre réactivité!
    Cdt

    Répondre
  5. Bonjour,

    J’ai ajouté le code css pour changer la couleur des boutons, mais ça ne prend pas en compte les boutons type « suivant », et j’ai beau chercher partout un code css qui fonctionne, je ne trouve rien…
    De l’aide serait vraiment bienvenue 🙂
    merci d’avance
    (et merci pour ces tutos qui m’ont bien servi!)

    Répondre
    • Bonjour Gwladys,

      Nous ne faisons pas de support ou d’aide individualisée au travers des commentaires.

      Je vous invite plutôt à prendre contact avec le support de Gravity Forms.

  6. Bonjour,

    Je souhaite faire l’acquisition de gravity form mais je souhaiterais savoir si il est possible de créer de add_filter pour intercepter la soumission des formulaire pour me « debrancher » sur des traitements perso.

    Merci

    Répondre
  7. Bonjour, connais-tu l’extension Surbma – Divi & Gravity Forms ?

    Qu’en penses-tu ?

    Merci:)

    Répondre
    • Bonjour Ben,

      Cette extension vient rajouter du style « Divi » aux formulaires Gravity Forms, ce qui peut leur permettre de mieux ressembler au reste du thème.

      En soi, c’est intéressant mais je ne l’ai pas encore poussée dans ses retranchements : je stylise mes formulaires en CSS directement.

  8. Bonjour
    Merci de toutes ces explications c’est top!
    dans le cadre d’un formulaire relativement long, est -il possible de ne pas afficher tous les champs directement mais au fur et à mesure que l’internaute remplisse les champs?
    Y a t-il possibilité d’avoir une barre de progression afin que l’internaute ait une idée du pourcentage de saisie déjà réalisée?

    Merci beaucoup!!!

    Répondre
    • En effet, ce sont des options de Gravity Forms !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

La Marmite ne peut malheureusement pas fournir de support. Merci d'en tenir compte dans votre commentaire 😉

Si vous ne lui en voulez pas, donnez-lui un j'aime sur Facebook :



27 Shares
Share7
Tweet12
Share8