Une landing page est très importante : elle vous permet d’accueillir vos potentiels clients, et de les rediriger vers les services qu’ils cherchent. Une manière de faire très commune est de proposer de vous contacter via un formulaire. Il donc faut que celui-ci soit clair et facilement accessible à votre visiteur. Mais comment faire pour présenter beaucoup de contenu (services, avantages, informations, tarifs,…) et garder un formulaire de contact accessible à tout moment ? Une solution serait de faire en sorte que votre formulaire suive le scroll de votre visiteur, pendant la lecture de la landing page, et nous allons donc voir comment le réaliser en HTML / CSS !
Sommaire :
Il peut être tentant pour ce genre d’élément de le développer en Javascript : en effet, un élément HTML qui suit le scroll ne peut simplement avoir la propriété CSS position: fixed, il doit être accompagné de Javascript pour une fonctionnalité plus complète. Cependant, une solution plus simple et en pure CSS existe : position: sticky.
Un élément HTML dans cette position, sera d’abord considéré comme en position relative, puis s’attachera au scroll de l’utilisateur avant qu’il ne soit plus visible. Il suivra ensuite le mouvement. Pas très clair ? Voyons le code, ce sera plus concret !
Voici notre landing page :
<div class="container">
<header>
<h1>Landing page</h1>
<p>...</p>
</header>
<div class="container-flex">
<div class="content">
<h2>Avantages</h2>
<h3>Avantage 1</h3>
<p>
...
</p>
<h3>Avantage 2</h3>
<p>
...
</p>
<h3>Avantage 3</h3>
<p>
...
</p>
<h3>Avantage 4</h3>
<p>
...
</p>
<h3>Avantage 5</h3>
<p>
...
</p>
<h3>Avantage 6</h3>
<p>
...
</p>
</div>
<div class="form">
<h3>Contact</h3>
<div class="form-element">
<label for="">Nom</label>
<br>
<input type="text">
</div>
<div class="form-element">
<label for="">Prénom</label>
<br>
<input type="text">
</div>
<div class="form-element">
<label for="">E-mail</label>
<br>
<input type="text">
</div>
<div class="form-element">
<label for="">Message</label>
<br>
<textarea></textarea>
</div>
<button>Envoyer</button>
</div>
</div>
</div>
<footer>
<h2>Footer</h2>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</footer>
.container contiendra tout notre contenu principal, et .container-flex alignera sur la même ligne du texte (.content) et notre formulaire de contact (.form). footer sera notre pied de page.
A noter que les « … » sont du texte, du « Lorem Ipsum » (faux texte) dans notre exemple Codepen plus bas.
Et voici le code CSS :
.container {
padding: 30px;
}
.container-flex {
display: flex;
}
.content {
width: 70%;
padding-right: 30px;
}
.form {
width: 30%;
padding: 30px;
position: sticky;
top: 30px;
align-self: flex-start;
background-color: #efefef;
}
/* Styles moins importants */
body {
margin: 0;
}
h1, h2, h3 {
margin-top: 0;
}
.form-element {
margin-bottom: 15px;
}
.form-element input, .form-element textarea {
width: 100%;
}
header {
margin-bottom: 30px;
}
footer {
padding: 30px;
background-color: #efefef;
}
Les propriétés les plus importantes pour notre tutoriel sont au dessus.
.container-flex est un élément flex, il va donc positionner son contenu horizontalement.
.content et .form seront donc côte à côte, on peut ensuite leur donner une width (70% et 30% respectivement, dans notre exemple).
Ensuite, ce qui va nous intéresser le plus dans ce tuto : .form possède la propriété position: sticky, et suivra donc le scroll parcourant .content ! Pour que cela fonctionne, nous avons besoin de 2 propriétés supplémentaires :
top: 30px est important, il précise à quel moment notre formulaire va s’attacher au scroll : en l’occurrence dès que le scroll est à 30px de l’élément en position sticky. Si on avait mis top: 0, le formulaire serait donc collé au bord de l’écran, ce qui n’est pas très esthétique. Il faut toujours ajouter une propriété top (quelle que soit la valeur, même 0) à position: sticky, sinon l’attachement ne fonctionnera pas.align-self: flex-start; est important dans notre exemple, dû au .container-flex. En effet, display: flex aligne les éléments enfants entre eux horizontalement, et les met à la même hauteur, ce qui peut poser problème avec position: sticky ! Si .form fait la même hauteur que .content, il ne pourra pas le suivre au scroll, c’est logique. align-self: flex-start; est une propriété flex qui alignera le formulaire en haut du .container-flex, et lui fera garder sa hauteur normale.Vous devriez vous demander : pourquoi avoir ajouté un footer dans l’exemple, il n’y en a pas besoin ? Eh bien en fait, c’est pour illustrer une autre fonctionnalité fort pratique de position: sticky. Logiquement, si le formulaire restait tout le temps attaché au scroll, une fois le contenu de .content dépassé, il devrait passer au dessus de tous les éléments qui suivent .container-flex et .container, à savoir footer.
Il n’en est rien : une fois que .content est dépassé au scroll, .scroll se détache et reste tout en bas de .container-flex ! C’est ce qui est magique avec position: sticky, le formulaire ne sortira jamais de la zone de son élément parent.
On pourrait penser que ce genre de fonctionnalité CSS magique est très peu compatible. Le bon réflexe : vérifier la compatibilité des différents navigateurs. Il en ressort que tous les navigateurs modernes sont compatibles.
Seul Internet explorer est en dehors de la course (la fameuse épine de pied de tout développeur web), cependant son utilisation baisse au fur et à mesure des années. Une petite banderole demandant de mettre à jour son navigateur devrait suffire, ou alors il faudra passer par une solution Javascript, ou bien tout simplement faire en sorte que le formulaire vienne se caler en dessous du contenu sous IE seulement. Ouf ! Bref, il existe des solutions pour prendre en compte IE, pourquoi se priver de la facilité de position: sticky ?
Si vous avez des difficultés dans la réalisation d’un formulaire flottant, n’hésitez pas à demander à un freelance sur Codeur.com !