Comment créer un formulaire d'inscription d'utilisateur personnalisé dans WordPress
Voulez-vous créer un formulaire d’inscription d’utilisateur frontal personnalisé dans WordPress ?
Le formulaire d’inscription des utilisateurs WordPress par défaut affiche la marque WordPress et ne correspond pas au thème de votre site.
Dans cet article, nous allons vous montrer comment créer facilement un formulaire d'inscription d'utilisateur personnalisé dans WordPress.
Pourquoi ajouter un formulaire d'inscription d'utilisateur personnalisé dans WordPress ?
La page d’enregistrement des utilisateurs WordPress par défaut affiche la marque et le logo WordPress, qui ne correspondent pas au reste de la conception de votre site Web WordPress.
La création d'un nouveau formulaire d'inscription utilisateur vous permet d'ajouter le formulaire d'inscription sur n'importe quelle page de votre site WordPress et vous aide à offrir une expérience utilisateur plus cohérente pendant le processus d'inscription.
Avec un formulaire d’inscription, vous pouvez collecter des informations spécifiques auprès de vos utilisateurs qui peuvent être propres à votre blog ou entreprise WordPress.
Cela peut inclure des éléments tels que des coordonnées supplémentaires, des préférences ou toute autre information pertinente aux fonctionnalités de votre site.
Par exemple, si vous organisez un événement, un formulaire d'inscription vous aidera à collecter des détails essentiels auprès des participants, tels que les restrictions alimentaires, les préférences de session ou les exigences particulières.
Un formulaire d'inscription d'utilisateur personnalisé vous permet également de rediriger les utilisateurs lors de l'inscription. Vous pouvez également afficher des champs de profil utilisateur supplémentaires, les combiner avec un formulaire de connexion frontal personnalisé et le connecter à votre service de marketing par e-mail.
Cela dit, voyons comment créer un formulaire d’inscription d’utilisateur personnalisé dans WordPress.
Comment créer un formulaire d'inscription d'utilisateur personnalisé dans WordPress
Le moyen le plus simple de créer un formulaire d’inscription d’utilisateur personnalisé consiste à utiliser WPForms. C’est le meilleur plugin de formulaire de contact WordPress du marché qui permet de créer tous types de formulaires dans WordPress.
WPForms est très simple à utiliser et propose un générateur de formulaire par glisser-déposer, vous pouvez donc l'utiliser pour personnaliser votre formulaire d'inscription comme vous le souhaitez. Le plugin s'intègre également aux services de marketing par e-mail et aux services de paiement populaires tels que PayPal.
Tout d’abord, vous devez installer et activer le plugin WPForms. Pour des instructions plus détaillées, consultez notre guide étape par étape sur la façon d'installer un plugin WordPress.
Remarque : WPForms dispose également d'une version gratuite. Cependant, vous devrez passer à la version professionnelle du plugin pour ce didacticiel car il inclut le module complémentaire d'enregistrement des utilisateurs.
Lors de l'activation, rendez-vous sur la page WPForms » Paramètres dans la barre latérale d'administration de WordPress pour saisir votre clé de licence.
Vous pouvez obtenir cette clé depuis votre compte sur le site Web WPForms.
Une fois la clé vérifiée, vous devez visiter la page WPForms » Addons depuis le tableau de bord WordPress.
À partir de là, localisez le « Module complémentaire d’enregistrement de l’utilisateur », puis cliquez sur le bouton « Installer le module complémentaire » situé en dessous.
WPForms va maintenant installer et activer le module complémentaire d'enregistrement des utilisateurs sur votre site WordPress. Vous verrez le statut passer à « Actif » lorsque le module complémentaire sera installé.
Vous êtes maintenant prêt à créer votre formulaire d'inscription d'utilisateur personnalisé.
Pour ce faire, vous devrez visiter la page WPForms »Ajouter un nouveau dans la barre latérale d'administration.
Cela vous dirigera vers la page « Sélectionner un modèle », où vous pourrez commencer par saisir un nom pour le formulaire que vous êtes sur le point de créer.
Une fois que vous avez fait cela, localisez simplement le modèle « Formulaire d’inscription de l’utilisateur » et cliquez sur le bouton « Utiliser le modèle » en dessous.
Cela lancera le générateur de formulaires WPForms sur votre écran. Ici, vous remarquerez les options de champ dans la colonne de droite et un aperçu du formulaire dans le coin gauche de l'écran.
Désormais, le formulaire d'inscription par défaut contiendra déjà le nom, le nom d'utilisateur, le mot de passe, l'e-mail et de courts champs bio.
Cependant, vous pouvez facilement ajouter plus de champs au formulaire à partir du panneau de gauche et également faire glisser les champs pour réorganiser leur ordre.
Le plugin vous permet également de modifier chaque champ du formulaire. Pour ce faire, cliquez simplement sur n’importe quel champ du formulaire et vous verrez « Options de champ » apparaître dans la colonne de gauche.
À partir de là, vous pouvez modifier l'étiquette du champ, modifier son format, ajouter une description, configurer la mise en forme conditionnelle, modifier le champ en obligatoire, et bien plus encore.
Une fois que vous avez terminé, n'oubliez pas de cliquer sur le bouton « Enregistrer » en haut pour stocker les paramètres de votre formulaire d'inscription utilisateur.
Ajout de champs personnalisés dans votre formulaire d'inscription d'utilisateur personnalisé
WPForms vous permet également de connecter des champs de profil utilisateur personnalisés à votre formulaire d'inscription utilisateur.
Pour ce faire, vous devrez ajouter des champs de profil utilisateur supplémentaires à votre site WordPress, et le moyen le plus simple de le faire est d'utiliser un plugin WordPress.
Dans ce tutoriel, nous utilisons le plugin Advanced Custom Fields. Cependant, la fonctionnalité de mappage de champs de WPForms fonctionnera avec n'importe quel plugin qui utilise des champs personnalisés WordPress standard pour ajouter et stocker des métadonnées utilisateur.
Tout d’abord, vous devez installer et activer le plugin Advanced Custom Fields. Pour plus de détails, vous souhaiterez peut-être consulter notre guide du débutant sur la façon d’installer un plugin WordPress.
Lors de l'activation du plugin, rendez-vous sur la page ACF » Groupes de champs dans la barre latérale d'administration de WordPress et cliquez sur le bouton « + Ajouter un groupe de champs ».
Cela vous dirigera vers la page « Ajouter un nouveau groupe de champs », où vous pourrez commencer par saisir un titre pour le groupe de champs.
Pour ce didacticiel, nous allons créer un champ personnalisé pour les détails du compte de réseau social.
Après cela, faites défiler jusqu'au menu déroulant « Type de champ » et choisissez un type pour le champ personnalisé. Vous pouvez sélectionner du texte, des chiffres, des images, des fichiers, des cases à cocher, des URL, des mots de passe et bien plus encore.
Une fois que vous avez fait cela, vous devez saisir une étiquette de champ qui apparaîtra sur la page de profil.
Par exemple, si vous souhaitez ajouter un champ personnalisé pour collecter des profils Facebook, vous pouvez nommer l'étiquette du champ « Facebook ».
Vous remarquerez que le nom du champ sera automatiquement généré lorsque vous saisirez une étiquette de champ, mais vous pouvez le modifier si vous le souhaitez.
Ensuite, passez à l’onglet « Validation » dans la section « Étiquette ». Ici, vous pouvez activer le commutateur « Obligatoire » si vous souhaitez rendre obligatoire pour les utilisateurs de remplir ce champ personnalisé avant de soumettre le formulaire.
Vous pouvez même définir une limite de caractères pour le champ à partir d'ici.
Une fois que vous avez fait cela, passez simplement à l’onglet « Présentation » en haut.
Vous pouvez désormais ajouter des instructions pour les auteurs, du texte d'espace réservé pour le champ, des attributs de wrapper, etc.
Après cela, vous pouvez également ajouter une logique conditionnelle au champ personnalisé que vous créez en passant à l'onglet « Logique conditionnelle » en haut.
Après avoir effectué vos modifications, faites défiler jusqu'à la section « Règles de localisation ». À partir de là, vous devrez créer un ensemble de règles pour déterminer quels écrans utiliseront ces champs personnalisés.
Puisque nous voulons que ce champ apparaisse pour tous les profils d'utilisateurs, nous devrons sélectionner l'option « Rôle de l'utilisateur » dans le menu déroulant de gauche.
Après cela, laissez le menu déroulant au milieu tel quel, puis choisissez l'option « Tous » dans le menu déroulant de droite.
Désormais, le groupe de champs personnalisés que nous créons sera affiché pour tous les profils utilisateur.
Ensuite, passez à l’onglet « Paramètres du groupe » en haut.
Une fois que vous y êtes, assurez-vous que le groupe de champs est actif en faisant glisser le bouton de Non à Oui.
Une fois que vous avez fait cela, vous pouvez également ajouter d'autres champs personnalisés au groupe de champs en cliquant sur le bouton « Ajouter un champ » en haut de la page.
Par exemple, si vous souhaitez créer plusieurs champs de réseaux sociaux, vous pouvez cliquer sur le bouton « Ajouter un champ » et commencer à personnaliser le champ pour d'autres plateformes de réseaux sociaux.
Gardez à l’esprit que tous les champs que vous créez feront partie du même groupe de champs.
Une fois que vous avez terminé, n'oubliez pas de cliquer sur le bouton « Enregistrer les modifications » en haut pour stocker vos paramètres.
Vous avez maintenant publié avec succès votre groupe de champs.
Maintenant, pour afficher le champ personnalisé que vous avez créé, rendez-vous sur la page Utilisateur » Profil depuis la zone d'administration.
Ici, vous verrez vos champs personnalisés ajoutés au bas de la page de profil.
Maintenant que vous avez créé un champ de profil utilisateur personnalisé, vous devrez l'ajouter au formulaire d'inscription utilisateur personnalisé dans WPForms.
Après cela, vous devrez également vous assurer de mapper le champ du formulaire au champ personnalisé afin que les données soient correctement stockées.
Pour ce faire, visitez la page WPForms » Tous les formulaires à partir du tableau de bord WordPress et cliquez sur le lien « Modifier » sous le formulaire d'inscription utilisateur que vous venez de créer et d'enregistrer précédemment.
Cela ouvrira votre formulaire dans le générateur de formulaires WPForms. Une fois que vous y êtes, faites simplement glisser un champ depuis le panneau de gauche pour l'ajouter à votre formulaire.
Dans cet exemple, nous ajoutons un champ « Site Web/URL » à notre formulaire.
Après avoir ajouté le champ Site Web/URL, cliquez dessus pour ouvrir les propriétés des champs dans la colonne de gauche.
Maintenant, continuez et changez l'étiquette du champ de Site Web/URL par le nom du groupe de champs que vous avez créé.
Si vous le souhaitez, vous pouvez également ajouter une description pour le champ.
Après cela, n'oubliez pas de cliquer sur le bouton « Enregistrer » dans le coin supérieur droit de l'écran pour enregistrer votre formulaire.
Ensuite, vous devez cliquer sur le bouton « Paramètres » dans le coin droit pour les paramètres avancés du formulaire et le mappage des champs. Sur la page Paramètres, cliquez sur l'onglet « Enregistrement de l'utilisateur ».
WPForms affichera désormais vos champs de formulaire et un menu déroulant en dessous pour sélectionner le champ d'inscription WordPress avec lequel le mapper.
Vous remarquerez que WPForms mappera automatiquement vos champs par défaut tels que Nom, Email, Mot de passe, etc.
À partir de là, choisissez l’option de nom de votre groupe de champs dans le menu déroulant sous l’option « Site Web ».
Après cela, faites défiler jusqu'à la section « Méta utilisateur personnalisé ».
Vous pouvez saisir le nom du groupe de champs que vous avez créé précédemment dans l'option de clé méta personnalisée, puis sélectionner le champ de formulaire personnalisé avec lequel vous souhaitez le mapper dans le menu déroulant.
Enfin, cliquez sur le bouton « Enregistrer » dans le coin supérieur droit de l'écran pour enregistrer vos paramètres.
Ajout de votre formulaire d'inscription d'utilisateur personnalisé dans WordPress
WPForms simplifie grandement l’ajout de formulaires à vos publications, pages et widgets de la barre latérale WordPress.
Tout d’abord, vous devez ouvrir une publication/page existante ou nouvelle dans laquelle vous souhaitez ajouter le formulaire d’inscription personnalisé.
Une fois que vous y êtes, cliquez sur le bouton « + » dans le coin supérieur gauche de l’écran pour ouvrir le menu de blocage.
À partir de là, localisez et ajoutez le bloc WPForms à la page/à la publication.
Après cela, vous pouvez sélectionner votre formulaire d'inscription personnalisé dans le menu déroulant du bloc lui-même.
Vous verrez maintenant l’aperçu de votre formulaire d’inscription dans l’éditeur WordPress. Allez-y et publiez votre article ou votre page pour voir le formulaire d'inscription personnalisé en action.
Ajouter le formulaire d'inscription d'utilisateur personnalisé à la barre latérale
WPForms vous permet également d'ajouter votre formulaire d'inscription d'utilisateur personnalisé dans votre barre latérale. Visitez simplement la page Apparence » Widgets depuis la zone d'administration et cliquez sur le bouton « + » dans le coin supérieur gauche.
Cela ouvrira le menu de blocage à partir duquel vous pourrez ajouter le bloc WPForms à l'onglet de la barre latérale de la page « Widgets ».
Après cela, sélectionnez simplement le formulaire d'inscription de l'utilisateur dans le menu déroulant du bloc WPForms.
Une fois que vous avez terminé, n'oubliez pas de cliquer sur le bouton « Mettre à jour » pour stocker vos paramètres.
Vous pouvez maintenant visiter votre site Web pour afficher le formulaire d’inscription des utilisateurs dans la barre latérale du site Web.
Ajouter le formulaire d'inscription d'utilisateur personnalisé dans l'éditeur de site complet
Si vous utilisez un thème WordPress basé sur des blocs, vous n’aurez pas de page de widgets. Pour ajouter le formulaire d'inscription dans la barre latérale avec un FSE, rendez-vous sur la page Apparence » Éditeur depuis la barre latérale d'administration.
Une fois là-bas, cliquez sur le bouton « + » dans le coin supérieur gauche de l’écran pour ouvrir le menu de blocage.
À partir de là, vous devez rechercher et ajouter le bloc WPForms à votre emplacement préféré sur votre site Web.
Après cela, sélectionnez le formulaire d'inscription dans le menu déroulant du bloc lui-même.
Enfin, cliquez sur le bouton « Enregistrer » pour stocker vos paramètres.
Visitez maintenant votre site Web pour voir le formulaire d'inscription d'utilisateur personnalisé en action.
Créez une page de connexion personnalisée avec votre formulaire d'inscription
Lorsque vous ajoutez votre formulaire d’inscription à une page de votre site Web, WordPress utilisera par défaut la mise en page, le modèle et le style de votre thème.
Cependant, vous pouvez créer une superbe page d'inscription à partir de zéro à l'aide d'un générateur de page de destination WordPress.
SeedProd est le meilleur constructeur de pages de destination pour WordPress. Il est convivial et propose un générateur par glisser-déposer qui vous aide à créer tous les types de pages de destination. Le plugin propose également des modèles prédéfinis et de nombreuses fonctionnalités de personnalisation.
Remarque : SeedProd propose également une version gratuite que vous pouvez utiliser. Cependant, nous utiliserons la version professionnelle du plugin pour ce didacticiel, car elle comprend un modèle de page de connexion utilisateur et des fonctionnalités de personnalisation avancées.
Tout d’abord, vous devrez installer et activer le plugin SeedProd sur votre site. Pour des instructions détaillées, vous souhaiterez peut-être consulter notre tutoriel sur la façon d'installer un plugin WordPress.
Lors de l'activation, visitez la page SeedProd » Paramètres pour saisir la clé de licence du plugin. Vous pouvez retrouver ces informations dans votre compte sur le site SeedProd.
Après avoir vérifié votre clé, vous êtes maintenant prêt à créer une page de connexion avec votre formulaire d'inscription.
Pour commencer, rendez-vous sur l'écran SeedProd » Landing Pages dans la barre latérale d'administration, puis cliquez sur le bouton « Configurer une page de connexion ».
Cela vous mènera à l'écran « Choisir un nouveau modèle de page », où vous pourrez sélectionner un modèle prédéfini pour la page de connexion que vous êtes sur le point de créer.
Après avoir sélectionné un modèle, une fenêtre contextuelle apparaîtra.
Vous devez maintenant saisir un nom pour votre page de destination et une URL. Une fois cela fait, continuez et cliquez sur le bouton « Enregistrer et commencer à modifier la page ».
Ensuite, vous pouvez modifier votre page de connexion à l'aide du générateur de page de destination par glisser-déposer de SeedProd.
Pour ce faire, sélectionnez un bloc dans le menu de gauche et faites-le glisser là où vous souhaitez l'ajouter sur votre page de connexion.
Par exemple, vous pouvez ajouter un titre, une image, une vidéo ou un bloc de partage social à votre page de destination.
Une fois que vous avez fait cela, rendez-vous à la section Blocs avancés dans la colonne de gauche.
À partir de là, sélectionnez le bloc « Formulaire de contact » et placez-le sur votre page de connexion.
Nous vous suggérons de supprimer le bloc Nom d'utilisateur et Mot de passe existant du modèle afin que les utilisateurs n'aient pas à saisir deux fois les informations de connexion.
Ensuite, cliquez sur le bloc WPForms sur votre page de connexion pour écrire ses paramètres dans la colonne de gauche.
Vous verrez maintenant une option pour « Sélectionner un formulaire » dans le menu.
À partir de là, continuez et sélectionnez votre formulaire d’inscription dans le menu déroulant.
Vous devriez maintenant voir un aperçu de votre formulaire d'inscription dans le générateur de page de destination.
Enfin, n'oubliez pas de cliquer sur le bouton « Enregistrer » pour enregistrer vos modifications.
Après cela, vous pouvez accéder à l'onglet « Connecter » et intégrer différents services de marketing par e-mail à votre formulaire d'inscription.
SeedProd s'intègre facilement aux services de marketing par e-mail populaires tels que Drip, Constant Contact, AWeber, etc., qui peuvent vous aider à améliorer votre liste de diffusion.
Ensuite, vous pouvez accéder à l'onglet « Paramètres de la page » et modifier l'état de la page en Publier sous les paramètres généraux.
Vous pouvez même modifier le titre et l'URL de la page et activer le lien SeedProd à partir de cet onglet.
Si vous souhaitez optimiser votre page pour les moteurs de recherche, rendez-vous dans l'onglet SEO.
À partir de là, vous pouvez configurer les paramètres en saisissant un titre SEO, une description, une vignette de réseau social, etc.
SeedProd vous permet également d'ajouter des extraits de code dans les paramètres Scripts. Une fois que vous êtes satisfait des paramètres, cliquez simplement sur le bouton « Enregistrer » en haut et fermez le générateur de page.
Après cela, rendez-vous sur l'écran SeedProd » Landing Pages et activez le commutateur sous la page de connexion pour rendre votre page « active ».
Vous pouvez maintenant visiter votre page de connexion pour voir le formulaire d'inscription en action.
Nous espérons que cet article vous a aidé à apprendre comment ajouter facilement un formulaire d’inscription d’utilisateur personnalisé dans WordPress. Vous voudrez peut-être également consulter notre guide du débutant sur la façon de choisir le meilleur créateur de site Web ou notre comparaison des meilleurs logiciels de chat en direct pour les petites entreprises.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.