Gravity Forms : Installation et création d’un formulaire simple sur WordPress

Vous pouvez parfois avoir besoin d’utiliser des formulaires complexes lors de vos créations de sites Internet, et, certaines extensions gratuites ne sont pas assez complètes. C’est ici qu’intervient Gravity Forms, LE plugin le plus complet pour les formulaires utilisé par beaucoup d’agences Web.

1.  Présentation de Gravity Forms
2. Installer Gravity- Forms
3.  Créer son premier formulaire
4.  Intégrer le formulaire dans une page
5.  Récupérer les informations avec Gravity Forms

Gravity Form: l’extension par excellence pour la création de formulaires

Comparé à d’autres extensions, Gravity Forms présente de nombreux avantages pour l’intégration de formulaires dans WordPress :

• Gravity forms possède de nombreux champs de saisie.
• Intégration de paiement dans le formulaire (reste moins puissant qu’une extension comme WooCommerce).
• Création et modification d’utilisateur sans passer par le tableau de bord.
• Création de sondages / quizz.
• Raoutage complexe des e-mail de notifications.
• …

Gravity forms est donc un plugin très complet pour la création de formulaires. En revanche pour un simple formulaire de contact, nous vous conseillons plutôt Contact Form 7 qui sera plus léger pour votre site. L’autre point négatif de Gravity Forms, c’est qu’il s’agit d’une extension payante : Mais la qualité se paye ! Elle est disponible sous trois offres différentes :

• 39$/an : 1 seul site, nombre de formulaire illimité, pas d’accès aux plugin.
• 99$/an : 3 sites, nombre de formulaire illimité, accès aux plugins « Basics ».
• 199$/ans : Sites illimités, nombre de formulaire illimité, accès aux plugins « Basics » et avancés.

Installation de Gravity Forms sur votre site WordPress

Contrairement aux plugins « classique », Gravity Forms ne peut pas se télécharger depuis le menu extension du tableau de bord de WordPress. Il vous faut passer par le site gravityforms.com . Pour vous connecter, allez dans le menu « Support ». Une fois fait, vous pourrez télécharger le plugin.

Pour installer le fichier téléchargé, 2 solutions :

1. Vous décompressez l’archive, et vous la mettez dans le dossier d’installation de WordPress via un client FTP.
2. Directement depuis le backoffice de WordPress, vous pouvez aller dans Extensions > Ajouter. En haut vous cliquez sur « Mettre une extension en ligne », choisissez votre fichiez puis cliquez sur « Installer ».

Le menu créé par Gravity Forms

Lors de son installation, Gravity ajoute un nouveau menu appelé « Formulaire » à votre tableau de bord :

• Formulaire : Liste l’ensemble des formulaires Gravity Forms de votre site.
• Nouveau Formulaire : Permet de créer un nouveau formulaire.
• Entrées : Comprend l’ensemble des contenus envoyés par les formulaires.
• Réglages : Permet d’accéder aux réglages généraux de Gravity Forms.
• Importer / Exporter : Vous permet d’exporter les entrées d’un formulaire, d’exporter / importer un formulaire.
• Mise à jour : Pour mettre à jour votre plugin.
• Modules : Liste les add-ons disponibles pour l’extension.
• Aide : Vous permet d’accéder à l’aide de Gravity Forms.

 

 

Une fois Gravity Forms installé et activé, il vous faut enregistrer la clé d’activation. Pour cela, rendez-vous dans les réglages de Gravity et collez votre clé gravity dans le champ  « Clé de licence pour le support ».

Vous trouverez la licence sur le site gravityforms.com , dans le menu Support > My Account.

Création de votre premier formulaire avec l’extension Gravity Forms

Pour créer votre formulaire, rendez vous sur Formulaire > Nouveau formulaire. Un fenêtre apparaît vous demandant d’indiquer le nom et la description de votre formulaire (ces informations pourrons ou non être affichés lors de l’intégration du formulaire dans une page), puis cliquez sur « Créer le formulaire ».

Interface de création de formulaire de Gravity Forms

L’interface de création de formulaire de Gravity Forms se structure ainsi :

1. Vous retrouvez ici le nom que vous avez donné à votre formulaire, ainsi que son identifiant.
2. Cette section se divise en 4 parties :
   • Modifier : C’est l’onglet actuel qui permet de construire votre formulaire.
   • Réglages : Vous pouvez paramétrer les réglages du formulaire, les confirmations ainsi que les notifications.
   • Entrées : Permet de voir les réponses aux formulaires.
   • Prévisualisation : Pour avoir un aperçu du formulaire (Attention, il s’agit juste d’un aperçu sur le fonctionnement / la structure. Cette prévisualisation ne prend pas en compte votre thème).
3. Espace de travail où vous construisez votre formulaire.
4. Un input (champ) placé dans l’espace de travail.
5. Vous pourrez trouver ici tous les types de champs que vous pouvez placer dans vos formulaire.
6. C’est ici que vous pouvez supprimer et sauvegarder votre formulaire.

Les différents types d’entrées

Voici les différents types d’entrées possibles avec gravity forms. Nous vous convions à tous les essayer au moins une fois, certaines pourraient être plus adaptées à vos besoins.

• Les champs standards

Ce sont des champs « standards » qui peuvent servir pour tout.

1. Ligne de texte : Pour rentrer du texte court.
2. Paragraphe : Pour rentrer du texte long.
3. Liste déroulante : Permet de créer une liste de choix.
4. Choix multiple : C’est un peu comme la liste de choix, mais la liste reste déroulée.
5. Nombre : Ne permet à l’utilisateur de rentrer que des nombres et pas de lettres.
6. Case à cocher : Pour créer des cases à cocher (plusieurs choix possibles).
7. Boutons radio : Comme les case à cocher, mais un seul choix possible.
8. Masqué : Ce champ n’apparaîtra pas sur votre formulaire, généralement il s’agit de contenu remplis via PHP.
9. HTML : Permet à l’utilisateur de rentrer du code HTML.
10. Section : Crée une séparation dans le formulaire.
11. Page : Sépare le formulaire sur plusieurs pages.

 

• Les champs avancés

Ces champs sont un peu plus précis sur le contenu, et offre des options supplémentaires (vérifications par exemple).

1. Nom : Pour renseigner le Nom et le Prénom de l’utilisateur.
2. Date : Demande à l’utilisateur de renseigner une date (affiche un calendrier quand on clique sur le champ).
3. Heure : Pour récupérer une heure.
4. Téléphone : Pour demander le numéro de téléphone à l’utilisateur. Permet, sur mobile d’afficher un clavier numérique. En revanche, le régler sur « International » pour récupérer un numéro français, n’empêche pas l’utilisateur de rentrer des lettres.
5. Adresse : Créé un ensemble de champs pour renseigner l’adresse : adresse, ville, code postale, pays, région.
6. Site Web : Demande à l’utilisateur de proposer un site web. Gravity Forms va vérifier que le format est bien du type : https://wordpress.facemweb.com
7. E-mail : Comme pour le site web, il y a une vérification du format.
8. Envoi de fichier : Permet à l’utilisateur de vous envoyer un fichier. Vous pouvez choisir la quantité de fichiers, le type de fichier, et leur poids.
9. CAPTCHA : Vérifie que l’utilisateur n’est pas un robot en demandant de recopier une suite de caractères. Un classique qui peut parfois ennuyer 🙂
10. Liste : Contrairement à la liste déroulante ou l’utilisateur choisi parmi un choix défini, ici l’utilisateur crée sa propre liste.

• Les champs d’articles

Ces champs permettent à l’utilisateur de créer un article pour votre WordPress. Il se retrouvera dans les brouillons et vous n’aurez plus qu’à le valider ou non.

1. Titre : Correspond au titre de la page.
2. Corps : Permet à l’utilisateur de taper le contenu de la page (sans les options de mises en forme).
3. Extrait : Pour ajouter l’extrait de l’article. Correspond à la meta description.
4. Étiquettes : Permet à l’utilisateur d’ajouter des tags à vos articles (inutile en SEO).
5. Catégorie : Fourni à l’utilisateur une liste déroulante des catégories du site.
6. Image d’article : Permet d’ajouter une image à la une.
7. Champ perso : Champ réservé aux développeurs. Il faudra mettre les mains dans le cambouis !

• les champs de prix

Ce différents inputs vous permettront de créer un formulaire de commande (mais bien moins puissant qu’un plugin complet tel que WooCommerce).

1. Produit : Vous permet de créer des produits simple, ou plus complexe.
2. Quantité : Créé un champ pour que l’utilisateur indique la quantité.
3. Option : Permet d’ajouter des options au produit.
4. Livraison : Ajoute une liste ou des boutons radio pour les différentes méthodes de livraison.
5. Total : Ce champ permet d’afficher le total avec les option / quantités / livraisons.

Ajout d’inputs dans les formulaires

Pour ajouter un champ dans votre formulaire, rien de plus simple. Choisissez le champ que vous souhaitez ajouter, et cliquez dessus. Il va automatiquement s’ajouter à votre tableau de bord. Vous avez la possibilité de réorganiser vos différents champs par un cliquer-glisser.

Réglage des champs de Gravity Forms

1. Cette partie reprend l’identifiant du champ. Vous pouvez également étendre ou réduire la fenêtre en cliquant sur la flèche de droite, copier le champ en cliquant sur l’icone  , ou supprimer le champ en cliquant sur la croix.
2. Aperçu du champ.
3. Onglets des différentes options du champ.
4. Réglage du champ.

• Général : Vous retrouverez des réglages commun à chaque inputs comme le nom, la description.. Mais aussi les réglages propres à chaque champs (l’ajout des différents choix d’une liste déroulante par exemple).
• Apparence : Vous pourrez ici régler tout ce qui concerne l’apparence comme le placeholder, la taille, ajouter une classe CSS(n’oubliez pas de créer un thème enfant avant de modifier le CSS de votre site).
• Avancé : Permet de régler de façon plus poussé le champ en y ajoutant des conditions logiques, régler sa visibilité, sa valeur par défaut..

Avec toutes ces informations, vous êtes maintenant capable de créer votre premier formulaire.

Réglages du formulaire avec Gravity Form

Maintenant que votre formulaire est créé, nous allons faire quelques petits réglages, cliquez donc sur « Réglage ».

Les « Réglages du formulaire » sont divisés en plusieurs parties :

• Formulaires basiques : Vous pouvez changer le nom et la description du formulaire.

• Mise en page du formulaire : Permet de changer quelques aspects visuels du formulaire, et ajouter une classe CSS.

• Bouton de formulaire : Vous pouvez ici changer le texte du bouton, ou le remplacer par une image.

• Enregistrer et continuer : Permet à l’utilisateur d’enregistrer son formulaire pour le finir plus tard.

• Restrictions : Permet de limiter le nombre de fois où le formulaire sera rempli, une période ou il sera actif, ou le limiter aux utilisateurs connectés.

• Options du formulaire : Vous permet d’activer un anti-spam et d’afficher des animations.

Nous n’allons pas dans ce tutoriel aller régler les « Confirmations » et les « Notifications ». Pour cet exemple, l’utilisateur aura un message de confirmation, et vous, administrateur de votre site recevrez un email contenant les informations entrées par l’utilisateur.

Intégration de votre formulaire Gravity Forms dans une page WordPress

Maintenant que votre formulaire est créé et configuré, vous devez avoir envie de l’intégrer à votre site internet. Rendez vous sur la page où vous souhaitez insérer votre formulaire, ou alors créez une nouvelle page. Un nouveau bouton est apparu au dessus de votre barre d’édition de texte.

Lorsque vous cliquez sur ce bouton une fenêtre apparaît pour insérer un formulaire.

1. Choisissez le formulaire que vous souhaitez insérer dans la page dans la liste déroulante.
2. Vous pouvez choisir d’afficher ou non le titre et la description du formulaire.
3. Vous pouvez activer l’AJAX( permet de ne pas rafraîchir la page lors de l’envoie du formulaire).
4. Dans les options avancées, vous pouvez régler le Tabindex (indique le champ de départ lors d’une utilisation au clavier).
5. Vous n’avez plus qu’à cliquer sur « Insérer un formulaire ».

Gravity Forms insère un shortcode dans votre page.

[pastacode lang=”markup” manual=”%5Bgravityform%20id%3D%223%22%20title%3D%22true%22%20description%3D%22true%22%20tabindex%3D%220%22%5D” message=”Exemple de Shortcode inséré par Gravity Forms” highlight=”” provider=”manual”/]

Vous pouvez maintenant publier votre page pour mettre en ligne votre formulaire.