Publié par le 29 juin 2015 • 307 Commentaires

Formation Gravity FormsSi vous désirez faire des formulaires plus ou moins complexes avec une extension éprouvée, alors Gravity Forms sera un choix avisé.

C’est pourquoi dans cet article nous allons voir tous les champs disponibles, une prise en main de l’extension et le tour des fonctionnalités intéressantes.

Dans un futur article nous parlerons des usages avancés et des add-ons qui permettent de propulser l’extension vers des possibilités infinies.

Dans mon article précédent, je vous présentais le comparatif des meilleurs plugins de formulaires pour WordPress.

Malgré la sélection réalisée, je sais pertinemment qu’il manque un élément important : il faut maintenant que vous voyez chaque extension en action pour faire votre choix.

Vous ne pouvez pas me faire confiance les yeux fermés (bon si, quand même) : il faut que vous voyez si chaque extension pourra répondre à votre besoin. Parce que je suis sûr que mes critères de sélection ne sont pas les mêmes que les vôtres.

Souvenez du podium final, je vous conseillais :

  • Contact Form 7, si vous y êtes habitué, que vous le maîtrisez et que vous avez développé vos propres add-ons ;
  • Formidable Forms dans sa version gratuite, si vous débutez et que vous n’avez pas forcément besoin de formulaires très complexes ;
  • Gravity Forms, si vous souhaitez faire des formulaires complexes avec une facilité déconcertante mais tout en sachant qu’il faudra investir initialement.

Justement, nous reparlerons en fin d’article du prix du plugin ainsi que des différentes formules proposées.

Mais avant ça, nous allons voir beaucoup de choses dans cet article.

Tout d’abord, les différents champs à notre disposition : ce sont eux qui doivent guider votre choix d’extension. Notamment parce que certains plugins ne les ont pas tous et d’autres les rendent payants.

Je vous montrerai également comment on crée un formulaire au travers de captures d’écran animées. Nous verrons aussi comment configurer parfaitement un formulaire donné, du libellé du bouton « Envoyer » à la notification que vous recevrez.

Il faut que vos internautes voient vos formulaires, c’est pourquoi nous verrons comment les insérer dans une page ou dans une sidebar. Je peux déjà vous donner un indice : c’est ultra-facile.

Et pour finir, nous verrons les différentes licences qui existent : leur prix, leurs limites et celle qui vous conviendra le plus.

Vous êtes prêt pour le tour du propriétaire ?

Les champs disponibles avec Gravity Forms

Je vous le disais en introduction : les champs que proposent un formulaire représentent LE critère que vous devez regarder en premier. En effet, vous devez vous assurer que les usages que vous avez en tête seront possibles.

Si vous souhaitez faire un simple formulaire de contact, la plupart des extensions vous permettront de le faire facilement.

Mais dès que vous voulez avoir des champs un peu plus élaborés ou que vous voulez instaurer des conditions logiques (on en parle plus loin), la sélection de plugins candidats se restreint.

Et la spécificité de Gravity Forms, étant payant, c’est qu’il en propose l’intégralité des champs dès sa première licence. Il vous permettra de faire de nombreuses choses sans devoir investir pour autant dans une formule trop onéreuse.

Voici donc un aperçu de tous les champs à votre disposition quand vous aurez le plugin.

Les champs standards

Champs standards de Gravity FormsVous retrouverez dans cette partie les fonctions basiques d’un formulaire. En gros, Gravity Forms n’a pas besoin de prémâcher le travail avec ces champs-là :

  • Ligne simple, vous laissez la possibilité à l’internaute d’entrer un peu de texte. C’est ce que l’on utiliserait normalement pour gérer le nom, le prénom, l’adresse mail, le site internet… Mais vous verrez dans les champs avancés, on a de meilleures possibilités.
  • Ligne paragraphe, facile : vous laissez là une grande zone de texte. Si l’internaute venait à vous écrire un roman, il peut même étirer la zone d’édition vers le bas.
  • Liste déroulante, l’internaute doit « dérouler » la liste afin de voir toutes les possibilités possibles. À vous d’arbitrer si des boutons radio ne seraient pas plus appropriés, pour qu’on voit du premier coup toutes les options.
  • Sélection multiple, cela ressemble à une liste déjà déroulée où vous pouvez sélectionner plusieurs lignes. Je suis pas spécialement fan du format, je préfère encore utiliser des cases à cocher qui sont plus simples à mon avis.
  • Nombre, vous pouvez là demander à votre utilisateur d’entrer un nombre. Vous pouvez même limiter la plage disponible (entre 30 et 50 par exemple). Si vous voulez aller plus loin, vous pouvez activer les « calculs ». Ainsi, un champ pourra se remplir en fonction de formules que vous aurez créé et qui reprennent les données d’autres champs.
  • Cases à cocher, c’est le champ classique lorsque vous souhaitez laisser le choix entre plusieurs options. On le reconnaît dans la mesure où les cases à cocher sont carrées. À préférer au champ « sélection multiple » à mon avis.
  • Boutons radio, c’est l’alternative à la « liste déroulante ». Ici les cases sont rondes et une seule peut être sélectionnée.
  • Champ caché, vous vous en doutez : l’utilisateur ne le verra pas. Le but est qu’au contraire ce soit un champ qui vous sera réservé, où vous pourrez mettre une valeur arbitraire ou que vous pourrez utiliser pour récupérer des informations dont dispose Gravity Forms. Je vous parle ici de l’adresse IP de l’utilisateur par exemple. Personnellement, je ne me sers jamais de ce champ.
  • HTML, là c’est simple : vous pouvez y écrire ce que vous voulez du moment que vous maîtrisez un tant soit peu le HTML. Vous pourriez ainsi écrire une introduction dans votre formulaire, ajouter une image, un fichier audio… Les possibilités sont illimités puisque vous pouvez y mettre ce que vous voulez.
  • Section, c’est ce qui va vous permettre de séparer plusieurs parties d’un formulaire par des titres. Vous pourrez même écrire une petite description sous chacun des titres, permettant d’introduire au mieux la section suivante.
  • Page, ce champ sera utile pour séparer votre (long) formulaire en plusieurs pages. L’internaute aura alors à cliquer sur « Suivant » pour passer à la page suivante. À utiliser avec parcimonie : n’allez pas mettre plein de pages sinon l’internaute prendra peur en voyant que sa soumission devient interminable !

Voilà pour les champs « standards », je vais maintenant vous présenter les champs « avancés » qui vont venir vous faciliter la vie.

Les champs avancés

Champs avancés de Gravity FormsLa spécificité de la plupart de ces champs est que Gravity Forms va nous faciliter la vie avec un formatage pratique.

  • Nom, vous pourrez ici décomposer les champs qui composent l’identité de votre internaute. Vous pourrez demander un préfixe (Mr, Mrs, Dr,… oui c’est en anglais hélas) puis un prénom, un second prénom, un nom de famille et même un suffixe. Mais ça c’est surtout les anglophones qui utilisent PhD après leur nom.
  • Date, vous demanderez un jour précis au travers d’un champ à remplir ou d’un calendrier. Cependant ce dernier voit ses semaines commencer un dimanche. Et pas moyen de le modifier facilement : il faut insérer du javascript dans la page si on veut mettre le lundi en premier.
  • Temps, ce champ vous servira à récolter une heure (au format AM/PM ou 24h). Cependant si c’est vous qui proposez des horaires (si vous gérez des créneaux horaires), le mieux sera d’utiliser une liste déroulante.
  • Téléphone, ici vous pourrez récolter un numéro de téléphone et l’idée de base est bonne : Gravity Forms va vérifier que c’est bien un format valide. Mais cela ne marche que pour les numéros américains. Dès lors que l’on sélectionne le format « International », on peut même écrire des lettres et le formulaire est quand même soumis. Dommage.
  • Adresse, vos internautes pourront entrer ici une adresse postale. Vous pouvez activer / désactiver les différents champs qui la composent : Adresse, Adresse ligne 1, Code Postal, Ville, État / Province (inutile en France) ou encore le Pays.
  • Site Web, cette fois-ci Gravity Forms va bien vérifier que le format est correct, du type http://www.wpmarmite.com par exemple.
  • Email, où il y aura là aussi une vérification du format. Mais en plus, vous pouvez activer la confirmation par email. C’est à dire que l’internaute devra d’abord valider l’email reçu pour que sa demande vous soit envoyée.
  • Mot de Passe, ce champ vous permettra de laisser la possibilité à quelqu’un qui s’inscrit d’entrer puis de confirmer son mot de passe. Pratique si le formulaire sert a inscrire des utilisateurs à votre site WordPress.
  • Téléchargement de fichier, vous pourrez choisir ici entre un seul fichier ou plusieurs, le type d’extensions autorisées (jpg, png, pdf…) ou encore la taille limite. L’internaute pourra ainsi vous envoyer des ressources complémentaires.
  • Captcha, il vous faudra ici un compte ReCaptcha de Google afin de pouvoir l’activer. Leur dernière version permet même d’identifier un utilisateur d’un robot sans avoir à entrer de une suite de chiffres et de lettres.
  • Liste, ce champ est particulier : c’est à l’internaute de remplir lui-même les éléments de la liste. Contrairement à la liste déroulante ou la liste multiple pour lesquelles nous préparons les différentes options possibles en amont.

Vous l’aurez compris, il y a un petit bémol quant à ces champs avancés : certains sont très spécifiques aux États-Unis et ne correspondent pas à nos besoins. Et il est difficile de les adapter sans toucher au code. C’est là le plus grand frein de Gravity Forms, à mon sens.

Mais regardons les autres types de champs qui nous sont proposés et qui changent radicalement l’utilisation que l’on peut faire de l’extension.

Les champs d’articles

Champs d'articles de Gravity FormsCes champs-là sont très pratiques dès lors que l’on souhaite laisser la possibilité à nos internautes de soumettre des articles invités. En effet, on peut leur faire un formulaire complet qui se connectera parfaitement à nos articles WordPress.

Vous pourrez configurer que toutes les soumissions aillent se mettre en brouillon. Et il ne vous restera plus qu’à aller le relire et l’éditer avant de le publier.

Vous pourrez également le supprimer et prévenir l’auteur si jamais vous ne souhaitez pas le mettre en ligne sur votre blog.

Voici les champs à notre disposition :

  • Titre, tout comme lorsque vous écrivez un article sous WordPress, il s’agit du tout premier champ.
  • Corps de texte, votre auteur invité pourra ici rédiger son texte. Mais si vous souhaitez qu’il ait accès à une interface d’édition complète et qu’il puisse ajouter des médias dans le corps du texte, il vous faudra rajouter l’extension gratuite Gravity Forms WYSIWYG.
  • Extrait, à vous de voir si vous utilisez ce champ ou non. Mais il pourra permettre à votre internaute de préciser un extrait, tout comme vous pouvez le faire dans l’administration de vos articles.
  • Mot-clés, la traduction de Gravity Forms n’est pas à jour : il s’agit là des étiquettes. Vos internautes pourront en soumettre plusieurs en les séparant d’une virgule. Hélas il n’y a pas d’autocomplétion : on ne suggère pas les étiquettes existantes lors de la saisie.
  • Catégorie, vous aurez ici la liste déroulante des catégories existantes sur votre blog. Pas de mauvaise surprise donc : l’article invité ne pourra que sélectionner un élément existante.
  • Image à la une, vous connaissez le principe : l’internaute n’aura qu’à envoyer son fichier grâce à ce champ.
  • Champs personnalisés, alors là c’est plus spécifique et ça va dépendre de chacun. Je sais que personnellement je n’utilise pas les champs personnalisés. Par contre certains de mes plugins mettent des valeurs et je ne vais pas les modifier. On va réserver cette option aux développeurs si vous le voulez bien.

Il nous reste un type de champ, ceux qui rapprochent Gravity Forms d’un petit système de e-commerce.

Les champs de prix

Champs de prix de Gravity FormsEn effet, si vous souhaitez faire un simulateur de prix ou bien un petit formulaire de commande, vous pourrez le faire avec le plugin.

Par contre cela ne sera jamais aussi complet qu’un vrai système de e-commerce (comme WooCommerce).

  • Produit, ici vous pourrez créer un produit unique ou avec variation (différentes tailles de t-shirt par exemple) et définir le prix.
  • Quantité, ce champ-là est toujours relié à un champ de produit afin de savoir à qui il doit être appliqué.
  • Option, on peut imaginer que vous proposiez différents types d’impression sur vos t-shirts (transfert, sérigraphie, broderie). Ce champ sera parfait et viendra rajouter des coûts à la commande totale.
  • Livraison, de la même manière que les options, vous pouvez ici proposer différentes options de livraison avec chacune un prix correspondant.
  • Total, ce champ n’a qu’un but : faire la somme de tous les produits, options et modes de livraison saisis dans le formulaire. Ainsi, l’internaute verra clairement combien la commande va lui coûter.

Ces champs pourront être utilisés comme simulateurs de prix ou comme bons de commande mais pas en tant que vrai système de e-commerce si vous ne prenez pas la licence Developer.

C’est en effet grâce à elle que vous pourrez utiliser les add-ons de passerelle de paiement tels que Paypal ou Stripe.

Et voilà ! Nous venons de finir le tour des champs disponibles. J’espère que vous avez ainsi pu mesurer jusqu’où on peut aller avec Gravity Forms. Intéressons-nous maintenant à son administration.

Prise en main de Gravity Forms

Bon tout ça c’est bien beau, mais à quoi ça ressemble ? Qu’est-ce qu’il y a sous le capot ? Je vous fais le tour du propriétaire !

Création des formulaires

Ici, Gravity Forms reprend une interface de gestion plutôt classique : vous ne serez pas dépaysé, cela ressemble à du WordPress tout craché !

Gestion des formulaires Gravity Forms

Vous pourrez ajouter, modifier ou améliorer les paramètres de chacun des formulaires que vous avez. Il est même possible de dupliquer un formulaire, ce qui sera extrêmement pratique si vous voulez des versions différentes pour plusieurs emplacement sur votre site.

Regardons maintenant à quoi ressemble l’interface d’édition en elle-même.

Ajouter et ordonner les champs

Ici il vous faudra piocher dans les éléments disponibles à droite en cliquant dessus. Ils apparaitront alors dans l’espace d’édition et vous pourrez les manipuler en drag & drop (glisser-déposer).

Manipuler les champs Gravity Forms

Ensuite pour modifier chacun des champs, il vous faudra cliquer sur la flèche vers le bas. Le tiroir du champ s’ouvre alors et vous permet de le configurer.

Modifier un champ Gravity Forms

Vous pourrez également cliquer l’icône des deux feuilles pour dupliquer un champ. Et le dernier pictogramme en forme de croix, vous l’aurez deviné, sert à supprimer un champ. Une pop-in apparaîtra alors pour vous demander une confirmation.

Pour finir, vous pourrez, en bas à droite de l’écran, mettre votre formulaire à la corbeille en cliquant sur le lien rouge. Et le bouton bleu (ou la couleur que vous préférez sous WordPress) viendra mettre à jour toutes les modifications que vous aurez fait. Le fonctionnement classique en fait.

Nous allons maintenant nous attarder un peu plus sur toutes les options disponibles pour éditer un champ.

Configurer un champ précis

Lorsque vous ouvrez le tiroir d’un champ, vous aurez accès à 3 onglets différents : Général, Apparence et Avancé.

Vous aurez très souvent des options spécifiques au type de champ que vous aurez sélectionné. Ainsi les paramètres du champ « Liste déroulante » ne sont pas du tout les mêmes que ceux du champ « Section ».

Section Général

Paramètres Généraux d'un champ Gravity Forms

Le champ Général vous permettra de modifier le label du champ (celui qui apparaîtra à l’écran) et de rajouter une description. Celle-ci correspondra à un petit texte introductif dans lequel vous pourrez ajouter des précisions.

Vous aurez ensuite des options spécifiques à chaque type de champ. Ainsi vous le voyez dans la capture ci-dessus, je peux préciser les éléments de ma liste. Alors que pour le champ « Nom » j’aurais pu permettre à mes internautes de composer leur identité en plusieurs parties (Prénom, Nom…).

Pour finir, c’est une case à cocher et non des moindres qui nous attend à la fin de cet onglet : la case « Requis ». Cela permet de rendre un champ obligatoire et je peux vous dire que vous l’utiliserez souvent !

Section Apparence

Paramètres d'Apparence d'un champ sous Gravity Forms

Du côté de l’onglet apparence, nous aurons également des options spécifiques. Mais il y en a deux que vous verrez très régulièrement :

  • Custom CSS Class, où vous déciderez de mettre certains champs sur des colonnes (1/2 ou 1/3). Mais si vous voulez jouer avec ces options, il faudra connaître les classes CSS de Gravity Forms. Ou plutôt installer l’add-on gratuit Gravity Forms CSS Ready Class Selector (malgré qu’il ne soit pas maintenu à jour, il marche très bien). Cela vous évitera de regarder la documentation à chaque fois.
  • La taille du champ est également un élément récurrent. Vous pourrez ici définir qu’un champ soit de petite taille ou bien de taille moyen (par défaut) ou encore grand. Cela fera varier la largeur qu’il prendra à l’écran.

Section Avancé

Paramètres Avancés d'un champ Gravity Forms

Et pour finir il y a l’onglet « Avancé ». Je dois vous avouer que je ne vais pas souvent modifier les différentes options. À l’exception d’une. Mais elle mérite une section de cet article à elle seule.

Les Conditions Logiques

Les conditions logiques sont le plus souvent une fonctionnalité payante dans les extensions de formulaires. Ici on n’échappe pas à la règle puisque Gravity Forms est payant.

Ce n’est pourtant pas un add-on qu’il faudra acheter en supplément, c’est une fonction native et elle est très pratique.

Son fonctionnement est le suivant : elle permet de n’afficher certains champs que si certaines conditions sont remplies. Voici un exemple, si jamais j’étais boulanger avec un service de livraison :

  • Si l’internaute me contacte pour une livraison à domicile, je vais lui demander son adresse postale.
  • Si par contre il vient retirer sa commande en magasin, je n’ai pas besoin de lui demander ces informations. Je ne fais alors pas apparaître le champ.

Regardez donc ce que ça donne pour l’internaute :

Exemple de condition logique avec Gravity Forms

Autant vous dire que cette fonctionnalité est très pratique. On peut citer deux grandes raisons :

  • Vous pouvez adapter le niveau de détail d’information que vous souhaitez obtenir en fonction des choix de votre visiteur
  • Et vous pouvez avoir un formulaire pertinent, sans champ inutile, tout en restant « sobre » au premier abord. Ce n’est que si certaines conditions sont remplies que les champs complémentaires apparaissent.

Nous venons donc de voir comment créer et éditer des formulaires. Mais maintenant nous allons voir tous les autres paramètres importants afin de créer des formulaires aux petits oignons.

La gestion, formulaire par formulaire

Maintenant que tous les champs de notre formulaire sont prêts, il faut gérer le comportement de ce dernier lorsqu’on va le compléter.

Voici donc les paramètres que vous trouverez, formulaire par formulaire, qui vont vous permettre de gérer la façon dont les internautes vont interagir.

Paramètres généraux d’un formulaire

Les paramètres « généraux » d’un formulaire sont intéressants pour faire un peu de mise en forme (vraiment un peu) et pour gérer l’affichage.

Tout d’abord, on peut personnaliser l’emplacement des libellés. On peut choisir s’ils vont être au dessus des champs, en dessous ou encore à gauche. On peut également le faire pour les descriptions des champs ainsi que les « sub-labels » (notamment les champs Prénom / Nom).

Libellés en haut

Libellés en haut

Libellés à gauche

Libellés à gauche

Un autre paramètre important est l’apparence du bouton « Envoyer ». Vous pouvez soit le laisser en texte, sur un bouton et changer le libellé (un indice : « envoyer » c’est vraiment aseptisé, on peut faire mieux), soit mettre une image à la place.

Pour tout vous dire, je préfère modifier l’apparence du bouton en CSS plutôt que de jouer avec une image. Cela demande un peu de technicité (le programme Relooker son Thème que vous mijote Alex est là pour ça) mais cela reste plus facilement modifiable.

On peut également créer une condition logique qui empêchera l’apparition du bouton de fin de formulaire tant que certaines conditions ne seraient pas remplies.

Vous pouvez aussi activer « Save and continue » qui est une fonctionnalité arrivée récemment. Cela permet à votre internaute de commencer à remplir son formulaire puis d’y revenir plus tard s’il manque de temps.

On peut aussi jouer avec les restrictions, que ce soit en terme de nombres d’entrées ou de programmation horaire.

Si par exemple vous voulez faire un jeu-concours où les 50 premiers gagneront un lot, c’est parfait. Et si en plus vous désirez que le formulaire n’apparaisse que tel jour, à telle heure ; alors là vous pouvez utiliser les deux fonctions conjointement.

En avant-dernier paramètre, vous pouvez activer « l’anti-spam honeypot » qui va empêcher les robots de vous envoyer de faux messages. Je ne sais pas si ça m’est spécifique mais même avec l’option désactivée, je n’ai jamais eu de faux messages.

Pour finir, vous pouvez activer les transitions animées. Elles seront notamment utilisées lors de conditions logiques pour faire apparaître joliment les nouveaux champs, cachés jusqu’alors (on a vu ça avec notre exemple de commande de boulanger).

Bon tout ça c’est bien, mais lorsqu’un internaute complète un formulaire, que se passe-t-il ? C’est là le rôle du paramètre suivant.

Les confirmations

Quand un internaute clique sur le bouton « Envoyer » (que vous aurez renommé, pour l’adapter à la nature du formulaire) il peut se passer deux choses :

  • Soit les champs disparaissent et un message de confirmation arrive à la place
  • Soit l’internaute est redirigé vers une autre page

Gravity Forms nous permet de le gérer au travers des confirmations et vous pouvez en avoir plusieurs.

Plusieurs ? Et bien oui, en utilisant des conditions logiques (là encore), vous pourrez définir que si un visiteur a choisi telle option, il sera redirigé sur telle page. Et s’il a choisi l’autre… (roulement de tambours) il sera redirigé sur une autre page.

Gestion des confirmations sous Gravity Forms

Il existe 3 types de confirmations possibles :

  • Texte, où vous pourrez personnaliser le message qui apparaîtra, une fois le formulaire envoyé.
  • Page, vous pourrez choisir la page de votre site où l’internaute sera redirigé.
  • Redirection, où cette fois-ci vous pourrez préciser n’importe quelle URL. Même une qui ne serait pas sur votre site. À utiliser avec parcimonie tout de même : il serait bizarre d’être renvoyé sur un autre site lorsque l’on remplit un formulaire.

Je suis un très grand utilisateur du mode « Page » pour tout vous dire : j’aime pouvoir créer une page de remerciement spéciale à chaque formulaire.

Ça m’est également utile pour donner l’accès à certaines ressources (des programmes de formation par exemple) qui ne sont disponibles que pour les personnes qui m’ont laissé leur coordonnées.

Bon, on a vu ce qu’il se passait lorsqu’un formulaire était envoyé mais il y a encore un point important : les messages d’alerte que vous allez recevoir (Et ceux que vous allez envoyer à la personne qui vient de vous contacter).

Les notifications

Cela se gère dans la partie « Notifications » et là encore, vous pouvez en avoir plusieurs. Soit pour créer des notifications doubles, soit pour utiliser des conditions logiques.

C’est un cas que j’ai eu avec un client qui gère une présence nationale. Si l’internaute est localisé dans la Haute-Garonne par exemple, on va le deviner au travers de son code postal. Et pour tous les codes postaux compris entre 31000 et 31999, on enverra une notification au commercial concerné.

Je ne vous cache pas que c’est un peu lourd à gérer le jour où il faut faire tous les départements un par un (la fonction « dupliquer » prend tout son sens) mais ensuite on a un système aux petits oignons.

On peut aussi imaginer envoyer une notification à l’internaute pour qu’il ait une copie de sa demande. Et coupler ça avec une case à cocher en fin de formulaire intitulée « je veux recevoir une copie du formulaire par e-mail ». Ensuite on relie le tout avec une condition logique et le tour est joué.

On a ensuite à notre disposition tous les paramètres pour composer l’email de notification. Le sujet du mail, l’émetteur, le récepteur, d’éventuels personnes en copie cachée… On a tout.

On peut même récupérer les informations des champs pour remplir ces paramètres-là.

Exemple d'une notification personnalisée Gravity Forms

C’est bon, nous avons paramétré les notifications et elles nous parviendront par email. Mais on peut également les consulter directement dans le tableau de bord.

La consultation des messages dans WordPress

C’est une fonctionnalité bien pratique et proposée par défaut dans Gravity Forms : vous pouvez consulter dans une même interface toutes les entrées que vous aurez reçues. Et ce, formulaire par formulaire.

Pour cela, allez dans Formulaires > Messages et vous aurez une liste de toutes les soumissions. On peut ensuite changer de formulaire grâce à la liste déroulante présente en haut à droite.

Les messages reçus avec Gravity Forms

Mais à l’usage, l’ergonomie n’est pas parfaite. Ce n’est pas très pratique de passer d’un formulaire à un autre. Petit bémol donc.

Relativisons : il ne s’agit là que de consulter des archives, vous aurez probablement déjà eu toutes les notifications dans votre boîte de réception auparavant !

On est presque prêts maintenant, le formulaire est bien configuré et il ne nous manque qu’une chose : que vos visiteurs l’utilisent.

Pour cela, il va nous falloir le faire apparaître sur votre site.

Insérer les formulaires dans votre site

On va avoir deux emplacements possibles pour nos formulaires : dans le contenu ou dans un widget. C’est pourquoi je vais vous montrer les deux façons de faire.

Intégration dans les pages (et tout autre type de contenu)

Commençons par une insertion dans le contenu et notamment dans une page « Contact » par exemple. C’est quand même le cas le plus courant.

Allez donc dans votre page comme vous le feriez d’habitude et là, aux côtés du bouton pour ajouter des médias, vous avez maintenant un bouton « Ajouter un formulaire ».

Ajout d'une formulaire Gravity Forms dans une page

En cliquant dessus, vous pourrez sélectionner ledit formulaire et activer ou non certaines options.

Vous pourrez par exemple afficher le titre ou la description (que vous aurez paramétré au préalable) ou vous pourrez encore activer l’AJAX.

Cela signifie que si jamais il y a une erreur dans un champ ou que l’internaute valide son formulaire, il n’y aura pas besoin de recharger la page. C’est donc une expérience utilisateur plus sympathique.

Il y a une petite limite cependant : si vous utilisez un captcha, vous ne pourrez pas utiliser cette fonction.

Mais au delà des formulaires au sein du corps d’une page, on peut également les avoir en sidebar ou en footer. Et devinez comment ?

Intégration d’un formulaire Gravity Forms dans un widget

Si vous allez dans Apparence > Widgets, vous verrez qu’il y a un nouveau widget, sobrement intitulé « Formulaire ».

Ajouter un widget Gravity Forms

Vous pouvez alors le faire glisser dans la zone de widgets de votre choix et vous aurez des options similaires à l’insertion dans une page.

Vous choisirez le formulaire en question, ajouterez un titre de widget, afficherez le titre du formulaire ou encore la description. Là encore vous pourrez activer l’AJAX dans les options avancées.

Une option très intéressante est incluse : celle de gérer l’index de tabulation. Dit comme ça, ce n’est pas très parlant. Mais en fait c’est très pratique.

Lorsque vous avez deux formulaires sur une même page – disons un formulaire de contact et un pour s’abonner à la newsletter en pied de page – un conflit apparaît. Si vous utilisez la touche « Tab » de votre clavier, vous n’irez pas d’un champ à l’autre comme vous l’imaginez mais d’un formulaire à un autre.

Et c’est très frustrant ! D’où cet index de tabulation où vous pourrez donner un chiffre différent. Par exemple « 2 ». Histoire que le formulaire de contact de votre page soit à 1 et que sa valeur soit différente du formulaire en widget. Ainsi plus de conflit !

Voici la fin de la prise en main, il ne nous reste qu’un détail pour finir cette présentation de Gravity Forms : son prix.

Se procurer Gravity Forms

Je vous l’ai dit tout à l’heure, il faudra forcément mettre la main à la poche pour utiliser toutes les fonctionnalités de Gravity Forms. C’est sa particularité. Mais par contre vous en aurez pour votre argent.

À côté de ça, j’ai testé les extensions disponibles sur CodeCanyon (dans le comparatif sur les plugins de formulaire) et malgré qu’il faille payer dès le début également, elles ne lui arrivent pas à la cheville.

Gravity Forms propose ces trois offres :

  • La licence « Personal » à 39$. Elle n’est valable que pour un seul site et vous n’aurez pas accès aux add-ons. En gros, vous pourrez l’utiliser pour gérer vos formulaires de contact, de devis, accueillir des articles invités ou faire des simulateurs de prix mais pas beaucoup plus.
  • La licence « Business » à 99$ est valable pour 3 sites par contre. En plus de ça, vous aurez accès aux add-ons « basiques » qui vous permettront de connecter vos formulaires à différents services d’emailing. Vous pourrez ainsi gérer l’abonnement à une newsletter.
  • La licence « Developer » à 199$ est la formule la plus chère et le plus complète. Vous avez la possibilité d’utiliser Gravity Forms sur autant de sites que vous le souhaitez, c’est illimité. Et en plus de ça vous avez accès aux add-ons « basiques » et « avancés ». Vous pourrez ainsi utiliser l’extension pour faire des sondages, des questionnaires, du petit e-commerce et de l’automatisation vers d’autres services.

Tarifs de Gravity Forms

Ces trois formules vous donnent l’accès aux mises à jour et au support pendant un an. Cela veut donc dire qu’il faudra payer chaque année. Mais heureusement, les renouvellements sont moins chers.

En effet, voici les tarifs après une première année d’utilisation :

  • La licence Personal passe à 29,25 $, soit 25% de réduction ;
  • La licence Business passe à 49,50 $, soit 50% de réduction ;
  • Et la licence Developer passe à 99,50 $, soit 50% de réduction.

Si vous êtes convaincu que c’est l’extension qu’il vous faut, alors vous pouvez cliquer sur le bouton ci-dessous pour aller l’acheter.

Site Officiel de Gravity Forms

Petite précision : si vous achetez le plugin en passant par ce lien, la Marmite touchera une commission. Et s’il n’y avait pas d’affiliation possible, je vous aurais présenté l’extension avec la même ferveur !

Pour conclure : je ne peux plus me passer de Gravity Forms

J’ai longtemps été limité dans ce que je proposais à mes clients concernant les formulaires. C’était très frustrant…

Je n’étais pas vraiment à l’aise à l’idée de sortir 200$ pour un seul plugin. Mais j’ai finalement sauté le pas et je ne le regrette pas.

Depuis, je sais que je n’ai plus de limites du côté des formulaires et le coût est finalement amorti en fonction du nombre de projets sur lesquels je travaille. C’est presque comme si mes clients me payaient la licence chaque année finalement !

C’est pourquoi je vous conseille vraiment d’investir dans Gravity Forms si vous souhaitez faire de bons formulaires. Et à terme, à presque 100$ par an, c’est même une « petite » dépense à côté de la sérénité et de la qualité des formulaires que vous pourrez réaliser.

J’espère que ce « tour du propriétaire » s’est montré à la hauteur de vos attentes mais je dois vous dire que je n’ai pas fini. Il y a encore plein de choses à dire sur Gravity Forms et notamment du côté des add-ons.

C’est pourquoi vous pourrez prochainement lire un nouvel article sur les possibilités offertes par les licences Business et Developer.

Je vous montrerai aussi tout l’écosystème de plugins non officiels qui gravite autour de Gravity Forms et qui permettent de faire des choses géniales.

Mais ce n’est pas la seule extension de formulaires qui fait de belles choses. C’est pourquoi vous aurez également des articles de prise en main pour les solutions concurrentes dans les semaines à venir (inscrivez-vous à la newsletter pour ne rien manquer).

Assez parlé de mon adulation pour ce plugin, maintenant c’est à votre tour ! Si vous utilisez déjà Gravity Forms, qu’est-ce que vous en pensez ? Est-ce que vous êtes satisfait ? Est-ce que vous comptez le garder ad vitam eternam ?

Et si jamais vous ne l’avez pas encore, avez-vous maintenant envie de l’acheter ? Ou quelque chose ne vous plait pas ?

Comme d’habitude la conversation continue en commentaires !

PS : J’ai depuis publié un article pour vous apprendre à modifier l’apparence de vos formulaires Gravity Forms, je vous invite à le consulter si vous voulez vous affranchir du design par défaut !