Comment créer un formulaire d'inscription utilisateur personnalisé dans WordPress

Si vous gérez un site d'adhésion WordPress ou un autre site Web qui autorise l'enregistrement des utilisateurs, une expérience d'inscription transparente est très importante. Mais vous avez peut-être remarqué que le formulaire d'inscription d'utilisateur WordPress par défaut est un peu basique.

Étant donné que ce formulaire par défaut n'a pas d'options de personnalisation et affiche la marque WordPress, il peut entrer en conflit avec la conception de votre site Web.

Chez WPBeginner, nous comprenons l'importance de maintenir une image de marque cohérente sur tous les points de contact, y compris l'enregistrement des utilisateurs.

En ajoutant un formulaire d'inscription personnalisé, vous pouvez améliorer l'expérience utilisateur pour les nouveaux visiteurs, assurer une identité de marque cohérente et même augmenter les inscriptions d'utilisateurs sur votre site Web WordPress.

Cet article vous guidera à travers le processus de création de formulaires d'inscription personnalisés sur le front-end dans WordPress.

Pourquoi ajouter un formulaire d'inscription d'utilisateur personnalisé dans WordPress ?

La page d'inscription d'utilisateur WordPress par défaut affiche la marque et le logo WordPress, ce qui ne correspond pas au reste de la conception de votre site Web WordPress.

La création d'un nouveau formulaire d'inscription d'utilisateur vous permet d'ajouter le formulaire d'inscription sur n'importe quelle page du site 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 uniques à votre blog WordPress ou à votre entreprise.

Cela peut inclure des coordonnées supplémentaires, des préférences ou toute autre information pertinente pour la fonctionnalité de votre site.

Par exemple, si vous organisez un événement, un formulaire d'inscription vous aidera à collecter des informations essentielles auprès des participants, telles que les restrictions alimentaires, les préférences de session ou les exigences particulières.

Un formulaire d'inscription utilisateur personnalisé vous permet également de rediriger les utilisateurs après leur inscription. Vous pouvez même afficher des champs de profil utilisateur supplémentaires, les combiner avec un formulaire de connexion personnalisé en front-end, et le connecter à votre service de marketing par e-mail.

Cela dit, examinons comment créer un formulaire d'inscription utilisateur personnalisé dans WordPress, étape par étape.

Comment créer un formulaire d'inscription utilisateur personnalisé dans WordPress

La manière la plus simple de créer un formulaire d'inscription utilisateur personnalisé est d'utiliser WPForms. À notre avis, c'est le meilleur plugin de formulaire de contact WordPress. Il vous permet de créer tous types de nouveaux formulaires dans WordPress.

Chez WPBeginner, nous utilisons WPForms pour tous nos besoins en formulaires de contact, ainsi que pour notre sondage annuel. Nous n'avons eu que de bonnes expériences avec cet outil. Nous apprécions particulièrement que son constructeur par glisser-déposer le rende très convivial.

Pour en savoir plus, consultez notre avis sur WPForms.

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 comment installer un plugin WordPress.

Après l'activation, rendez-vous sur la page WPForms » Paramètres depuis 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 de WPForms.

Une fois la clé vérifiée, vous devez visiter la page WPForms » Modules complémentaires depuis le tableau de bord WordPress.

À partir de là, localisez le « Module complémentaire d'enregistrement d'utilisateurs », puis cliquez sur le bouton « Installer le module complémentaire » sous celui-ci.

WPForms va maintenant installer et activer le module complémentaire d'enregistrement d'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'enregistrement d'utilisateur personnalisé.

Pour ce faire, visitez la page WPForms » Ajouter depuis la barre latérale d'administration.

Cela vous dirigera vers la page « Sélectionner un modèle », où vous pourrez commencer par taper 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 utilisateur » et cliquez sur le bouton « Utiliser le modèle » sous celui-ci.

Cela lancera le constructeur de formulaires WPForms sur votre écran. Dans la colonne de droite, vous remarquerez les options de champ et un aperçu du formulaire dans le coin gauche de l’écran.

Le formulaire d’inscription par défaut contient déjà les champs nom, nom d’utilisateur, mot de passe, e-mail et courte biographie.

Cependant, vous pouvez facilement ajouter d’autres champs au formulaire depuis le 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 les « 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, définir le champ comme obligatoire, et plus encore.

Une fois que vous avez terminé, n'oubliez pas de cliquer sur le bouton « Enregistrer » pour sauvegarder vos paramètres.

Remarque : Si vous souhaitez envoyer des notifications par e-mail aux utilisateurs enregistrés, vous pouvez consulter notre tutoriel sur comment envoyer des e-mails de confirmation après la soumission d’un formulaire WordPress.

Ajout de champs personnalisés dans votre formulaire d’inscription 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 la façon la 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 tout 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 pouvez consulter notre guide pour débutants sur comment installer un plugin WordPress.

Une fois le plugin activé, rendez-vous sur la page ACF » Groupes de champs depuis la barre latérale d'administration de WordPress. Cliquez ensuite 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 taper un titre pour le groupe de champs.

Pour ce tutoriel, nous allons créer un champ personnalisé pour les détails des comptes de médias sociaux.

Ensuite, 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 nombres, des images, des fichiers, des cases à cocher, des URL, des mots de passe, et bien plus encore.

Une fois que vous avez fait cela, entrez une Étiquette de champ qui apparaîtra sur la page de profil.

Par exemple, si vous souhaitez ajouter un champ personnalisé pour collecter les profils Facebook, vous pouvez nommer l'étiquette du champ « Facebook ».

Vous remarquerez que le Nom du champ sera généré automatiquement lorsque vous entrez une étiquette de champ, mais vous pouvez le modifier.

Ensuite, passez à l'onglet « Validation » dans la section « Étiquette ». Ici, vous pouvez activer le commutateur « Requis » pour 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 terminé, passez simplement à l'onglet « Présentation » en haut.

Vous pouvez maintenant ajouter des instructions pour les auteurs, du texte d'espace réservé pour le champ, des attributs d'enveloppe, et plus encore.

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.

Une fois que vous avez apporté vos modifications, faites défiler vers le bas jusqu'à la section « Règles de localisation ». À partir de là, vous devez 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'utilisateur, nous devrons sélectionner l'option « Rôle de l'utilisateur » dans le menu déroulant à gauche.

Après cela, laissez le menu déroulant du 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 s'affichera pour tous les profils d'utilisateur.

Ensuite, basculez vers 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 commutateur 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 médias sociaux, vous pouvez cliquer sur le bouton ‘Ajouter un champ’ et commencer à personnaliser le champ pour d’autres plateformes de médias 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 en 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 stockées correctement.

Pour ce faire, visitez la page WPForms » Tous les formulaires depuis le tableau de bord WordPress. Ensuite, 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 constructeur de formulaires WPForms. Une fois que vous y êtes, faites simplement glisser un champ du 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, allez-y et changez l’étiquette du champ de Site Web/URL au 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’ 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 ‘Inscription utilisateur’.

WPForms affichera maintenant vos champs de formulaire et un menu déroulant en dessous pour sélectionner le champ d'enregistrement WordPress avec lequel le mapper.

Vous remarquerez que WPForms mappera automatiquement vos champs par défaut tels que Nom, Email, Mot de passe, et plus encore.

À partir d'ici, choisissez le 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étadonnées utilisateur personnalisées ».

Vous pouvez entrer le nom du groupe de champs que vous avez créé précédemment dans l'option de clé de métadonnées personnalisées, puis sélectionner le champ de formulaire personnalisé avec lequel vous souhaitez le mapper dans le menu déroulant.

Note : Si vous souhaitez envoyer des notifications par e-mail aux utilisateurs enregistrés, vous pouvez consulter notre tutoriel sur comment envoyer des e-mails de confirmation après la soumission de formulaires WordPress.

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 utilisateur personnalisé dans WordPress

WPForms rend très simple l'ajout de formulaires à vos articles, pages et widgets de barre latérale WordPress.

Tout d'abord, vous devez ouvrir un article/une page existant ou nouveau où vous souhaitez ajouter le formulaire d'inscription personnalisé.

Une fois que vous y êtes, cliquez sur le bouton « Ajouter un bloc » (+) dans le coin supérieur gauche pour ouvrir le menu des blocs.

À partir d'ici, localisez et ajoutez le bloc WPForms à la page/au article.

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 un aperçu de votre formulaire d'inscription dans l'éditeur WordPress. Continuez et publiez votre article ou votre page pour voir le formulaire d'inscription personnalisé en action.

Ajouter le formulaire d'inscription utilisateur personnalisé à la barre latérale

WPForms vous permet également d'ajouter votre formulaire d'inscription utilisateur personnalisé dans votre barre latérale. Visitez simplement la page Apparence » Widgets depuis la zone d'administration et cliquez sur le bouton « Ajouter un bloc » (+).

Cela ouvrira le menu des blocs à partir duquel vous pourrez ajouter le bloc WPForms à l'onglet barre latérale sur la page « Widgets ».

Après cela, sélectionnez simplement le formulaire d'inscription 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 enregistrer vos paramètres.

Maintenant, vous pouvez visiter votre site Web pour voir le formulaire d'inscription utilisateur dans la barre latérale du site Web.

Ajouter le formulaire d'inscription utilisateur personnalisé dans l'éditeur de site complet

Si vous utilisez un thème WordPress basé sur des blocs, vous n'aurez pas la page des widgets. Pour ajouter le formulaire d'inscription dans la barre latérale avec l'éditeur de site complet (FSE), rendez-vous sur la page Apparence » Éditeur depuis la barre latérale d'administration.

Une fois sur place, cliquez sur le bouton « Ajouter un bloc » (+) dans le coin supérieur gauche pour ouvrir le menu des blocs.

À partir de là, vous devez trouver et ajouter le bloc WPForms à l'endroit de votre choix 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 sauvegarder vos paramètres.

Maintenant, visitez votre site Web pour voir le formulaire d'inscription utilisateur personnalisé en action.

Bonus : 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 en utilisant un constructeur de page de destination WordPress.

SeedProd est le meilleur constructeur de pages pour WordPress. Il est convivial et offre un constructeur 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.

Certaines de nos marques partenaires l'ont utilisé pour créer des thèmes personnalisés, rendant leurs sites visuellement attrayants et obtenant l'appréciation de leurs utilisateurs. Pour en savoir plus, vous pouvez lire notre avis sur SeedProd.

Tout d'abord, vous devez installer et activer le plugin SeedProd sur votre site. Pour des instructions détaillées, vous pouvez consulter notre tutoriel sur comment installer un plugin WordPress.

Après l'activation, visitez la page SeedProd » Paramètres pour saisir la clé de licence du plugin. Vous pouvez trouver ces informations dans votre compte sur le site Web de 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, accédez à l'écran SeedProd » Landing Pages depuis 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 entrer un nom pour votre page de destination et une URL. Une fois cela fait, cliquez sur le bouton « Enregistrer et commencer à modifier la page ».

Ensuite, vous pouvez modifier votre page de connexion à l'aide du constructeur de pages de destination par glisser-déposer de SeedProd.

Pour ce faire, sélectionnez un bloc dans le menu de votre gauche et faites-le glisser là où vous souhaitez l'ajouter sur votre page de connexion.

Par exemple, vous pouvez ajouter un bloc de titre, d'image, de vidéo ou de partage social à votre page de destination.

Une fois que vous avez terminé, accédez à 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 existant « Nom d'utilisateur et mot de passe » du modèle afin que les utilisateurs n'aient pas à saisir les informations de connexion deux fois.

Ensuite, cliquez sur le bloc WPForms sur votre page de connexion pour ouvrir ses paramètres dans la colonne de gauche.

Vous verrez maintenant une option « Sélectionner un formulaire » dans le menu.

À partir de là, 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 constructeur de page de destination.

Enfin, n'oubliez pas de cliquer sur le bouton « Enregistrer » pour sauvegarder vos modifications.

Après cela, vous pouvez vous rendre dans l'onglet « Connecter » et intégrer différents services de marketing par e-mail à votre formulaire d'inscription.

SeedProd s'intègre facilement avec des services de marketing par e-mail populaires tels que Drip, Constant Contact, AWeber, et plus encore, ce qui peut aider à développer votre liste d'e-mails.

Ensuite, vous pouvez aller dans l'onglet « Paramètres de la page » et changer le Statut 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 depuis cet onglet.

Si vous souhaitez optimiser votre page pour les moteurs de recherche, allez dans l'onglet SEO.

À partir de là, vous pouvez configurer les paramètres en saisissant un titre SEO, une description, une miniature pour les réseaux sociaux, et plus encore.

SeedProd vous permet également d'ajouter des extraits de code sous les paramètres Scripts. Une fois que vous êtes satisfait des paramètres, cliquez simplement sur le bouton « Enregistrer » en haut et fermez le constructeur de page.

Après cela, rendez-vous sur l'écran SeedProd » Pages de destination et basculez l'interrupteur 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 pourriez également vouloir consulter notre guide ultime pour utiliser les formulaires WordPress ou notre sélection des meilleurs plugins d'inscription d'utilisateurs WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.