Comment créer une fenêtre modale de connexion WordPress (étape par étape)

L'ajout d'une fenêtre modale de connexion WordPress à votre site peut rendre la connexion plus fluide pour vos utilisateurs. Elle permet aux visiteurs de se connecter sans quitter leur page actuelle, ce qui améliore leur expérience globale.

Nous avons vu plusieurs sites Web performants utiliser cette fonctionnalité pour maintenir l'engagement des utilisateurs et améliorer l'interaction sur le site. C'est un moyen simple mais efficace de rationaliser le processus de connexion.

Dans cet article, nous vous guiderons à travers les étapes pour créer une fenêtre modale de connexion WordPress.

Pourquoi créer une fenêtre modale de connexion WordPress ?

Si vous gérez une boutique en ligne, vendez des cours en ligne ou possédez un site d'adhésion, vous autorisez probablement les utilisateurs à s'inscrire et à se connecter à votre site Web.

Habituellement, lorsque les utilisateurs cliquent sur le lien de connexion, ils sont dirigés vers la page de connexion WordPress par défaut ou une autre page de connexion personnalisée sur votre site Web. Une fois que les utilisateurs sont connectés, ils sont à nouveau redirigés vers une autre page.

Malheureusement, cela peut être gênant pour les utilisateurs.

Une fenêtre modale de connexion vous permet d'afficher le formulaire sans envoyer les utilisateurs vers une page différente. Une fois connectés, vous pouvez rediriger les utilisateurs vers la page de votre choix. Le processus étant plus rapide et plus soigné, il peut contribuer à améliorer l'expérience utilisateur et à augmenter vos conversions.

En gardant cela à l'esprit, nous vous montrerons comment créer facilement une fenêtre modale de connexion dans WordPress en utilisant un plugin gratuit et des plugins premium. Vous pouvez simplement cliquer sur les liens ci-dessous pour passer à votre méthode préférée :

• Méthode 1 : Créer une fenêtre modale de connexion à l'aide de Login/Signup Popup
• Méthode 2 : Créer une fenêtre modale de connexion à l'aide de WPForms & OptinMonster
• Astuce bonus : Suivre le parcours utilisateur dans les formulaires de prospects WordPress

Prêt ? Plongeons directement dedans !

Méthode 1 : Créer une fenêtre modale de connexion à l'aide de Login/Signup Popup

Pour la première méthode, nous utiliserons le plugin Login/Signup Popup, un plugin gratuit qui permet à vos utilisateurs de se connecter ou de s'inscrire facilement sur votre site.

Tout d'abord, vous devrez installer et activer le plugin Login/Signup Popup. Si vous avez besoin d'aide, veuillez consulter notre guide sur comment installer un plugin WordPress.

Après l'activation, vous pouvez aller dans Login/Signup Popup » Paramètres depuis le panneau d'administration WordPress.

Sous les paramètres « Général », vous pouvez activer l'enregistrement, la connexion automatique de l'utilisateur ou l'inscription, et gérer la réinitialisation des mots de passe.

En dehors de cela, le plugin vous permet également de sélectionner le rôle utilisateur WordPress qui sera attribué aux nouveaux utilisateurs enregistrés. Par défaut, il attribuera le rôle « Abonné ».

Si vous faites défiler vers le bas, vous verrez plus de paramètres. Par exemple, vous pouvez ajouter une URL de redirection lorsqu'un utilisateur se connecte ou s'inscrit.

N'oubliez pas de cliquer sur le bouton « Enregistrer » si vous avez apporté des modifications.

Ensuite, vous pouvez passer à l'onglet « Style » et modifier votre fenêtre contextuelle de connexion/inscription. Le plugin vous permet de modifier la position de la fenêtre contextuelle, la largeur, la hauteur, la couleur d'arrière-plan, la couleur du texte, et plus encore.

Après cela, vous pouvez également personnaliser les champs du formulaire dans la fenêtre contextuelle.

Allez simplement dans Connexion/Inscription Popup » Champs depuis votre tableau de bord WordPress. Ici, vous pouvez activer différents champs de formulaire, modifier leurs étiquettes, les rendre obligatoires, et plus encore.

En dehors de cela, il existe également une option pour ajouter plus de champs à votre fenêtre contextuelle de connexion/inscription.

Cliquez simplement sur le bouton « + Ajouter un champ » en haut et sélectionnez les champs de formulaire supplémentaires à ajouter à votre fenêtre contextuelle de connexion.

Une fois que vous avez personnalisé les champs du formulaire, vous pouvez maintenant ajouter la fenêtre contextuelle de connexion modale à votre site Web. Le plugin offre différentes manières d'ajouter la fenêtre contextuelle à votre site.

1. Ajouter la fenêtre modale de connexion aux menus

Tout d'abord, vous pouvez accéder à Apparence » Menus depuis votre tableau de bord WordPress.

Après cela, vous pouvez voir les éléments de menu « Fenêtre modale de connexion/inscription ». Sélectionnez simplement les éléments que vous souhaitez afficher et cliquez sur le bouton « Ajouter au menu ».

Pour plus de détails, veuillez consulter notre guide sur comment ajouter un menu de navigation dans WordPress.

2. Ajouter la fenêtre modale de connexion comme liens d'ancrage

Ensuite, vous pouvez ajouter #login ou #register à la fin de l'URL de votre site Web et placer la fenêtre modale de connexion comme lien interne.

Par exemple, votre URL pourrait ressembler à ceci :

<a href="https://www.myawesomesite.com/#login">Login</a>

Pour ce faire, vous pouvez modifier un article ou une page.

Une fois que vous êtes dans l'éditeur de contenu, vous devrez cliquer sur les 3 points et sélectionner l'option « Modifier en HTML ».

Après cela, vous pouvez ajouter le lien interne au texte d'ancrage de connexion.

Vous pouvez en apprendre davantage en suivant notre guide sur comment ajouter des liens d'ancrage dans WordPress.

3. Utiliser des shortcodes pour ajouter la fenêtre modale de connexion

Une autre façon d'ajouter la fenêtre modale de connexion/inscription est d'utiliser des shortcodes.

Vous pouvez simplement entrer le shortcode [xoo_el_action] n’importe où sur votre site pour créer un lien/bouton qui ouvrira la fenêtre contextuelle.

Par exemple, vous pouvez aller dans Apparence » Widgets et ajouter un bloc de widget shortcode pour afficher la fenêtre contextuelle de connexion dans la barre latérale de votre site web.

Une fois que vous avez terminé, cliquez simplement sur le bouton « Mettre à jour ».

Maintenant, vous pouvez visiter votre site web pour voir la fenêtre contextuelle de connexion en action.

Méthode 2 : Créer une fenêtre modale de connexion à l'aide de WPForms & OptinMonster

Cette méthode est idéale pour ceux qui souhaitent un contrôle plus poussé sur la conception et le comportement de leur fenêtre contextuelle de connexion.

L’utilisation de WPForms et OptinMonster ensemble vous offre de puissantes options de conception, des règles d’affichage avancées (comme l’affichage de la fenêtre contextuelle après qu’un utilisateur a cliqué sur un lien spécifique) et une meilleure intégration avec les services de marketing par e-mail.

WPForms est le meilleur plugin de formulaire de contact WordPress, et vous aurez besoin au moins de leur plan Pro pour accéder au module complémentaire « Enregistrement d’utilisateur ».

OptinMonster est le meilleur plugin de fenêtre contextuelle WordPress sur le marché. Il vous aide à convertir les visiteurs de votre site web en abonnés et en clients.

Chez WPBeginner, nous l’avons utilisé plusieurs fois pour créer des fenêtres contextuelles interactives et avons eu une excellente expérience. Pour plus de détails, consultez notre avis complet sur OptinMonster.

Gardez à l’esprit que vous aurez besoin au moins du plan Pro pour accéder à la fonctionnalité MonsterLinks de l’outil que nous présentons dans cet article.

Utiliser WPForms pour créer un formulaire de connexion utilisateur

Tout d'abord, installons et activons le plugin WPForms. Pour plus de détails, vous pouvez consulter notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, vous devrez vous rendre dans WPForms » Réglages depuis votre tableau de bord WordPress et saisir la licence.

Vous trouverez la clé dans votre espace compte WPForms.

Ensuite, allons dans WPForms » Extensions pour installer et activer l'extension 'User Registration Addon'.

Après avoir activé le module complémentaire, vous devrez accéder à WPForms » Ajouter nouveau et créer un nouveau formulaire.

Sur l'écran suivant, vous devrez d'abord nommer votre formulaire.

Ensuite, vous choisirez un modèle de formulaire pré-construit dans la galerie de modèles. Vous pouvez utiliser la barre de recherche pour trouver facilement le modèle « Formulaire de connexion utilisateur ».

Une fois que vous l'avez trouvé, vous pouvez cliquer sur le bouton « Utiliser le modèle ».

Ce modèle de formulaire de connexion contient des champs d'e-mail et de mot de passe qui fonctionneront de manière similaire au formulaire de connexion WordPress par défaut.

Vous pouvez faire glisser et déposer des champs supplémentaires depuis le côté gauche de l'écran selon vos besoins.

Ensuite, vous pouvez cliquer sur le champ « Mot de passe », et les options du champ s'afficheront sur le côté gauche.

Vous pouvez ajouter le code ci-dessous dans la zone de description du champ « Mot de passe » pour afficher des options telles que « mot de passe oublié » et « inscription utilisateur ».

Can't remember your password? <a href="{url_lost_password}">Click here</a>. Don't have an account? <a href="{url_register}">Register here</a>.

Après cela, vous devez cliquer sur le bouton « Enregistrer » pour sauvegarder vos modifications, et vous êtes prêt à publier le formulaire.

Pour commencer, vous pouvez simplement cliquer sur le bouton « Intégrer ».

Une fenêtre contextuelle s'ouvrira avec des options pour ajouter votre formulaire de connexion.

Allez-y et sélectionnez l'option « utiliser un shortcode ». Elle apparaîtra sous forme de lien dans la fenêtre, pas de bouton.

Vous devriez maintenant voir un code d'intégration pour votre formulaire.

Ici, vous voudrez copier le shortcode et le sauvegarder pour une utilisation ultérieure.

Utiliser OptinMonster pour créer une fenêtre contextuelle modale

À ce stade, votre formulaire de connexion est prêt. La prochaine étape consiste à créer la fenêtre contextuelle modale à l'aide d'OptinMonster.

Tout d'abord, vous devrez visiter le site Web OptinMonster et vous inscrire pour obtenir un compte.

Ensuite, vous devrez installer et activer le plugin OptinMonster. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Le plugin agit comme un connecteur entre votre site WordPress et OptinMonster.

Après activation, vous devriez voir l'écran de bienvenue. Cliquez sur le bouton « Connecter votre compte existant ».

Une nouvelle fenêtre va maintenant s'ouvrir.

Cliquez simplement sur le bouton « Se connecter à WordPress ».

Une fois connecté, vous êtes prêt à créer votre fenêtre modale.

Allez simplement dans OptinMonster dans la zone d'administration WordPress et cliquez sur le bouton « Créer votre première campagne ».

Sur l'écran suivant, vous choisirez une campagne et un modèle.

Puisque nous créons une fenêtre modale, sélectionnons « Popup » comme type de campagne.

Quant au modèle, OptinMonster propose de nombreux modèles préconçus afin que vous puissiez rapidement en ajuster un si nécessaire.

Une fois que vous avez sélectionné un modèle, une fenêtre pop-up s'ouvrira. Elle vous demandera d'ajouter un nom à votre campagne.

Après avoir entré un nom, vous pouvez cliquer sur le bouton « Commencer la création ».

Une fois cela fait, vous serez redirigé vers le constructeur de campagnes OptinMonster.

Vous pouvez ajouter différents blocs à votre modèle depuis le menu de gauche. Alors, allez-y et ajoutez le bloc WPForms.

Après cela, vous devriez voir les options du bloc WPForms dans le menu de gauche.

Vous pouvez sélectionner le formulaire de connexion que vous venez de créer dans le menu déroulant « Sélection du formulaire ».

Si vous ne voyez pas votre formulaire, sélectionnez simplement l'option « Ajouter un shortcode manuellement » et entrez le shortcode que vous avez copié précédemment lors de la création du formulaire dans WPForms.

Ne vous inquiétez pas si vous ne pouvez pas prévisualiser votre formulaire dans le constructeur de campagne ; le formulaire apparaîtra lorsque vous publierez la campagne.

Ensuite, vous pouvez vous rendre dans l'onglet « Règles d'affichage ». OptinMonster offre de puissantes options de ciblage.

À partir d'ici, vous voudrez sélectionner la règle d'affichage « MonsterLink™ (Au clic) ».

Après avoir sélectionné l'option, vous devriez voir MonsterLink comme règle d'affichage.

Allez-y et cliquez sur le bouton « Copier le code MonsterLink », puis conservez le lien en lieu sûr. Vous en aurez besoin plus tard.

Maintenant, vous êtes prêt à rendre la campagne active.

Allez simplement dans l'onglet « Publier » en haut du constructeur de campagne. À partir d'ici, vous pouvez définir le « Statut de publication » sur « Publier ».

Une fois que vous avez fait cela, n'oubliez pas de cliquer sur le bouton « Enregistrer » dans le coin supérieur droit pour sauvegarder vos modifications.

Ajout d'une connexion modale dans WordPress

Maintenant, vous pouvez créer une nouvelle page WordPress ou en modifier une existante.

Une fois dans l'éditeur de contenu, vous pouvez cliquer sur le bouton « + » et ajouter un bloc « HTML personnalisé ».

Après cela, vous devrez coller le MonsterLink dans le bloc HTML personnalisé. Il devrait ressembler à ceci :

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">log in or register</a>

Par défaut, le texte du lien dans votre code MonsterLink indiquera « S'inscrire maintenant », car il est souvent utilisé pour les opt-ins par e-mail.

Voici un exemple du code par défaut :

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">Subscribe Now</a>

Puisqu'il s'agit d'un formulaire de connexion, vous voudrez modifier ce texte. Pour ce tutoriel, nous l'avons changé en « se connecter ou s'inscrire », comme vous pouvez le voir dans l'extrait de code ci-dessous.

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">log in or register</a>

Vous pouvez également ajouter le code ci-dessus à vos menus WordPress, à votre barre latérale ou à toute autre zone de votre site.

Assurez-vous simplement de sauvegarder les modifications apportées à la page WordPress et de visiter votre site pour voir la fenêtre de connexion modale en action.

Astuce bonus : Suivre le parcours utilisateur dans les formulaires de prospects WordPress

Maintenant que vous avez appris à créer une fenêtre modale de connexion dans WordPress, examinons comment suivre les parcours des utilisateurs pour vos formulaires WordPress.

Cela peut être particulièrement utile pour votre formulaire de connexion, car cela peut révéler le contenu que les utilisateurs consultent juste avant de décider de se connecter ou de s'inscrire. Ces informations peuvent vous aider à améliorer la navigation et l'expérience utilisateur de votre site.

Savoir ce qui encourage les utilisateurs à remplir des formulaires vous permet de recréer ce processus pour obtenir plus de prospects et développer votre entreprise. Bien que Google Analytics puisse montrer une partie de l'activité des utilisateurs, il ne relie pas le comportement directement à l'utilisateur spécifique qui a soumis le formulaire.

C'est là qu'intervient WPForms. C'est un plugin populaire de création de formulaires qui comprend un module complémentaire « Parcours utilisateur », vous permettant de voir d'où viennent les utilisateurs, quel chemin ils ont emprunté et combien de temps ils ont passé sur chaque page avant de soumettre un formulaire.

Si vous souhaitez en savoir plus, n'hésitez pas à consulter notre guide sur comment suivre le parcours utilisateur sur les formulaires de prospects WordPress.

Foire aux questions (FAQ)

Voici quelques questions fréquemment posées par nos lecteurs concernant l'ajout d'une fenêtre modale de connexion dans WordPress :

Puis-je personnaliser le design de ma fenêtre modale de connexion WordPress ?

Oui, absolument. Les deux méthodes que nous avons abordées offrent des options de personnalisation pour correspondre à la marque de votre site web. Vous pouvez généralement modifier les couleurs, les polices, la taille et ajouter votre propre logo pour créer un aspect cohérent.

Une fenêtre modale de connexion fonctionnera-t-elle sur les appareils mobiles ?

Oui. Les plugins de fenêtre modale modernes comme OptinMonster sont conçus pour être entièrement réactifs. Cela signifie que votre fenêtre modale de connexion s'ajustera automatiquement pour être superbe sur les ordinateurs de bureau, les tablettes et les smartphones.

Les fenêtres modales de connexion ralentissent-elles un site web ?

Lorsque vous utilisez des plugins bien codés et optimisés comme WPForms et OptinMonster, il ne devrait y avoir aucun impact notable sur les performances de votre site. Ces outils sont conçus pour être légers et se charger efficacement.

Puis-je ajouter des boutons de connexion sociale à ma fenêtre modale ?

Certains plugins offrent une fonctionnalité de connexion sociale en tant que fonctionnalité intégrée ou premium. Par exemple, la version pro du plugin Login/Signup Popup prend en charge les connexions sociales. Cela peut rendre encore plus facile la connexion des utilisateurs.

Nous espérons que cet article vous a aidé à apprendre comment créer une fenêtre modale de connexion dans WordPress. Vous pouvez également consulter notre liste complète des meilleurs plugins de page de connexion WordPress et notre guide sur comment rediriger les utilisateurs après une connexion réussie dans 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.