Comment créer une connexion, une inscription et un profil d'utilisateur WordPress personnalisés

Si vous avez un site WordPress, vous envisagez peut-être de créer des pages de connexion et d'inscription utilisateur personnalisées pour collecter plus d'informations. Par exemple, vous pouvez demander aux utilisateurs de préciser leur emplacement ou de soumettre une brève biographie . Cependant, vous vous demandez probablement comment faire cela sans toucher à une ligne de code.

Heureusement, vous pouvez utiliser un plugin d'enregistrement d'utilisateur WordPress comme Profile Builder Pro. Cela vous permet de personnaliser facilement vos formulaires de connexion et d'inscription. Cela vous donne également plus de contrôle sur le profil de l'utilisateur.

Dans cet article, nous examinerons de plus près pourquoi vous souhaiterez peut-être personnaliser vos formulaires de connexion, d'inscription et de profil d'utilisateur WordPress. Ensuite, nous vous montrerons comment procéder étape par étape à l'aide de Profile Builder Pro. Commençons!

Pourquoi voudriez-vous créer une connexion, une inscription et un profil d'utilisateur personnalisés ?

Par défaut, les formulaires d'enregistrement, de connexion et de profil de l'utilisateur WordPress sont très basiques. Il en va de même pour les formulaires WooCommerce :

Ces formulaires peuvent offrir un bon point de départ, mais en tant que propriétaire d'entreprise, vous pourriez être intéressé à en savoir plus sur votre public. Par exemple, la collecte d'informations telles que leur emplacement et leur langue pourrait vous aider à optimiser vos efforts de marketing pour cibler ce groupe démographique particulier.

De plus, vous souhaiterez peut-être sécuriser vos formulaires avec l'authentification à deux facteurs (2FA). Cela aidera à empêcher les acteurs malveillants d'infiltrer votre site.

Il existe d'autres façons de personnaliser la page de connexion ou d'inscription. Par exemple, vous pouvez rediriger les utilisateurs vers des pages particulières de votre site après leur connexion ou leur inscription.

Vous pouvez les amener à vos derniers messages ou à votre page de vente. De cette façon, vous pouvez utiliser votre page de connexion pour attirer l'attention sur des produits, articles ou offres spécifiques et générer davantage de conversions.

Profile Builder Pro est le plugin idéal pour créer un profil utilisateur WordPress personnalisé, des formulaires de connexion et d'inscription. Il vous permet même de personnaliser vos formulaires avec une logique conditionnelle. Cela signifie que les champs que les utilisateurs verront seront basés sur leurs préférences et leurs sélections.

Nous allons explorer ces fonctionnalités plus en détail dans la section suivante.

Comment créer une connexion, une inscription et un profil d'utilisateur WordPress personnalisés

Voyons maintenant comment personnaliser vos formulaires de connexion, d'inscription et de profil d'utilisateur WordPress.

Étape 1 : Installer Profile Builder Pro

Tout d'abord, vous devrez acheter le plugin Profile Builder Pro. Ensuite, connectez-vous à votre compte et accédez à Téléchargements . Ici, vous trouverez les fichiers du plugin que vous venez d'acheter :

Téléchargez les plugins Main et Pro pour enregistrer le fichier sur votre ordinateur. Ensuite, sélectionnez Gérer les sites et entrez l'URL du site sur lequel vous souhaitez activer le plugin :

Maintenant, connectez-vous à votre site WordPress et accédez à Plugins → Ajouter un nouveau . Ensuite, cliquez sur le bouton Upload Plugin et choisissez un à un les fichiers que vous venez de télécharger :

Sélectionnez Installer maintenant , puis Activer . Vous devriez maintenant voir Profile Builder dans le menu de votre tableau de bord. Cliquez dessus et accédez à Enregistrer la version . Ici, vous devrez entrer la clé de licence de votre plugin :

Vous trouverez la clé de licence dans votre compte Profile Builder. Une fois que vous l'avez activé, vous pouvez commencer à travailler sur vos pages de connexion et d'inscription.

Profile Builder Pro peut créer automatiquement les pages de formulaire pour vous :

Tout ce que vous avez à faire est de cliquer sur Créer une page de formulaire et cela ajoutera les formulaires de connexion, d'inscription et de profil de l'utilisateur WordPress aux pages respectives. Ensuite, nous vous montrerons comment configurer et personnaliser ces formulaires.

Étape 2 : Configurez vos formulaires WordPress

Commençons par configurer quelques paramètres pour vos formulaires WordPress. Accédez à Profile Builder → Paramètres et sélectionnez une conception de formulaire :

Par exemple, vous pouvez choisir Style 2 comme style de formulaire et vos formulaires utilisateur frontaux ressembleront à ceci :

Ensuite, vous pouvez configurer certains paramètres pour vos pages de connexion et d'inscription. Par exemple, vous pouvez connecter automatiquement les nouveaux utilisateurs après l'inscription, activer l'approbation de l'administrateur pour les nouvelles inscriptions et autoriser les utilisateurs à se connecter uniquement avec leur nom d'utilisateur ou leur adresse e-mail :

Vous pouvez même appliquer des mots de passe forts en spécifiant une longueur minimale et un niveau de force. Une fois que vous êtes prêt, cliquez sur Enregistrer les modifications .

Si vous souhaitez rendre votre site plus sécurisé, vous pouvez accéder à l'onglet Authentification à deux facteurs et activer cette fonctionnalité sur votre site. Vous pourriez même vouloir l'activer pour des utilisateurs spécifiques uniquement, comme les clients et les abonnés :

Si vous accédez à Paramètres avancés , vous pouvez activer encore plus de fonctionnalités pour vos formulaires. Par exemple, si vous sélectionnez l'onglet Champs , vous verrez une option Générer automatiquement un mot de passe pour les utilisateurs :

Vous pouvez également interdire l'utilisation de certains mots dans les champs, empêcher les utilisateurs d'utiliser des noms d'affichage qui existent déjà, etc. Prenez votre temps pour explorer les paramètres et les options disponibles, mais n'oubliez pas d'enregistrer vos modifications avant de passer à un autre onglet.

Si vous souhaitez diriger les utilisateurs vers une page spécifique après leur inscription ou leur connexion, vous devrez activer le module correspondant. Allez dans Profile Builder → Add-Ons et recherchez Custom Redirects *.* Cochez la case à côté puis cliquez sur Activate :

Maintenant, allez dans Profile Builder → Redirections personnalisées . Comme vous pouvez le remarquer, vous pouvez configurer des redirections pour des utilisateurs individuels ou selon le rôle de l'utilisateur :

Dans notre cas, nous allons configurer des redirections globales . Commencez par choisir un type de redirection (comme Après la connexion ou Après l'inscription ) :

Ensuite, entrez l'URL vers laquelle vous souhaitez rediriger les utilisateurs et cliquez sur Ajouter une entrée . Vous pouvez créer plusieurs redirections.

Étape 3 : Personnalisez les champs du formulaire

Pour personnaliser les champs de votre formulaire d'inscription d'utilisateur WordPress, accédez à Profile Builder → Champs de formulaire . Ici, vous verrez une liste des champs que votre formulaire affiche actuellement :

Vous pouvez cliquer sur Modifier pour personnaliser un champ individuel ou sur Supprimer pour le supprimer du formulaire. Pour ajouter un nouveau champ, utilisez le menu déroulant pour sélectionner une option.

Par exemple, vous pouvez demander aux utilisateurs de sélectionner leur pays. Profile Builder vous demandera d'entrer quelques détails sur ce champ, comme un titre et un méta-nom :

Vous pouvez même en faire un champ obligatoire. Lorsque vous êtes prêt, cliquez sur Ajouter un champ . Cela sera maintenant ajouté à votre formulaire d'inscription d'utilisateur WordPress.

Plus tôt, nous avons mentionné la logique conditionnelle. C'est lorsqu'un champ est affiché aux utilisateurs en fonction des informations qu'ils ont saisies dans les champs précédents.

Par exemple, vous pouvez uniquement demander aux utilisateurs leur site Web s'ils ont sélectionné les États-Unis comme pays. Pour ce faire, cliquez sur le bouton Modifier du champ Site Web . Ensuite, cochez la case Activer la logique conditionnelle :

À l'aide du menu déroulant, sélectionnez le champ dont dépendra cette entrée (dans notre cas, Select Country ), puis spécifiez l'entrée (par exemple, United States ).

Voici à quoi ressemblera le résultat :

Notez que vous pouvez également réorganiser l'ordre dans lequel vos champs apparaissent. Pour ce faire, survolez simplement le numéro de votre champ et faites-le glisser dans la position souhaitée :

Si vous souhaitez créer plusieurs formulaires d'inscription pour différents types d'utilisateurs, allez dans Profile Builder → Add-Ons et cliquez pour activer le module Multiple Registration Forms :

Cette fonctionnalité est particulièrement utile si vous vous adressez à différents types d'utilisateurs ou de clients. Par exemple, vous pouvez vendre aux entreprises ainsi qu'aux particuliers.

Une fois le module activé, allez dans Profile Builder → Formulaires d'inscription et cliquez sur Ajouter nouveau :

Ensuite, vous devrez entrer un nom pour votre formulaire, configurer certains paramètres et personnaliser les champs (comme indiqué précédemment) :

Lorsque vous êtes prêt, cliquez sur Publier . Ensuite, nous verrons comment ajouter ces formulaires à votre site Web.

Étape 4 : Ajoutez les formulaires à vos pages

Comme nous l'avons mentionné précédemment, Profile Builder Pro peut ajouter automatiquement les codes abrégés du formulaire à vos pages de connexion, d'inscription et de profil. Cela signifie que chaque fois que vous modifiez ces formulaires, les modifications seront répercutées sur le front-end.

Cependant, vous pouvez également décider d'ajouter ces formulaires à d'autres zones de votre site. Par exemple, vous souhaiterez peut-être personnaliser la page de connexion WooCommerce et le formulaire d'inscription WooCommerce.

Il y a deux façons de le faire : en utilisant un shortcode ou un bloc dédié.

Tout d'abord, ouvrez la page où vous souhaitez afficher vos formulaires. Si vous souhaitez les utiliser pour votre boutique en ligne, vous devrez modifier la page Mon compte qui a été créée lors de l'installation de WooCommerce. Alternativement, vous pouvez décider de créer une nouvelle page.

Si vous utilisez la page WooCommerce existante, vous devrez supprimer les formulaires de connexion et d'inscription par défaut. Sélectionnez simplement le shortcode et supprimez-le :

Maintenant, pour ajouter vos formulaires personnalisés, cliquez pour ajouter un nouveau bloc et recherchez Inscription ou Connexion :

Dans ce didacticiel, nous ajouterons les deux formulaires à cette page. Nous avons également ajouté un en-tête pour chaque formulaire :

Vous obtiendrez également des paramètres de configuration pour chaque bloc. Par exemple, si vous sélectionnez le formulaire d'inscription, vous pouvez activer la connexion automatique après l'inscription, configurer une redirection, etc. :

Si vous avez créé plusieurs formulaires d'inscription, accédez à Paramètres du formulaire et utilisez le menu déroulant pour choisir le formulaire que vous souhaitez afficher :

Sous ** Rôle attribué , vous pouvez choisir le rôle qui sera attribué aux utilisateurs qui s'inscrivent via ce formulaire. Par exemple, s'il s'agit d'un formulaire d'inscription de vente en gros, vous pouvez attribuer le rôle de client de vente en gros à ces utilisateurs.

Lorsque vous êtes prêt, cliquez sur Mettre à jour (ou Publier si vous avez créé une nouvelle page). Ensuite, vous pouvez visiter la page sur le front-end pour voir à quoi ressemblent vos formulaires pour vos clients :

Notez que pour cet exemple, nous avons utilisé le style de formulaire par défaut, mais vous pouvez choisir l'un des modèles prédéfinis pour vos formulaires afin de les faire ressortir et d'avoir un aspect professionnel.

Vous pouvez également ajouter vos formulaires avec un shortcode. Cela peut être particulièrement utile si vous avez créé vos pages avec un constructeur de pages autre que l'éditeur de blocs.

Vous pouvez localiser ces codes abrégés dans Profile Builder → Informations de base . Copiez-les et collez-les simplement sur la page de votre choix !

Étape 5 : Personnalisez les formulaires de profil

Enfin, vous pouvez personnaliser les formulaires de profil utilisateur WordPress afin que les utilisateurs aient plus de contrôle sur leurs détails. Pour ce faire, vous devrez activer le module Multiple Edit Profile Forms :

Ensuite, allez dans Profile Builder → Modifier les formulaires de profil → Ajouter nouveau :

Ensuite, vous pouvez simplement personnaliser le formulaire comme indiqué précédemment. Par exemple, vous pouvez ajouter une redirection et créer de nouveaux champs, ou modifier ceux qui existent déjà. Lorsque vous avez terminé, appuyez sur Publier .

Conclusion

Les formulaires WordPress par défaut sont assez basiques. Si vous souhaitez collecter plus de détails sur votre audience ou offrir une expérience utilisateur sur mesure, vous devrez personnaliser ces formulaires. Vous pouvez également appliquer des mots de passe forts et une authentification à deux facteurs sur ces formulaires pour rendre votre site plus sécurisé.

Pour récapituler, voici comment créer des formulaires WordPress personnalisés pour la connexion et l'inscription :

1. Installez Profile Builder Pro.
2. Configurez vos formulaires WordPress.
3. Personnalisez les champs du formulaire.
4. Ajoutez les formulaires à vos pages.
5. Personnalisez le profil utilisateur.

Avez-vous des questions sur la création d'une connexion, d'un enregistrement ou d'un profil d'utilisateur WordPress personnalisé ? Faites-nous savoir dans la section commentaires ci-dessous!