Comment personnaliser votre page de connexion et d'inscription WordPress ? (avec vidéo)

Dernière mise à jour - 13 octobre 2021

L'inscription et la connexion à un site Web devraient être un jeu d'enfant. Et bien que la page de connexion et d'inscription par défaut de WordPress soit minime, elle ne correspond très probablement pas à l'esthétique de votre site Web. Il n'accueille pas non plus les utilisateurs en toute confiance.

Donc, si vous souhaitez que la page de connexion par défaut de votre site Web ait un aspect plus professionnel, voici notre guide pour personnaliser votre page de connexion et d'inscription.

Installation et configuration du plug-in d'enregistrement des utilisateurs

Des plugins comme Profile Builder , Ultimate Member et User Registration sont parfaits pour personnaliser la page de connexion et d'inscription de WordPress. Nous utiliserons le plugin User Registration de WP Everest.

Avant de commencer, assurez-vous que la fonction d'enregistrement est activée pour votre site Web WordPress. Dirigez-vous vers Paramètres> Paramètres généraux . Ici, activez l'option "Tout le monde peut s'inscrire". Choisissez également un rôle par défaut pour les nouveaux utilisateurs. De préférence, vous devez le définir comme abonné. Enregistrez les modifications lorsque vous avez terminé.

Ensuite, installez le plug-in d'enregistrement des utilisateurs à partir du référentiel WordPress. Lors de son activation, vous verrez une invite pour ajouter automatiquement de nouvelles pages d'enregistrement d'utilisateur comme S'inscrire et Mon compte. Cliquez sur "Installer les pages d'enregistrement des utilisateurs".

Deux nouvelles pages ont été ajoutées à notre site Web et seront automatiquement ajoutées dans le menu. Cependant, nos nouvelles pages de connexion et d'inscription suivent une approche simple et directe, mais nous pouvons facilement modifier les champs et autres paramètres.

Dirigez-vous vers Enregistrement de l'utilisateur > Paramètres . Ici, nous pouvons choisir ce qui se passe après l'enregistrement d'un visiteur ; vous pouvez demander aux visiteurs de se connecter manuellement après l'inscription, vous pouvez leur demander de confirmer leur adresse e-mail avant de se connecter, vous pouvez leur donner un accès instantané à leur compte après l'inscription, ou vous pouvez exiger une approbation de votre part ou d'un autre administrateur avant que les visiteurs ne puissent connectez-vous. Choisissez une option adaptée à votre site Web.

Ci-dessous, vous pouvez empêcher l'accès au tableau de bord WordPress pour certains rôles d'utilisateur sur votre site Web. Avec l'option suivante, vous pouvez activer le bouton masquer et afficher le mot de passe. Par défaut, les visiteurs ne peuvent pas voir le mot de passe pour des raisons de sécurité. Cependant, vous pouvez ajouter un bouton pour leur permettre de voir le mot de passe lors de la saisie.

Plus bas, vous pouvez gérer d'autres paramètres pour la section Mon compte. Cliquez sur Enregistrer les modifications lorsque vous avez terminé.

Ensuite, passez aux options de connexion.

Dans le premier paramètre, vous pouvez choisir parmi différents looks pour le formulaire de connexion. Ci-dessous, vous pouvez activer ou désactiver les options de mémorisation de moi et de mot de passe perdu, masquer les étiquettes de champ et activer Google reCaptcha.

Vous pouvez également rediriger les nouveaux utilisateurs vers la page d'inscription à partir de la page de connexion. Rendez-vous sur la page d'inscription et copiez son URL. Collez-le ensuite dans le champ URL d'enregistrement.

La page des paramètres vous permet également de personnaliser les étiquettes, les espaces réservés et les messages de la page de connexion.

Dans la section Messages frontend, vous pouvez choisir le texte des différents messages de réussite et d'erreur que les visiteurs voient lors de leur inscription et de leur connexion.

Lorsque vous modifiez le message d'inscription réussie ici, toute personne qui s'inscrit verra le nouveau message.

Dans l'onglet Intégration, vous pouvez entrer les détails de Google reCaptcha pour activer reCaptcha sur vos pages de connexion et d'inscription afin de réduire les comptes de spam. Vous pouvez lire notre article pour en savoir plus sur le processus d' activation de reCaptcha sur votre site Web .

Dans la section e-mail, vous verrez que le plugin a créé des notifications par e-mail que les utilisateurs recevront. Vous pouvez soit désactiver ces e-mails, soit modifier leur objet et leur corps en fonction de vos préférences.

Dans la section Importer/Exporter, vous pouvez importer et exporter des utilisateurs et des formulaires pour votre site Web WordPress.

Personnalisation de la page d'inscription

Il est possible de modifier le formulaire existant pour le rendre plus agréable visuellement. Cependant, commençons à zéro. Dirigez-vous vers Enregistrement de l'utilisateur > Ajouter un nouveau fichier .

Donnez un titre au formulaire ici pour le distinguer des autres. Ensuite, vous verrez que la mise en page ressemble à un constructeur de page typique avec des blocs à gauche et une zone de prévisualisation en direct au centre. Vous pouvez ajouter une longue liste de champs tels que l'e-mail, le prénom, le site Web, l'e-mail secondaire, la liste déroulante, la case à cocher, la politique de confidentialité, le titre de la section, l'image de profil et même certains champs d'adresse de facturation WooCommerce.

Commençons par ajouter un champ de nom d'utilisateur. Faites glisser l'élément Nom d'utilisateur et déposez-le là où vous en avez besoin. Vous pouvez réorganiser la position des champs en les faisant glisser dans le bloc de lignes.

Ensuite, cliquez sur le champ pour modifier ses options de champ. Nous pouvons ajouter une étiquette, une description et définir un espace réservé. De plus, nous pouvons rendre le champ obligatoire en sélectionnant "Oui" dans la liste déroulante Obligatoire. Nous pouvons également masquer l'étiquette et ajouter des classes personnalisées pour une personnalisation plus poussée.

Vous pouvez également ajouter d'autres blocs comme le prénom, le nom et confirmer le mot de passe. Si trop de champs rendent le formulaire très long, vous pouvez le condenser en le divisant en deux colonnes.

Vous pouvez ajouter autant de lignes que vous le souhaitez au formulaire. Et ajoutez des champs comme des questionnaires déroulants pour que le formulaire réponde aux besoins de votre site Web.

Lorsque vous avez terminé, cliquez sur "Créer un formulaire". Le formulaire a été ajouté à l'onglet d'enregistrement de l'utilisateur. Maintenant, il vous suffit de l'activer. Copiez donc son shortcode.

Ensuite, rendez-vous sur l'onglet Pages et cliquez sur modifier sous la page d'inscription. Ici, supprimez l'ancien shortcode et collez le nouveau. Cliquez ensuite sur Mettre à jour.

La page d'inscription de notre site Web a été mise à jour vers celle que nous venons de créer. Vous pouvez personnaliser et styliser davantage la page en cliquant sur Modifier avec Elementor.

Ici, vous pouvez personnaliser la page avec Elementor comme n'importe quelle autre page en utilisant l'élément Shortcode. Vous pouvez ajouter des espaceurs, utiliser des arrière-plans, ajouter des graphiques et effectuer de nombreuses autres personnalisations. Vous pouvez également consulter notre vidéo tutoriel Elementor pour en savoir plus.

En dehors de cela, le plug-in d'enregistrement des utilisateurs propose des extensions payantes pour ajouter plus de champs, activer la connexion sociale, utiliser le personnalisateur de style et de nombreuses autres fonctionnalités. Vous pouvez les essayer en fonction des besoins de votre site Web et de vos préférences.

Si vous avez des questions concernant la personnalisation du formulaire de connexion et d'inscription, n'hésitez pas à nous contacter dans les commentaires ci-dessous.

Si vous préférez une version vidéo, veuillez consulter la vidéo ci-dessous :

Lectures complémentaires

• 10 meilleurs plugins de connexion et d'enregistrement WooCommerce
• 8 meilleurs plugins de connexion sociale WooCommerce (2021)
• Un guide détaillé sur le tableau de bord d'administration WordPress