Comment créer une page de connexion personnalisée dans WordPress

Vous souhaitez créer une page de connexion personnalisée pour votre site WordPress ? J'ai déjà mis en place des pages de connexion personnalisées pour plusieurs sites WordPress, et c'est l'un de ces petits changements qui, bien qu'animes, font toute la différence. L'écran de connexion par défaut de WordPress est fade, générique et redirige même vers un site extérieur au vôtre.

La bonne nouvelle ? Vous pouvez la remplacer par une page de connexion entièrement personnalisée et à l'image de votre marque à l'aide d'un seul plugin. Dans ce guide, je vais vous expliquer comment créer une page de connexion personnalisée avec WPForms. Cela comprend la création du formulaire, la personnalisation du design, la publication de la page et la redirection de l'URL de connexion par défaut.

Créez dès maintenant votre page de connexion personnalisée ! 🙂

Pourquoi créer une page de connexion personnalisée dans WordPress ?

Tous les sites WordPress sont livrés avec le même écran de connexion par défaut. Il comporte le logo WordPress, un fond blanc uni, et rien qui indique aux visiteurs sur quel site ils se connectent réellement. Voici pourquoi cela vaut la peine de le modifier :

• Identité visuelle. Une page de connexion personnalisée met en avant votre logo, vos couleurs et vos messages. Chez WPForms, nous utilisons notre page de connexion personnalisée pour présenter les nouvelles fonctionnalités et les mises à jour à nos utilisateurs.
• Sécurité. Lorsque vous créez une page de connexion personnalisée, vous pouvez rediriger la page par défaut wp-login.php URL. Cela permet de réduire les attaques par force brute et le spam de connexion, car les robots ne peuvent pas trouver votre véritable formulaire de connexion. Associez cette mesure à un mot de passe fort Plugins de sécurité WordPress pour une protection encore plus efficace.
• Une image professionnelle. Si votre site permet l'inscription de membres, la connexion de clients ou la création de comptes d'étudiants, une page de connexion personnalisée avec votre logo renforce la confiance. Les visiteurs savent immédiatement qu'ils sont au bon endroit dès qu'ils voient votre logo.

Et voici le meilleur : vous n'avez pas besoin d'un plugin de personnalisation de la page de connexion, d'un constructeur de pages ET d'un plugin de formulaires pour y parvenir. WPForms gère à la fois le formulaire de connexion, la mise en forme visuelle et la création de la page, le tout dans un seul outil.

Comment créer une page de connexion personnalisée dans WordPress

Je vais vous montrer comment créer une page de connexion personnalisée complète à l'aide de WPForms et de son extension « User Registration ». Ce guide couvre tous les aspects : la création du formulaire, l'ajout de votre identité visuelle, la personnalisation de l'apparence, la publication de la page et la redirection de l'URL de connexion par défaut de WordPress afin que les robots ne puissent pas la trouver.

Étape 1 : Installez WPForms et configurez le module complémentaire d'inscription des utilisateurs

Tout d'abord, vous devez avoir installé WPForms Pro sur votre site. C'est l'extension « User Registration » qui vous permet d'accéder aux modèles de formulaires de connexion, d'inscription et de réinitialisation de mot de passe ; elle est disponible à partir de la version Pro.

Si vous ne disposez pas encore de WPForms, procurez-vous-le depuis la page des tarifs et installez-le sur votre site WordPress. Rendez-vous ensuite dans WPForms » Extensions depuis votre tableau de bord.

Recherchez l'extension « User Registration » et cliquez sur le bouton pour l'installer. L'installation est terminée. Avec un plugin et une extension, vous disposez désormais de tout ce dont vous avez besoin pour créer une page de connexion personnalisée, un formulaire d'inscription et un formulaire de réinitialisation de mot de passe.

Obtenez WPForms Pro dès maintenant ! 🙂 .

Étape 2 : Créer un formulaire de connexion personnalisé

Cliquez sur WPForms » Ajouter un nouveau formulaire pour créer votre formulaire de connexion.

Donnez un nom à votre formulaire (par exemple « Formulaire de connexion personnalisé »), puis sélectionnez le modèle « Formulaire de connexion utilisateur ». Ce modèle est spécialement conçu pour la fonctionnalité de connexion et n'apparaîtra pas si l'extension « Inscription utilisateur » n'est pas activée.

Le modèle s'affiche avec trois champs déjà préremplis : Nom d'utilisateur, Mot de passe et Se souvenir de moi.

La case à cocher « Se souvenir de moi » permet aux visiteurs de rester connectés d'une visite à l'autre. C'est un petit détail, mais cela évite aux utilisateurs réguliers de devoir saisir leurs identifiants à chaque fois. Pour plus de détails techniques, consultez la documentation relative au formulaire de connexion.

Vous pouvez utiliser ce modèle tel quel ou le personnaliser davantage. Je vous recommande au minimum d'y ajouter votre identité visuelle, ce que nous allons faire maintenant.

Étape 3 : Ajouter votre identité visuelle et personnaliser le design

Vous pouvez ajouter votre logo, modifier les couleurs, ajuster les polices et personnaliser le style des boutons sans avoir à installer de plugin supplémentaire pour personnaliser la page de connexion. Tout se fait directement dans WPForms et l'éditeur de blocs WordPress.

Ajoutez votre logo ou votre image de marque

Commencez par faire glisser le champ « Contenu » vers le haut de votre formulaire, juste en dessous du titre.

Cliquez sur le champ « Contenu » pour ouvrir le panneau « Options du champ » situé à gauche.

Vous verrez s'afficher un éditeur de texte dans lequel vous pouvez ajouter tout ce que vous souhaitez. Pour insérer votre logo, cliquez sur le bouton « Ajouter un média » et téléchargez l'image de votre marque.

Téléchargez votre logo via la bibliothèque multimédia de WordPress, comme vous le feriez pour n'importe quelle autre image de votre site.

Une fois que votre identité visuelle vous convient, cliquez sur « Enregistrer ». Vous cherchez d'autres idées de conception ? Jetez un œil à ces exemples de pages de connexion pour trouver l'inspiration.

Personnalisez votre formulaire de connexion dans l'éditeur de blocs

Voici un détail que la plupart des autres guides sur les pages de connexion ne mentionnent pas : vous n'avez pas besoin d'un plugin dédié à la mise en forme de votre formulaire de connexion. WPForms intègre une fonctionnalité de mise en forme des formulaires directement dans l'éditeur de blocs WordPress.

Lorsque vous intégrez votre formulaire à une page (nous le ferons à l'étape 5), des options de mise en forme s'affichent dans la barre latérale du bloc WPForms. À partir de là, vous pouvez personnaliser :

• Styles de champ tels que les couleurs d'arrière-plan, les couleurs de bordure et le rayon de bordure
• Styles d'étiquettes, notamment les polices, les tailles et les couleurs
• Propriétés des boutons telles que la couleur d'arrière-plan, la couleur du texte, le rayon de la bordure et la largeur
• Styles généraux pour l'espacement, l'alignement et les arrière-plans des conteneurs

Cela permet de gagner énormément de temps. Au lieu de jongler entre un plugin de personnalisation de la page de connexion pour les couleurs et un plugin de formulaire pour la fonctionnalité de connexion proprement dite, vous pouvez tout gérer dans WPForms.

Pour découvrir toutes les options de mise en forme, consultez le guide sur la personnalisation de vos formulaires dans l'éditeur de blocs. Tant que vous y êtes, personnalisons également le texte du bouton d'envoi.

Dans le générateur de formulaires, accédez à Paramètres » Général et remplacez le texte du bouton « Soumettre » par une mention telle que « Se connecter ».

Étape 4 : Configurer vos paramètres de connexion

Toujours dans le générateur de formulaires, cliquez sur « Paramètres » dans le panneau de gauche. Cliquez ensuite sur « Confirmations » pour définir ce qui se passe après une connexion réussie.

Sur la plupart des sites, vous souhaiterez rediriger les utilisateurs vers une page spécifique une fois qu'ils se sont connectés. Vous pouvez les rediriger vers votre page d'accueil, le tableau de bord de leur compte ou toute autre page. Définissez le type de confirmation sur « Aller à l'URL (redirection) » et saisissez l'URL de destination.

Il y a encore un paramètre qui mérite d'être vérifié. Faites défiler vers le bas et cliquez sur « Inscription utilisateur » pour afficher ces options.

Activez l'option permettant de masquer le formulaire aux utilisateurs connectés. Ainsi, les personnes déjà connectées ne verront pas le formulaire de connexion. Vous pouvez personnaliser le message qui s'affichera à la place.

Cliquez sur « Enregistrer » une fois que vous avez terminé de configurer les paramètres.

Étape 5 : Publier votre page de connexion personnalisée

Votre formulaire de connexion est créé, personnalisé et configuré. Il ne reste plus qu'à l'intégrer à une page. Cliquez sur le bouton « Intégrer » en haut de l'éditeur de formulaire.

Une fenêtre contextuelle vous demandera où vous souhaitez intégrer le formulaire. Cliquez sur « Créer une nouvelle page ».

Donnez un nom à votre page (par exemple « Connexion ») et cliquez sur « C'est parti ».

WordPress ouvre l'éditeur de blocs avec votre formulaire de connexion déjà intégré. C'est également ici que s'affichent les options de mise en forme du bloc définies à l'étape 3, ce qui vous permet d'ajuster les couleurs et les polices directement avant la publication.

Lorsque tout vous convient, cliquez sur « Publier ». Votre page de connexion personnalisée est en ligne et prête à accueillir les utilisateurs enregistrés en quelques minutes seulement !

Étape 6 : Ajouter la page de connexion à votre menu de navigation

Votre page de connexion existe, mais les visiteurs doivent pouvoir la trouver. L'endroit le plus naturel est le menu de navigation de votre site. Rendez-vous dans Apparence » Menus dans votre tableau de bord WordPress.

Si vous avez déjà configuré un menu, recherchez votre page de connexion dans le panneau Pages situé à gauche, puis cliquez sur « Ajouter au menu ».

Faites glisser la page de connexion à l'endroit de votre choix dans l'ordre du menu. La plupart des sites la placent à l'extrême droite de la barre de navigation. Choisissez l'emplacement d'affichage de votre menu (généralement « Menu principal » pour l'en-tête) et cliquez sur « Enregistrer le menu ».

Si votre site ne dispose pas encore de menu, vous devrez d'abord en créer un. Saisissez un nom pour votre menu dans la section « Structure du menu ».

Cliquez sur « Créer un menu » pour le configurer. Ajoutez-y ensuite votre page de connexion en suivant les mêmes étapes que celles que je viens de décrire. Une fois l'enregistrement effectué, rendez-vous sur votre page d'accueil pour vérifier que le lien de connexion s'affiche bien à l'endroit prévu.

Étape 7 : Rediriger l'URL de connexion par défaut de WordPress

Cette étape est facultative, mais je la recommande vivement. Par défaut, n'importe qui peut toujours accéder à yoursite.com/wp-login.php et vous verrez s'afficher l'écran de connexion standard de WordPress.

En redirigeant cette URL vers votre page de connexion personnalisée, vous garantissez une expérience cohérente et rendez votre site plus difficile à cibler pour les robots.

Nous allons utiliser WPCode pour cela. Il s'agit d'un plugin gratuit qui permet d'ajouter des extraits de code à WordPress sans avoir à modifier les fichiers du thème.

Installez et activez WPCode, puis rendez-vous dans « Code Snippets » » + « Ajouter un extrait de code ». Sélectionnez « Ajouter votre code personnalisé (nouvel extrait de code) ».

Donnez à votre extrait un nom tel que « Redirection vers la page de connexion », puis collez-y le code de redirection. Veillez à modifier l'URL dans le code pour qu'elle corresponde à celle de votre page de connexion personnalisée. Cliquez sur « Enregistrer l'extrait ».

Vous verrez un message de confirmation une fois que l'enregistrement aura été effectué avec succès.

Pour finir, activez l'extrait en haut de la page.

Désormais, toute personne qui tente de se rendre sur wp-login.php est alors automatiquement redirigé vers votre page de connexion personnalisée aux couleurs de votre marque.

Bonus : Créer un formulaire personnalisé de réinitialisation de mot de passe

Si votre site permet aux utilisateurs de s'inscrire, vous aurez également besoin d'un formulaire personnalisé de réinitialisation de mot de passe. Sans cela, les utilisateurs qui oublient leur mot de passe sont redirigés vers l'écran de réinitialisation par défaut de WordPress, ce qui nuit à l'expérience de marque que vous venez de créer.

L'extension « User Registration » comprend un modèle de formulaire de réinitialisation du mot de passe utilisateur. Rendez-vous dans WPForms » Ajouter, puis sélectionnez-le.

Vous pouvez personnaliser ce formulaire de la même manière que vous avez personnalisé le formulaire de connexion : ajoutez votre identité visuelle dans le champ « Contenu », mettez-le en forme dans l'éditeur de blocs, puis publiez-le sur sa propre page. Pour un tutoriel détaillé, consultez notre guide sur la personnalisation du formulaire de réinitialisation du mot de passe dans WordPress.

Foire aux questions sur les pages de connexion WordPress personnalisées

Si vous souhaitez créer une page de connexion personnalisée pour WordPress, modifier l'écran de connexion existant de WordPress ou ajouter un formulaire de connexion à n'importe quelle page de votre site, ces réponses abordent les questions les plus courantes.

Puis-je personnaliser la page de connexion WordPress sans avoir à coder ?

Oui. WPForms vous permet de créer et de personnaliser un formulaire de connexion sur mesure entièrement à l'aide de son éditeur par glisser-déposer et de l'éditeur de blocs WordPress. Vous pouvez modifier les couleurs, les polices, le style des boutons et ajouter votre propre identité visuelle sans avoir à écrire une seule ligne de CSS ou de PHP.

Quel est le meilleur plugin pour créer une page de connexion WordPress personnalisée ?

Je vous recommande WPForms Pro avec l'extension « User Registration ». Alors que certains guides suggèrent d'utiliser des plugins distincts pour le formulaire, la mise en forme et la mise en page, WPForms gère ces trois aspects.

Vous disposez ainsi, dans un seul et même pack, de formulaires de connexion, d'inscription et de réinitialisation de mot de passe, ainsi que d'outils de personnalisation visuelle. Pour découvrir plus en détail les options disponibles, consultez notre sélection des meilleurs plugins WordPress pour les pages de connexion.

Comment ajouter un formulaire de connexion à n'importe quelle page dans WordPress ?

Avec WPForms, c'est très simple. Vous pouvez intégrer votre formulaire de connexion à l'aide du bloc WPForms dans l'éditeur de blocs, d'un shortcode ou d'un widget.

Cela signifie que vous pouvez placer un formulaire de connexion sur n'importe quelle page, dans votre barre latérale ou dans votre pied de page. Pour un tutoriel complet, consultez notre guide expliquant comment afficher des formulaires de connexion et d'inscription sur n'importe quelle page.

Est-il sûr de rediriger l'URL de connexion par défaut de WordPress ?

Oui, et c'est en fait une bonne pratique en matière de sécurité. La redirection wp-login.php En redirigeant vers votre page de connexion personnalisée, vous empêcherez les robots et les scripts automatisés qui ciblent l'URL par défaut d'accéder à votre formulaire de connexion.

Assurez-vous simplement que le code de redirection ne s'applique qu'aux requêtes GET, afin que l'envoi POST du formulaire de connexion continue de fonctionner correctement.

Étape suivante : créer une expérience d'inscription complète

Vous disposez désormais d'une page de connexion personnalisée et entièrement à l'image de votre marque pour votre site WordPress. Associée à un formulaire de réinitialisation de mot de passe, elle offre à vos utilisateurs une expérience professionnelle et soignée du début à la fin.

Pour compléter le tout, découvrez comment créer un formulaire d'inscription utilisateur avec WPForms. Et si la sécurité est une priorité, apprenez à empêcher les réinitialisations de mot de passe non autorisées dans WordPress afin de renforcer encore davantage la sécurité.

Créez dès maintenant votre page de connexion personnalisée

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.