Comment ajouter un formulaire de connexion WordPress à n'importe quelle page (4 méthodes)

Ajouter un formulaire de connexion à n'importe quelle page de votre site WordPress peut sembler délicat, surtout si vous n'êtes pas familier avec le codage ou les configurations complexes.

Vous vous demandez peut-être s'il existe un moyen facile de le faire sans casser votre site ou passer des heures à le comprendre. Heureusement, avec le bon outil, comme WPForms, c'est en fait un processus simple.

Dans ce guide, je vous expliquerai comment ajouter un formulaire de connexion à n'importe quelle page de votre site WordPress en quelques clics seulement, ce qui vous permettra de gagner du temps et d'éviter les problèmes techniques.

Créez votre formulaire de connexion WordPress dès maintenant !

Comment créer un formulaire de connexion sur n'importe quelle page WordPress

Il existe plusieurs façons d'ajouter un formulaire de connexion dans WordPress, et le choix de la méthode appropriée dépend du niveau de contrôle dont vous avez besoin sur l'apparence et les fonctionnalités du formulaire. Voici les points que je vais aborder.

Méthode 1 : Utiliser l'assistant d'intégration

C'est le moyen le plus rapide d'ajouter votre formulaire de connexion à une page. Vous n'avez même pas besoin de quitter l'éditeur de formulaires. Une fois que vous avez créé ou modifié votre formulaire, cliquez sur le bouton « Intégrer » situé en haut à droite de l'éditeur.

Une fenêtre contextuelle vous proposera deux options : créer une nouvelle page ou sélectionner une page existante.

Intégrer dans une nouvelle page

Si vous souhaitez créer une nouvelle page pour votre formulaire de connexion, cliquez sur « Créer une nouvelle page ». Entrez un nom pour la page, puis cliquez sur « C'est parti ».

Vous serez directement redirigé vers l'éditeur de page, où votre formulaire sera déjà intégré. Il vous suffira de cliquer sur « Publier » pour le mettre en ligne.

Intégrer à une page existante

Vous disposez déjà d'une page sur laquelle vous souhaitez afficher le formulaire de connexion ? Cliquez sur « Sélectionner une page existante » et choisissez la page dans le menu déroulant.

Cliquez sur « Let’s Go » et vous serez redirigé vers l'éditeur de cette page. À partir de là, vous devrez peut-être ajouter le bloc WPForms à la page (je vous expliquerai comment faire dans la méthode 2). Cliquez sur « Mettre à jour » pour enregistrer vos modifications.

Méthode 2 : Utiliser l'éditeur de blocs

Si vous êtes déjà en train de modifier une page et que vous souhaitez y insérer votre formulaire de connexion, vous pouvez ajouter directement le bloc WPForms. Inutile de retourner dans le générateur de formulaires.

Ouvrez la page sur laquelle vous souhaitez insérer votre formulaire. Cliquez sur le bouton « + » pour ouvrir l'outil d'insertion de blocs, puis recherchez « WPForms ». Cliquez sur le bloc WPForms pour l'ajouter à votre page, puis sélectionnez votre formulaire de connexion dans le menu déroulant.

Votre formulaire s'affichera directement dans l'éditeur. Cliquez sur « Publier » ou « Mettre à jour » lorsque vous êtes prêt.

Vous pouvez répéter cette opération sur autant de pages que vous le souhaitez. Toutes les soumissions de connexion sont toujours regroupées au même endroit, sous WPForms » Entrées. Pour consulter la liste complète des options d'intégration, consultez la documentation relative à l'affichage des formulaires sur votre site.

Configurer les paramètres du bloc WPForms

Une fois le formulaire ajouté, vous verrez apparaître des paramètres supplémentaires dans le panneau latéral droit.

Voici les paramètres que vous pouvez modifier :

• Afficher le titre et la description: cochez ces cases pour afficher le nom et la description du formulaire au-dessus des champs du formulaire.
• Personnalisation des formulaires: WPForms vous permet de personnaliser vos formulaires directement dans l'éditeur de blocs sans avoir à écrire de code CSS. Vous pouvez modifier visuellement la taille des champs, les couleurs et le style des boutons.
• Pour les utilisateurs avancés: ajoutez des classes CSS personnalisées si vous souhaitez mieux contrôler l'apparence du formulaire.

Méthode 3 : Utiliser un shortcode

WPForms génère un shortcode unique pour chaque formulaire que vous créez. Cela s'avère utile si vous utilisez l'éditeur classique, un thème qui ne prend pas entièrement en charge les blocs, ou toute autre zone acceptant les shortcodes.

Pour trouver le shortcode de votre formulaire, rendez-vous dans WPForms » Tous les formulaires dans votre tableau de bord. Vous verrez le shortcode indiqué à côté de chaque formulaire. Il se présente comme suit :

Copiez le shortcode, ouvrez la page ou l'article où vous souhaitez afficher votre formulaire de connexion, ajoutez un bloc « Shortcode », collez-le, puis cliquez sur « Publier » ou « Mettre à jour ».

Vous pouvez également intégrer votre formulaire de connexion à l'aide de ce shortcode dans des widgets de texte, des zones de barre latérale et partout ailleurs où les shortcodes sont pris en charge.

Méthode 4 : Utiliser un widget (barre latérale ou pied de page)

Vous souhaitez que votre formulaire de connexion soit visible sur toutes les pages de votre site ? L'ajouter à une barre latérale ou au pied de page sous forme de widget est une excellente solution.

Les visiteurs peuvent se connecter depuis n'importe où sans avoir à rechercher une page de connexion spécifique. Rendez-vous dans Apparence » Widgets dans votre tableau de bord WordPress.

Recherchez la section « Barre latérale principale ». Si votre thème ne prend pas en charge les barres latérales, cette option n'apparaîtra pas. Cliquez sur le bouton « + » et recherchez WPForms.

Cliquez sur le bloc WPForms pour l'ajouter, puis sélectionnez votre formulaire de connexion dans le menu déroulant.

Vous verrez un aperçu du formulaire directement dans la zone du widget.

Vous pouvez faire de même pour votre pied de page. Faites défiler vers le bas jusqu'à la zone de widgets « Barre de pied de page », ajoutez le bloc WPForms, puis sélectionnez votre formulaire de connexion.

Cliquez sur « Mettre à jour » lorsque vous avez terminé. Voici à quoi ressemble un formulaire de connexion dans une barre latérale :

Et le voici dans le pied de page :

Si vous utilisez un thème basé sur des blocs avec la fonctionnalité « Édition complète du site », rendez-vous plutôt dans Apparence » Éditeur. Ouvrez la partie du modèle correspondant à votre barre latérale ou à votre pied de page, puis ajoutez-y le bloc WPForms.

Bonus : Créer un formulaire d'inscription

Maintenant que votre site dispose d'un formulaire de connexion, vous souhaiterez sans doute également mettre en place un formulaire d'inscription afin que les nouveaux visiteurs puissent créer un compte. WPForms gère cela grâce au même module complémentaire « Inscription d'utilisateurs » que vous avez configuré précédemment.

Vous pouvez créer un formulaire d'inscription personnalisé avec les champs de votre choix et l'intégrer à l'aide de l'une des méthodes décrites ci-dessus. Pour un tutoriel complet, consultez ce guide sur la création d'un formulaire d'inscription utilisateur dans WordPress.

Une fois votre page d'inscription créée, vous devrez l'ajouter au menu de navigation de votre site afin que les visiteurs puissent la trouver. Dans votre tableau de bord WordPress, rendez-vous dans Apparence » Menus.

Si vous n'avez pas encore de menu, donnez-lui un nom et cliquez sur « Créer un menu ».

Dans la section « Pages » à gauche, cliquez sur « Tout afficher » pour voir toutes vos pages publiées. Cochez les cases correspondant à vos pages de connexion et d'inscription, puis cliquez sur « Ajouter au menu ».

Faites glisser et déposez les éléments du menu pour les organiser comme vous le souhaitez.

Sélectionnez un emplacement d'affichage (par exemple, le menu principal), puis cliquez sur « Enregistrer le menu ».

Vos pages de connexion et d'inscription figurent désormais dans le menu principal de votre site.

Si vous utilisez un thème basé sur des blocs, ajoutez plutôt ces pages via Apparence » Éditeur. Ouvrez votre modèle d'en-tête, sélectionnez le bloc Navigation, puis ajoutez-y les liens.

Conseils pour améliorer votre page de connexion WordPress

• Configurer les redirections après connexion: ne redirigez pas les utilisateurs vers la page d'accueil une fois qu'ils se sont connectés. Dirigez-les vers une page utile, comme la page de leur compte ou un tableau de bord réservé aux membres. Voici un guide complet sur la configuration des redirections après inscription dans WordPress.
• Ajoutez une protection anti-spam: les formulaires de connexion sont la cible d'attaques par force brute. Si vous utilisez WPForms, vous pouvez activer le CAPTCHA, configurer des règles anti-spam ou utiliser le honeypot intégré. Ces astuces simples pour éliminer les inscriptions d'utilisateurs indésirables fonctionnent également pour les formulaires de connexion.
• Personnalisez l'apparence: un formulaire de connexion standard fait l'affaire, mais l'adapter à l'identité visuelle de votre site fait meilleure impression. Vous pouvez personnaliser l'identité visuelle de votre formulaire de connexion en choisissant vos propres couleurs, logos et mises en page. Jetez un œil à ces exemples de pages de connexion pour trouver l'inspiration.

Foire aux questions sur l'ajout d'un formulaire de connexion WordPress à n'importe quelle page

L'ajout d'un formulaire de connexion WordPress à n'importe quelle page est l'une des demandes les plus courantes de la part des propriétaires de sites proposant des abonnements, des cours en ligne ou des forums communautaires. Voici les questions qui me sont le plus souvent posées.

Comment ajouter un formulaire de connexion à une page WordPress ?

La méthode la plus simple consiste à utiliser WPForms Pro avec l'extension « User Registration ». Créez un formulaire de connexion dans le générateur, puis intégrez-le à n'importe quelle page à l'aide de l'assistant d'intégration, de l'éditeur de blocs, d'un shortcode ou d'un widget. Vous pouvez également utiliser le bloc « Connexion/Déconnexion » intégré à WordPress pour une approche plus simple.

Comment rediriger le login WP vers une autre page ?

Avec WPForms, accédez au formulaire de connexion de votre Paramètres » Confirmations et définissez la page de redirection. Vous pouvez créer différentes redirections en fonction des rôles des utilisateurs à l'aide d'une logique conditionnelle. Si vous utilisez wp_login_form(), transmettre un redirect paramètre avec l'URL de destination.

Quelle est la différence entre un formulaire de connexion et un formulaire d'inscription ?

Un formulaire de connexion permet aux utilisateurs existants de se connecter à leur compte à l'aide d'un nom d'utilisateur et d'un mot de passe. Un formulaire d'inscription permet aux nouveaux visiteurs de créer un compte. La plupart des sites ont besoin des deux, et WPForms permet de créer ces deux types de formulaires à l'aide du même module complémentaire « Inscription des utilisateurs ».

Puis-je attribuer différents rôles aux utilisateurs en fonction des réponses au formulaire ?

Oui. WPForms vous permet d'attribuer des rôles d'utilisateur de manière conditionnelle, en fonction de la manière dont les utilisateurs remplissent votre formulaire d'inscription. Cela vous offre un meilleur contrôle sur les autorisations et les niveaux d'accès sur votre site.

Ensuite, personnalisez votre page de connexion

Voilà donc cinq façons différentes d'ajouter un formulaire de connexion WordPress à n'importe quelle page de votre site. Maintenant que votre formulaire de connexion est en ligne, voici quelques actions que vous pourriez envisager de mener ensuite :

• Personnalisez l'apparence de votre formulaire de connexion avec des couleurs, des logos et des mises en page personnalisées
• Configurez des redirections d'inscription pour diriger les utilisateurs vers la page souhaitée
• Éliminez les inscriptions indésirables grâce au CAPTCHA et aux outils anti-spam

Créez votre formulaire de connexion WordPress dès 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.