Formulaire de création de membres et de gestion de compte avec Gravity Forms

Vous souhaitez créer un espace membre lors de la création de votre site internet ? Dans cet article, nous allons apprendre à créer un formulaire d’inscription ainsi qu’un formulaire de gestion de compte grâce à l’utilisation de l’extension Gravity Forms et son add-on « User Registration ».

1.  Installer User Registration
2. Créer un formulaire d’inscription
3.  Réglages du formulaire
4.  Créer une gestion de compte

Un point sur la réglementation de la protection des données personnelles

En tant que Webmaster, nous avons certaines obligations légales à mettre en place lors de la création d’un espace membre :

• Permettre à l’utilisateur de modifier à tout moment son mot de passe et pouvoir supprimer son compte.
• Vous devez déclarer votre site auprès du CNIL pour collecter librement des données.
• Vous devez préciser à l’utilisateur que vous vous réservez le droit de supprimer son compte à tout moment en cas de non respect des conditions générales de votre site.
• …

Vous retrouvez toutes les informations sur vos obligations légales sur le site du CNIL.

Gravity Forms, installation de l’add-on « User Registration »

Pour installer l’add-on, rendez vous dans Formulaire > Modules. Scrollez (↓) sur la page jusqu’à trouver « User Registration add-on » et cliquez sur « Install ».

Une fois le plugin activé, dans les réglages de Gravity Forms un nouvel onglet « User Registration » est apparu. Vous pouvez ou non y activer le réglage qui permet de rediriger l’utilisateur vers votre page d’inscription personnalisée, plutôt que d’utiliser celle de WordPress.

Création du formulaire d’inscription avec Gravity Forms

Pour commencer, créez votre formulaire d’inscription. Par principe, ne demandez pas plus que ce qui est vraiment nécessaire, et ne faites pas une inscription trop longue, il serait dommage de perdre des utilisateurs lors de cette étape! (Approximativement 65% des utilisateurs sont rebutés par un formulaire, voir l’article sur les Personas). Pour notre exemple, nous allons demander le Nom/Prénom, un identifiant (obligatoire), l’adresse e-mail (obligatoire) ainsi que le mot de passe.

Réglages du formulaire d’inscription Gravity Forms

 

Après avoir sauvegardé votre formulaire, rendez vous dans Réglages > User Registration, puis cliquez sur « Ajouter« .

Pour commencer, vous devez donner un nom unique aux règles que vous allez créer. Ensuite, ce formulaire étant pour l’inscription, cliquez sur « Create User ». La page se recharge et ajoute les options de création d’utilisateur.

Ces options sont divisées en trois parties :

1. User settings : C’est ici que vous pouvez associer les champs de votre formulaire aux Meta utilisateur standard de wordpress. Pour chaque Meta, sélectionnez dans la liste à côté le champ correspondant dans votre formulaire.
   • Si vous décidez de ne pas mettre de champ « Mot de passe » dans votre formulaire, vous pouvez en générer un automatiquement en mettant « Password » sur « Auto Generate Password ».
   • Le rôle est obligatoire, choisissez dans la liste le rôle qu’aura chaque utilisateur s’inscrivant par ce principe de formulaire.
2. User Meta : Si vous demandez plus d’informations à votre utilisateur (une adresse postale par exemple), vous pouvez les associer ici. Sélectionnez dans la liste dans quelle Meta vous souhaitez stocker l’information (vous pouvez aussi le stocker dans les Metas des plugins) ou créez votre propre Meta en choisissant « Add Custom Meta » (la liste devient alors un champ de texte pour que vous puissiez la nommer). Associez-la ensuite avec le champ de votre formulaire. Si vous avez plusieurs champs personnalisés, cliquez dessus pour ajouter une nouvelle Meta.
3. Additionnal Options : Vous avez ici 3 réglages supplémentaires :
   • Send Email : Active l’envoi du mot de passe par e-mail, coché par défaut (personnellement je le décoche, je n’aime pas l’envoi de mot de passe par e-mail).
   • User Activation : Envoie un lien par email à l’utilisateur pour activer son compte.
   • Registration Condition : Permet d’ajouter des conditions pour l’inscription.

 

Confirmations

Nous allons maintenant régler le message de confirmation d’inscription. Allez donc dans Réglages > Confirmations .

Vous pouvez utiliser 3 types de confirmations :

• Texte : Affiche le texte saisi dans une page.
• Page : Redirige l’utilisateur vers une page choisi dans la liste des pages de votre site.
• Redirection : Permet de rediriger l’utilisateur vers une URL.

Notifications

Les notification sont les e-mail que vous recevez lors de l’inscription d’un nouveau membre. Etant donné que nous avons désactivé l’envoi du mot de passe par e-mail, l’utilisateur de reçois plus de mail de confirmation d’inscription. Nous allons donc lui en créer un nouveau.

Rendez vous dans Réglages > Notifications puis cliquez sur « Ajouter« .

• Nom : Nom que vous donnez aux réglages.
• Événement : Moment ou l’e-mail sera envoyé.
  • Nous le laissons sur « Le formulaire à été envoyé »
• Envoyer à : 3 choix possibles. « Saisissez un e-mail » : Vous entrez une adresse mail en brut, elle est donc fixe (e-mail de l’administrateur par exemple). « Sélectionnez un champ » : Permet de choisir un champ de type e-mail de votre formulaire (Pour l’envoyer à la personne qui remplit le formulaire). « Configurer le routage » : Vous permet de mettre des conditions, d’envoyer le mail à plusieurs personnes.
  • Nous choisissons « Sélectionne un champ » et nous mettons « Envoyer à ce champ » sur « E-mail » pour que ce soit l’utilisateur qui le reçoive.
• Les champs suivants correspondent au champs classiques d’un e-mail. Un petit picto à droite de chaque champ vous permet d’ouvrir une liste afin d’insérer des éléments prédéfinis ou venant du formulaire (Nom de la personne, e-mail admin…).
• Formatage automatique : Vous permet de rédiger votre e-mail en HTML (laisser décoché pour utiliser la mise en forme de l’éditeur WordPress).
• Logiques conditionnelles : Permet d’ajouter des conditions pour l’envoi des notifications.

Votre formulaire d’inscription étant maintenant créé et configuré, il ne vous reste plus qu’à l’intégrer sur une page de votre site.

Création de la gestion de compte avec Gravity Forms

Il est plus intéressant pour l’utilisateur d’avoir accès à une véritable page de gestion de compte basé sur le thème de votre site plutôt que le back-office de WordPress. Nous allons donc créer cette page de gestion de compte.

Bloquer l’accès au tableau de bord de WordPress pour les utilisateurs

Étant donné que nous allons créer une page de gestion de compte personnalisé, il est intéressant de bloquer l’accès au tableau de bord ainsi que de masquer le bandeau WordPress présent en haut du site. Pour cela, ajoutez simplement ce code dans le fichier fonction.php de votre thème enfant :

[pastacode lang=”php” manual=”%0Aadd_action(‘admin_init’%2C%20’no_dashboard’)%3B%0A%0Afunction%20no_dashboard()%20%7B%0A%0A%20%20if%20(!current_user_can(‘publish_posts’)%20%26%26%20%24_SERVER%5B’DOING_AJAX’%5D%20!%3D%20’%2Fwp-admin%2Fadmin-ajax.php’)%20%7B%0A%20%09wp_redirect(home_url())%3B%20exit%3B%0A%20%20%7D%0A%0A%7D%0A%0A%2F*–cacher%20admin-bar%20aux%20utilisateurs–*%2F%0A%0Aadd_action(‘after_setup_theme’%2C%20’remove_admin_bar’)%3B%0A%0Afunction%20remove_admin_bar()%20%7B%0A%09if%20(!current_user_can(‘publish_posts’))%20%7B%0A%20%20%09show_admin_bar(false)%3B%0A%09%7D%0A%7D” message=”Interdire l’accès au tableau de bord WP pour les utilisateurs” highlight=”” provider=”manual”/]

Création et réglage du formulaire de gestion de compte

Comme vu plus haut dans cet article, je vous invite à créer un formulaire comprenant les champs que l’utilisateur peut modifier dans sa gestion de compte. Pour notre exemple, nous lui permettons uniquement de modifier son e-mail ainsi que son mot de passe.

Allez ensuite dans Réglage > User Registration puis cliquez sur « Ajouter« . Cliquez cette fois sur « Update User ».

Les réglages sont ici similaires à la création d’un compte.

Une fois ces réglages faits, je vous invite à régler les confirmations ainsi que les notification, qui seront différentes de celle de l’inscription. C’est souvent négligé dans l’usage de Gravity Forms mais c’est toute la différence qui peut être faite en termes de Branding.

Ajout de la fonction de suppression de compte

Avant d’intégrer votre formulaire dans une page, je vous propose d’installer une extension qui n’a rien à voir avec gravity forms : Delete Me.

Cette extension permet à l’utilisateur de pouvoir supprimer son compte (lui laisser ce droit est obligatoire).

Pour accéder aux réglages, il faut aller dans Réglages > Delete Me du tableau de bord de WordPress.

Création de la page de gestion de compte

Maintenant que tout est prêt pour la page de gestion de compte, il ne vous reste plus qu’à la créer, insérer votre formulaire ainsi que ce shortcode ci-dessous pour la suppression de compte (notez qu’en tant qu’administrateur, vous ne verrez pas le lien pour supprimer le compte, il vous faut créer un compte utilisateur pour le visualiser) :

[pastacode lang=”markup” manual=”%5Bplugin_delete_me%20%2F%5D” message=”Shortcode suppression utilisateur” highlight=”” provider=”manual”/]

Et vous? À quoi ressemble votre espace membre maintenant? Votre retour sur Gravity Forms ?