Un simple formulaire d’inscription est déjà fourni par défaut avec WordPress. Cependant, avec les bons outils, les personnalisations avancées sont nombreuses, que vous ajoutiez un logo au formulaire ou que vous incluiez ce formulaire sur une page plus publique.

Chaque site web nécessite une version différente du module d’inscription d’utilisateur et c’est pourquoi il est important d’apprendre à ajouter et à gérer un formulaire d’inscription WordPress personnalisé.

La bonne nouvelle, c’est qu’un formulaire d’inscription se présente sous de nombreuses formes et styles. Vous avez la possibilité de créer et de gérer un formulaire d’inscription WordPress personnalisé avec une extension d’inscription d’utilisateurs, en ajoutant des profils de membres et des éléments de votre marque.

Comme alternative, vous pouvez intégrer un outil d’inscription tiers ou vous en tenir à l’essentiel et personnaliser légèrement le module d’inscription par défaut de WordPress.

Quels que soient vos besoins et vos désirs concernant un formulaire d’inscription WordPress personnalisé, différentes solutions sont disponibles pour activer des formulaires d’inscription plus simples ou des pages de connexion et d’inscription avancées avec des fonctions de messagerie utilisateur et de connexion avec des comptes de réseaux sociaux.

Continuez la lecture pour en savoir plus sur l’inscription des utilisateurs en général et sur les bases de l’ajout d’un nouveau formulaire d’inscription WordPress, entièrement personnalisable, sur votre site web.

Créez rapidement et facilement ✨ un formulaire d'inscription WordPress✨ entièrement personnalisé à l'aide de ce guide👇Click to Tweet

Qu’est-ce que l’inscription des utilisateurs ?

L’inscription d’un utilisateur est le processus simple par lequel un visiteur crée un compte sur votre site web.

Cette inscription, ou enregistrement, implique un nouveau client sur un site comme une boutique eCommerce, ou un membre rejoignant un forum, ou un lecteur s’inscrivant sur un blog, pour n’en citer que quelques-uns.

Le processus d’enregistrement d’utilisateur exige qu’une personne saisisse des informations de contact pour créer un compte. Parfois, il suffit de créer un identifiant et un mot de passe. Cependant, il est plus courant d’avoir au moins un champ d’adresse e-mail pour s’assurer qu’un processus de récupération de mot de passe est possible.

La page d’inscription standard de WordPress demande un identifiant et un e-mail. Ensuite, un mot de passe est demandé.

Exemple de formulaire d'inscription WordPress

Exemple de formulaire d’inscription WordPress

Vous pouvez également trouver des formulaires d’enregistrement des utilisateurs beaucoup plus complets, avec des champs demandant des informations telles que le sexe, l’adresse ou la date de naissance. Il n’est pas rare de voir de tels formulaires approfondis sur des sites de rencontre ou des réseaux sociaux, par exemple. Même des sites comme Netflix proposent des questions facultatives pour l’inscription des utilisateurs, afin d’affiner les types de vidéos que vous aimez regarder.

Un formulaire d’inscription n’est pas nécessaire si vous n’offrez rien de spécial à ces utilisateurs ou si vous n’êtes pas intéressé par la gestion d’une base de données d’utilisateurs. Cependant, un visiteur de site web est un élément plutôt précieux pour la gestion d’une entreprise en ligne, il est donc souvent préférable de trouver des raisons d’avoir des utilisateurs.

L’enregistrement des utilisateurs ouvre également la possibilité de définir des rôles d’utilisateur, où certains utilisateurs ont des capacités ou un accès à votre site différents de ceux des autres.

Rôles des utilisateurs pour le formulaire d'inscription WordPress

Rôles des utilisateurs pour le formulaire d’inscription WordPress

En général, un module d’enregistrement d’utilisateur tend à conduire la personne vers un espace en ligne pour qu’elle puisse comprendre sa position et son activité sur votre site. Un site comme eBay, par exemple, affiche les offres et les achats passés dans le profil de l’utilisateur. Et cela n’est possible que si quelqu’un parcourt le formulaire d’inscription de l’utilisateur pour accéder à cet espace du profil.

Maintenant que nous avons parlé des bases de l’inscription des utilisateurs et de la fonction qu’elle remplit, continuez cette lecture pour savoir pourquoi vous pourriez envisager d’ajouter un formulaire WordPress d’enregistrement des utilisateurs à votre site.

Avantages des formulaires d’inscription WordPress

Lors de la construction d’un site, vous pouvez vous interroger sur l’utilité d’ajouter un formulaire d’inscription WordPress. Dans l’ensemble, une zone d’enregistrement montre aux visiteurs qu’ils peuvent trouver un certain avantage à créer un compte. Parfois, cela signifie qu’ils auront accès à un forum, ou peut-être que cela leur permettra d’enregistrer tous leurs achats passés ou leurs interactions avec d’autres utilisateurs.

Les formulaires d’inscription apportent une valeur ajoutée aux utilisateurs qui créent les comptes. En prime, les propriétaires de sites obtiennent des rendements importants sous forme d’organisation et de collecte de données.

Les avantages sont nombreux, mais voici les principaux :

Quelle est la meilleure façon de proposer un formulaire d’inscription sur WordPress ?

Il existe techniquement des centaines de façons d’ajouter un formulaire d’inscription à votre site WordPress. La façon dont vous concevez votre formulaire rend chaque processus entièrement unique, surtout lorsque vous commencez à ajouter des champs personnalisés.

Cependant, il existe quatre méthodes principales pour ajouter un formulaire d’inscription d’utilisateur, toutes possibles avec les connaissances et les outils adéquats.

Vous pouvez activer un module d’inscription en utilisant les méthodes suivantes :

La grande question est de savoir laquelle de ces méthodes est idéale pour votre situation ?

Il est difficile de choisir la voie à suivre, mais le format de votre entreprise et vos souhaits en matière de fonctionnalités jouent un rôle dans le choix de la voie à suivre :

Comment créer un formulaire d’inscription WordPress sans extension

Il est possible d’ajouter un formulaire d’inscription à WordPress sans avoir à chercher et à installer une nouvelle extension. Le raisonnement qui sous-tend cette approche varie, mais en général, les propriétaires de sites peuvent soit opter pour le formulaire d’inscription intégré à WordPress, soit envisager une voie plus avancée avec un logiciel tiers ou un code personnalisé.

Nous aborderons les étapes de l’approche de chaque méthode.

Activer la fonction d’inscription d’utilisateur par défaut dans WordPress

WordPress fournit déjà un formulaire d’inscription et une zone de gestion des utilisateurs lorsque vous installez le système de gestion de contenu. Les fonctions d’enregistrement ne sont pas nécessairement activées par défaut, il y a donc quelques étapes à franchir afin de s’assurer que les visiteurs de votre site ont la possibilité de créer un compte.

Gardez à l’esprit que cette version d’un formulaire d’inscription est le strict minimum lorsqu’il s’agit de concevoir des formulaires pour les modules d’inscription et de connexion. Cependant, elle fait l’affaire pour les blogs et les petites communautés qui n’ont besoin que d’obtenir des utilisateurs et de donner aux gens un moyen de se connecter avec un identifiant et un mot de passe.

Pour commencer, allez sur votre tableau de bord WordPress.

Cliquez sur Réglages > Général.

Réglages de WordPress - Formulaire Inscription WordPress

Réglages de WordPress

Lorsque vous faites défiler les réglages, trouvez la rubrique Inscription. Cochez cette case pour vous assurer que toute personne qui vient sur votre site peut s’inscrire en tant que nouvel utilisateur.

Ensuite, modifiez le champ Rôle par défaut de tout nouveau compte afin que chaque nouvel utilisateur se voie attribuer un rôle avec des autorisations.

Le rôle d’utilisateur abonné est le plus courant pour les membres et les clients. Les contributeurs et les auteurs ont accès à certains outils de création de contenu, comme les articles de blog, tandis que les éditeurs peuvent publier et que les administrateurs gardent le contrôle de chaque aspect du site web.

Veillez à enregistrer les modifications.

Rôles des utilisateurs

Rôles des utilisateurs

Cette activation active une page d’inscription et de connexion unique sur laquelle les personnes peuvent se rendre lorsqu’elles souhaitent accéder à votre site web.

Par défaut, le formulaire est accessible à l’adresse suivante : monsite.com/wp-login.php. Il est possible de modifier cette URL, mais toutes les pages de connexion et d’inscription de WordPress commencent généralement par le sous-répertoire wp-login.php.

Vous devriez voir un formulaire qui demande au visiteur de se connecter avec un identifiant ou une adresse e-mail, ainsi que son mot de passe. La page comprend également un lien pour s’inscrire sur le site, récupérer un mot de passe oublié et retourner à la page d’accueil du site.

URL par défaut pour un formulaire d'inscription WordPress

URL par défaut pour un formulaire d’inscription WordPress

Maintenant que vous avez activé l’inscription des utilisateurs, il est temps de placer un formulaire d’enregistrement sur l’interface publique du site.

La façon la plus simple d’installer un formulaire d’inscription sur WordPress est d’ajouter un widget.

Allez dans Apparence > Widgets dans le tableau de bord WordPress.

L'onglet des widgets dans WordPress

L’onglet des widgets dans WordPress

La liste des widgets disponibles présente plusieurs options parmi lesquelles vous pouvez choisir, y compris le HTML personnalisé, les images et un widget Méta. Ces widgets sont tous fournis par défaut dans WordPress, vous n’avez donc rien d’autre à installer.

Cherchez le widget Méta. Il active un module permettant aux utilisateurs de se connecter, de s’enregistrer et de cliquer sur d’autres liens WordPress.

Sélectionnez le widget Méta.

Le widget méta dans WordPress

Le widget méta dans WordPress

Tous les thèmes varient, vous pouvez donc avoir un pied de page, une colonne latérale, un en-tête ou une combinaison de ces zones de widgets. Vous pouvez placer le widget Méta dans n’importe laquelle de ces zones.

Notre thème de test actuel n’a que quelques pieds de page, nous placerons donc mon widget Meta dans le premier. De cette façon, les visiteurs du site voient le formulaire de connexion et d’inscription, quelle que soit la page sur laquelle ils se trouvent.

Sélectionnez la zone de widget de votre choix et cliquez sur le bouton Ajouter un widget.

Ajouter un widget

Ajouter un widget

Le widget Méta est maintenant placé et enregistré dans la zone de pied de page, ou dans la zone de widget que vous avez choisie.

Lorsque vous cliquez sur le widget Méta, vous remarquerez qu’il ne contient pas beaucoup de contenu ni de champs personnalisables. Tout est configuré pour vous.

Cependant, le widget Méta vous permet d’ajuster le titre si vous le souhaitez. Veillez à enregistrer le widget s’il ne s’est pas enregistré automatiquement.

Modification du widget méta

Modification du widget méta

Allez sur l’interface publique de votre site web pour voir à quoi ressemble le lien d’inscription :

Formulaire d'inscription sur l’interface publique

Formulaire d’inscription sur l’interface publique

Une fois que vous vous êtes déconnecté de votre compte test, vous remarquerez que des liens d’inscription et de connexion sont présentés pour que les utilisateurs puissent cliquer et se connecter soit à leurs comptes précédemment créés, soit à de nouveaux comptes.

Liens d’inscription

Liens d’inscription

Comme nous l’avons vu précédemment, en cliquant sur les liens Connexion ou Inscription, l’utilisateur est dirigé vers la page d’enregistrement standard de WordPress, lui demandant de créer un identifiant, de saisir son adresse e-mail et de créer un mot de passe.

Formulaire d'inscription WordPress par défaut

Formulaire d’inscription WordPress par défaut

Comment modifier le formulaire d’inscription et de connexion

En dehors du code personnalisé, plusieurs options sont disponibles pour personnaliser la page de connexion et d’enregistrement par défaut de WordPress.

Changer le design de la page de connexion à WordPress aide à améliorer l’image de marque et la sécurité. Il est logique d’avoir son propre logo et ses propres couleurs sur la page d’inscription, surtout lorsqu’il s’agit de communautés en ligne orientées vers les clients, où la page de connexion est l’une des premières zones que voit un client.

L’autre raison pour laquelle vous pouvez décider de modifier la structure de la page de connexion est d’empêcher les intrus d’y accéder. Cela peut se faire en changeant l’URL de ladite page d’enregistrement (puisque tout le monde peut penser et aller sur l’URL /wp-login) et en ajoutant une protection supplémentaire comme un contrôle de sécurité anti-spam.

Modification du logo et du design de la page d’inscription

Le fait d’enlever rapidement le logo WordPress et de le remplacer par le vôtre sur la page d’enregistrement ajoute un indice de votre propre marque lorsque les utilisateurs tentent de se connecter et de s’inscrire.

Vous avez également la possibilité de modifier complètement le design de cette page avec une extension, en incorporant des styles et des couleurs uniques qui ont un aspect différent des designs standards de WordPress.

Certaines personnes veulent seulement ajouter un nouveau logo et se débarrasser du logo WordPress. C’est assez simple et ne nécessite pas d’extension.

Pour ce faire, téléversez le logo dans votre médiathèque WordPress. Pour cela faire, allez dans Médias > Ajouter.

Ajouter un nouveau logo

Ajouter un nouveau logo

Sur cette page, vous téléversez le logo à partir de votre ordinateur en cliquant sur le bouton Sélectionnez des fichiers et en sélectionnant le logo dans les fichiers de votre ordinateur.

Téléverser un nouveau logo pour votre formulaire d'inscription WordPress personnalisé

Téléverser un nouveau logo pour votre formulaire d’inscription WordPress personnalisé

Une fois qu’il est téléversé, trouvez et cliquez sur le lien Modifier pour cette image de logo.

Modifier le fichier du nouveau logo

Modifier le fichier du nouveau logo

Copiez l’URL du fichier de l’image dans le presse-papiers. Sauvegardez cela pour plus tard dans un éditeur de texte ou quelque chose de similaire.

Copie de l’URL du logo pour le formulaire d'inscription WordPress

Copier l’URL du logo pour le formulaire d’inscription WordPress

Pour aller plus loin, rendez-vous dans le fichier functions.php du site. Collez le morceau de code suivant dans le fichier functions.php. Il est généralement préférable de coller le code à la fin du fichier :

function wpb_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(http://your-logo.png);
height:200px;
width:600px;
background-size: 600px 200px;
background-repeat: no-repeat;
padding-bottom: 20px;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'wpb_login_logo' );

Trouvez le texte qui dit « http://your-logo.png » et remplacez-le par l’URL de l’image que vous avez sauvegardée auparavant.

Vous avez également la possibilité de modifier la hauteur et la largeur de votre logo en fonction de la taille réelle du fichier. N’hésitez pas à jouer avec le code et à prévisualiser le résultat jusqu’à ce que vous obteniez un affichage parfait.

Consultez la documentation officielle de WordPress sur la personnalisation du formulaire de connexion si vous avez des questions ou si vous souhaitez aborder d’autres personnalisations.

Utiliser une extension pour personnaliser davantage la page d’inscription

En alternative, plusieurs extensions sont disponibles pour changer le logo de la page de connexion.

En fait, l’extension LoginPress Customizer fournit un système complet pour échanger le logo et personnaliser à peu près tous les aspects de votre page d’enregistrement.

LoginPress pour le formulaire d'inscription WordPress

LoginPress pour le formulaire d’inscription WordPress

Pour utiliser LoginPress, installez l’extension et allez sur LoginPress > Personnaliser dans le tableau de bord de WordPress.

L’extension offre des réglages supplémentaires, mais nous nous intéressons surtout aux outils de personnalisation.

Cela vous amène à l’outil de personnalisation WordPress habituel, mais avec une page spéciale permettant de modifier le formulaire et la page d’inscription.

L’extension a plusieurs thèmes pré-construits dans la version premium, mais la plupart des capacités de conception sont fournies gratuitement.

Comme vous pouvez le voir, des réglages sont disponibles pour ajuster le logo, l’arrière-plan, le formulaire de connexion, et plus encore. Elle a déjà intégré automatiquement un arrière-plan qui est radicalement différent de l’arrière-plan par défaut de WordPress.

Constructeur de thèmes pour le formulaire d'inscription de WordPress

Constructeur de thèmes pour le formulaire d’inscription de WordPress

L’extension a un constructeur visuel. Ainsi, pour changer le logo, il suffit de faire défiler le logo et de cliquer sur l’icône Changer le logo.

Téléverser un logo dans un formulaire d'inscription

Téléverser un logo dans un formulaire d’inscription

Téléversez un logo à partir de votre ordinateur et modifiez les réglages de largeur et de hauteur du logo pour vous assurer qu’il est bien visible.

Personnalisation de votre logo

Personnalisation de votre logo

Ensuite, allez dans l’onglet Arrière-plan pour sélectionner un arrière-plan fourni par LoginPress ou pour téléverser le vôtre. Vous pouvez également choisir un arrière-plan blanc ou une couleur unie.

En cliquant sur un bouton, vous pouvez passer d’un arrière-plan fleuri à un arrière-plan avec des feuilles.

Définir un arrière-plan

Définir un arrière-plan

De nombreux autres onglets vous permettent de modifier les réglages de la page d’inscription.

Nous vous recommandons de les parcourir tous, y compris la possibilité de transformer complètement la taille et l’emplacement du formulaire. Vous pouvez tout modifier, des messages de bienvenue aux Google Fonts, le tout sans avoir à toucher une ligne de code.

Réglages supplémentaires pour votre formulaire d'inscription WordPress

Réglages supplémentaires pour votre formulaire d’inscription WordPress

Modifier l’URL de la page d’inscription

Il est important de décider si vous souhaitez créer une nouvelle URL pour la page d’inscription. Nous avons déjà indiqué que la page d’enregistrement est accessible à l’adresse monsite.com/wp-login.php.

Comme WordPress utilise /wp-login.php pour toutes les pages de connexion, il n’est pas difficile pour un pirate de connaître l’emplacement exact. Bien qu’ils doivent toujours attaquer le formulaire de connexion par la force brute, en premier lieu vous ajoutez une couche de sécurité en minimisant les chances qu’ils atteignent la page.

Votre meilleure chance est d’installer et d’activer l’extension WPS Hide Login pour faire le travail. L’extension gère instantanément la redirection et le masquage de votre ancienne page d’inscription, en vous demandant seulement de décider du nom du sous-répertoire.

Extension WordPress WPS Hide Login Plugin WordPress

Extension WordPress WPS Hide Login

Nous avons un tutoriel pour l’installation et l’utilisation de l’extension WPS Hide Login juste ici. Veuillez suivre ces étapes pour modifier votre URL de connexion. Il s’agit essentiellement d’un processus presque entièrement automatisé dans lequel vous saisissez un nouveau sous-répertoire pour l’URL de connexion et l’URL de redirection (si vous souhaitez modifier ces réglages).

Ensuite, l’extension fait le reste du travail pour vous, en créant quelque chose comme dans la capture d’écran suivante.

URL secrete

URL secrète

Comment créer un formulaire d’inscription WordPress avec une extension avancée

Les tactiques précédentes pour activer et personnaliser le formulaire d’inscription fonctionnent en modifiant le formulaire de connexion déjà mis en place depuis WordPress. Ce formulaire WordPress a les bases, mais il n’est pas pour tout le monde.

Que faire si votre site web nécessite des champs supplémentaires pour la collecte de numéros de téléphone ou d’adresses physiques ? Ne serait-il pas agréable de générer vos propres champs personnalisés de sorte que les limites des formulaires d’inscription soient pratiquement inexistantes ?

Bien qu’un formulaire d’inscription codé sur mesure soit le moyen le plus efficace d’obtenir le design le plus unique pour un formulaire, une extension WordPress est la deuxième meilleure chose à faire.

De plus, vous n’avez pas à dépenser tout ce temps et cet argent pour développer un formulaire qui pourrait éventuellement être créé avec une extension.

Meilleures extensions WordPress de formulaire d’inscription

Consultez notre article sur les meilleures extensions WordPress d’inscription d’utilisateurs. Il couvre une large collection d’extensions qui conviennent à la conception et au formatage de modules d’enregistrement sans aucune connaissance en matière de code.

Certaines d’entre elles fournissent des outils uniques pour utiliser de grandes collections de champs personnalisés, tandis que d’autres activent immédiatement les répertoires des membres pour organiser votre base d’adhérents.

Nous vous recommandons vivement de lire cet article afin de choisir la meilleure extension de formulaire d’inscription pour votre situation, mais vous trouverez ci-dessous une liste de nos préférées :

Ces extensions se concentrent sur la création de formulaires de connexion pour les membres et de zones d’inscription pour permettre à vos utilisateurs de passer en douceur à l’inscription sur votre site web.

Comme alternative, vous pouvez utiliser une extension générale de formulaire pour ne pas vous retrouver avec une extension limitée à une certaine industrie ou fonction.

Par exemple, il est possible de créer un formulaire d’inscription WordPress personnalisé avec les extensions Contact Form 7 et Gravity Forms.

Créer un formulaire d’inscription WordPress avec Contact Form 7

Contact Form 7 offre les outils de formulaire de contact les plus basiques sur WordPress. Il est extrêmement populaire, fiable et assez simple pour être utilisé sur n’importe quel site web. De plus, cette conception basique permet à tout développeur de personnaliser son site avec son propre code.

Extension Contact Form 7

Extension Contact Form 7

Un formulaire standard pourrait très bien servir de solution d’inscription, mais ces formulaires vont dans une base de données différente et n’enregistrent pas réellement les nouveaux utilisateurs dans votre base de données d’utilisateurs WordPress. Au lieu de cela, vous recevez des e-mails avec le formulaire de contact et toutes les données d’utilisateur que vous avez demandées dans le formulaire. Vous pouvez enregistrer ces informations dans un tableur, mais ce n’est pas toujours idéal.

Pour certains, cela peut très bien fonctionner. Vous pouvez importer votre liste à partir de Contact Form 7 dans n’importe quelle extension ou logiciel de gestion des contacts. Vous avez également la possibilité d’importer cette liste dans la section utilisateur de WordPress.

Cependant, nous aimerions simplifier un peu les choses en liant Contact Form 7 à une extension qui convertit vos formulaires Contact Form 7 en formulaires d’enregistrement d’utilisateur pour WordPress.

Il existe deux méthodes pour transformer vos créations Contact Form 7 en formulaires d’inscription d’utilisateur :

Comme pour de nombreuses tâches dans WordPress, nous aimons souvent nous en tenir aux extensions si le code personnalisé devient trop compliqué.

Par conséquent, la première étape consiste à installer l’extension Contact Form 7 et une extension appelée Frontend Registration – Contact Form 7.

Frontend Registration

Frontend Registration

Une fois que les deux sont activées, allez dans le menu de votre tableau de bord WordPress et rendez-vous sur Contact > Formulaires de contact.

Bouton des formulaires de contact

Bouton des formulaires de contact

Soit vous cliquez sur le bouton Ajouter pour créer un nouveau formulaire, soit vous sélectionnez le formulaire par défaut déjà créé par l’extension.

Création de votre premier formulaire

Création de votre premier formulaire

Dans Contact Form 7, tous les formulaires sont créés à l’aide d’un modèle simple utilisant des balises de code. Pour chaque champ, le libellé de la balise est le texte affiché au-dessus de chaque champ du formulaire.

La balise de formulaire – le bout de texte entre les crochets [ ] – génère le champ de formulaire réel dans lequel l’utilisateur saisit l’information.

Le formulaire pré-établi de Contact Form 7 comprend un champ pour le nom, l’adresse e-mail, le sujet et le message. Cela est logique pour un formulaire de contact ordinaire, mais il n’y a aucune raison d’avoir un champ Sujet et Message sur un formulaire d’inscription.

Retirez-les.

Supprimer les libellés nécessaires

Supprimer les libellés nécessaires

Les boutons situés au-dessus du créateur de votre formulaire servent à incorporer des balises de champs supplémentaires.

Par exemple, vous pouvez également recueillir les numéros de téléphone de vos nouveaux utilisateurs. Pour ce faire, sélectionnez la balise « tel » et placez-la dans votre formulaire. D’autres balises comprennent l’option URL pour les sites web et des cases à cocher ou des boutons radio pour poser des questions spécifiques.

La balise « tel »

La balise « tel »

L’extension ajoute le champ, mais vous devez y placer les libellés de balises manuellement. Vous pouvez simplement les copier à partir d’un des autres champs et changer le libellé en quelque chose comme « Votre numéro de téléphone ».

Veillez à bien fermer le libellé avec </label>.

Fermeture de la balise

Fermeture de la balise

Enregistrez le formulaire.

Vous remarquerez qu’un code court est attribué à chacun des formulaires que vous créez dans Contact Form 7. Ceci est pour placer le formulaire où vous le souhaitez sur votre site, des colonnes latérales aux pages normales.

Code court de Contact Form 7

Code court de Contact Form 7

N’hésitez pas à copier ce code court si vous prévoyez d’utiliser un code court pour afficher votre formulaire.

Il existe également une autre option pour utiliser un bloc par l’intermédiaire de l’éditeur Gutenberg.

Il est maintenant temps d’ajouter votre formulaire à une page. Cliquez sur l’onglet Pages dans WordPress, puis ajoutez une nouvelle page ou allez sur une page que vous avez déjà créée.

Ajouter une nouvelle page

Ajouter une nouvelle page

Pour ce tutoriel, nous appelons cette page « Inscription d’utilisateur ». Elle sert de lieu principal où les visiteurs viennent pour s’inscrire et s’enregistrer sur le site de test.

Dans l’éditeur visuel, cliquez sur le bouton Ajouter un bloc.

Ajouter un bloc dans l'éditeur de bloc

Ajouter un bloc dans l’éditeur de bloc

Repérez le bloc de Contact Form 7 et sélectionnez-le.

Bloc Contact Form 7

Bloc Contact Form 7

Un menu déroulant s’affiche avec tous les formulaires de contact que vous avez générés dans l’extension Contact Form 7.

Nous n’en avons qu’un seul pour l’instant, alors choisissons-le.

Choisir le bon formulaire

Choisir le bon formulaire

Une alternative à l’utilisation des blocs de l’éditeur Gutenberg consiste à insérer le code court du formulaire dans la page. Vous pouvez le faire soit dans l’éditeur WordPress traditionnel, soit avec le bloc de code court de Gutenberg. Les deux permettent d’atteindre le même objectif.

Publiez cette page pour vous assurer qu’elle est disponible sur l’interface publique de votre site web.

Ajouter un code court pour votre formulaire d'inscription WordPress

Ajouter un code court pour votre formulaire d’inscription WordPress

Ensuite, il faut activer les fonctions d’inscription des utilisateurs pour Contact Form 7. C’est là que l’extension d’inscription sur l’interface publique entre en jeu.

Pour l’instant, le formulaire est toujours un formulaire de contact standard, où l’utilisateur clique sur le bouton Envoyer et un e-mail est envoyé au responsable du site.

Nous préférons que l’envoi inscrive un nouvel utilisateur dans la base de données WordPress.

Par conséquent, retournez à l’éditeur du formulaire de contact. Après l’installation de l’extension d’inscription sur l’interface publique, vous devriez maintenant voir un onglet appelé Réglages d’inscription. Cliquez sur cet onglet.

Onglet des réglages d’inscription

Onglet des réglages d’inscription

Basculez le commutateur pour les trois éléments dans les réglages d’inscription.

Le premier permet les inscriptions sur le formulaire, ce qui en fait le plus important des trois.

Le second réglage permet de ne pas envoyer d’e-mail pour ce formulaire. Par conséquent, vous ne recevez pas de message du formulaire de contact comme vous le feriez auparavant.

Le dernier n’est pas obligatoire, mais il est agréable pour faciliter la procédure d’inscription. L’utilisateur se connecte pour ne pas avoir à passer deux fois par les mêmes étapes.

Réglages d'inscription pour le formulaire d'inscription WordPress

Réglages d’inscription pour le formulaire d’inscription WordPress

En dessous, choisissez les noms de champs qui s’inscrivent dans les éléments utilisateurs de WordPress.

Par exemple, un utilisateur WordPress doit avoir un identifiant et une adresse e-mail pour que son compte fonctionne. Vous pouvez définir le champ « votre nom » du formulaire comme identifiant et le champ « votre adresse e-mail » comme e-mail.

La dernière étape consiste à choisir un rôle d’utilisateur par défaut, comme Abonné. Nous recommandons généralement le rôle d’utilisateur Abonné pour la plupart des sites web, étant donné que les autorisations plus hautes permettent un accès aux réglages du site.

Réglages des champs sur l’interface publique

Réglages des champs sur l’interface publique

Allez au début de cette page et testez-la, puis cliquez sur le bouton « Envoyer ».

Tester votre formulaire d'inscription

Tester votre formulaire d’inscription

Il semble que cela fonctionne. Le seul problème est que le message de réussite donne l’impression que l’utilisateur vient d’envoyer un formulaire de contact.

Message de réussite

Message de réussite

Nous devons changer cela. Pour ce faire, retournez à l’éditeur de formulaires dans le tableau de bord de WordPress.

Cliquez sur l’onglet Messages et trouvez le champ Le message de l’expéditeur a bien été envoyé. Il vous suffit de modifier ce message.

Modification des messages dans Contact Form 7

Modification des messages dans Contact Form 7

Il s’agit par exemple de dire merci d’avoir rejoint le site ou de s’y être inscrit.

Modifier le message de l'expéditeur

Modifier le message de l’expéditeur

Enfin, nous devrions vérifier si cet utilisateur était effectivement enregistré dans la base de données des utilisateurs de WordPress.

Si vous êtes connecté au site web en tant qu’utilisateur test, vous verrez un message d’erreur comme celui-ci lorsque vous essaierez de vérifier la liste des utilisateurs. Cela s’explique par le fait que les rôles d’utilisateur abonné ne peuvent pas vérifier ou gérer les utilisateurs sur votre site.

Avertissement pour le formulaire d'inscription WordPress

Avertissement pour le formulaire d’inscription WordPress

Lorsque vous vous reconnectez au compte administrateur, il est clair que les nouvelles informations sur l’utilisateur sont stockées dans la liste de la base de données des utilisateurs !

Le nouvel utilisateur enregistré

Le nouvel utilisateur enregistré

Création d’un formulaire d’inscription WordPress avec Gravity Forms

Gravity Forms est un constructeur de formulaires bien connu et réputé qui génère de nombreux types de formulaires uniques et qui renvoie à ses propres extensions pour des fonctionnalités avancées.

Gravity Forms est une solution premium, mais vous pouvez tester l’ensemble de l’interface et créer vos propres formulaires grâce à la démo gratuite. Gravity Forms est disponible à partir de 59 $, mais l’option d’inscription des utilisateurs n’est incluse que dans le plan Elite, qui est à 259 $.

Oui, c’est un peu cher, mais Gravity Forms est l’une des meilleures options à envisager lorsque vous essayez de personnaliser votre zone d’inscription d’utilisateur et d’incorporer d’autres éléments, comme les paiements avec la passerelle de votre choix.

Pour commencer, rendez-vous sur le site web de Gravity Forms.

Une fois sur place, choisissez de vous inscrire au plan Elite afin d’activer le module d’inscription d’utilisateur (User Registration). Téléchargez le fichier de l’extension Gravity Forms, téléversez-le dans votre tableau de bord WordPress et activez l’extension pour commencer le processus de création du formulaire.

Par défaut, Gravity Forms dispose d’options permettant de construire des formulaires de site web standard. Ils sont absolument magnifiques, mais il y a quelques réglages à ajuster si vous souhaitez obtenir un formulaire d’inscription d’utilisateurs où chaque soumission est placée dans votre base de données utilisateurs WordPress.

Une fois active, l’extension Gravity Forms révèle un onglet Formulaires dans le tableau de bord de WordPress.

Allez dans Formulaires > Modules.

Localisez le module d’inscription d’utilisateur et cliquez sur le bouton Activer.

Module d’inscription des utilisateurs

Module d’inscription des utilisateurs

Une fois qu’un module Gravity Forms est activé, il apparaît dans votre liste d’extensions, tout comme Gravity Forms.

Liste des extensions

Liste des extensions

Pour aller plus loin, cliquez sur Formulaires > Réglages.

Onglet des réglages de Gravity Forms

Onglet des réglages de Gravity Forms

Repérez l’onglet d’inscription des utilisateurs dans les réglages. Ici, vous voudrez activer l’option de page d’inscription personnalisée.

Cochez la case pour vous assurer que toutes les inscriptions effectuées par le biais de votre formulaire sont ajoutées en tant qu’utilisateurs WordPress.

Activer la page d'inscription personnalisée

Activer la page d’inscription personnalisée

Vous devrez également sélectionner une page qui vous servira de page d’inscription. La page d’inscription par défaut de WordPress redirige vers la page personnalisée si celle-ci est activée. Si vous en avez déjà une, n’hésitez pas à sélectionner la page dans le menu déroulant.

Si ce n’est pas le cas, nous allons passer en revue la page d’inscription ci-dessous.

Veillez à toujours cliquer sur le bouton Mettre à jour les réglages lorsque vous avez fini de modifier les réglages dans Gravity Forms.

Exemple d'inscription d'utilisateur

Exemple d’inscription d’utilisateur

Allez sur Formulaires > Formulaires ou Formulaires > Nouveau formulaire. La page des formulaires révèle une liste de tous les formulaires que vous avez créés dans le passé avec Gravity Forms. Elle peut être vide si vous n’avez encore rien fait.

Si vous n’avez pas encore fait de formulaire, choisissez le bouton Nouveau formulaire.

Création d'un nouveau formulaire d'inscription WordPress à l'aide de Gravity Forms

Création d’un nouveau formulaire d’inscription WordPress à l’aide de Gravity Forms

Faites un titre et une description du formulaire. Cliquez sur Créer le formulaire.

Ajouter un titre et une description à votre formulaire

Ajouter un titre et une description à votre formulaire

Gravity Forms fournit un éditeur visuel, en glisser-déposer, avec un module sur le côté droit pour inclure des éléments de champ.

Comme nous sommes actuellement en présence d’un formulaire d’inscription d’utilisateur vierge, nous commencerons par faire glisser le module Nom dans le formulaire. Pour cela, il suffit de cliquer sur le module et de le déplacer vers la gauche.

Constructeur de formulaires

Constructeur de formulaires

Une fois qu’un module est déposé dans votre formulaire, vous devriez le voir apparaître dans l’aperçu.

Par exemple, nous voyons maintenant les champs Nom, avec les champs Prénom et Nom affichés par défaut.

Champs

Champs

Pour un formulaire d’inscription d’utilisateur, il est logique d’inclure également les champs Identifiant, Mot de passe et E-mail.

Ajouter des champs avancés à un formulaire d'inscription personnalisé

Ajouter des champs avancés à un formulaire d’inscription personnalisé

Une fois placé dans le formulaire, le champ E-mail montre l’option permettant aux utilisateurs de saisir leur adresse e-mail.

Ajout du nom et de l'adresse e-mail

Ajout du nom et de l’adresse e-mail

Le champ Identifiant permet de créer un tout nouvel identifiant pour le site, tandis que le module Mot de passe demande à l’utilisateur de saisir deux fois son nouveau mot de passe.

Ajouter des champs pour l’identifiant et le mot de passe

Ajouter des champs pour l’identifiant et le mot de passe

Il est possible que votre formulaire d’inscription nécessite d’autres éléments, comme par exemple un champ pour les numéros de téléphone ou les URL de sites web.

Pour ce tutoriel, nous avons ajouté un module de section pour incorporer un saut de section et indiquer que tout ce qui se trouve sous cette ligne est facultatif.

Insérer un saut de section

Insérer un saut de section

Nous avons ensuite ajouté les modules Site et Téléphone sous cette section optionnelle.

Comme mentionné précédemment, ces types de champs sont facultatifs pour vos propres formulaires d’enregistrement d’utilisateur. Il existe de nombreux autres champs à insérer si vous le souhaitez.

Ajouter des champs facultatifs

Ajouter des champs facultatifs

Lorsque vous placez les modules en glisser-déposer de Gravity Forms dans le formulaire, vous pouvez cliquer sur le bouton de la liste déroulante de chaque module pour développer les réglages et modifier les options du champ.

Modifier le réglage de chaque champ

Modifier le réglage de chaque champ

Par exemple, les réglages du champ Site web demandent le libellé du champ et si vous souhaitez que ce champ soit obligatoire ou non.

Comme nous avons déjà indiqué que le champ Site web était facultatif dans le titre de la section, nous ne le cocherons pas afin que les utilisateurs n’aient pas à saisir un site web pour s’inscrire sur le site.

En général, la grande majorité des champs ne devrait pas être nécessaire pour un formulaire d’inscription.

Réglages des champs obligatoires ou non

Réglages des champs nécessaires ou non

Les champs pour l’identifiant, l’e-mail et le mot de passe sont nécessaires pour générer un utilisateur WordPress et le connecter à la base de données. Il est donc préférable de les marquer comme obligatoires.

N’hésitez pas à ajuster les réglages de chacun des modules de champ que vous ajoutez au formulaire d’inscription. Il est généralement préférable de renommer le nom du champ et de décider si vous souhaitez rendre le champ obligatoire.

Vous avez également la possibilité d’ajuster l’apparence du champ et d’effectuer des modifications avancées dans les autres onglets de réglages.

Rendre le champ obligatoire

Rendre le champ obligatoire

Une fois que vous avez conçu le formulaire d’inscription comme vous le souhaitez, passez à l’onglet Réglages.

Il s’agit des réglages généraux du formulaire dans son ensemble, et pas seulement des champs individuels.

Modifier les réglages de votre formulaire d'inscription personnalisé

Modifier les réglages de votre formulaire d’inscription personnalisé

Sous Réglages, allez à l’onglet Inscription de l’utilisateur.

Cliquez sur le bouton Ajouter.

Pour cette étape, vous créez un flux d’inscription d’utilisateur qui crée automatiquement un utilisateur pour chaque soumission et transfère les soumissions dans les champs par défaut de la base de données utilisateurs de WordPress.

Ajout d'un nouveau flux d'inscription d'utilisateur

Ajout d’un nouveau flux d’inscription d’utilisateur

Nommez le flux d’inscription d’utilisateur pour votre propre référence interne.

Vous avez deux possibilités pour créer un flux, soit pour créer un utilisateur, soit pour mettre à jour un utilisateur.

L’option de mise à jour du flux d’utilisateurs est plus utile si vous proposez une page permettant aux utilisateurs de mettre à jour les informations de leur profil actuel. Vous pouvez absolument l’inclure dans votre page d’enregistrement ou de connexion, mais pour l’instant, nous sommes plus intéressés par la création d’un nouvel utilisateur.

Cliquez sur l’option Créer un utilisateur.

Créer l'utilisateur

Créer l’utilisateur

Le flux d’inscription des utilisateurs génère automatiquement la plupart des réglages utilisateur permettant de prendre un envoi de champ du formulaire et de le transférer dans les champs pour un nouvel utilisateur dans la base de données utilisateurs WordPress.

Toutefois, vous devrez peut-être en modifier quelques-uns.

Par exemple, nous voulons nous assurer que le texte saisi dans le champ Identifiant du formulaire est utilisé comme identifiant réel du nouvel utilisateur.

Vous pouvez également en faire le champ E-mail si vous préférez que vos utilisateurs se connectent simplement avec leur adresse e-mail.

Les champs Prénom et Nom et les réglages de l’utilisateur semblent bien adaptés. Il en va de même pour les réglages de l’adresse e-mail et du mot de passe. Choisissez une référence de pseudonyme et de nom d’affichage si vous le souhaitez.

Personnalisation des réglages de l'utilisateur

Personnalisation des réglages de l’utilisateur

L’une des parties les plus importantes de cette étape est la sélection d’un rôle d’utilisateur par défaut lors de la création du profil d’utilisateur.

Vous ne voulez probablement pas que chaque utilisateur soit transformé en administrateur ou en auteur (ce qui donnerait à des personnes choisies au hasard un contrôle trop important sur votre site), donc votre meilleure option est de choisir le rôle d’abonné.

Choix des rôles des utilisateurs

Choix des rôles des utilisateurs

Faites défiler vers le bas pour compléter le reste des réglages du flux utilisateur. Si vous avez des champs optionnels ou supplémentaires, pensez à ce que les profils d’utilisateurs par défaut de WordPress aient également des champs pour cela.

La base de données des utilisateurs de WordPress comporte des champs optionnels pour les sites web. Par conséquent, nous allons relier le champ Site web de notre formulaire à celui de la base de données des utilisateurs WordPress.

La section Options supplémentaires vous demande si vous souhaitez envoyer des e-mails de notification lors de l’inscription. C’est la meilleure pratique pour informer vos utilisateurs qu’ils ont bien créé un compte.

La case à cocher Activation de l’utilisateur ne génère un utilisateur que lorsque cette personne clique sur un lien de vérification envoyé à son adresse e-mail. Ce réglage ne fait généralement que ralentir le processus d’inscription, mais il pourrait contribuer à réduire le spam.

La condition d’inscription est un autre réglage que vous devez décider d’utiliser ou non. Cette fonction n’autorise une inscription que s elle répond à une condition personnalisée, telle que des adresses e-mails comportant le symbole @. Là encore, nous apprécions cette fonction qui permet de réduire le nombre de spams et d’arrêter les formulaires mal remplis, mais elle n’est pas entièrement nécessaire au bon fonctionnement de votre formulaire d’inscription.

Une fois les réglages de votre formulaire remplis, cliquez sur le bouton Mettre à jour les réglages.

Options supplémentaires dans Gravity Forms

Options supplémentaires dans Gravity Forms

Cela couvre la majeure partie du processus de création de formulaires pour faire un formulaire WordPress d’inscription personnalisé avec Gravity Forms. Vous voudrez maintenant présenter le formulaire sur une page pour remplacer la page de connexion par défaut de WordPress.

Il existe deux méthodes pour ajouter le formulaire d’inscription d’utilisateur sur une page.

L’une consiste à utiliser un code court, tandis que l’autre tire parti du système de blocs de Gutenberg.

Si vous prévoyez d’utiliser un code court, jetez un coup d’œil au formulaire d’inscription d’utilisateur que vous venez de créer. Un numéro d’ID est attribué à chaque formulaire dans Gravity Forms.

Notez ou mémorisez cet ID.

Le numéro d'ID de votre formulaire

Le numéro d’ID de votre formulaire

Allez sur Pages > Ajouter dans votre tableau de bord WordPress. Ou, si vous avez déjà créé une page conçue pour le formulaire, rendez-vous sur cette page.

Pour ce tutoriel, nous l’appellerons la page d’inscription d’utilisateur.

Pour utiliser l’option de code court, collez le code court suivant n’importe où sur cette page :

[gravityform id="#" title="true" description="true]

Remplacez le signe # par le numéro d’ID figurant sur votre formulaire d’inscription.

Après avoir ajouté le code court et enregistré la page, vous pouvez aller sur votre page publiée pour voir le formulaire en action.

Une autre option à envisager est le système de blocs WordPress Gutenberg. Si vous utilisez Gutenberg, cliquez sur le bouton Ajouter un bloc dans votre éditeur de page.

Ajout d'un bloc pour l'éditeur Gutenberg

Ajout d’un bloc pour l’éditeur Gutenberg

Vous pouvez soit rechercher le bloc Gravity Forms, soit faire défiler la liste pour le trouver.

Sélectionnez le bloc Gravity Forms. Il est intitulé « Formulaire » avec le logo de Gravity Forms comme icône.

Bloc Gravity Forms

Bloc Gravity Forms

Une fois que le bloc est activé, cliquez sur le menu déroulant pour choisir un formulaire.

Choisir votre formulaire personnalisé

Choisir votre formulaire personnalisé

Vous pouvez avoir une longue liste de formulaires ou vous pouvez n’en avoir qu’un ou deux. Trouvez celui que vous avez précédemment fait pour le formulaire d’inscription d’utilisateur.

Dans ce cas, nous l’avons appelé User Registration 1.

Choisissez le bon formulaire à utiliser

Choisissez le bon formulaire à utiliser

La sélection d’un formulaire dans le menu déroulant donne immédiatement une vue visuelle du formulaire dans votre éditeur de page.

Comme vous pouvez le voir, le formulaire d’inscription d’utilisateur que nous avons construit auparavant est affiché dans l’administration de la page WordPress. Si vous voyez quelque chose qui ne va pas avec le formulaire, retournez à la section Formulaires pour modifier les champs qui s’y trouvent.

Vue sur l’interface publique de votre formulaire d'inscription personnalisé

Vue sur l’interface publique de votre formulaire d’inscription personnalisé

Enfin, allez sur l’interface publique de votre site web pour consulter cette page spécifique. Le formulaire d’inscription est affiché avec tous les champs appropriés. De plus, nous avons déjà défini ce formulaire comme la redirection depuis la page de connexion par défaut de WordPress – et chaque soumission de formulaire devient un nouvel utilisateur de WordPress.

À ce stade, vérifiez l’exactitude du formulaire et l’orthographe de vos libellés. En outre, remplissez le formulaire en tant qu’utilisateur test pour voir s’il fonctionne et comment se déroule le processus.

Après avoir envoyé le formulaire, allez dans la section Utilisateurs de votre tableau de bord WordPress pour vérifier si cet utilisateur a été correctement ajouté à la base de données des utilisateurs.

Vous pouvez également effectuer le test pour d’autres raisons, par exemple pour voir si vos messages de confirmation facultatifs sont envoyés ou si le formulaire empêche quelqu’un de s’inscrire s’il ne remplit pas l’une de vos conditions.

Comme dernier rappel, assurez-vous d’aller dans Formulaires > Réglages pour vous assurer que vous avez la bonne page configurée pour fonctionner comme votre zone d’inscription personnalisée.

En bref, il vous suffit d’activer le formulaire d’inscription personnalisé en cochant la case et en sélectionnant la bonne page d’inscription dans la liste déroulante. Pour cet exemple, la page d’inscription d’utilisateur est la bonne.

Sélection de la page d'inscription

Sélection de la page d’inscription

Cliquez sur le bouton Mettre à jour les réglages pour terminer le processus.

Comment installer un formulaire d’inscription WordPress avec une extension de paiement

Gravity Forms dispose d’une multitude de modules potentiels pour créer des formulaires incroyablement uniques. L’une des raisons pour lesquelles vous pouvez envisager d’utiliser Gravity Forms est à cause des modules de paiements.

Dans l’ensemble, un module de paiement transforme votre formulaire en un processeur de paiement, ne permettant aux personnes de créer des comptes utilisateur que si elles paient un abonnement ou des frais uniques.

Cela s’avère pratique pour les sites de membres et ceux ayant un contenu exclusif, où vous ne révélerez pas le contenu, la communauté ou l’ensemble du site web à moins que l’utilisateur n’effectue le paiement à partir du formulaire.

Si votre inscription nécessite un module de paiement, Gravity Forms propose plusieurs modules de traitement des paiements. Il vous suffit de choisir celui qui est le plus pratique et le plus abordable pour votre marque.

Il convient également de mentionner que les modules pour PayPal, Stripe et Square sont fournis avec le plan Pro à 159 $ de Gravity Forms. Des passerelles de paiement plus avancées comme 2Checkout et Authorize.net sont fournies que dans le plan Elite Gravity Forms à 259 $. Le module d’inscription des utilisateurs (dont il a été question plus haut dans l’article) nécessite le thème Elite, donc techniquement, vous devriez déjà avoir accès à tous les modules si vous avez décidé d’utiliser Gravity Forms pour votre module d’inscription des utilisateurs.

Pour commencer, allez dans votre tableau de bord WordPress et cliquez sur Formulaires > Modules.

Cela révèle une longue liste d’ajouts parmi lesquels on peut choisir, dont certains comprennent Square, PayPal et Stripe.

Modules de paiement dans les formulaires Gravity

Modules de paiement dans les formulaires Gravity

Bien que vous puissiez sélectionner n’importe laquelle des passerelles de paiement, nous nous en tenons au module de paiement PayPal pour ce tutoriel.

Allez sur le module et cliquez sur le bouton Activer.

Le module PayPal

Le module PayPal

Une fois qu’un module est activé, il apparaît dans votre section Extensions de WordPress.

Tous les modules Gravity Forms ne sont en fait que des extensions WordPress supplémentaires qui interagissent avec l’extension Gravity Forms. Par conséquent, consultez la section des extensions pour vous assurer que PayPal – ou le module de paiement de votre choix – est activé.

Vérifier si les modules sont correctement installés

Vérifier si les modules sont correctement installés

Pour configurer votre module de paiement, allez dans Formulaires > Réglages.

Réglages du formulaire

Réglages du formulaire

Choisissez l’onglet PayPal (ou votre autre module de paiement). Chaque module de paiement a son propre processus de vérification et de connexion. Vous pouvez généralement suivre les étapes uniques fournies sur le tableau de bord.

Pour PayPal, il vous demande de confirmer que vous avez configuré les réglages IPN de PayPal. Cochez cette case et cliquez sur Mettre à jour les réglages.

Vous devez également copier l’URL de notification fournie sur cette page.

IPN PayPal pour le formulaire d'inscription WordPress

IPN PayPal pour le formulaire d’inscription WordPress

Gravity Forms vous envoie à la page de configuration de PayPal. Là encore, l’apparence sera différente si vous utilisez un module pour Stripe ou Square ou toute autre passerelle de paiement.

Pour PayPal, cliquez sur le bouton Choisir les réglages IPN.

Réglages de notification instantanée de paiement

Réglages de notification instantanée de paiement

Voici l’endroit où vous collez l’URL de la notification précédente.

Cela active essentiellement les bonnes étapes et les notifications qui doivent avoir lieu après que quelqu’un ait essayé de s’inscrire sur votre formulaire et de payer par PayPal.

Cliquez sur le bouton Enregistrer.

Ajouter votre URL de notification

Ajouter votre URL de notification

Tout comme le formulaire d’inscription configuré précédemment, un flux doit être créé pour le module de paiement.

Pour cela, allez sur Formulaires > Formulaires dans le menu WordPress.

Retrouvez le formulaire d’inscription précédent. Vous devez non seulement connecter le module de paiement à ce formulaire particulier, mais aussi générer un flux pour que le module de paiement fonctionne correctement et associer chaque paiement à un utilisateur spécifique.

Une fois que vous êtes de retour à l’éditeur de votre formulaire d’inscription, cliquez sur le bouton Réglages.

L'onglet des réglages de votre formulaire personnalisé

L’onglet des réglages de votre formulaire personnalisé

Repérez l’onglet du module de paiement, en l’occurrence l’onglet PayPal.

Flux PayPal

Flux PayPal

Cliquez sur le bouton Ajouter pour générer un nouveau flux PayPal pour ce formulaire.

Ajouter un nouveau flux PayPal

Ajouter un nouveau flux PayPal

Les réglages des flux pour PayPal, et la plupart des intégrations de passerelle de paiement, sont rapides et simples. Commencez par nommer le flux et ajoutez votre adresse e-mail PayPal. Choisissez le mode de test ou de production.

Le mode de test est destiné à faire fonctionner le processeur de paiement pendant les phases de test du développement de votre site. Si vous souhaitez commencer à collecter des paiements réels, optez pour le mode production.

Enfin, vous devez sélectionner un type de transaction.

En général, le type de transaction d’abonnement est souvent le plus logique pour un magazine ou une communauté en ligne, mais vous pouvez également choisir un type de produit ou quelque chose de différent.

Modifier les réglages de votre flux

Modifier les réglages de votre flux

Enregistrez votre flux PayPal et retournez au constructeur de formulaires.

Il est essentiel d’insérer un champ sur le formulaire d’inscription qui indique au système et à l’utilisateur que le paiement doit être effectué.

Nous vous recommandons le module Produits, mais vous disposez d’autres options pour fixer les prix ou calculer les totaux.

Faites glisser le champ Produit dans votre constructeur de formulaires.

Champ de produit

Champ de produit

Pour ce tutoriel, nous fixons un prix d’abonnement. Nous vous montrerons également comment configurer plusieurs plans et un paiement unique pour cet abonnement.

Modifiez le libellé du champ afin de refléter le sujet de ce champ.

Fixez également le prix de votre abonnement dans le champ Prix.

Nous recommandons généralement d’opter pour le type de champ de produit unique et de s’en tenir à un prix fixe. Toutefois, de nombreuses autres organisations peuvent avoir d’autres plans.

Libellés de champ

Libellés de champ

Nous vous recommandons également de cocher la case Nécessaire sous l’en-tête Règles. De cette façon, quelqu’un ne peut pas venir sur votre site et créer un profil utilisateur sans payer pour le contenu.

Rendre un champ nécessaire

Rendre un champ nécessaire

Un autre domaine à considérer est le module Option.

Cela permet de fixer des niveaux d’abonnement où vous pouvez avoir trois ou quatre plans en fonction du nombre de fonctionnalités ou de contenus fournis.

Ajouter des niveaux d'abonnement à votre formulaire

Ajouter des niveaux d’abonnement à votre formulaire

Pour ceux qui utilisent le champ Option, réglez-le sur Prix d’abonnement pour relier le prix d’abonnement des champs de produits.

Choisissez le type de champ que vous voulez et définissez les choix avec leurs libellés et leurs prix.

Par exemple, vous pouvez avoir trois niveaux d’abonnement, dont les prix augmentent à mesure que les niveaux augmentent.

N’oubliez pas de cocher la case Nécessaire sous Règles, car il s’agit également d’un champ de paiement où vous ne voulez pas que les personnes se créent des comptes sans payer.

Rendre les niveaux d'abonnement obligatoires

Rendre les niveaux d’abonnement obligatoires

Le type de module de paiement que vous choisissez affecte également les réglages de flux que nous avons configurés auparavant.

Si vous souhaitez activer une procédure d’inscription par abonnement, les réglages de votre flux PayPal doivent également comporter le type de transaction d’abonnement. Vous pouvez également définir le type de transaction comme un produit ou un service unique ou même un don.

Choisir le type de transaction

Choisir le type de transaction

Dans les réglages du flux PayPal, vous devez également indiquer à Gravity Forms d’où provient le montant du paiement. Par exemple, vous pouvez avoir un champ Prix total dans le formulaire et un champ Prix d’abonnement. Lequel doit utiliser PayPal pour traiter la transaction ?

Utilisez le menu déroulant Montant du paiement pour sélectionner le champ correct du formulaire qui dicte le montant total du paiement. Certaines personnes préfèrent utiliser simplement le montant total du formulaire, mais vous pouvez également utiliser le prix de l’abonnement ou tout autre champ que vous venez d’introduire dans le formulaire.

Définir le champ du montant du paiement

Définir le champ du montant du paiement

Pendant que vous êtes toujours dans les réglages du flux PayPal, jetez un coup d’œil à la zone Autres réglages.

Comme pour la configuration du flux d’inscription des utilisateurs, vous devez relier les champs du formulaire aux champs corrects pour PayPal. De cette façon, PayPal sait où placer le prénom, l’adresse e-mail et d’autres informations de l’utilisateur lorsqu’elles sont transférées sur l’interface PayPal.

Dans la zone Autres réglages, passez en revue chaque élément de la liste des informations de facturation. Certains d’entre eux doivent être définis par défaut, mais assurez-vous de les vérifier.

Par exemple, les champs Prénom et Nom de votre formulaire doivent correspondre aux champs Prénom et Nom de PayPal. Cela peut vous obliger à insérer quelques champs supplémentaires dans votre formulaire d’inscription WordPress. Par exemple, nous n’avons pas inclus de champ Adresse dans notre formulaire d’inscription, mais cela accélérerait le processus en demandant toutes les informations de facturation à l’avance sur le formulaire.

Elles ne sont pas entièrement nécessaires, mais comme nous l’avons déjà mentionné, elles pourraient accélérer les processus d’inscription et de paiement. Tous les modules de paiement sont différents, et la connexion PayPal se contentera d’extraire les informations de facturation du compte PayPal de l’utilisateur ou de lui demander ces détails lorsqu’il se rendra sur le site de PayPal.

Parmi les autres réglages à prendre en considération, citons l’URL de l’image et l’URL d’annulation. N’hésitez pas à insérer une URL d’image pour votre logo ou toute image représentant le produit vendu. L’URL d’annulation sert à rediriger les utilisateurs vers une page spécifique s’il leur arrive d’annuler le paiement avant d’avoir terminé le processus.

La zone Options vous demande si vous souhaitez ou non inviter les utilisateurs à inclure une adresse d’expédition ou une note lors du processus de paiement. Pour de nombreux services ou communautés en ligne, il n’est pas nécessaire de demander une adresse d’expédition. C’est pourquoi vous pouvez cocher cette case pour éviter que le client ne se trompe.

Quant au réglage des notes, il est entièrement facultatif et généralement pas nécessaire, sauf si vous offrez une sorte de service ou de produit personnalisé pour lequel vous souhaitez obtenir un retour d’information ou des détails de la part de l’utilisateur au moment du paiement.

La case à cocher Logique conditionnelle vous invite à ajouter des règles logiques pour l’acceptation des paiements des clients. Par exemple, vous pouvez exclure les utilisateurs de la procédure de paiement s’ils n’optent pas pour un certain plan de paiement ou si leur adresse e-mail n’a pas l’air réelle.

Dans l’ensemble, la logique conditionnelle peut aider à prévenir le spam et à offrir des avantages aux utilisateurs qui se trouvent dans un certain type d’utilisateur ou niveau de paiement.

 

L'onglet Autres réglages

L’onglet Autres réglages

Le dernier réglage à configurer implique de retarder l’inscription de l’utilisateur. Comme pour beaucoup des réglages ci-dessus, cette option est facultative. Cependant, il n’est pas mauvais d’envisager de ne traiter le flux qu’après réception du paiement. Ainsi, un utilisateur n’est pas créé dans votre base de données WordPress tant que vous n’êtes pas certain que le paiement a été effectué.

Si vous laissez cette case vide, vous constaterez peut-être que plusieurs utilisateurs encombrent votre base de données alors qu’ils n’ont pas payé pour un accès.

Cliquez sur le bouton Mettre à jour les réglages une fois que vous avez choisi tous les réglages appropriés pour votre organisation.

Retarder l'inscription des utilisateurs

Retarder l’inscription des utilisateurs

Pour tester la configuration de paiement sur votre formulaire, allez dans l’onglet Pages de WordPress.

Cliquez pour revenir au formulaire que vous avez créé auparavant. Dans notre cas, il s’agit du formulaire d’inscription d’utilisateur.

Tester la page d'inscription des utilisateurs

Tester la page d’inscription des utilisateurs

Étant donné que vous avez déjà généré un formulaire d’inscription d’utilisateur sur cette page, et que vous avez lié le flux PayPal ou la passerelle de paiement au formulaire, les champs de paiement devraient apparaître dans le constructeur visuel.

Nous avons à la fois un prix d’abonnement unique et un champ avec différents niveaux d’abonnement pour montrer les différentes options que vous pouvez inclure dans un formulaire comme celui-ci. Dans une situation réelle, vous choisiriez très probablement l’une ou l’autre de ces options.

Tester le champ de tarification

Tester le champ de tarification

Il est essentiel de tester un formulaire avec une option de paiement. La dernière chose que vous souhaitez, c’est qu’une vague de clients se retrouve bloquée à cause d’un réglage de paiement mal configuré.

Remplissez le formulaire avec des informations sur l’utilisateur test, comme un mot de passe, et choisissez éventuellement un niveau d’abonnement ou achetez un abonnement individuel à paiement unique.

Cliquez sur le bouton Envoyer pour voir le formulaire d’inscription WordPress et le traitement des paiements en action.

Après l’envoi, la page redirige vers PayPal, en affichant le prix total et en invitant l’utilisateur soit à se connecter à son compte PayPal, soit à payer par carte bancaire.

N’oubliez pas qu’un module de paiement alternatif comme Stripe or Square ou Authorize.net est différent de PayPal en ce qui concerne le traitement du paiement. Chacun d’eux amènera l’utilisateur à une nouvelle page pour effectuer le paiement, mais ils auront tous des étapes légèrement différentes.

Formulaire de paiement PayPal

Formulaire de paiement PayPal

Comment ajouter des utilisateurs à une liste de marketing par e-mail au moyen d’un formulaire d’inscription WordPress

Lorsqu’un nouvel utilisateur se présente sur votre site web, il est logique d’essayer de l’inscrire en tant qu’utilisateur enregistré. En plus d’offrir à l’utilisateur un accès aux fonctionnalités ou au contenu, le formulaire d’inscription permet de placer instantanément les données de l’utilisateur dans votre liste de marketing par e-mail.

L’avantage de cette démarche tourne autour de l’automatisation. Oui, un formulaire d’inscription WordPress enregistre l’adresse e-mail et le nom de la personne dans WordPress, mais le processus d’introduction de ces données dans un logiciel de marketing par e-mail respectable nécessite une exportation manuelle de WordPress et une importation dans l’outil de marketing par e-mail.

Il n’y a rien de mal à cela en théorie. Les importations et les exportations font le travail. Pourtant, il vous faut beaucoup de temps pour accomplir cette tâche régulièrement. De plus, votre liste de marketing par e-mail n’est pas mise à jour en temps réel. Un utilisateur peut fournir son e-mail et se retrouver dans votre base de données pendant des jours, des semaines ou indéfiniment.

C’est pourquoi il est essentiel de lier un outil de marketing par e-mail à votre formulaire d’inscription.

Vous disposez d’un certain nombre de logiciels de création de newsletters qui vous permettent d’envoyer des messages par lots et de classer vos listes d’adresses e-mail dans différents groupes. Les plus populaires offrent des intégrations avec de nombreuses extensions d’inscription d’utilisateurs, vous permettant de combiner les deux plates-formes dans le système de collecte de e-mails.

Vous avez peut-être entendu parler de sociétés comme Mailchimp, Constant Contact et Mailgun. Toutes ces entreprises offrent des fonctions similaires de conception et de segmentation des e-mails, et vous pouvez généralement trouver une intégration simple qui permet d’atteindre ce dont nous parlons.

Heureusement, une autre catégorie de modules au sein de Gravity Forms offre des liens directs vers des plateformes de marketing par e-mail. Comme la plupart des modules de Gravity Forms, les solutions de marketing par e-mail nécessitent un plan premium.

La liste des modules de marketing par e-mail de Gravity Forms est longue.

Modules de listes de diffusion pour Gravity Forms

Modules de listes de diffusion pour Gravity Forms

Chacun d’entre eux fonctionne de manière similaire, mais tous ont leurs propres interfaces distinctes pour l’envoi d’e-mails et l’intégration avec Gravity Forms.

Par souci de simplicité, nous utiliserons le module Mailchimp comme exemple, étant donné qu’il s’agit d’une application de marketing par e-mail plutôt populaire et abordable.

Prêts ?

Ensuite, rendez-vous sur la section Modules de l’extension WordPress Gravity Forms.

Faites défiler la liste des modules vers le bas pour trouver l’option Mailchimp. Si elle n’est pas déjà activée, cliquez sur le bouton Activer.

Module Mailchimp

Module Mailchimp

Nous supposons qu’un formulaire d’inscription a déjà été créé (voir ci-dessus les étapes à suivre pour y parvenir).

Allez dans Formulaires > Formulaires dans le menu WordPress.

Retrouvez le formulaire d’inscription d’utilisateur que vous avez créé précédemment dans votre liste de formulaires publiés.

Cliquez sur le formulaire pour modifier les champs.

user reg form - WordPress Registration Form

Allez dans Réglages > Mailchimp. Si vous utilisez une intégration de service d’e-mail alternative, trouvez l’onglet correspondant.

Réglages Mailchimp

Réglages Mailchimp

L’objectif est de créer un flux Mailchimp qui indique Gravity Forms d’envoyer des soumissions à Mailchimp en plus de la base de données des utilisateurs WordPress. Mais d’abord, vous devez configurer les réglages de Mailchimp.

Cliquez sur le lien Réglages Mailchimp.

Configurer les réglages de de Mailchimp

Configurer les réglages de Mailchimp

La page suivante vous demande de coller la clé API Mailchimp. Pour trouver votre clé API, passez à l’étape suivante.

Le champ clé d'API de Mailchimp

Le champ clé API de Mailchimp

Allez sur le site Mailchimp et créez un compte ou connectez-vous à votre profil déjà créé.

Le tableau de bord Mailchimp organise les campagnes, les listes et les autres éléments du menu. Vous devez créer une liste de diffusion (également appelée Audience dans MailChimp) avant de mettre en place cette intégration avec la clé API. La raison en est que vous devrez éventuellement sélectionner une liste de diffusion pour envoyer les informations d’inscription des utilisateurs.

Une fois la liste créée, vous trouverez l’icône Profil en bas du tableau de bord de Mailchimp.

Cliquez sur ce lien pour faire apparaître un menu.

Sélectionnez l’onglet Compte pour continuer.

Une fois dans le panneau Compte, cliquez sur l’onglet Extras. Vous devriez voir quelques éléments parmi lesquels vous pouvez choisir. Cliquez sur l’option Clés d’API.

Onglet de clé d’API

Onglet de clé API

Une clé API est un code qui offre la possibilité de relier plusieurs systèmes entre eux. Dans Mailchimp, il suffit de cliquer sur le bouton Créer une clé pour fabriquer une clé.

Vous pouvez fabriquer autant de clés que vous le souhaitez, mais il est bon de les limiter au minimum. La clé API est indiquée dans une liste avec un libellé et la date de sa création.

Copiez la clé API dans votre presse-papiers. Vous pouvez sortir du tableau de bord de Mailchimp.

 

Obtenir votre clé d’API

Obtenir votre clé API

Ouvrez à nouveau les réglages de Mailchimp dans votre tableau de bord WordPress. Collez la clé dans le champ qui lit la clé API de Mailchimp.

Cliquez sur le bouton Mettre à jour les réglages pour enregistrer les changements.

Ajouter votre clé d’API à Gravity Forms

Ajouter votre clé API à Gravity Forms

Il est maintenant temps de revenir au formulaire d’inscription d’utilisateur.

Allez dans Réglages > MailChimp dans le menu du formulaire d’inscription.

C’est la zone qui vous demande de faire un flux Mailchimp. Là encore, c’est la façon dont Gravity Forms assure le transfert des données d’une application à l’autre.

Cliquez sur le bouton Ajouter.

Ajouter un nouveau flux pour Mailchimp

Ajouter un nouveau flux pour Mailchimp

Nommez le flux en quelque chose dont vous pouvez vous souvenir. Ce nom n’est que pour votre propre référence.

Sous le champ Audience Mailchimp, cliquez sur le menu déroulant pour choisir le nom d’une de vos listes de diffusion Mailchimp.

Si vous n’avez pas fait de liste d’audience, vous devez retourner sur Mailchimp pour compléter ce processus. Sinon, il n’y a pas de base de données pour commencer à enregistrer vos adresses e-mails.

Choisir votre liste d’audience

Choisir votre liste d’audience

Une zone pour relier les champs apparaît, et elle vous invite à relier les champs du formulaire à partir de l’extension d’inscription d’utilisateur aux formulaires à remplir sur Mailchimp.

C’est assez facile si l’on considère que vous sélectionnez l’adresse e-mail en même temps que le champ de l’adresse e-mail, et les champs de prénom et de nom du formulaire pour les champs de prénom et de nom de Mailchimp.

Relier les champs

Relier les champs

Descendez vers les options supplémentaires.

Elles sont entièrement facultatives et dépendent de la manière dont vous souhaitez que le processus de collecte d’e-mails fonctionne.

Par exemple, vous pouvez activer une situation de double adhésion (opt-in), où l’utilisateur doit cliquer sur un e-mail de confirmation avant de s’inscrire dans votre liste. Ceci est à la fois pour des raisons de sécurité et parce que certaines régions du monde l’exigent.

Les autres réglages comprennent la possibilité d’inscrire les abonnés en tant que VIP, de définir des balises et d’écrire une note. Le champ de note peut vous aider à organiser la provenance des e-mails d’abonnements par rapport aux autres formulaires que vous pouvez avoir.

Une fois que tout cela est fait, cliquez sur le bouton Mettre à jour les réglages.

Ajouter des options supplémentaires à votre formulaire d'inscription

Ajouter des options supplémentaires à votre formulaire d’inscription

Si vous allez tester le fait de relier des champs (ou d’autres modules de marketing par e-mail) sur l’interface publique de votre site, vous remarquerez peut-être que peu de choses ont changé visuellement. Cependant, vous pouvez effectuer un nouveau test d’utilisateur fictif en remplissant le formulaire d’inscription d’utilisateur et en vérifiant s’il fonctionne correctement.

Avec cette configuration, vous devriez pouvoir aller sur les champs reliés après l’envoi du test et voir un tout nouvel utilisateur inscrit à votre liste de diffusion.

Les champs standard pour l’enregistrement comprennent le nom et l’adresse e-mail, mais vous pouvez être créatif et stocker encore plus que cela grâce aux reliage de champs et aux fonctions de Gravity Forms.

Formulaire d'inscription WordPress avec MailChimp

Formulaire d’inscription WordPress avec MailChimp

Comment permettre aux utilisateurs de s’inscrire sur votre site web en utilisant un profil social

La connexion avec un profil social est devenue plus courante sur internet en raison de sa rapidité et du fait que les gens n’ont pas besoin de créer un nouveau compte pour chaque site web qu’ils souhaitent rejoindre.

Un site communautaire ou de membres qui a besoin de tous les avantages pour convaincre les utilisateurs de s’inscrire pourrait certainement bénéficier d’une connexion sociale, car cela permet de supprimer quelques barrières dès le départ.

L’extension User Registration de WPEverest est l’extension idéale pour personnaliser votre page d’inscription d’utilisateur et intégrer une option de connexion sociale. L’extension basique est gratuite, mais l’extension Social Connect – qui ajoute ces boutons de connexion sociale – nécessite que vous souscriviez à un forfait de 69 $ par an.

Nous vous montrerons comment installer et utiliser l’extension ci-dessous, mais n’oubliez pas que plusieurs autres extensions similaires sont à votre disposition.

Pour commencer, installez et activez l’extension User Registration et passez au plan Personal pour recevoir l’extension Social Connect.

Extension WordPress User Registration

Extension WordPress User Registration

Dans votre tableau de bord WordPress, activez également l’extension Social Connect. Les éléments User Registration et Social Connect apparaissent dans la zone des extensions de WordPress.

Activez l’extension User Registration et Social Connect.

Activer l’extension et le module

Activer l’extension et le module

Maintenant, allez sur User Registration > User Registration. L’extension comporte quelques modèles pour lancer votre formulaire d’inscription. Si vous préférez commencer à partir de zéro, cliquez sur le bouton Ajouter.

Une fois que vous êtes dans l’éditeur de formulaire, utilisez la zone des champs utilisateur pour glisser-déposer des modules dans votre formulaire.

Le formulaire d’inscription par défaut de l’extension comprend les champs E-mail de l’utilisateur, Identifiant et Mot de passe.

Nous vous recommandons de l’imiter si vous construisez un formulaire à partir de la base. Vous pouvez également intégrer d’autres modules en les sélectionnant dans le panneau Champ d’utilisateur.

Ajouter des modules pour construire votre formulaire d'inscription

Ajouter des modules pour construire votre formulaire d’inscription

Chaque champ a ses propres options que vous pouvez modifier en cliquant sur chacune d’entre elles.

Cependant, la partie la plus importante de l’activation du formulaire d’inscription d’utilisateur se trouve sous l’onglet Réglages du formulaire.

Ici, vous ajustez un large éventail de réglages pour indiquer à WordPress que vous souhaitez que ce formulaire fonctionne comme un nouveau créateur d’utilisateur. Par exemple, vous pouvez définir quel rôle d’utilisateur est créé et demander à chaque utilisateur de se connecter manuellement ou automatiquement après l’inscription.

Réglages du formulaire

Réglages du formulaire

Il est temps de placer le formulaire d’inscription d’utilisateur sur une page une fois que tous les champs souhaités sont mis en place.

L’extension User Registration utilise des codes courts pour mettre des formulaires sur les pages et les articles. Vous les trouverez au-dessus de votre constructeur de formulaires.

Copiez ce code dans votre presse-papiers.

Code court pour l’extension User Registration

Code court pour l’extension User Registration

Allez sur Pages > Ajouter.

Si vous avez déjà une page d’inscription prête à être utilisée, rendez-vous plutôt sur cette page.

add new

Dans la section de création de pages, collez ce code court à l’endroit où vous voulez qu’il apparaisse sur la page.

Veillez à enregistrer ou à mettre à jour la page de manière à ce qu’elle s’affiche sur l’interface publique. Comme toujours, il est préférable de tester le formulaire d’inscription WordPress et de voir s’il fonctionne.

Tester le formulaire d'inscription à l'aide des profils sociaux

Tester le formulaire d’inscription à l’aide des profils sociaux

Vous devrez peut-être vous déconnecter de votre compte administrateur pour voir le formulaire comme un utilisateur normal.

Le but de cette section est de vous montrer comment insérer des boutons de connexion aux réseaux sociaux. Les prochaines étapes couvrent donc ce point.

Cliquez sur User Registration > Réglages.

Nous supposons que l’extension Social Connect est déjà activée sur votre tableau de bord WordPress.

Par conséquent, vous devriez trouver un onglet Social Connect dans le panneau des réglages. Cliquez sur cet onglet.

Les réglages de connexion sociale nécessitent que vous cochiez certaines cases et que vous activiez les réglages d’API pour chaque réseau social auquel vous souhaitez permettre aux personnes de se connecter et de s’inscrire.

Si vous voulez avoir un bouton Facebook, cochez cette case. Il en va de même pour Twitter.

Activer les connexions sociales

Activer les connexions sociales

Même chose pour Google et LinkedIn.

Voici la partie un peu déroutante.

Chaque bouton de connexion sociale fonctionne en se liant à l’API du réseau social. La seule façon de se connecter à l’API est de créer une application et d’utiliser des éléments tels que les ID d’applications sociales, les clés et les secrets.

Peu importe si vous n’avez aucune idée de ce que cela signifie. Pour chaque bouton social souhaité, faites défiler le point d’interrogation à côté de chaque champ de réglage. Pour ce tutoriel, nous ne localiserons que l’ID et le secret de l’application Facebook.

Le point d’interrogation montre une fenêtre popup avec un lien vers Facebook. Cliquez dessus.

Obtenir l'ID d’application sur Facebook

Obtenir l’ID d’application sur Facebook

Cela vous redirige vers la page Facebook Apps, où vous pouvez créer une application pour exécuter votre formulaire d’inscription WordPress avec des connexions aux réseaux sociaux.

Cliquez sur le bouton Créer une application.

Suivez les étapes de la création d’une application sur Facebook, y compris le choix du nom de l’application et la configuration des domaines dont vous pouvez avoir besoin.

Une fois l’application configurée, allez à la page Réglages > Basiques.

Modifier les réglages de base de votre application Facebook

Modifier les réglages de base de votre application Facebook

Vous trouverez ici l’App ID et l’App Secret.

Cliquez sur le bouton Afficher pour révéler et copier cette App Secret. Vous voudrez également copier l’ID de l’application à un moment donné.

App ID et App secret

App ID et App secret

Retournez à ces réglages d’API dans le tableau de bord de WordPress.

Collez l’ID de l’application dans le champ approprié. Collez également l’App Secret dans le champ correspondant.

Enregistrez les réglages pour continuer.

Mise à jour de vos réglages d'API

Mise à jour de vos réglages d’API

Il reste quelques étapes à franchir pour non seulement activer les boutons des réseaux sociaux, mais aussi pour personnaliser leur aspect sur le formulaire.

Cliquez sur l’onglet Réglages avancés, à côté de l’onglet Réglages d’API dans lequel vous venez d’entrer.

Les réglages avancés contiennent un large éventail d’options à cocher.

Tout d’abord, assurez-vous d’indiquer que vous souhaitez activer l’enregistrement social.

Ensuite, dites à l’extension que vous voulez afficher des boutons sociaux pour l’inscription.

Réglages avancés

Réglages avancés

Cliquez sur le champ Rôle d’utilisateur par défaut pour sélectionner un rôle d’utilisateur principal qui est créé chaque fois qu’une personne s’inscrit sur votre site avec un profil social. L’abonné est la norme pour cette situation.

En cliquant sur le champ déroulant suivant, vous pouvez choisir le formulaire que vous utilisez pour votre inscription d’utilisateur. Nous avons créé ce formulaire auparavant, alors assurez-vous de trouver le bon. Dans ce tutoriel, il s’appelle Formulaire d’inscription, mais vous auriez pu appeler le vôtre autrement.

Enfin, passez sur les autres réglages pour ajuster l’apparence des boutons. L’un de ces réglages permet d’afficher les boutons près du haut ou du bas du formulaire.

Les modèles de Social Login offrent un moyen rapide de styliser vos boutons sans aucun code ni ajustement visuel.

Choisissez l’un des quatre styles.

Modèles Social Login

Modèles Social Login

Les réglages du texte social indiquent la formulation qui est affichée sur les boutons sociaux. Vous pouvez généralement vous en tenir au texte par défaut, mais n’hésitez pas à le modifier si vous le souhaitez.

Enfin, cliquez sur le bouton Enregistrer les modifications.

Enregistrer les changements

Enregistrer les changements

Vous pouvez prévisualiser le formulaire d’inscription WordPress à partir de votre constructeur de formulaires ou aller directement à la page d’inscription que vous avez faite précédemment. Dans les deux cas, cela vous permet de visualiser le formulaire avec ses boutons de réseaux sociaux.

Pour supprimer une option de connexion sociale, ou pour modifier les réglages, il suffit de revenir aux réglages que nous venons de parcourir.

Nous vous recommandons vivement de tester chacun des boutons de connexion sociale que vous proposez sur votre formulaire d’inscription, afin de voir comment chaque réseau social possède sa propre API et de vous assurer au moins que les applications et les clés d’application fonctionnent pour tous les utilisateurs.

Aperçu des boutons de connexion sociale

Aperçu des boutons de connexion sociale

Comment créer un formulaire d’inscription WordPress avec des profils de membres

La modification de l’inscription par défaut de l’utilisateur WordPress peut se faire avec la plupart des extensions que nous couvrons dans cet article. Mais qu’en est-il si votre site web est une véritable communauté ? Supposons que votre site fonctionne comme un réseau social, un site de rencontres ou un centre de clients internes.

Vous avez besoin de profils riches en fonctionnalités pour que ces utilisateurs puissent personnaliser leurs informations, éventuellement téléverser des photos, et même communiquer avec d’autres utilisateurs.

Les extensions d’inscription d’utilisateurs ont des profils, mais rien de trop puissant.

C’est pourquoi nous voulons vous montrer comment activer une inscription d’utilisateur de type membre où l’utilisateur reçoit un beau profil qu’il contrôle.

Pour commencer le processus, installez et activez l’extension Ultimate Member. Cette extension fournit gratuitement des formulaires personnalisés d’inscription et de connexion d’utilisateurs. Sans oublier que vous pouvez ajouter des profils d’utilisateurs puissants pour créer une zone de membres ou de profil de qualité. De nombreuses extensions similaires sont également disponibles avec cette fonctionnalité, mais nous nous concentrerons sur l’extension Ultimate Member pour ce tutoriel.

L’extension WordPress Ultimate Member

L’extension WordPress Ultimate Member

L’objectif est d’obtenir un espace client plus utile, avec une expérience de profil approfondie pour les utilisateurs, en incorporant des boutons pour des choses comme les commentaires, les avis, les groupes, et bien plus encore.

La grande particularité de l’extension Ultimate Member est que la grande majorité des réglages sont déjà configurés lors de l’activation de l’extension. Elle permet également de créer des pages pour vos profils, des pages d’inscription, etc.

Les réglages de l’extension sont consolidés sous l’onglet Ultimate Member dans le tableau de bord de WordPress.

Cliquez sur le bouton Créer les pages pour continuer.

Créer les pages dans Ultimate Member

Créer les pages dans Ultimate Member

Cela active les bonnes pages et vous amène au module de réglages de l’extension Ultimate Member.

Vous pouvez modifier les pages qui fonctionnent comme les pages d’inscription et de profil correspondantes, mais uniquement si vous souhaitez personnaliser la vôtre.

A partir de maintenant, les pages pré-fabriquées générées par l’extension feront l’affaire. Par conséquent, vous pouvez généralement laisser intacts tous les champs sous l’onglet Général > Pages.

general settings for WordRéglages généraux pour l’extension Ultimate MemberPress Registration Form

Réglages généraux pour l’extension Ultimate Member

L’étape suivante consiste à personnaliser l’apparence des pages de profil et des modules d’inscription. Comme mentionné, la page d’inscription est déjà configurée pour vous, il n’y a donc pas grand-chose à compléter dans ce domaine.

Chaque personne qui se rend sur la page d’inscription et crée un compte aura un profil d’utilisateur WordPress.

Dans l’onglet Apparence, ajustez les éléments que vous jugez importants. Par exemple, vous pouvez choisir un modèle différent pour le formulaire ou réduire sa largeur. Il existe également des champs pour ajuster la taille et les icônes des boutons et des éléments de texte.

L'onglet Apparence

L’onglet Apparence

En défilant dans les zones de réglages, l’extension vous demande si vous souhaitez avoir un profil par défaut et une photo de couverture dans chaque profil.

Vous pouvez également ajuster des éléments comme la taille de la couverture par défaut et si vous souhaitez ou non avoir une photo de couverture.

Plus de réglages pour l’extension Ultimate Member

Plus de réglages pour l’extension Ultimate Member

Alors que vous êtes toujours dans la section Apparence, cliquez sur le lien Menu de profil. Cette zone affiche les principaux éléments qui composent le profil de l’utilisateur. Bien que vous ayez la liberté de tout laisser tel quel, il y a certains réglages que vous voudrez peut-être modifier.

Pensez à conserver des éléments comme l’onglet À propos et l’ensemble du menu du profil. Nous vous recommandons d’avoir l’onglet Messages si vos membres contribuent à votre blog ou fonctionnent en tant que créateurs de contenu.

L’onglet Commentaires est assez important pour les blogs et les communautés, étant donné que les lecteurs et les membres souhaitent probablement avoir la possibilité de revenir en arrière et de vérifier leurs commentaires.

Menu de profil

Menu de profil

Une fois que tous les réglages du profil sont configurés, cliquez sur le bouton Enregistrer les modifications.

Enregistrer vos modifications

Enregistrer les modifications

Quelques autres panneaux de configuration offrent des options pour le formulaire d’inscription, le formulaire de connexion, et plus encore. Veillez à ajuster les e-mails envoyés pour les nouvelles inscriptions et à modifier de nombreuses parties de votre formulaire d’inscription WordPress, notamment la largeur et l’alignement.

Bien que nous ne couvrions pas tous ces réglages, il est bon de savoir où ils se trouvent pour s’assurer que tous les formulaires sont adaptés à votre marque.

Réglages de formulaire d'inscription et de connexion

Réglages de formulaire d’inscription et de connexion

Un formulaire d’inscription est nécessaire afin de permettre à vos utilisateurs de s’inscrire et d’accéder à leur profil.

Pour en créer un, allez sur Ultimate Member > Formulaires.

Là encore, l’extension Ultimate Member fournit plusieurs formulaires pré-établis de sorte que la majeure partie du travail est faite pour vous.

Un formulaire d’inscription par défaut est prêt à être utilisé, comme l’est le formulaire de profil par défaut, ou l’endroit où les gens personnalisent leur profil d’utilisateur.

Formulaires par défaut

Formulaires par défaut

Allez sur Pages > Toutes les pages pour voir les options comme les pages de compte et de connexion. La page d’inscription est celle où un utilisateur s’inscrit et se connecte à son compte, tandis que la page de compte contient le formulaire de profil par défaut, où il gère son profil.

Tous les codes courts appropriés pour les bons formulaires sont déjà insérés dans les pages correspondantes.

Vous pouvez les tester en consultant les versions des pages publiées. Par exemple, cliquez sur la page Register pour la voir en action.

Tester la page Register

Tester la page Register

Sur l’interface publique, un visiteur peut saisir son identifiant et son e-mail et créer un mot de passe.

Tester un compte utilisateur de démonstration

Tester un compte utilisateur de démonstration

Vous pouvez également consulter la page User.

La page utilisateur

La page User

La page utilisateur est le module de profil dont nous avons parlé. Il s’agit d’un lieu permettant aux utilisateurs de tout gérer, des photos de profil aux groupes et amis potentiels. Les fonctionnalités par défaut comprennent une photo de couverture, une photo de profil et une biographie.

Page de profil sur l’interface publique

Page de profil sur l’interface publique

Il suffit de quelques clics pour intégrer ces éléments dans la page de profil.

Chaque page de profil fournit des boutons supplémentaires pour modifier le profil et vérifier le compte de l’utilisateur.

Les autres onglets comprennent un bouton Commentaires et un bouton Messages.

Plus d'options pour la page de profil

Plus d’options pour la page de profil

Que diriez-vous d’ajouter des onglets de profil plus avancés pour des choses comme les messages privés et les amis ?

L’extension Ultimate Member dispose déjà d’une fonction de profil utilisateur assez propre et puissante, mais elle vous permet de développer ces fonctions avec des extensions. La plupart des extensions axées sur le profil vous font payer des frais.

Pour voir les extensions et les ajouter à votre site, allez sur Ultimate Member > Extensions.

Extensions pour Ultimate Member

Extensions pour Ultimate Member

Il existe une longue liste de fonctions de profil potentielles à inclure sous forme d’onglets dans vos profils d’utilisateur.

L’extension Friends permet à vos utilisateurs d’interagir avec d’autres utilisateurs et de les ajouter comme amis.

Le module Notices envoie un message à vos utilisateurs lorsqu’un message est reçu. Vous pouvez également intégrer de puissants outils de gestion de profil pour la messagerie privée, les abonnés et les groupes, pour n’en citer que quelques-uns. Chacun d’entre eux est ajouté en effectuant un paiement et en cliquant sur le bouton Obtenir ce module.

Liste des extensions Ultimate Member

Liste des extensions Ultimate Member

Tout dépend du type de caractéristiques du profil que vous souhaitez fournir. Un site web de membres nécessite généralement un endroit pour créer des groupes. Un réseau social a besoin de groupes d’amis et de messagerie. Un site de cours en ligne peut avoir besoin de commentaires, de notes et de messages. Il y a même un endroit pour configurer une liste d’emplois si vous voulez fournir un tableau d’affichage des offres d’emploi à vos utilisateurs.

L’exemple ci-dessous donne un aperçu de ce qui est possible avec l’extension Ultimate Member, en particulier lorsque vous commencez à utiliser les extensions avancées.

Exemple d'un profil d'utilisateur complet et d'une page de connexion dans Ultimate Member

Exemple d’un profil d’utilisateur complet et d’une page de connexion dans Ultimate Member

Vous souhaitez ajouter un logo, une connexion sociale ou personnaliser votre formulaire d'inscription WordPress ? 🤔 Ce guide vous l'explique ⬇️Click to Tweet

Résumé

Dans l’ensemble, le module d’inscription d’utilisateurs de WordPress offre le potentiel dont chaque site web a besoin pour créer des utilisateurs et recevoir des données de ces utilisateurs. Le blog moyen ou la petite communauté en ligne peut n’avoir besoin que du formulaire d’inscription par défaut de WordPress.

Si c’est le cas, laissez le formulaire de connexion et d’inscription tel quel et modifiez éventuellement l’URL pour une meilleure sécurité. Vous pouvez même ajouter votre propre logo pour donner l’impression que votre marque gère réellement cette page.

Les extensions offrent la possibilité de personnaliser chaque aspect de votre formulaire d’inscription d’utilisateur, en particulier lorsqu’il s’agit d’ajouter des champs uniques et de redéfinir l’apparence de votre formulaire.

Il est possible d’ajouter des fonctionnalités supplémentaires et avancées à vos formulaires d’inscription. Parmi les options que nous avons couvertes dans cet article figurent des formulaires qui permettent de placer de nouveaux utilisateurs dans des listes de marketing par e-mail. Vous pouvez également envisager de recevoir des paiements pour des contenus exclusifs ou si vous gérez un site de membres.

Ce n’est pas non plus une mauvaise idée d’envisager de proposer un formulaire de connexion sociale pour accélérer le processus d’inscription des utilisateurs. Enfin, un profil d’utilisateur avancé est un excellent moyen de compléter votre formulaire d’inscription actuel afin que le client ait la possibilité de gérer chaque aspect de son profil d’utilisateur.

Si vous avez des questions sur la gestion ou la personnalisation de votre formulaire d’inscription WordPress, ou si vous souhaitez suggérer d’autres extensions ou techniques pour personnaliser les formulaires d’inscription, faites-le nous savoir dans la section des commentaires ci-dessous.


Économisez du temps et de l’argent et optimisez les performances de votre site avec :

  • Aide instantanée des experts en hébergement WordPress, 24/7.
  • Intégration de Cloudflare Enterprise.
  • Une audience mondiale avec 28 centres de données dans le monde entier.
  • Optimisation avec notre surveillance intégrée de performance d’applications (APM).

Tout cela et bien plus encore, dans un seul plan sans contrat à long terme, avec des migrations assistées et une garantie de remboursement de 30 jours. Pour trouver le plan qui vous convient, Découvrez nos plans ou contactez nous.