Comment ajouter des étiquettes flottantes aux champs de formulaire dans Divi

L'ajout d'étiquettes flottantes aux champs de formulaire dans Divi peut améliorer la conception et l'expérience utilisateur de n'importe quel 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 avoir un champ de saisie de texte pour un nom où vous pouvez saisir le texte (ou le nom) et une étiquette pour la zone de saisie de ce champ (c'est-à-dire « Nom »). Cette étiquette peut être visible ou masquée selon le style du formulaire. En plus d'une étiquette, les champs d'entrée peuvent également contenir un pseudo-élément d'espace réservé qui sert en quelque sorte d'étiquette temporaire dans le champ d'entrée qui reste visible jusqu'à ce que l'utilisateur entre une valeur d'entrée. Dans Divi, la conception par défaut masque l'élément d'étiquette et n'affiche que le texte de l'espace réservé. L'ajout d'une étiquette flottante à un formulaire Divi permettra aux concepteurs de conserver l'aspect élégant du style de formulaire « espace réservé uniquement » et également de révéler (ou de faire flotter) l'étiquette au-dessus du champ chaque fois que l'utilisateur ajoute une valeur.

Dans ce tutoriel, nous allons vous montrer comment ajouter des étiquettes flottantes à un formulaire d'option de messagerie Divi. Pour ce faire, nous allons utiliser le constructeur Divi pour concevoir le formulaire d'option email. Ensuite, nous ajouterons des CSS et JQuery personnalisés pour faire flotter ces étiquettes cachées lorsqu'un utilisateur se concentre sur le champ.

Commençons!

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

https://youtu.be/j1m14XFztdc

Abonnez-vous à 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 importer.

Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez effectuer les opérations suivantes :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option « Construire à partir de zéro ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Ajouter des étiquettes flottantes aux champs de formulaire dans Divi

Construire le formulaire d'option d'e-mail

Ajoutez une ligne à une colonne à la section par défaut du Divi Builder.

Ajoutez un formulaire d'option d'e-mail à la colonne.

Ouvrez le modal Paramètres d'option de messagerie. Sous l'onglet Contenu, mettez à jour le texte du titre et supprimez le corps du texte.

Assurez-vous de lier votre fournisseur de service de compte de messagerie. Sinon, l'option d'e-mail n'apparaîtra pas sur une page en direct.

Ensuite, ajoutez la couleur d'arrière-plan suivante à l'option d'e-mail :

• Couleur d'arrière-plan : #1f4b74

Sous l'onglet Conception, mettez à jour la mise en page du formulaire :

• Disposition : corps en haut, forme en bas

Mettez ensuite à jour les styles de champ comme suit :

• Couleur d'arrière-plan des champs : transparent
• Couleur du texte des champs : #ffffff
• Marge des champs : 1.5em haut
• Remplissage des champs : 0,5 em en haut, 0,5 em en bas, 1 em à gauche, 1 em à droite
• Taille du texte des champs : 1.2em
• Hauteur de la ligne des champs : 2 em

Ensuite, mettez à jour les styles de bordure de champ :

• Champs Coins Arrondis : 0px
• 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 :

• Poids de la police du titre : gras
• Style de police du titre : TT
• Alignement du texte du titre : Centre

Et maintenant, allons de l'avant et stylisons le bouton.

• Utiliser des styles personnalisés pour le bouton : OUI
• Couleur du texte du bouton : #1f4b74
• Couleur d'arrière-plan du bouton : #ffffff
• Espacement des lettres des boutons : 0,1 em
• Poids de la police du bouton : gras
• Style de police des boutons : TT

Pour notre dernière personnalisation de conception, ajoutons une largeur maximale et un remplissage au formulaire comme suit :

• Largeur maximale : 500 px
• Rembourrage : 5% haut, 5% bas, 3% gauche 3% droite

Enfin, nous devons ajouter une classe CSS au module afin que nous puissions le cibler avec notre code CSS et JQuery à l'étape suivante.

Ajout du code personnalisé

Pour ajouter les CSS et JQuery personnalisés, ajoutez un module de code sous le module de formulaire d'inscription par e-mail.

Le CSS

Dans la zone de contenu du code, collez le CSS suivant en veillant à envelopper le CSS 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;
  visibility: hidden;
  opacity: 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;
  opacity: 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 JQuery

Sous la balise de style de fin, collez le JQuery suivant et enveloppez-le avec 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");
    }
  });
});

Briser le code

À propos du CSS

Tout d'abord, nous ciblons les champs et leur donnons une position relative afin que nous puissions donner à l'élément label une position absolue dans le champ (ou élément p).

.et-float-labels p {
  position: relative !important;
}

Ensuite, nous attribuons l'élément label sur le formulaire et la 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 afin que l'étiquette soit prête à être affichée. Ensuite, nous le cachons avec la visibilité cachée.

.et-float-labels .et_pb_contact_form_label {
  display: block !important;
  visibility: hidden;
  opacity: 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 montrons, redimensionnons et traduisons (déplaçons) l'étiquette avec une animation de diapositive vers le haut une fois qu'elle reçoit la classe "active" contrôlée par le JQeury.

.et-float-labels .et_pb_contact_form_label.active {
  visibility: visible;
  opacity: 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 le faire car chaque navigateur nécessite des préfixes différents pour cibler le pseudo-élément d'espace réservé. 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ément d'entrée sur chaque champ de formulaire.

  var $floatLabelInput = $(".et-float-labels .input");

Ensuite, nous utilisons le gestionnaire d'événements de focus avec une fonction pour ajouter une classe (« active ») à l'élément label (le frère précédent de l'élément d'entrée) chaque fois que l'élément d'entrée est en focus. Une fois la classe « active » ajoutée à l'étiquette, l'étiquette est affichée, mise à l'échelle et mise en place 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énements blur avec une fonction qui détermine quand garder 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 mis au point. S'il n'a pas de valeur, la classe est supprimée et l'état par défaut du champ revient.

  $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 « flou » (au lieu de « clic ») permet à l'utilisateur de voir l'effet même lors de la navigation en utilisant uniquement un clavier (c'est-à-dire en appuyant sur la tabulation pour parcourir les champs).

Résultat final

Voici le résultat final de nos étiquettes flottantes sur les champs de formulaire dans un formulaire d'option email Divi.

Dernières pensées

Ajouter des étiquettes flottantes à un formulaire Divi n'est pas si difficile. Concevoir le formulaire d'option e-mail (ou tout autre formulaire Divi) est étonnamment facile. Cependant, lors de l'ajout d'étiquettes flottantes, n'oubliez pas de personnaliser la taille et l'espacement des champs du formulaire pour laisser la bonne quantité d'espace pour l'étiquette flottante. Après cela, nous utilisons un CSS personnalisé pour masquer ou afficher efficacement l'espace réservé lorsque l'utilisateur se concentre sur le champ. Étant donné que chaque navigateur nécessite des préfixes différents pour cibler le pseudo-élément d'espace réservé, il est important de les obtenir correctement. Le JQuery que nous avons ajouté ajoute et supprime une classe sur l'élément label qui le fera flotter en cas de besoin. Dans l'ensemble, il s'agit d'une micro-interaction solide qui ajoute à l'expérience utilisateur.

N’hésitez pas à utiliser ce même processus sur d’autres formulaires Divi (comme un formulaire de connexion ou de contact) également. 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 de formulaire pour vous assurer qu'il y a suffisamment de place pour ces étiquettes flottantes.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!