Gravity Forms : LA Meilleure Extension pour vos Formulaires WordPress

Utilisé sur des millions de sites, Gravity Forms est depuis longtemps considéré comme LE plugin de formulaires pour WordPress. Mais alors… Pourquoi est-il monté au sommet ?

Gravity Forms vous donne un contrôle total sur la façon de créer votre formulaire et les possibilités sont quasi-illimitées. Nous allons passer en revue des formulaires réactifs, du filtre anti-spam, des calculs avancés, des quiz, des sondages et même les paiements sécurisés. Ce plugin est un véritable couteau suisse des formulaires incluant tout ce dont vous pourriez avoir besoin pour créer votre formulaire en ligne.

Tutoriel wpformation Gravity Form54

D’un point de vue personnel, pour avoir créé de nombreux sites WordPress pour des clients sans être une programmatrice experte, Gravity Forms m’a permis d’accepter des projets plus complexes qu’un simple site vitrine (et donc de maximiser mes revenus…).

Spoiler Alert: Ce n’est pas une grande surprise mais chez WPFormation on l’utilise aussi ! Vous verrez sa mise en application un peu plus tard pour la fonctionnalité “quiz” ainsi que dans la section des add-ons. 

Logo Gravity

 

Pourquoi avez-vous besoin d’un formulaire de contact?

Il vous faut absolument un canal de communication entre vous et votre audience. Vos visiteurs ont sûrement des questions sur vos produits ou services, donnez-leur la possibilité de vous joindre facilement. Ce serait dommage de louper une vente parce qu’un potentiel client n’arrive pas à vous contacter, non?

De plus, un formulaire de contact apporte une touche de professionnalisme à votre business et évite grâce au “captcha” que votre adresse email soit récupérée pour ensuite vous envoyer des spams.

Enfin, placez-le toujours à un endroit stratégique, facile d’accès et visible pour les utilisateurs:

Tutoriel wpformation Gravity Form13

Exemple pour un traiteur où la prise de contact et la demande de devis sont essentielles

 

Quel type de formulaire sera le mieux adapté à votre projet?

Bonne nouvelle, tous nos exemples ci-dessous sont réalisables avec Gravity Forms !

Vous avez le formulaire de contact classique avec les champs simples tels que “nom, email, message” mais vous pouvez aussi avoir besoin de fonctionnalités un peu plus complexes comme les exemples ci-dessous:

  • Demander un devis avec des champs spécifiques à votre business avec plusieurs étapes:
Tutorielwpformation Gravity Form49

Exemple de Leroy Merlin: Estimation du devis en 7 étapes (1/7)

 

Tutorielwpformation Gravity Form48

Quiz de WP Formation en utilisant Gravity Forms.

 

Tutorielwpformation Gravity Form19

Exemple du Figaro

 

  • Accepter les réservations avec une page pour le paiement sécurisé en utilisant la logique conditionnelle pour les champs à afficher. (Vous pouvez aussi intégrer aussi Stripe et Paypal)

 

  • Autoriser le visiteur ou le membre à soumettre du contenu qui sera ajouté à la base de données, puis à votre site sur le front-end. Pour illustrer, prenons l’ exemple d’un appartement à lister sur booking.com:
Tutorielwpformation Gravity Form20 Tutorielwpformation Gravity Form30

Vous l’avez compris, votre site WordPress peut avoir besoin de plusieurs types de formulaires.

Alors, passons en revue l’extension Gravity Forms et vous verrez en quoi le plugin va bien au delà du simple formulaire de contact…

 

Les fonctionnalités de Gravity Forms

Voici la liste de fonctionnalités que j’ai répertorié ci-dessous:

  • 33 champs de formulaire (section développée dans la partie suivante #2)
  • Logique conditionnelle: affichez ou masquez certains champs en fonction de la sélection de l’utilisateur
  • Calculs avancés
  • Notifications grâce aux e-mails
  • Filtre anti-spam: combattez les soumissions de formulaires de spam à l’aide des options Google reCaptcha, Really Simple Captcha et Akismet
  • Enregistrer et continuer plus tard
  • Téléchargement de fichiers: autorisez vos utilisateurs à télécharger des fichiers via votre formulaire en ligne
  • Formulaires frontend, soumettre du contenu WordPress depuis le frontend de votre site: vous voulez permettre aux utilisateurs de soumettre un article de blog sans leur fournir un accès administrateur WordPress
  • Contrôle de l’affichage des formulaires par date ou nombre d’entrées
  • Création des formulaires multi steps et multipages (avec des boutons de progression de sauvegarde pour ne pas perdre le contenu entre chaque étape)
  • quiz pour tester les connaissances de vos visiteurs
  • Acheminement des entrées vers des adresses e-mail spécifiques en fonction du contenu du formulaire
  • Prise en charge de la création de plusieurs notifications d’entrée de formulaire
  • Soumissions d’articles WordPress via des formulaires frontend compatibles WYSIWYG
  • Création des formulaires de création compte d’utilisateur (login avec identifiant et mot de passe)
  • Formulaires “responsives” qui s’adaptent aux tablettes et mobiles
  • Une interface intuitive de création de formulaires par glisser-déposer

 

Les champs proposés par Gravity Forms

Les formulaires sont créés à l’aide d’un simple système de drag-and-drop (glisser-déposer en français), et il existe des dizaines de champs: standards, avancés, uniques pour les posts (articles), les custom post types (type de contenu personnalisé) ainsi que les calculs (pricing, quantité etc.). En bref, une multitude d’options sont disponibles pour chacun de vos projets. Découvrons-les:

Les 11 champs standards et basiques

Champs Simples Gf

Les champs simples/standards

Champs standard Description 
Ligne de texte Laissez la possibilité à l’utilisateur d’entrer du texte: nom, prénom par exemple
Paragraphe Laissez la possibilité à l’utilisateur d’entrer beaucoup de texte sur plusieurs lignes.
Nombres et calculs Le format du contenu sera obligatoirement un nombre. Vous pouvez même limiter la plage disponible (entre 10 et 20 par exemple). Vous pouvez aussi activer les calculs (Enable Calculation) votre champ se remplira en fonction de formules et des données sur d’autres champs.
Liste déroulante L’utilisateur va devoir faire dérouler la liste pour choisir l’information qui lui correspond. (Je l’utilise aussi pour les plages horaires)
Choix et sélections multiples Il s’agit d’une autre liste déroulante ou l’utilisateur va pouvoir sélectionner plusieurs options. Je préfère de loin les cases à cocher (⌧) mais c’est une opinion personnelle.
Cases à cocher L’idéal en terme d’ergonomie pour sélectionner plusieurs options à la fois.
Boutons radio Le choix unique par définition. Le cercle symbolise le fait qu’une seule option est sélectionnable.
HTML Si vous êtes un peu calé en HTML, alors vous pourrez ajouter du contenu personnalisé à l’endroit de votre choix.
Page Ce champ sera utile pour séparer votre formulaire en plusieurs pages (1/7 par exemple). C’est très pratique lorsque chaque page couvre un sujet différent: Infos personnelles > Expériences > Validation
Section Donnez du rythme à votre formulaire avec la possibilité d’ajouter votre section et une description pour passer d’une catégorie à une autre.
Masqué Je ne l’utilise pas souvent mais ce champ vous permet de cacher un champ si besoin.

 

Les 16 champs avancés

Tutorielwpformation Gravity Form53

Les champs avancés

Champs avancés Description 
Nom Demander à l’utilisateur de renseigner son nom, prénom, deuxième prénom et même un préfixe tel que: Dr.
Date Sélectionner un jour précis avec l’outil calendrier ou un champ à remplir. Il y a aussi le format de date à la Française.
Heure Sélectionner une heure
Téléphone Gravity Forms va valider que le format est bien celui d’un numéro de téléphone
Adresse Les utilisateurs peuvent ajouter une adresse postale et n’hésitez pas à enlever des champs: par exemple “state” n’est pas utile en France.
Site internet Gravity Forms va valider que le format est bien celui d’un site web avec “xxxxx.com”
Email Gravity Forms va valider que le format est bien celui d’un email avec un “@”.
Identifiant et mot de passe Vous pouvez créer facilement un formulaire de création de compte avec l’identifiant et le mot de passe.
Envoi de fichier Avec la fonction “parcourir”, l’utilisateur pourra soumettre des fichiers, comme un CV par exemple. A vous de régler les options pour savoir quels formats vous acceptez (PDF, .jpeg etc.)
Captcha L’anti-spam par excellence. N’oubliez pas de créer votre compte recaptcha chez Google, c’est gratuit.
Liste C’est au visiteur de remplir lui-même les éléments de la liste. Utile si vous voulez qu’il renseigne plusieurs informations d’une manière organisée.
Consentement (RGPD) Permet à vos visiteur d’accepter votre politique relatives aux données.
Quiz Testez les connaissances de votre audience
Enquête et sondage Sondez votre audience.
Sélection Bulk Permet d’importer des données en bulk grâce à un fichier “.csv”.

 

La librairie de Gravity Forms

Gravity Forms vient avec plusieurs modèles pour vous aider à vous projeter au mieux dans l’industrie de votre choix. Chaque template facilite la création d’un formulaire en seulement trois étapes:

  1. Importez le modèle sur votre site WordPress
  2. Personnalisez les options, les paramètres et les différents champs
  3. Intégrez le formulaire sur la page de votre choix

Pour l’instant en Octobre 2020, il y a 9 types de modèles disponibles, mais je vous recommande de vous abonner à leur newsletter afin de toujours être informé des des derniers modèles disponibles.

Formulaire de contact classique et avancé

Tutorielwpformation Gravity Form3

Formulaire de demande de devis

Tutorielwpformation Gravity Form51

Formulaire de demande d’emploi / poser sa candidature

Tutorielwpformation Gravity Form25

Je l’ai utilisé dans le passé pour créer un job-board et voilà ce que j’ai particulièrement apprécié:

  • Ce modèle de formulaire utilise une logique conditionnelle ce qui permet d’adapter le formulaire de candidature et de collecter les informations dont vous avez besoin auprès des candidats. Donc si par exemple le candidat ajoute une expérience professionnelle, alors de nouveaux champs apparaîtront au fur et à mesure.
  • Il y a aussi des champs pour télécharger son CV et sa lettre de motivation, donc c’est parfait.

Enregistrement de l’utilisateur et création de compte

Tutorielwpformation Gravity Form21

Enquête et votes

Sondez votre audience pour obtenir un feedback sur un service, une expérience et ainsi modéliser votre plan marketing au mieux:

Tutorielwpformation Gravity Form32

Formulaire d’inscription à un événement

Inscrivez les participants à un événement, collectez les informations nécessaires et effectuez même un paiement! On remarquera deux choses importantes: le formulaire est en plusieurs étapes et l’on peut suivre la progression en %:

Tutorielwpformation Gravity Form23

Formulaire pour faire un don ou e-commerce

Tutorielwpformation Gravity Form33

Page de paiement

Parfait pour les organisations à but non-lucratif et pour collecter facilement de l’argent depuis votre site WordPress. Si vous vendez des produits et/ou des services alors vous aurez besoin d’accepter des paiements en ligne grâce au formulaire de paiement. Il ressemble fortement à celui montré ci-dessus.

 

Le prix en fonction de son écosystème d’add-ons officiels

La quantité d’add-ons officiels est impressionnante et répond à une grande variété de besoins tels que: le paiement avec Stripe ou Paypal, l’intégration au CRM Hubspot ou encore la communication intégrée avec Slack.

Tutorielwpformation Gravity Form6

Gravity Forms propose 3 types de comptes; Le Basic, le Pro et L’Elite. Chacun vous donnera accès aux différents add-ons.

Note: Je recommande “l’Élite” uniquement si vous avez besoin des fonctionnalités de quiz, sondages et de votes. Sinon, la fonction Pro est déjà vraiment pas mal, découvrez mon récap par vous même:

Gravity Forms : quelle formule pour quel add-on ?

Formule Tarif annuel Nombre de sites & Formulaires Modules disponibles
Basic 50€ 1 site

Formulaires illimités

Entrées illimitées

Logique conditionnelle

Formulaires multi-pages

Téléchargements de fichiers

Mises à jour automatiques

Support Standard

Accès aux modules complémentaires “Basic”:

Intégrations avec les plateformes marketing d’emails et d’automation: ActiveCampaign, AWeber, Campaign Monitor, CleverReach, Constant Contact EmailOctopus, Emma, GetResponse, HubSpot, iContact, Mad Mimi, Mailchimp, Mailgun, Postmark, SendGrid.

Pro 134€ 3 sites

Formulaires illimités

Entrées illimitées

Logique conditionnelle

Formulaires multipages

Téléchargements de fichiers

Mises à jour automatiques

Support Standard

Accès aux modules complémentaires “Basic” mentionnés précédemment  et “Pro”:

Intégrations avec les CRM les plus populaires, les outils de management de l’information et les paiements en ligne: 

Agile CRM, Breeze, Campfire, Capsule CRM, Dropbox, Freshbooks, Help Scout, Mollie, Paypal Commerce Platform , PayPal Payments Standard, Pipe Video Recording, Slack, Square, Stripe, Trello, Twilio, Zapier, Zoho CRM.

Elite 212€ Nombre de sites illimités

Formulaires illimités

Entrées illimitées

Logique conditionnelle

Formulaires multipages

Téléchargements de fichiers

Mises à jour automatiques

Priorité pour le support

Accès aux modules complémentaires “Basic”, “Pro” et “Elites”.

Intégrations pour les quiz, les votes, les sondages, la création de compte…

2Checkout, Advanced Post Creation, Authorize.net, Chained Selects Coupons, Partial Entries, PayPal Payments Pro, Polls (Votes), Quiz (quiz), Signature, Survey (Sondage) User Registration Webhooks

Les add-ons non-officiels de Gravity Forms

Gravity Forms dispose d’une communauté de développeurs qui contribuent largement à la puissance du produit. On a vraiment l’impression qu’il y a un add-on pour chaque besoin, c’est incroyable. Ces add-ons créés par la communauté, sont tous répertoriés sur le site de Gravity Forms dans la catégorie “Community”.

Tutorielwpformation Gravity Form5

Note importante: Le support ou l’achat ne sera pas possible sur le site de Gravity Forms car ces extensions ne sont pas officiellement développées par leur équipe. 

Parmi ces add-ons, on retrouve par exemple :

Par le biais d’une case à cocher, le visiteur peut s’abonner à la newsletter et se retrouver directement dans la liste de notre choix. Un vrai gain de temps pour notre système d’email automation (MailPoet) mais aussi d’organisation vu que nous pouvons catégoriser tous nos visiteurs et ainsi les placer dans la liste la plus pertinente. Dans notre cas, à la fin du quiz on vous demande votre email afin de vous envoyer les résultats et informations relatives au quiz:

Newsletter Gavity Mailpoet

Gravity Forms l’a d’ailleurs aussi listé dans sa catégorie “communauté.”

  • Automate Slack Invite: envoyez une invitation Slack par e-mail à un utilisateur lors de la soumission d’un formulaire.
  • Event Tracking: Ajoutez facilement le suivi des événements à l’aide de Gravity Forms et de votre compte Google Analytics, Google Tag Manager ou Matomo (anciennement Piwik)
  • One-time fee payment pour Paypal (montant XX€ de frais uniques): Ajoutez des frais uniques au premier paiement d’un abonnement PayPal Standard.

Il existe bien d’autres add-ons que je vous invite à tester, ils sont disponibles sur le repo WordPress ou dans la section “communauté” de Gravity Forms avec un champ de recherche dédié:

Tutorielwpformation Gravity Form15

Exemple de recherche d’add-ons pour Paypal

Bon à savoir: si vous êtes développeur et que vous avez développé une extension pour Gravity Forms alors je vous conseille de la soumettre en respectant les étapes suivantes:

  1. Aidez-vous de leur docs spécialement dédiée aux développeurs
  2. Soumettez votre add-on dans la communauté en cliquant sur “Submit your Add-on”, un compte actif Gravity Forms vous sera demandé afin de vous enregistrer:

 

Comment styliser Gravity Forms?

Bien que le plugin s’adapte déjà parfaitement au CSS de votre thème, vous pourriez avoir envie de personnaliser complètement votre formulaire. Rien de plus simple avec les extensions suivantes :

Styliser Gravity Forms

 

Les Conditions Logiques selon Gravity Forms

C’est une de nos fonctionnalités préférées chez Gravity Forms. En résumé : Afficher un champ du formulaire ou pas, selon le choix fait par l’internaute !

Ci-dessous un exemple de ce que l’on peut faire avec Gravity Forms. Ce formulaire simple a été créé en moins de 5mn et vous permettra de vous rendre compte de la puissance des “conditions logiques”. Testez-le en live!

Il s’agit ici de logiques conditionnelles : Cela vous permet de créer des règles pour dynamiquement afficher (ou masquer) un champ en fonction des valeurs d’un autre champ, les possibilités sont nombreuses et multiples.

Conditions Logiques Gravity Forrms

Les conditions logiques sous Gravity : Simples et efficaces !

 

Essayer le plugin gratuitement : Test Drive!

La démo vous donne un aperçu de la licence Gravity Forms Elite. Cela signifie que vous pouvez absolument tout tester : quiz, logique conditionnelle, login, enregistrement de nouveaux utilisateurs…Oui, tout!  Vous pouvez même voir comment les intégrations mentionnées précédemment fonctionnent (MailChimp, Stripe etc.)

Tutorielwpformation Gravity Form7

Etape 1: Aller à l’adresse suivante:  https://www.gravityforms.com/try-gravity-forms-free/
Etape 2: Remplir le formulaire puis cliquer sur le bouton orange “I’m Ready. Let’s Build some Forms”.
Etape 3: Votre environnement de test est désormais créé et sera disponible pendant 7 jours.

Vous avez 3 grands axes à explorer:

1. Consultez et éditez les exemples de formulaires appelés “SAMPLE FORMS”.

Vous trouverez les formulaires suivants:

  • Formulaire de contact avancé
  • Construire une pizza entièrement personnalisée en ajoutant des ingrédients un par un
  • Exemple de logique conditionnelle
  • Formulaire pour postuler à un emploi
  • Exemple de sondage
  • Exemple de formulaire multi-pages
  • Bon de commande de produit
  • Exemple d’enregistrement d’utilisateur avec un login
  • (…)

Pour l’exemple, je choisis d’étudier le formulaire qui me permet de créer ma pizza sur-mesure:

2020 09 28 15.46.16

Pour chaque exemple vous allez voir:

  • Les plugins requis pour faire fonctionner un tel formulaire
  • Une description qui explique ce que ce formulaire cherche à accomplir: par exemple, montrer les calculs en temps réel. Ou encore la logique conditionnelle, qui permet de cacher ou afficher certains champs en fonction du choix de l’utilisateur.

Dans mon cas j’ai choisis la méthode “livraison” et non “pick-up”, Gravity Forms affiche alors de nouveaux champs pour que je renseigne mon adresse:

2020 09 28 15.41.07

2. Si vous préférez, vous pouvez créer votre propre formulaire afin de découvrir par vous-même les fonctionnalités.

Dans ce cas là, cliquez sur Add New depuis le tableau de bord de la démo WordPress:

Tutorielwpformation Gravity Form18

Le créateur de formulaire drag-and-drop ou “déposer-glisser” s’ouvrira après avoir nommé votre nouveau formulaire:

2020 09 28 15.52.17

Utilisez ensuite la fonction glisser-déposer pour y ajouter vos propres champs:

3. Explorez les intégrations et les add-ons que nous avons mentionné dans la partie précédente en allant à “Forms >> Add-ons” depuis le tableau de bord WordPress:

Tutorielwpformation Gravity Form40

 

Gravity Forms 2.5 : la mise à jour tant attendue !

Avec la dernière version de Gravity Forms (2.5), vous trouverez de nouvelles fonctionnalités, ainsi qu’une nouvelle expérience utilisateur. L’un des principaux changements apportés par la 2.5 est un nouvel éditeur de formulaires amélioré. L’éditeur de formulaire a subi une refonte totale – le rendant plus convivial que jamais et lui donnant un aspect et une sensation modernes et élégants.

Avec la version 2.5, vous trouverez une refonte complète de l’expérience de création de formulaires. Ainsi dans l’éditeur de formulaire, vous trouverez un contrôle avancé des colonnes, une édition conviviale des paramètres de champ, des pages de paramètres élégantes, et bien plus encore.

Tous les paramètres de champ peuvent maintenant être modifiés dans une barre de menu de paramètres de champ intuitive sur le côté droit de l’éditeur de formulaire. Regardez vos modifications de paramètres se dérouler en temps réel, vous aidant à faire les bons choix lorsqu’il s’agit de modifier les champs de vos formulaires.

Allons jeter un coup d’œil à cette tout dernière version…

Bien sûr, le nouvel éditeur de formulaires n’est pas le seul bénéfice de la version 2.5 :

  • Accessibilité – Gravity Forms a travaillé avec l’expert en accessibilité Rian Rietveld et son équipe de Level Level pour consolider sa position de constructeur de formulaires le plus accessible du marché.
  • Mises à jour du balisage et des styles – 2.5 fournit des balises et des styles nouveaux et améliorés, vous aidant à créer des formulaires élégants qui convertissent mieux.
  • Améliorations de la sécurité – La sécurité a toujours été et continuera d’être une priorité absolue pour Gravity Forms. Cela se reflète dans les améliorations de sécurité ajoutées dans la version 2.5.

 

Gravity Forms : Mon avis

En conclusion, vous pouvez donc utiliser Gravity Forms pour créer des formulaires multi-steps, des quiz, des sondages, des paiements, créer des portails personnalisés avec login et mot de passe ou encore soumettre du contenu par le front-end. Rappelons que les add-ons vous facilitent vraiment la vie surtout si vous utilisez des CRM pour gérer votre base clients ou encore des plateformes d’emails marketing et d’automations.

Vous utilisez un autre formulaire et vous voudriez passer sur Gravity Forms ? Pas de problème ! Voici un add-on pour les utilisateurs de Contact Form7 qui vous permet de convertir directement vos formulaires CF7 existants en formulaires Gravity => Contact Form 7 Gravity Forms Importer, mais également pour Ninja Forms et Wufoo.

Alors, envie de voir Gravity Forms en action ? Faites donc un essai avec notre Quiz WordPress, (on l’a aussi construit avec Gravity Forms) et partagez vos résultats en commentaires!

wpformation
NE MANQUEZ PLUS RIEN !
Inscrivez-vous pour recevoir le meilleur de WordPress dans votre boîte de réception, chaque mois.

Nous ne spammons pas ! Consultez notre politique de confidentialité pour plus d’informations.

A propos de l'auteur...

Avatar de Marine Larmier

Marine Larmier

Déjà 10 ans que je baigne dans l'univers WordPress. Riche de plusieurs expériences web, j'ai travaillé chez Nok Airlines en Thailande, chez Amadeus, puis 4 ans en remote chez WPML tout en parcourant le monde. Basée entre la France et la Nouvelle-Zélande, j’aime les voyages, le yoga, les couchers de soleil et les cuisines du monde.

5 commentaires pertinents à ce jour ;)

  • Merci pour cet article très utile.
    Mon problème : j’ai 5 cases à cocher et je souhaite que l’utilisateur ne puisse en sélectionner que 3.
    Comment limiter le nombre de cases à cocher ?
    d’avance merci.

  • Bonjour,
    J’ai très bien compris le fonctionnement de Gravity Form.
    Par contre, comment fait-on pour intégrer un lien sur un élément (exemple cuisine) d’une liste déroulante qui renvoie vers une page/section ou l’on retrouve d’autres questions sur le choix de cet élément “cuisine”.
    Par exemple sur la liste déroulante il y a cuisine | salle de bain | salon |, et lorsque l’on sélectionne “salon” nous devrions être rédigé vers une autre section de questions sur le sujet “salon” mais plus “cuisine”.
    Nous souhaitons que le lien vers les questions soient différent pour chaque élément choisi sur la liste déroulante.
    Est-ce que cela est possible ?

    Merci pour votre retour.
    Cordialement,
    Lucinda MENDES

  • Bonjour,

    Si je comprends bien, vous devriez avoir besoin d’un tutoriel sur les
    “Conditional Redirects Based On Form Fields” qui consiste à rediriger le visiteur vers une page ou une section en fonction des champs qu’il va sélectionner. C’est bien ça?

    Allez à cette page: https://www.gravityforms.com/form-submission-redirect/
    Scrollez jusqu’à la section: “Conditional Redirects Based On Form Fields”
    Configurez votre logique conditionnelle comme sur la capture d’écran dans Settings > Confirmations > Add new puis sélectionner la logique conditionnelle que vous voulez activer.

    “Si le visiteur sélectionne le jardinage” alors –“page jardinage”

    Dans votre cas, créez une condition pour la section cuisine par ex.

    J’espère avoir pu vous aider, tenez moi au courant ;-)

    Marine