Comment personnaliser le formulaire de réinitialisation du mot de passe de WordPress

Le formulaire de réinitialisation de mot de passe par défaut de WordPress est assez basique. Il fait le travail, mais il n'est pas vraiment "professionnel" et ne correspond pas à l'image de votre marque.

Sans une solution WordPress de formulaire de mot de passe personnalisé, vous ne pouvez pas garder la cohérence de votre marque intacte. De plus, vous ne pouvez pas ajouter d'instructions utiles ou personnaliser le message pour guider les utilisateurs tout au long du processus de réinitialisation.

C'est là que l'addon WPForms User Registration est utile. Il vous permet de créer un formulaire de réinitialisation de mot de passe entièrement personnalisé qui a l'air d'avoir sa place sur votre site.

Vous pouvez adapter les couleurs, les polices et le design général de votre site web tout en fournissant des instructions claires et utiles. Sans plus attendre, suivez les étapes de ce guide pour personnaliser votre formulaire de réinitialisation de mot de passe WordPress !

Créez votre formulaire de réinitialisation de mot de passe personnalisé dès maintenant ! 🚀

Comment créer un formulaire de réinitialisation de mot de passe personnalisé dans WordPress

Pour créer un formulaire de réinitialisation de mot de passe personnalisé, vous devez souscrire à la version premium de WPForms. La licence Pro inclut l'addon User Registration qui vous permet de créer des formulaires personnalisés de réinitialisation de mot de passe, d'enregistrement d'utilisateur et de connexion pour votre site WordPress. Commençons !

Étape 1 : Installer le plugin WPForms

Tout d'abord, téléchargez et installez WPForms. Pour ce tutoriel, vous aurez besoin de la version pro au lieu de WPForms Lite. Si vous avez besoin d'aide, consultez ce guide d'installation des plugins WordPress.

Après avoir installé le plugin, connectez-vous à votre compte WPForms et cliquez sur l'onglet Téléchargements. Il s'agit d'une page avec toutes les licences disponibles.

Pour télécharger le plugin, cliquez sur le bouton Télécharger WPForms à côté de la licence pro. Un fichier zippé du plugin WPForms sera sauvegardé sur votre ordinateur.

Après avoir téléchargé votre fichier zip, rendez-vous sur votre site WordPress où vous souhaitez installer WPForms. Ensuite, dans le tableau de bord de l'administrateur, cliquez sur Plugins " Add New et ensuite sur le bouton Upload Plugin.

A partir de là, cliquez sur le bouton Choose File et sélectionnez le fichier zip WPForms que vous venez de télécharger. Une fois le fichier téléchargé, cliquez sur le bouton Installer maintenant.

Une fois le plugin installé, cliquez sur le bouton Activer le plugin pour activer WPForms sur votre site. Après avoir activé le plugin, n'oubliez pas de vérifier votre clé de licence WPForms pour recevoir les mises à jour automatiques et le support du plugin.

L'ajout de votre clé de licence vous permettra également d' installer et d'activer facilement les addons WPForms depuis votre tableau de bord WordPress.

Étape 2 : Activer le module complémentaire d'enregistrement des utilisateurs

Maintenant que WPForms est prêt à l'emploi, vous aurez besoin de l'addon User Registration pour créer des formulaires de réinitialisation de mot de passe personnalisés. Dans votre zone d'administration WordPress, allez dans WPForms " Addons dans le menu latéral gauche.

Si vous ne voyez aucun addon pour votre niveau de licence, cliquez sur le bouton Actualiser les addons pour forcer une actualisation.

Pour rechercher le module complémentaire User Registration, tapez son nom dans le champ Search Addons situé dans le coin supérieur droit de la page.

Une fois que vous l'avez trouvé, il vous suffit de cliquer sur le bouton Installer le module complémentaire.

Cela installera et activera automatiquement l'addon pour vous. Tout addon installé et prêt à être utilisé affichera Status : Actif.

Étape 3 : Utiliser le modèle de formulaire de réinitialisation du mot de passe

Il est maintenant temps de créer votre formulaire de mot de passe personnalisé dans WordPress. Allez dans WPForms " Add New dans votre tableau de bord pour commencer à créer votre nouveau formulaire.

Recherchez "Réinitialisation du mot de passe" dans la bibliothèque de modèles, puis survolez l'option Formulaire de réinitialisation du mot de passe de l'utilisateur et cliquez sur Utiliser le modèle.

Une fois le modèle sélectionné, le formulaire de réinitialisation de mot de passe s'affiche à l'écran. Ce modèle est spécialement conçu pour la fonctionnalité de réinitialisation de mot de passe et contient tous les champs essentiels déjà configurés.

Le formulaire comprend automatiquement un champ " Email" dans lequel les utilisateurs peuvent saisir leur adresse électronique enregistrée. Il s'agit de l'élément central qui permet au processus de réinitialisation du mot de passe de fonctionner.

Je personnalise toujours le titre et la description du formulaire pour qu'ils correspondent à l'image de marque du site web. Cliquez sur le titre du formulaire en haut pour le modifier. Vous pouvez remplacer le titre par défaut par quelque chose comme "Réinitialisez votre mot de passe" ou "Vous avez oublié votre mot de passe ?".

Ce n'est pas une bonne idée d'ajouter ou de supprimer des champs de ce modèle, car il remplit une fonction très spécifique de manière optimale. Voyons maintenant les paramètres de réinitialisation de l'email dans l'étape suivante.

Étape 4 : Configuration de l'e-mail de réinitialisation du mot de passe

Il est maintenant temps d'affiner le fonctionnement de la procédure de réinitialisation du mot de passe. Allez dans Paramètres " Enregistrement de l'utilisateur dans votre générateur de formulaires pour accéder à toutes les options de réinitialisation du mot de passe.

La première chose à faire est d'activer la fonctionnalité de réinitialisation du mot de passe. Je m'assure toujours que cette option est activée, sinon vos utilisateurs ne pourront pas réinitialiser leur mot de passe par le biais de votre formulaire personnalisé.

Une fois cette option activée, vous pouvez personnaliser l'objet de l'e-mail de réinitialisation. La valeur par défaut peut convenir, mais je préfère la faire correspondre à la voix de ma marque. Quelque chose comme "Réinitialisez votre mot de passe [Nom du site]" semble plus personnel qu'un texte générique.

Si vous souhaitez modifier le message de réinitialisation, veillez à ne pas supprimer le champ {user_registration_password_reset} balise intelligente. Cette balise intelligente crée le lien de réinitialisation sur lequel l'utilisateur doit cliquer.

Faites défiler la page vers le bas et vous verrez une option permettant de masquer votre formulaire de réinitialisation de mot de passe aux utilisateurs connectés. Si vous activez cette option, vous pouvez modifier le message à afficher lorsqu'un utilisateur connecté ouvre le formulaire.

Excellent ! Une fois que vous avez personnalisé les paramètres, n'oubliez pas de cliquer sur Enregistrer en haut de la page. Dans l'étape suivante, nous intégrerons le formulaire dans une nouvelle page.

Étape 5 : Personnaliser l'apparence du formulaire de réinitialisation du mot de passe

Votre formulaire de réinitialisation de mot de passe est fonctionnel, mais il est temps de le rendre attrayant. Un formulaire bien conçu crée la confiance et rend le processus de réinitialisation plus professionnel.

WPForms dispose d'un assistant d'intégration pratique qui vous permet de placer votre formulaire dans une page nouvelle ou existante directement à partir du générateur de formulaires, et vous pouvez ensuite personnaliser son apparence directement dans l'éditeur de blocs.

Une fois votre formulaire enregistré, cliquez sur le bouton Intégrer. Comme nous voulons intégrer notre formulaire dans une nouvelle page de réinitialisation de mot de passe, nous allons sélectionner l'option Créer une nouvelle page .

Donnez un nom approprié à votre page et cliquez sur " Let's Go". Après cela, WPForms ouvrira l'éditeur de blocs de WordPress où vous trouverez votre formulaire de réinitialisation de mot de passe intégré.

Maintenant, utilisez les options du bloc WPForms sur la droite pour utiliser les fonctions de style du formulaire et personnaliser vos étiquettes, champs et boutons en quelques clics.

Lorsque vous êtes satisfait de votre formulaire, cliquez sur Publier pour le lancer. Votre formulaire de réinitialisation de mot de passe est maintenant en ligne et prêt à être utilisé !

Mais nous n'avons pas encore terminé. Il est important de veiller à ce que ce formulaire soit facile à trouver pour vos utilisateurs, au cas où ils auraient besoin de réinitialiser leur mot de passe. Dans l'étape suivante, nous ajouterons le formulaire de réinitialisation du mot de passe à la navigation principale de votre site.

Étape 6 : Ajouter le formulaire de réinitialisation du mot de passe au menu de navigation

C'est une bonne pratique que de rendre votre page de réinitialisation de mot de passe facile à trouver pour vos utilisateurs. Pour ce faire, nous ajouterons la page du formulaire nouvellement créé à la barre de navigation de votre site, en haut de la page.

C'est facile à faire. Il vous suffit d'ouvrir votre tableau de bord WordPress et d'aller dans Apparence " Menus. Il se peut que vous ayez déjà ajouté un menu de navigation à votre site.

Dans ce cas, il vous suffit d'ajouter la page de réinitialisation du mot de passe au menu. Une fois dans l'écran Menus, cliquez sur votre formulaire de réinitialisation de mot de passe dans la colonne de gauche, puis sur Ajouter au menu.

La page de réinitialisation du mot de passe sera alors ajoutée à la pile de pages figurant actuellement dans votre menu à droite. Appuyez sur le bouton Enregistrer le menu pour le mettre à jour.

La procédure de création d'un menu pour la première fois est presque similaire. Il vous suffit de donner un nom à votre menu, puis d'appuyer sur le bouton bleu Créer un menu en bas de l'écran.

Une fois cela fait, vous pouvez ajouter des pages à votre menu en suivant les étapes indiquées ci-dessus. Voici un exemple de navigation :

Il ne nous reste plus qu'à ajouter une redirection pour que les visiteurs qui tentent d'accéder à votre page de réinitialisation par défaut de WordPress soient automatiquement redirigés vers votre nouvelle page de réinitialisation de mot de passe personnalisée.

Facultatif : Ajouter une redirection vers le formulaire personnalisé de réinitialisation du mot de passe

Si vous créez un formulaire personnalisé pour réinitialiser les mots de passe sur votre site web, il peut être judicieux de créer également un formulaire de connexion personnalisé pour votre site.

Veillez également à ajouter une redirection pour remplacer la page de connexion par défaut de WordPress par la nouvelle page personnalisée. Mais si votre page de connexion par défaut est toujours accessible, vous devez ajouter une redirection vers le formulaire de réinitialisation du mot de passe.

Ainsi, si un utilisateur clique sur le bouton "Lost your password?"de la page de connexion de WordPress, ils seront redirigés vers la page de réinitialisation de mot de passe que vous venez de créer ci-dessus au lieu du formulaire de réinitialisation de mot de passe par défaut de WordPress.

Ne vous inquiétez pas, c'est plus facile qu'il n'y paraît. Tout d'abord, nous allons installer le plugin WordPress gratuit WPCode. Sur votre tableau de bord WordPress, allez dans Plugins " Ajouter un nouveau.

De là, recherchez WPCode et cliquez sur Installer maintenant.

Une fois que vous avez cliqué sur Activate, il est temps d'ajouter notre code. Sur votre tableau de bord WordPress, cliquez sur Code Snippets " + Add Snippet.

Après avoir cliqué sur ce bouton, vous verrez la bibliothèque prédéfinie avec différentes options de code que vous pouvez choisir. Cliquez sur Use Snippet sous l'option Add Your Custom Code (New Snippet),

Après avoir intitulé votre extrait (nous avons choisi "New Password Reset Page"), cliquez sur le menu déroulant "Code Type" à droite de l'aperçu du code et sélectionnez " PHP Snippet".

Vous pouvez maintenant copier et coller le code suivant dans l'éditeur :

N'oubliez pas de remplacer reset-password dans le code ci-dessus avec le slug de votre nouvelle page personnalisée de réinitialisation de mot de passe.

Ensuite, descendez jusqu'à la section Insertion, où vous pouvez spécifier la méthode d'insertion et l'emplacement.

Je recommande de conserver la sélection de l'emplacement par défaut Exécuter partout et Insertion automatique pour la méthode d'insertion.

Lorsque vous avez terminé, cliquez sur le bouton Enregistrer l'extrait en haut à droite. Cliquez ensuite sur l'interrupteur à bascule situé à côté pour activer l'extrait de code.

C'est excellent ! Désormais, les utilisateurs arriveront toujours sur votre page personnalisée de réinitialisation de mot de passe lorsqu'ils cliqueront sur le lien de mot de passe perdu.

Passer d'un formulaire standard de réinitialisation de mot de passe WordPress à un formulaire personnalisé de réinitialisation WPForms vous apporte de nombreux avantages en plus de l'amélioration de l'image de marque.

Par exemple, vous pouvez ajouter des fonctionnalités de protection contre le spam en utilisant l'anti-spam intégré de WPForms ainsi que des options utiles comme la définition d'un délai minimum pour soumettre un formulaire afin de tenir les spambots à distance.

Pour plus de détails, vous pouvez suivre notre guide pour empêcher les réinitialisations de mot de passe non autorisées dans WordPress, et éliminer ces demandes de spam !

FAQ sur la personnalisation du formulaire de réinitialisation du mot de passe

Voici quelques questions courantes que l'on me pose sur la personnalisation du formulaire de réinitialisation de mot de passe de WordPress avec WPForms.

Puis-je personnaliser le modèle d'e-mail de réinitialisation du mot de passe ?

Oui, vous pouvez personnaliser l'e-mail de réinitialisation du mot de passe que les utilisateurs reçoivent. Dans les paramètres de notification de votre formulaire, vous pouvez modifier la ligne d'objet, le contenu de l'e-mail et même ajouter votre propre marque.

J'inclus généralement des instructions claires et je définis les attentes quant à la suite des événements. Vous pouvez utiliser des étiquettes intelligentes pour personnaliser le message avec le nom de l'utilisateur ou d'autres détails de sa soumission.

Comment rediriger les utilisateurs après qu'ils ont soumis le formulaire de réinitialisation du mot de passe ?

Vous avez plusieurs options pour cela. Allez dans Paramètres " Confirmations dans votre générateur de formulaires et choisissez Afficher la page ou Aller à l'URL (Redirection).

Je redirige souvent les utilisateurs vers une page personnalisée "vérifiez votre courrier électronique" qui leur indique clairement les prochaines étapes. Cela semble plus professionnel que d'afficher un message générique de réussite.

Puis-je ajouter des champs supplémentaires au formulaire de réinitialisation du mot de passe ?

Absolument. Alors que la réinitialisation du mot de passe de base ne nécessite qu'un champ email, vous pouvez ajouter des questions de sécurité, des numéros de téléphone, ou d'autres champs de vérification en utilisant n'importe quel type de champ disponible dans WPForms.

N'oubliez pas que si vous ajoutez trop de champs, vous risquez de décourager les utilisateurs de remplir le formulaire. J'essaie de rester simple tout en obtenant la vérification dont j'ai besoin.

Que se passe-t-il si un utilisateur saisit un courriel qui n'est pas enregistré ?

Le module complémentaire d'enregistrement des utilisateurs s'en charge automatiquement. Si quelqu'un saisit une adresse électronique qui n'existe pas dans votre base de données d'utilisateurs, il ne recevra pas d'e-mail de réinitialisation, mais il n'obtiendra pas non plus de message d'erreur (cela empêche les gens de chercher des adresses électroniques valides).

Du point de vue de l'utilisateur, le même message de confirmation s'affichera quoi qu'il arrive. Il s'agit d'une fonction de sécurité que j'apprécie beaucoup.

Comment puis-je adapter le formulaire de réinitialisation du mot de passe à mon thème ?

WPForms vous donne plusieurs options de style directement dans le constructeur de formulaire. Cliquez sur votre formulaire intégré dans l'éditeur de page pour accéder au panneau de style, où vous pouvez choisir parmi des thèmes prédéfinis ou personnaliser les couleurs, les polices et l'espacement.

Pour une personnalisation plus avancée, vous pouvez ajouter un CSS personnalisé à votre thème. Je trouve que les options de style intégrées gèrent la plupart des cas sans nécessiter de code.

Puis-je désactiver la réinitialisation du mot de passe par défaut de WordPress et utiliser uniquement mon formulaire personnalisé ?

Oui, mais cela nécessite un certain travail technique. Vous devrez ajouter un code personnalisé au fichier functions.php de votre thème pour remplacer le comportement par défaut de WordPress en matière de réinitialisation du mot de passe.

Je recommande généralement de garder les deux options disponibles. Votre formulaire de mot de passe personnalisé peut être la méthode principale, tandis que la réinitialisation par défaut de WordPress sert de sauvegarde pour les utilisateurs qui en ont besoin.

Comment empêcher les soumissions de spam sur mon formulaire de réinitialisation de mot de passe ?

WPForms inclut plusieurs fonctionnalités anti-spam que vous pouvez activer. Activez le champ Custom Captcha ou activez hCaptcha dans l'onglet Settings " General de votre formulaire.

Vous pouvez également limiter les soumissions de formulaires par adresse IP ou activer la fonction "pot de miel". J'ai constaté que ces méthodes fonctionnent bien ensemble pour arrêter la plupart des spams sans frustrer les utilisateurs réels.

Puis-je connaître le nombre de demandes de réinitialisation de mot de passe que je reçois ?

Oui, WPForms enregistre automatiquement toutes les entrées de formulaire, y compris les demandes de réinitialisation de mot de passe. Allez dans WPForms " Entries pour voir les détails de la soumission, les dates et les informations sur l'utilisateur.

Si vous avez besoin d'analyses plus détaillées, vous pouvez connecter votre formulaire à Google Sheets à l'aide de l'extension Google Sheets pour suivre les tendances au fil du temps. Cela m'aide à repérer les activités inhabituelles ou à déterminer si les utilisateurs rencontrent des difficultés avec des parties spécifiques du processus.

Ensuite, personnalisez votre page de réinitialisation du mot de passe

Une fois que vous avez intégré votre formulaire de réinitialisation de mot de passe à votre nouvelle page, vous devez lui donner une image de marque.

Pourquoi ? En marquant votre formulaire et votre page de réinitialisation de mot de passe, vous renforcez l'idée que vous êtes une entreprise légitime et vous augmentez la crédibilité globale de votre marque.

Suivez notre guide complet pour créer et personnaliser des pages de formulaire sur WordPress. En outre, vous voudrez peut-être apprendre comment personnaliser une page protégée par un mot de passe sur WordPress.

Consultez également notre guide sur la façon de personnaliser les couleurs de votre thème WordPress et d'adapter vos formulaires aux couleurs de votre marque.

Créez votre formulaire Wordpress maintenant

Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de construction de formulaire WordPress le plus facile à utiliser. WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, n'hésitez pas à nous suivre sur Facebook et Twitter pour d'autres tutoriels et guides gratuits sur WordPress.