L’ajout d’étiquettes flottantes aux champs de formulaire dans Divi peut améliorer le design et l’expérience utilisateur de tout formulaire Divi de manière subtile, mais puissante. Tout formulaire de site Web (pas seulement Divi) comprend généralement une sorte de champ de saisie et une étiquette pour ce champ de saisie. Par exemple, un formulaire peut comporter un champ de saisie de texte pour un nom, dans lequel vous pouvez saisir le texte (ou le nom), ainsi qu’une étiquette pour le champ de saisie de ce champ (par exemple, « Nom »). Cette étiquette peut être visible ou cachée selon le style du formulaire. En plus d’un libellé, les champs de saisie peuvent également contenir un pseudo-élément placeholder qui sert d’étiquette temporaire dans le champ de saisie et qui reste visible jusqu’à ce que l’utilisateur saisisse une valeur. Dans Divi, la conception par défaut masque l’élément étiquette et n’affiche que le texte de l’espace réservé. L’ajout d’une étiquette flottante à un formulaire Divi permet aux concepteurs de conserver l’aspect élégant du style de formulaire « espace réservé » et de faire apparaître (ou flotter) l’étiquette au-dessus du champ lorsque l’utilisateur ajoute une valeur.
Dans ce tutoriel, nous allons vous montrer comment ajouter des étiquettes flottantes à un formulaire Divi d’option de messagerie. Pour ce faire, nous allons utiliser le constructeur de Divi pour concevoir le formulaire d’option de messagerie. Ensuite, nous ajouterons quelques feuilles de style CSS personnalisées et JQuery pour faire flotter ces étiquettes cachées lorsqu’un utilisateur se concentre sur le champ.
C’est parti !
Coup d’œil rapide
Voici un aperçu de la conception que nous allons réaliser dans ce tutoriel.
Téléchargez la mise en page GRATUITEMENT
Pour mettre la main sur les modèles de ce tutoriel, vous devez d’abord le télécharger à l’aide du bouton ci-dessous. Pour avoir accès au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily à l’aide du formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus d’astuces Divi et un pack de mises en page Divi gratuit chaque lundi ! Si vous êtes déjà sur la liste, il suffit d’entrer votre adresse e-mail ci-dessous et de cliquer sur télécharger. Vous ne serez pas « réinscrit » et ne recevrez pas d’e-mails supplémentaires.
S’abonner à notre chaîne Youtube
Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.
Cliquez sur le bouton Importer.
Dans la fenêtre contextuelle de portabilité, sélectionnez l’onglet d’importation et choisissez le fichier à télécharger depuis votre ordinateur.
Cliquez ensuite sur le bouton d’importation.
Une fois cela fait, la mise en page de la section sera disponible dans le Divi Builder.
Passons au tutoriel, voulez-vous ?
Ce dont vous avez besoin pour commencer
Pour commencer, vous devez effectuer les opérations suivantes :
- Si vous ne l’avez pas encore fait, installez et activez le thème Divi.
- Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour modifier la page sur le front-end (constructeur visuel).
- Choisissez l’option « Build From Scratch ».
Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.
Ajout d’étiquettes flottantes aux champs de formulaire dans Divi
Création du formulaire d’optin par courriel
Ajoutez une rangée d’une colonne à la section par défaut dans Divi Builder.
Ajoutez un formulaire Email Optin à la colonne.
Ouvrez la modale Paramètres de l’option Email Optin. Sous l’onglet Contenu, mettez à jour le texte du titre et supprimez le texte du corps.
Assurez-vous de lier votre fournisseur de service de compte de messagerie. Sinon, le formulaire d’optin d’email n’apparaîtra pas sur une page en direct.
Ensuite, ajoutez la couleur de fond suivante à l’optin e-mail :
- Couleur de fond : #1f4b74
Dans l’onglet « Design », mettez à jour la mise en page du formulaire :
- Layout : Corps en haut, formulaire en bas
Mettez ensuite à jour les styles de champ comme suit :
- Fields Background Color : transparent
- Couleur du texte des champs : #ffffff
- Marge des champs : 1,5em haut
- Champs Padding : 0.5em haut, 0.5em bas, 1em gauche, 1em droite
- Taille du texte des champs : 1.2em
- Hauteur de la ligne des champs : 2em
Ensuite, mettez à jour les styles de bordure des champs :
- Fields Rounded Corners : 0px
- Fields Bottom Border Width (largeur de la bordure inférieure des champs) : 2px
- Couleur de la bordure inférieure des champs : #ffffff
Mettons également à jour les styles de police du titre :
- Title Font Weight : Bold
- Style de la police du titre : TT
- Alignement du texte du titre : Centre
Et maintenant, allons-y et stylisons le bouton.
- Utiliser des styles personnalisés pour le bouton : YES
- Couleur du texte du bouton : #1f4b74
- Couleur d’arrière-plan du bouton : #ffffff
- Espacement des lettres du bouton : 0.1em
- Poids de la police du bouton : Gras
- Style de la police des boutons : TT
Pour notre dernière personnalisation du design, ajoutons une largeur maximale et un remplissage au formulaire comme suit :
- Largeur maximale : 500px
- Rembourrage : 5% haut, 5% bas, 3% gauche 3% droite
Enfin, nous devons ajouter une classe CSS au module afin de pouvoir le cibler avec notre code CSS et JQuery à l’étape suivante.
Ajout du code personnalisé
Pour ajouter le code CSS et JQuery personnalisé, ajoutez un module de code sous le module de formulaire d’opt-in par courriel.
Le CSS
Dans la zone de contenu du code, collez le CSS suivant en veillant à l’insérer dans les balises de style nécessaires :
.et-float-labels p {
position : relative !important ;
}
.et-float-labels .et_pb_contact_form_label {
display : block !important ;
visibilité : hidden ;
opacité : 0 ;
position : absolute ;
top : 1em ;
padding : 0 1em ;
transform : translateY(0%) ;
transform-origin : left ;
color : #ffffff ;
font-size : 1.2em ;
-webkit-transition : all 0.4s ease-in-out ;
transition : all 0.4s ease-in-out ;
z-index : 0 ;
}
.et-float-labels .et_pb_contact_form_label.active {
visibility : visible ;
opacité : 0.6 ;
top:0 ;
transform : translateY(-100%) scale(0.9) ;
}
.et_pb_module.et-float-labels form p .input::-webkit-input-placeholder {
-webkit-transition : all 0.4s ;
transition : all 0.4s ;
}
.et_pb_module.et-float-labels form p .input::-moz-placeholder {
-moz-transition : all 0.4s ease-in-out ;
transition : all 0.4s ease-in-out ;
}
.et_pb_module.et-float-labels form p .input:-ms-input-placeholder {
-ms-transition : all 0.4s ease-in-out ;
transition : all 0.4s ease-in-out ;
}
.et_pb_module.et-float-labels form p .input:-moz-placeholder {
-moz-transition : all 0.4s ease-in-out ;
transition : all 0.4s ease-in-out ;
}
.et_pb_module.et-float-labels form p .input::placeholder {
transition : all 0.4s ease-in-out ;
}
.et_pb_module.et-float-labels form p .input:focus::-webkit-input-placeholder {
color : transparent !important ;
}
.et_pb_module.et-float-labels form p .input:focus::-moz-placeholder {
color : transparent !important ;
}
.et_pb_module.et-float-labels form p .input:focus:-moz-placeholder {
color : transparent !important ;
}
.et_pb_module.et-float-labels form p .input:focus:-ms-input-placeholder {
color : transparent !important ;
}
.et_pb_module.et-float-labels form p .input:focus::placeholder {
color : transparent !important ;
}
Le code JQuery
Sous la balise de style de fin, collez le code JQuery suivant et insérez-le dans les balises de script nécessaires.
jQuery(document).ready(function ($) {
var $floatLabelInput = $(".et-float-labels .input") ;
$floatLabelInput.on("focus", function (e) {
$(e.target).prev().addClass("active") ;
e.stopPropagation() ;
}) ;
$floatLabelInput.on("blur", function (e) {
if (!$(e.target).val()) {
$(e.target).prev().removeClass("active") ;
} else {
$(e.target).prev().addClass("active") ;
}
}) ;
}) ;
Décomposer le code
À propos du CSS
Tout d’abord, nous ciblons les champs et leur donnons une position relative afin de pouvoir donner à l’élément label une position absolue dans le champ (ou l’élément p).
.et-float-labels p {
position : relative !important ;
}
Ensuite, nous donnons à l’élément d’étiquette du formulaire une position absolue avec un autre style qui place le texte de l’étiquette de manière à ce qu’il chevauche le texte de placement. La propriété display:block remplace la propriété display:hidden par défaut, de sorte que l’étiquette est prête à être affichée. Nous le cachons ensuite avec la propriété visibility hidden.
.et-float-labels .et_pb_contact_form_label {
display : block !important ;
visibility : hidden ;
opacité : 0 ;
position : absolute ;
top : 1em ;
padding : 0 1em ;
transform : translateY(0%) ;
transform-origin : left ;
color : #ffffff ;
font-size : 1.2em ;
-webkit-transition : all 0.4s ease-in-out ;
transition : all 0.4s ease-in-out ;
z-index : 0 ;
}
Ensuite, nous affichons, mettons à l’échelle et déplaçons l’étiquette avec une animation de glissement vers le haut lorsqu’elle reçoit la classe « active » contrôlée par le JQeury.
.et-float-labels .et_pb_contact_form_label.active {
visibility : visible ;
opacité : 0.6 ;
top:0 ;
transform : translateY(-100%) scale(0.9) ;
}
Le reste du CSS consiste à masquer l’espace réservé avec une transition. Il y a beaucoup de lignes pour faire cela parce que chaque navigateur exige des préfixes différents pour cibler le pseudo-élément placeholder. Mais l’idée est simple : changer la couleur de l’espace réservé en transparent.
.et_pb_module.et-float-labels form p .input::-webkit-input-placeholder {
-webkit-transition : all 0.4s ;
transition : all 0.4s ;
}
.et_pb_module.et-float-labels form p .input::-moz-placeholder {
-moz-transition : all 0.4s ease-in-out ;
transition : all 0.4s ease-in-out ;
}
.et_pb_module.et-float-labels form p .input:-ms-input-placeholder {
-ms-transition : all 0.4s ease-in-out ;
transition : all 0.4s ease-in-out ;
}
.et_pb_module.et-float-labels form p .input:-moz-placeholder {
-moz-transition : all 0.4s ease-in-out ;
transition : all 0.4s ease-in-out ;
}
.et_pb_module.et-float-labels form p .input::placeholder {
transition : all 0.4s ease-in-out ;
}
.et_pb_module.et-float-labels form p .input:focus::-webkit-input-placeholder {
color : transparent !important ;
}
.et_pb_module.et-float-labels form p .input:focus::-moz-placeholder {
color : transparent !important ;
}
.et_pb_module.et-float-labels form p .input:focus:-moz-placeholder {
color : transparent !important ;
}
.et_pb_module.et-float-labels form p .input:focus:-ms-input-placeholder {
color : transparent !important ;
}
.et_pb_module.et-float-labels form p .input:focus::placeholder {
color : transparent !important ;
}
À propos de JQuery
Tout d’abord, nous définissons la variable $floatLabelInput comme l’élément de saisie de chaque champ de formulaire.
var $floatLabelInput = $(".et-float-labels .input") ;
Ensuite, nous utilisons le gestionnaire de l’événement de mise au point avec une fonction pour ajouter une classe (« active ») à l’élément label (le frère précédent de l’élément de saisie) chaque fois que l’élément de saisie est mis au point. Une fois que la classe « active » est ajoutée à l’étiquette, celle-ci est affichée, mise à l’échelle et déplacée au-dessus de l’entrée avec le CSS correspondant.
$floatLabelInput.on("focus", function (e) {
$(e.target).prev().addClass("active") ;
e.stopPropagation() ;
}) ;
Enfin, nous utilisons le gestionnaire d’événement blur avec une fonction qui détermine quand conserver la classe « active » sur l’étiquette. Si l’entrée n’a pas de valeur, elle restera active même si le champ de saisie n’est pas en focus. Si elle n’a pas de valeur, la classe est supprimée et l’état par défaut du champ est rétabli.
$floatLabelInput.on("blur", function (e) {
if (!$(e.target).val()) {
$(e.target).prev().removeClass("active") ;
} else {
$(e.target).prev().addClass("active") ;
}
}) ;
L’ajout et la suppression de la classe à l’aide des gestionnaires d’événements « focus » et « blur » (au lieu de « click ») permet à l’utilisateur de voir l’effet même lorsqu’il navigue en utilisant uniquement le clavier (c’est-à-dire en appuyant sur la touche tabulation pour faire défiler les champs).
Résultat final
Voici le résultat final de nos étiquettes flottantes sur les champs de formulaire dans un formulaire d’option d’e-mail Divi.
Réflexions finales
L’ajout d’étiquettes flottantes à un formulaire Divi n’est pas si difficile. La conception du formulaire d’option de messagerie (ou de tout autre formulaire Divi) est étonnamment facile. Toutefois, lorsque vous ajoutez des étiquettes flottantes, n’oubliez pas de personnaliser la taille et l’espacement des champs du formulaire afin de laisser la bonne place à l’étiquette flottante. Ensuite, nous utilisons une feuille de style CSS personnalisée pour masquer ou afficher efficacement l’étiquette flottante lorsque l’utilisateur se concentre sur le champ. Étant donné que chaque navigateur exige des préfixes différents pour cibler le pseudo-élément de l’espace réservé, il est important de les respecter. Le JQuery que nous avons ajouté ajoute et supprime une classe sur l’élément label qui le fera apparaître de manière flottante si nécessaire. Dans l’ensemble, il s’agit d’une micro-interaction solide qui améliore l’expérience de l’utilisateur.
N’hésitez pas à utiliser ce même procédé pour d’autres formulaires Divi (comme un formulaire de connexion ou de contact). N’oubliez pas d’ajouter la classe personnalisée sur le formulaire avant d’ajouter le code personnalisé. Après cela, vous devrez peut-être modifier les paramètres de conception des champs du formulaire pour vous assurer qu’il y a suffisamment de place pour ces étiquettes flottantes.
J’ai hâte de lire vos commentaires.
À la vôtre !
