Vous souhaitez personnaliser la page de connexion de votre site WordPress ? Avec WPForms, vous disposez de nombreuses façons de styliser vos formulaires de connexion, sans avoir besoin de coder !

Dans cet article, nous vous présenterons 7 exemples de pages de connexion de sites populaires, et comment les recréer. Nous vous guiderons dans le processus de création de chaque formulaire dans le même style que les exemples que nous présentons ici, en quelques clics de souris.

Plongeons dans le vif du sujet !

Créez votre page de connexion maintenant

Que faut-il écrire sur une page de connexion ?

Votre page de connexion contient probablement quelques champs où les utilisateurs saisissent leur nom d'utilisateur, leur adresse e-mail, leur mot de passe, etc.

La page de connexion de votre site est un endroit où les utilisateurs du site Web saisissent leurs identifiants pour accéder à votre site. Ces visiteurs peuvent avoir un compte sur votre site, ou une autre raison de se connecter à votre site Web.

Vous voudrez probablement inclure une forme de texte sur votre page de connexion, afin d'informer ou de guider les utilisateurs de votre site Web sur la façon d'accéder au site. Vous pourriez également ajouter des images telles que des logos et des illustrations à votre connexion, et vous pouvez opter pour des fonctionnalités de sécurité supplémentaires pour empêcher le spam indésirable d'encombrer votre page de connexion.

7 exemples de pages de connexion

1. Formulaire de connexion simple

Cette page de connexion sur le site Web de HubSpot est assez basique et sans beaucoup de détails inclus sur le formulaire. Le formulaire se compose simplement d'un champ e-mail, d'un mot de passe, d'une case à cocher et d'un bouton de connexion.

La particularité d'un formulaire comme celui-ci est qu'il ressemble à la base de tous les autres exemples de formulaires de connexion. Il contient les éléments les plus basiques nécessaires à une page de connexion.

Et, si vous préférez, votre propre page de connexion peut également être simplifiée comme celle-ci. WPForms est le meilleur plugin de création de formulaires pour WordPress, et il vous permet d'ajouter très facilement une page de connexion personnalisée à votre site Web.

Tout d'abord, vous devrez installer WPForms et vous inscrire au plan Pro pour accéder au module complémentaire d'inscription des utilisateurs.

Après avoir saisi votre clé de licence dans les paramètres de WPForms, accédez à WPForms » Modules complémentaires dans votre tableau de bord. Faites défiler les modules complémentaires disponibles pour trouver le module complémentaire d'inscription des utilisateurs, que vous installerez également. Assurez-vous également d'activer le module complémentaire une fois que vous l'avez installé.

Vous êtes maintenant prêt à créer votre formulaire de connexion. Accédez à WPForms » Nouveau et trouvez le modèle Formulaire de connexion utilisateur parmi vos modèles de modules complémentaires disponibles. Cliquez sur le bouton Utiliser le modèle pour sélectionner ce modèle et ouvrir le constructeur de formulaires.

Le constructeur de formulaires WPForms vous permet de modifier facilement ce modèle prédéfini pour répondre à vos besoins. Vous y trouverez une sélection étendue de champs de formulaire qui couvrent pratiquement tous les éléments que vous souhaiteriez sur votre formulaire en ligne. Il vous suffit de faire glisser et déposer chaque champ à sa place.

Vous verrez que le formulaire de connexion utilisateur a déjà chargé les champs nécessaires.

Mais, comme tous les modèles WPForms, ce formulaire est hautement personnalisable, vous pouvez donc ajouter et modifier des champs sur votre formulaire de différentes manières.

Pour ce formulaire, modifions le bouton de soumission en bas du formulaire pour qu'il affiche « Connexion » comme dans l'exemple de la page de connexion HubSpot.

Cliquez simplement sur le bouton pour développer ses paramètres.

Ensuite, pour changer le texte du bouton, ouvrez l'onglet Général, et faites défiler jusqu'à la zone Texte du bouton de soumission.

Maintenant, tapez ce que vous souhaitez que le bouton affiche, par exemple « Connexion ».

En regardant à nouveau le formulaire, le bouton en bas du formulaire correspond mieux à la nature de connexion de cette page.

Et c'est tout ce que vous devez faire pour créer un formulaire de connexion de base comme celui utilisé sur la page de connexion HubSpot.

À partir d'ici, allez-y et Enregistrez ce formulaire.

Une fois enregistré, ce formulaire sera disponible sur la page Tous les formulaires de WPForms dans votre tableau de bord WordPress.

Vous avez maintenant un formulaire de connexion simple que vous pouvez publier rapidement sur votre site, ou que vous pouvez utiliser comme base pour créer des pages de connexion plus détaillées. Ce sont les étapes de base requises pour tous les exemples de pages de connexion abordés ici.

2. Formulaire de connexion avec texte d'instruction

Jetez un œil à la page de connexion de WordPress.org. Comme le premier exemple que nous avons couvert, celui-ci est assez basique.

Mais il a un extrait de texte d'instruction en haut, et votre formulaire peut en avoir aussi.

Comme nous l'avons mentionné, chaque formulaire créé ici nécessite d'abord le modèle de formulaire de connexion utilisateur, y compris celui-ci. Allez-y et sélectionnez à nouveau le modèle.

Ensuite, dans le constructeur de formulaire, faites glisser le champ Contenu en haut du formulaire et déposez-le là.

Comme nous l'avons dit précédemment, vous pouvez faire glisser et déposer ce champ sur votre formulaire où vous le souhaitez.

Mais pour ressembler au texte d'instruction sur la page de connexion ci-dessus, plaçons le champ en haut.

Cliquez sur le champ pour ouvrir ses options personnalisables, situées sur le côté gauche de l'écran. Ensuite, utilisez l'éditeur de texte pour taper le texte d'instruction que vous souhaitez afficher dans ce champ.

Comme dans l'exemple ci-dessus, vous pouvez indiquer aux utilisateurs comment saisir leurs informations pour se connecter à votre site Web.

De nombreuses options sont à portée de main grâce à l'éditeur de texte, avec des styles de police personnalisables, des couleurs, et plus encore, tous disponibles dans ce champ.

Par exemple, regardez à nouveau la page de connexion HubSpot de l'exemple 1. Remarquez qu'il y a un très court extrait de texte d'instruction. Le texte d'instruction se lit : « Vous n'avez pas de compte ? Inscrivez-vous » et fournit un lien vers une page où les utilisateurs peuvent créer un compte.

Ceci est également possible avec l'éditeur de texte du champ Contenu de votre formulaire.

Tout d'abord, tapez votre texte d'instruction, et surlignez la partie que vous souhaitez lier. Ensuite, cliquez sur l'icône de lien dans la barre d'outils de l'éditeur de texte.

Maintenant, vous insérerez l'URL de la page sur laquelle vous souhaitez que les utilisateurs atterrissent. Cliquez sur OK une fois terminé.

Et voilà ! Vous avez maintenant du texte d'instruction, et un lien, sur votre formulaire.

Comme toujours, enregistrez votre formulaire pour plus tard ou intégrez-le sur une page. Nous partagerons les détails sur la façon de publier lorsque vous serez prêt pour que la page de connexion soit mise en ligne sur votre site à la fin de cet article.

3. Formulaire de connexion avec image d'en-tête

Une autre façon de personnaliser le formulaire de connexion utilisateur pour votre page de connexion est d'ajouter une image d'en-tête de votre choix. L'utilisation d'une image en haut de votre formulaire est un bon moyen de personnaliser votre formulaire, ou de compléter le style de votre site Web.

Pour ajouter une image d'en-tête, vous utiliserez à nouveau le champ Contenu et le modèle de formulaire de connexion utilisateur. Faites glisser et déposez ce champ en haut de votre formulaire comme avant.

Mais cette fois, cliquez sur le bouton Ajouter un média au-dessus de l'éditeur de texte.

Maintenant, vous téléchargerez une image de votre choix, qui apparaîtra au-dessus du texte dans l'éditeur de texte.

Vous pouvez également supprimer le texte cette fois si vous le souhaitez, et travailler uniquement avec l'image.

Cliquez sur l'image pour accéder à ses Paramètres d'affichage et positionnez l'image comme vous le souhaitez.

Pour que l'image de notre exemple agisse comme une véritable image d'en-tête, nous centrerons l'alignement et sélectionnerons la version pleine taille. Vous pouvez ajuster ces paramètres plusieurs fois pour trouver ce que vous préférez.

Assurez-vous de cliquer sur le bouton bleu Mettre à jour pour appliquer les modifications.

Vous pouvez également explorer les autres onglets de paramètres pour plus d'options, telles que la modification de la Taille du champ dans l'onglet Avancé.

Essayez la taille de champ Grande pour voir votre image affichée encore plus grande en haut de votre formulaire, à la manière d'une véritable image d'en-tête.

Encore une fois, assurez-vous d'enregistrer votre formulaire pour plus tard. Et pour plus de conseils liés à cet exemple, consultez cet article complet sur l'ajout d'une image d'en-tête à vos formulaires.

4. Formulaire de connexion avec un logo d'entreprise

Jetons un coup d'œil à la page de connexion SendLayer. En haut du formulaire, au-dessus du texte d'instruction que nous avons couvert précédemment, se trouve le logo du site Web.

Vous pouvez également ajouter un logo à votre formulaire en utilisant à nouveau le champ Contenu de votre formulaire de connexion utilisateur.

Vous vous souvenez comment vous avez utilisé le champ Contenu pour télécharger une image d'en-tête ? Pourquoi ne pas utiliser un processus similaire pour afficher un logo ? Grâce au constructeur de formulaires, vous avez plusieurs options pour placer des logos sur votre formulaire.

Faites simplement glisser le champ Contenu là où vous le souhaitez sur votre formulaire.

Pour ressembler à l'exemple ci-dessus, plaçons le logo en haut du formulaire. Et comme il s'agit un peu d'une image d'en-tête, un logo de style horizontal pourrait être le plus approprié ici.

N'oubliez pas de simplement cliquer sur le bouton Ajouter un média du champ Contenu pour télécharger votre logo.

Et n'oubliez pas les paramètres supplémentaires. Vous voudrez peut-être centrer le logo, le rendre pleine taille, ou changer la taille du champ dans les paramètres avancés.

Vous pouvez également modifier le texte sous le logo comme nous l'avons vu dans l'exemple du texte d'instruction, ce qui ferait que votre formulaire ici ressemblerait étroitement à l'exemple.

Votre page de connexion affiche maintenant clairement votre logo sur votre formulaire. N'hésitez pas à ajouter un autre logo en bas, ou partout ailleurs où vous aimeriez faire glisser le champ Contenu !

5. Formulaire de connexion avec illustration

Prenons maintenant note de la page de connexion de TrustPulse. Ce formulaire de connexion présente les identifiants saisis d’un côté de l’écran avec un petit logo au-dessus, et une grande illustration affichée de l’autre côté.

Vous aussi, vous pouvez créer un formulaire qui ressemble à ceci en utilisant le champ Mise en page et le champ Contenu ensemble.

Tout d’abord, faites glisser le champ Mise en page sur votre formulaire de connexion utilisateur.

Peu importe où vous faites glisser le champ Mise en page pour le moment, car vous ferez finalement glisser les champs préchargés du formulaire dans le champ Mise en page lui-même.

Pour l’instant, faisons-le simplement glisser en haut du formulaire pour rester organisé. Vous sélectionnerez également l’orientation des colonnes dans la mise en page, ce qui déterminera la taille et le placement du contenu dans ce champ.

Maintenant, faites glisser le champ Contenu dans la première colonne du champ Mise en page sur votre formulaire, afin de pouvoir afficher un logo ici comme dans l’exemple TrustPulse.

Utilisez le bouton Ajouter un média pour télécharger à nouveau votre logo, puis assurez-vous que les paramètres de l’image l’orientent et la dimensionnent comme vous le souhaitez.

Ensuite, faites glisser et déposez les autres champs du formulaire dans ce côté du champ Mise en page.

Il suffit de saisir chaque champ avec votre souris, de le faire glisser dans la colonne Mise en page, et de le déposer. Le champ E-mail, le champ Mot de passe et la case à cocher seront maintenant dans la colonne de gauche de votre formulaire.

Maintenant, vous ajouterez du contenu à l’autre colonne du champ Mise en page.

Sélectionnez à nouveau le champ Contenu et faites-le glisser vers la colonne la plus grande sur le côté droit de votre formulaire.

Vous pouvez maintenant ajouter une illustration de votre choix à afficher largement sur ce côté de votre formulaire.

Cliquez sur le bouton Ajouter un média comme vous l’avez fait de l’autre côté pour télécharger une illustration.

Et, une fois de plus, assurez-vous d’ajuster les paramètres du champ pour personnaliser la taille et le placement de votre illustration.

Pour une grande illustration comme dans l’exemple, vous voudrez peut-être supprimer tout texte supplémentaire du champ Contenu.

Et maintenant, votre formulaire présente le petit logo et les entrées d’identifiants d’un côté, et une grande illustration affichée de l’autre côté.

Comme toujours, vous devrez enregistrer ce formulaire pour le conserver dans WPForms sur votre tableau de bord, puis l’intégrer sur une page WordPress lorsque vous serez prêt à l’utiliser.

6. Formulaire de connexion avec CTA

Ensuite, nous examinerons la page de connexion d’ExactMetrics, qui est quelque peu similaire à la connexion précédente, mais avec un bouton d’appel à l’action d’un côté du formulaire au lieu d’une illustration.

Un côté a un petit logo, une entrée d’e-mail, une entrée de mot de passe et un bouton de connexion, et l’autre côté a pas mal de texte, suivi d’un CTA cliquable.

Pour créer un look similaire avec votre propre formulaire, il vous suffit de suivre les étapes que nous avons couvertes dans l’exemple précédent : d’abord ajouter le champ Mise en page à votre formulaire de connexion utilisateur, et faire glisser les champs d’un côté ou d’une colonne de la mise en page.

N’oubliez pas que vous faites simplement glisser le champ Contenu dans la Mise en page pour télécharger votre logo, puis faites glisser les champs restants du formulaire dans ce côté de la Mise en page également.

Mais ensuite, pour l'autre côté du champ Mise en page, dans la deuxième colonne, ne vous souciez pas de télécharger quoi que ce soit. Vous allez simplement modifier le texte qui se trouve déjà ici.

Remarquez comment une partie du texte préchargé est plus grande et plus audacieuse que ce qui se trouve en dessous, similaire au style de texte de l'exemple.

Cela permet de façonner facilement votre texte comme celui de l'exemple, mais n'oubliez pas toutes les autres façons d'utiliser l'éditeur de texte à votre avantage. Vous pouvez modifier la taille, l'orientation, la couleur du texte, et plus encore, selon vos besoins.

Et dans l'éditeur de texte du champ Contenu, vous pouvez même insérer un extrait de code pour créer un bouton CTA.

Cliquez sur l'onglet Texte de la boîte de l'éditeur de texte pour copier et coller le code que vous souhaitez utiliser pour créer un bouton.

Vous pouvez modifier votre extrait de code pour styliser l'apparence de votre bouton CTA comme vous le souhaitez.

Vous avez maintenant un bouton CTA sur votre formulaire !

Encore une fois, vous devrez enregistrer ce formulaire, puis l'intégrer sur une page WordPress lorsque vous serez prêt à l'utiliser.

7. Formulaire de connexion avec reCAPTCHA

Maintenant que nous avons exploré les moyens les plus complexes de styliser un formulaire de connexion, examinons l'un des éléments de sécurité les plus faciles à ajouter à votre formulaire, où que vous le souhaitiez.

La vérification reCAPTCHA aide à protéger votre site Web WordPress contre les robots et le spam qui tenteraient d'utiliser vos formulaires pour accéder à votre site.

Comme vous pouvez le voir, nous l'utilisons sur notre propre page de connexion ici chez WPForms.

Vous pouvez facilement ajouter un champ reCAPTCHA à n'importe lequel de vos formulaires de connexion, également. Mais d'abord, vous devrez le configurer dans vos paramètres WPForms.

Depuis votre tableau de bord WordPress, accédez à WPForms, puis à Paramètres. Ensuite, assurez-vous d'être sur l'écran CAPTCHA.

Sélectionnez l'option reCAPTCHA au milieu de l'écran.

Vous choisirez ensuite le type de vérification reCAPTCHA que vous souhaitez utiliser.

Sélectionnons le reCAPTCHA v2 avec case à cocher.

Ensuite, vous devrez saisir une Clé de site et une Clé secrète sur cette page de paramètres, fournies par Google. Pour recevoir ces clés, vous devez suivre le processus de configuration dans la console d'administration reCAPTCHA de Google.

Pour plus d'informations, ainsi qu'un tutoriel détaillé sur la façon de procéder, consultez notre article sur  la configuration et l'utilisation de reCAPTCHA avec vos formulaires WordPress.

N'oubliez pas de cliquer sur Enregistrer en bas de cet écran afin d'appliquer ces paramètres à votre champ reCAPTCHA.

Vous êtes maintenant prêt à ajouter la vérification reCAPTCHA à votre formulaire.

De retour sur la page de création du formulaire, il vous suffit de cliquer sur le champ reCAPTCHA pour l'activer sur votre formulaire de connexion utilisateur.

Et voilà ! Votre formulaire de connexion est maintenant protégé contre les robots et le spam qui pourraient autrement infiltrer votre site.

De plus, l'icône reCAPTCHA est ensuite affichée sur votre formulaire, ce qui indique à vos utilisateurs que leurs informations sont sécurisées.

Comment ajouter une page de connexion personnalisée à WordPress

L'avantage du constructeur de formulaires WPForms est que toutes les options personnalisables et les choix de style inspirés de ces exemples peuvent être créés directement sur le formulaire.

Cependant, certains des styles obtenus dans ces exemples peuvent résulter d'une édition supplémentaire sur la page de connexion.

Ainsi, pour des conseils plus approfondis sur la façon d'obtenir encore plus de style avec WPForms sur votre page WordPress, consultez cet article complet sur la façon de styliser les formulaires avec CSS.

De plus, gardez à l'esprit qu'avec tous vos formulaires créés et les exemples que nous avons abordés ici, vous devrez enregistrer le formulaire une fois que vous aurez terminé de le modifier. Ensuite, peut-être plus tard si nécessaire, vous pourrez intégrer le formulaire sur une page et le publier lorsque vous serez prêt.

Ou, depuis le constructeur de formulaires, vous pouvez intégrer votre formulaire sur une page dès maintenant.

En cliquant sur Intégrer, vous pouvez soit intégrer votre formulaire de connexion sur une page que vous avez déjà créée pour votre site Web, soit créer une nouvelle page dès maintenant pour ce formulaire de connexion.

Si vous décidez de créer une nouvelle page, vous devrez nommer la page, tout comme les autres pages de votre site Web sont nommées afin que vous puissiez les trouver facilement dans le tableau de bord WordPress.

Cliquez sur C'est parti ! pour continuer. WPForms ajoutera automatiquement votre formulaire de connexion à votre nouvelle page.

Une fois votre formulaire intégré, vous pouvez toujours modifier quelques éléments supplémentaires sur la page WordPress elle-même en accédant aux paramètres du bloc WPForms et en modifiant d'autres éléments de style de la page.

Consultez cet article pour plus d'idées sur comment modifier et personnaliser votre page de connexion WordPress.

Et rappelez-vous que, comme toutes vos pages WordPress, vous devrez publier la page avec votre formulaire intégré pour la mettre en ligne sur votre site Web.

Vous pouvez également prévisualiser la page avant de la publier, ou enregistrer le brouillon pour plus tard.

Pour en savoir encore plus sur ce sujet, consultez ce tutoriel couvrant comment afficher les formulaires de connexion et d'inscription.

Créez votre page de connexion maintenant

Ensuite, créez un formulaire d'inscription avec PayPal

Maintenant que vous avez tout appris sur la création de formulaires de connexion pour votre site Web WordPress, pourquoi ne pas essayer de créer un formulaire d'inscription WordPress avec PayPal ? Ainsi, vous pourrez enregistrer les utilisateurs de votre site Web et commencer à collecter des paiements.

Si vous souhaitez une impression de vos entrées de formulaire, nous vous recommandons de consulter notre guide sur l'impression des formulaires WordPress en PDF.

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

Si cet article vous a aidé, veuillez nous suivre sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.