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.

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. 

 

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:

 

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:

 

• Réaliser des quiz comme le fait Fabrice avec WP Formation en utilisant Gravity Forms.

 

• Effectuer des votes ou encore des sondages comme le fait le journal Le Figaro dans “les questions du jour”. Le Figaro collecte et affiche automatiquement les résultats en cours, avec le nombre de votants:

 

• 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:

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

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é

Formulaire de demande de devis

Formulaire de demande d’emploi / poser sa candidature

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

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:

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 %:

Formulaire pour faire un don ou e-commerce

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.

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

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 :

• Add-on Gravity Forms – MailPoet 3, développé par TikWeb et que l’on utilise chez WPFormation, on vous explique comment:

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:

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é:

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 :

• Gravity Forms Styler : Ce plugin premium vous permettra une customisation CSS rapide, simple et performante de tous les éléments du formulaire.
• Gravity Forms CSS Ready Class Selector : Un plugin gratuit qui vous permettra de gérer les colonnes, alignements, listes et bien d’autres…
• Gravity Forms Styling | BeautyGravity : Des thèmes plus conviviaux tels que (material, flat, fluent, bootstrap, android..) à vos formulaires, sans coder!
• Styles & Layouts for Gravity Forms : Plugin gratuit pour styliser Gravity Forms, il est livré avec plus de 150 options pour personnaliser les différentes parties de votre formulaire.

 

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.

 

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

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:

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:

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:

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

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:

 

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!