Comment créer une belle page de connexion personnalisée pour votre site Web

La page de connexion, tout comme la page de destination d’un site Web, est très importante pour les propriétaires d’entreprise qui souhaitent convertir le trafic. Tout comme la page de destination, la page de connexion doit être sophistiquée pour que les visiteurs puissent simplement fournir leurs coordonnées sans trop de tracas.

La plupart des meilleures pages de connexion sont simples, elles ont utilisé un style minimaliste sans publicité ni gadgets marketing ; juste la forme de connexion avec une image d’arrière-plan ou deux.

Il existe plusieurs façons de créer des pages de connexion qui attirent les visiteurs et les encouragent à revenir.

• Si vous maîtrisez bien le codage (HTML et CSS simples ), vous devriez pouvoir créer une page de connexion simple mais attrayante avec quelques codes de base.
• Pour les débutants, il est plus facile de personnaliser la page de connexion fournie avec le modèle du créateur de site Web. La plupart des constructeurs de sites Web et des modèles (WordPress, Weebly, Shopify, Joomla et autres) sont livrés avec des modèles prêts à l’emploi, et tout ce que vous avez à faire est de les modifier pour répondre à vos besoins.
• Vous pouvez également utiliser des plugins et des thèmes simples pour créer une page de connexion. Les plugins sont bons car ils vous permettent de personnaliser votre page de connexion en un clic. Ils peuvent être utilisés par les débutants ainsi que par les concepteurs de sites Web expérimentés.

La méthode que vous choisirez pour personnaliser la page de connexion de votre site Web sera déterminée par votre niveau de compétence. Alors que le codage peut être une bonne méthode pour une personne, une autre peut ne pas savoir où placer quel code. Les plugins sont bons, mais certains sont premium.

Lisez la suite pour savoir comment vous pouvez créer et personnaliser une belle page de connexion.

Utiliser du HTML/CSS simple

La création et la personnalisation d’un formulaire de connexion en HTML et CSS se fait en trois étapes simples: gérer le balisage HTML, positionner les différents éléments du formulaire de connexion et enfin, styliser les différents éléments pour les rendre attrayants.

Balisage HTML

Ici, vous allez ajouter des balises HTML simples pour créer le formulaire réel. La partie HTML se compose d’un conteneur, du formulaire lui-même et de quelques autres entrées. En saisissant correctement le code, vous pourrez créer un formulaire de connexion simple avec une partie nom d’utilisateur, une partie mot de passe, une case à cocher et un bouton de connexion. Les composants, cependant, ne sont pas bien agencés.

<div id="container">
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="
username">
<label for="password">Password:</label>
<input type="password" id="password" name
="password">
<div id="lower">
<input type="checkbox"><label for="checkbox
">Keep me logged in</label>
<input type="submit" value="Login">
</div>
</form>
</div>

Positionnement des éléments

Vous pouvez ensuite styliser les différentes parties du formulaire en ajoutant un code simple comme celui ci-dessous. Cela placera les différents composants dans différentes positions.

html, body {
width: 100 %;
height: 100 %;
font-family: "Helvetica Neue", Helvetica, sans
-serif;
color: # 444 ;
-webkit-font-smoothing: antialiased;
background: #f0f0f0;
}

Après cela, vous pouvez positionner les différents éléments de votre page de connexion selon vos spécifications. Tout d’abord, vous devrez spécifier les éléments de base, tels que la couleur de la police, puis positionner le formulaire au centre de votre page pour l’équilibre. Ici, vous pouvez ajouter n’importe quelle couleur de police que vous aimez, ce que vous considérez comme beau. Cependant, il est toujours conseillé de veiller à ce que le formulaire reste simple afin de ne pas dérouter les visiteurs.

#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50%;
left: 50%;
margin-top: -140 px;
margin-left: -170 px;
}

À ce stade, la forme peut encore sembler bancale et vous pouvez l’améliorer en ajoutant un peu de style structurel. Pour cela, commencez par vous assurer que les éléments de votre formulaire de connexion ne sont pas écrasés et sont facilement lisibles. Vous pouvez ajouter le code suivant pour vous assurer que la propreté de votre formulaire.

form {
margin: 0 auto;
margin-top: 20 px;
}
label {
color: # 555 ;
display: inline-block;
margin-left: 18 px;
padding-top: 10px;
font-size: 14px;
}

Votre formulaire de connexion sera désormais simple et presque complet avec les différents éléments bien positionnés. Cependant, vous devez styliser les différentes zones de saisie de votre formulaire de connexion pour les rendre encore plus belles. Ici, vous spécifierez la couleur, la taille de la police, ajouterez du rembourrage, des marges, la largeur des différents éléments et d’autres éléments de base tels que la couleur qui apparaît lorsque vous passez la souris ou cliquez sur un élément. Ajoutez le code ci-dessous.

p a {
font-size: 11px;
color: #aaa;
float: right;
margin-top: -13 px;
margin-right: 20 px;
}
p a:hover {
color: # 555 ;
}
input {
font-family: "Helvetica Neue", Helvetica,
sans-serif;
font-size: 12px;
outline: none;
}
input[type=text],
input[type=password] {
color: # 777 ;
padding-left: 10px;
margin: 10 px;
margin-top: 12 px;
margin-left: 18 px;
width: 290px;
height: 35px;
}

Puisque vous voulez que votre page de connexion soit encore plus belle, vous pouvez ajouter un peu plus de personnalisations pour rendre le bouton de connexion et la case à cocher un peu élégants. Ajoutez le code suivant.

#lower {
background: #ecf2f5;
width: 100%;
height: 69px;
margin-top: 20 px;
}
input[type=checkbox] {
margin-left: 20 px;
margin-top: 30 px;
}
.check {
margin-left: 3px;
}
input[type=submit] {
float: right;
margin-right: 20 px;
margin-top: 20 px;
width: 80px;
height: 30px;
}

Styliser les éléments de formulaire

À ce stade, les éléments sont bien positionnés et semblent suffisamment sophistiqués. Le formulaire de connexion est prêt mais vous pouvez toujours le rendre un peu plus beau en ajoutant des codes de style CSS. Vous pouvez commencer le processus en arrondissant les coins du conteneur, puis en lui donnant une ombre pour améliorer son apparence et faire ressortir une sensation de profondeur. Pour ce faire, entrez ce code ci-dessous dans la zone conteneur.

background: #fff;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1 px 2 pxrgba( 0, 0, 0, .1 );

L’ajout du code ci-dessus à la zone du conteneur fera ressembler le code du conteneur à celui ci-dessous :

#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50 %;
left: 50 %;
margin-top: -140 px;
margin-left: -170 px;
background: #fff;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1 px 2 pxrgba( 0, 0, 0, .1 );

Après avoir stylisé le conteneur, vous pouvez désormais styliser les différentes zones de saisie avec un code similaire. Ajoutez le code ci-dessous et vos zones de saisie seront beaucoup plus belles qu’elles ne l’étaient au début.

border: 1 px solid #c7d0d2;
border-radius: 2px;
box-shadow: inset 0 1.5 px 3px rgba( 190, 190, 190, .4 ), 0 0 0 5px #f5f7f8;
}

Maintenant, l’ensemble du code de saisie du mot de passe ressemblera à celui ci-dessous. Le formulaire de connexion aura l’air génial, mais il y a encore plus de style que vous pouvez faire pour améliorer encore plus l’apparence de votre formulaire.

input[type=password] {
color: # 777 ;
padding-left: 10px;
margin: 10 px;
margin-top: 12 px;
margin-left: 18 px;
width: 290px;
height: 35px;
border: 1px solid #c7d0d2;
border-radius: 2px;
box-shadow: inset 0 1.5 px 3px rgba( 190, 190, 190, .4 ), 0 0 0 5px #f5f7f8;
}

Vous devez maintenant rendre le bouton de connexion plus beau et plus distinct. Pour ce faire, entrez le code ci-dessous dans la section de soumission de votre code.

font-size: 14 px;
font-weight: bold;
color: #fff;
background-color: #acd6ef; /*IE fallback*/
background-image: -webkit-gradient(linear,
left top, left bottom, from (#acd6ef), to(# 6ec2
e8));
background-image: -moz-linear-gradient(
top left 90deg, #acd6ef 0 %, # 6ec2e8 100%);
background-image: linear-gradient(top left
90 deg, #acd6ef 0%, # 6 ec2e8 100 %);
border-radius: 30px;
border: 1px solid # 66add6;
box-shadow: 0 1 px 2 pxrgba( 0, 0, 0, .3 ),
inset 0 1px 0 rgba( 255, 255, 255, .5 );
cursor: pointer;
}

L’ensemble du code de votre section de soumission ressemblera à celui ci-dessous et vous aurez changé la couleur de votre bouton de connexion et d’autres aspects, et vous aurez un formulaire de connexion simple comme celui ci-dessous.

input[type=submit] {
float: right;
margin-right: 20 px;
margin-top: 20 px;
width: 80px;
height: 30px;
font-size: 14px;
font-weight: bold;
color: #fff;
background-color: #acd6ef; /*IE fallback*/
background-image: -webkit-gradient(linear,
left top, left bottom, from (#acd6ef), to(# 6ec2
e8));
background-image: -moz-linear-gradient(
top left 90deg, #acd6ef 0 %, # 6ec2e8 100%);
background-image: linear-gradient(top left
90 deg, #acd6ef 0%, # 6 ec2e8 100 %);
border-radius: 30px;
border: 1px solid # 66add6;
box-shadow: 0 1 px 2 pxrgba( 0, 0, 0, .3 ),
inset 0 1px 0 rgba( 255, 255, 255, .5 );
cursor: pointer;
}

Le formulaire de connexion semble maintenant bon. Il est conseillé de laisser le formulaire aussi simple. Au lieu d’ajouter d’autres éléments et d’encombrer la page, vous pouvez ajouter le logo de votre entreprise et une seule image. Les visiteurs ont tendance à être distraits par tant de détails. Par conséquent, vous voudrez avoir une page de connexion au site Web aussi simple que possible, mais toujours belle et attrayante pour que les visiteurs reviennent. Vous pouvez prendre des exemples de formulaires de connexion sur certains sites Web populaires tels que Snoggle News, Dropbox, Freshbooks, MailChimp et Theidealist, entre autres. Des sites Web tels que Google et Facebook ont ​​également utilisé le style minimaliste et leurs pages de connexion sont superbes avec juste un formulaire de connexion, le logo de l’entreprise et quelques autres détails.

Boîtes de connexion jQuery

Les boîtes de connexion jQuery ont été utilisées sur un grand nombre de sites Web, et elles ont toujours l’air innovantes et ont trouvé leur place dans les conceptions de formulaires de connexion aux sites Web de la nouvelle ère. Ils ont l’air simple mais élégant. Contrairement au passé, la connexion se fait aujourd’hui sur une simple page et vous n’avez pas à vous soucier des revers de jQuery.

Avec jQuery, vous pouvez créer un bouton de connexion sur la page d’accueil de votre site Web, qui dirige vos visiteurs vers la page de connexion alimentée par jQuery. Le formulaire contient un appel Ajax et utilise un script PHP externe pour vérifier les informations d’identification de la connexion pour accorder ou refuser l’accès. Avec jQuery, il est facile d’ajouter un lien d’inscription juste en dessous de la boîte de connexion. Cela rend le processus plus fluide et permet à l’utilisateur une expérience fluide. Vos visiteurs trouveront facilement la page d’inscription/d’inscription sur votre site Web. Vous pouvez également utiliser la même boîte de connexion pour accéder à votre compte.

Tout comme lorsque vous utilisez HTML et CSS pour créer et styliser votre page de connexion, vous devez faire en sorte que la boîte de connexion ici parle un peu de votre entreprise d’une manière qui n’encombre pas la page. Le formulaire de connexion que vous créez avec jQuery est simple et beau. Cependant, vous devrez ajouter une image ou simplement le logo de votre entreprise pour le rendre plus attrayant. Les pages de connexion doivent être conviviales.

Modèles de formulaire de connexion au créateur de site Web

La meilleure façon conviviale pour les débutants de créer un formulaire de connexion attrayant consiste à utiliser les modèles de formulaire de connexion du créateur de site Web. Ici, vous n’avez pas besoin de connaître le codage, et vous n’avez même pas besoin d’avoir déjà créé un autre site Web ; les formulaires de connexion sont créés en un clic. Les créateurs de sites Web tels que Weebly et WordPress proposent des formulaires freemium et premium.

Pour créer la page de connexion, installez les plugins de formulaire, puis visitez la page des paramètres du modèle/plugin pour le personnaliser à votre guise. Dans WordPress, vous devrez installer WPForms puis entrer votre code d’achat pour vérifier. Visitez la page des paramètres et cliquez sur Addons. Ici, vous pouvez ajouter n’importe quel élément que vous voulez. Cliquez sur Addon d’enregistrement d’utilisateur, et vous êtes prêt à partir.

Cliquez sur "Créer une nouvelle page" puis sélectionnez le formulaire "Connexion de l’utilisateur". Un modèle apparaîtra avec tous les champs pré-créés, et tout ce que vous avez à faire est de cliquer sur un champ pour le modifier. Après avoir modifié chaque champ, cliquez sur le l’onglet Paramètres et décidez ce qui doit se passer une fois qu’un visiteur s’est connecté ; vous pouvez le diriger vers une certaine URL.

Après avoir créé le formulaire, créez une nouvelle page pour le formulaire de connexion. Un éditeur apparaîtra et en haut de celui-ci, cliquez sur "ajouter un formulaire". Une fenêtre contextuelle apparaîtra et vous pourrez sélectionner le formulaire que vous venez de créer. Vous pouvez continuer à modifier la page pour mieux répondre à vos besoins, ou vous pouvez enregistrer et publier. Vous pouvez ajouter la connexion personnalisée que vous venez de créer en tant que widget dans la barre latérale de votre site Web.

Lorsqu’il s’agit de modèles de connexion fournis par le créateur de site Web, le processus est plus ou moins le même ; installez le modèle, modifiez-le à votre guise, créez une nouvelle page et insérez votre formulaire créé. Ceci est recommandé pour ceux qui débutent dans la conception de sites Web.

Thèmes et plugins tiers

Thèmes

Le constructeur de votre site Web a peut-être fourni un modèle ou un thème de connexion, gratuit ou premium, mais il se peut qu’il ne réponde pas à vos besoins. Heureusement, il existe de nombreux thèmes et plugins tiers spécialement pour WordPress. Les thèmes sont comme des modèles pour l’ensemble du site Web qui apportent différents styles et avec la plupart d’entre eux, vous pourrez obtenir une page de connexion élégante et attrayante ; Le thème affecte non seulement la page de connexion, mais également d’autres aspects de votre site Web.

Vous devrez choisir un thème avec une page de connexion que vous aimez. La bonne chose est qu’avec la plupart des thèmes, vous pouvez faire un tour des fonctionnalités avant de les installer. Les thèmes coûtent entre 2 $ et jusqu’à plus de 100 $. Les thèmes, tout comme les modèles de création de sites Web, sont faciles à modifier. Vous pouvez modifier les couleurs, les polices et les tailles de conception selon vos goûts et vos goûts.

Les thèmes peuvent provenir de votre créateur de site Web, de thèmes premium ou de développeurs tiers tels que Themeforest.

Plugins

Les plugins sont simples ; contrairement aux thèmes qui affectent presque tous les aspects de votre site Web, il existe des plugins pour différents aspects de votre site Web. Ergo, vous pouvez installer un plugin juste pour créer un formulaire de connexion ou un formulaire d’inscription. Les plugins sont disponibles gratuitement et certains sont premium ; choisissez-en un en fonction de votre budget et de vos besoins.

Tous les constructeurs de sites Web auront des plugins parmi lesquels vous pourrez choisir; que vous utilisiez Weebly, Joomla ou WordPress, les thèmes sont nombreux. Pour créer une page de connexion à l’aide d’un plugin, visitez votre tableau de bord pour afficher la liste des plugins disponibles pour votre créateur de site Web. Installez le plugin que vous voulez et vous serez redirigé vers une page de paiement où vous payez pour le plugin.

Après avoir installé le plugin, vous serez invité à éditer les différents éléments ; cliquez sur chaque élément à modifier, puis cliquez sur enregistrer les modifications. Créez une nouvelle page et ajoutez le formulaire que vous avez créé à l’aide du plugin.

Conclusion

Une page de connexion doit être simple autant qu’elle doit être attrayante. Différentes conceptions de page de connexion ont été observées dans un passé récent. Choisissez uniquement la méthode de création de page de connexion avec laquelle vous êtes à l’aise ; ne choisissez pas de coder si vous ne maîtrisez pas bien les codes. Vous pouvez obtenir l’aide d’un professionnel pour la conception, mais mieux encore, vous pouvez obtenir de l’aide pour concevoir votre page de connexion.

Les gens ont également utilisé des connexions sociales. Ici, vous permettez aux visiteurs de se connecter avec les détails de leur compte de médias sociaux tels que Facebook ou Twitter. C’est aussi une bonne option car elle est assez simple et améliore également la présence et les performances de votre entreprise sur les réseaux sociaux. Vous pouvez consulter les pages de connexion des sites Web populaires pour savoir comment styliser la page de connexion de votre site Web. sans l’encombrer et sans oublier les détails.