Comment faire un formulaire de newsletter avec des étiquettes flottantes dans Divi

Rifat Divi Tutorials Jul 1, 2021

Nous remarquons généralement la présence de formulaires de newsletter dans des magazines ou des sites de blogs. Les formes de divers designs accrocheurs attirent toujours notre attention. De plus, les formulaires conçus de manière créative sont très actifs dans le domaine de la définition d'un effet positif sur l'expérience utilisateur. Les formulaires ont des espaces réservés pour permettre aux utilisateurs de savoir quel type de valeur ils doivent saisir. Alors, que se passerait-il si nous définissions le nom de l'espace réservé et des champs de saisie sur le même et rendions l'espace réservé invisible lorsque quelqu'un essaie d'ajouter des informations sur ce champ et de faire apparaître le nom des étiquettes qui n'était pas visible en premier lieu.

Cela semble un peu complexe? Pas de soucis, aujourd'hui nous allons vous montrer comment concevoir un formulaire sur Divi où les espaces réservés du formulaire seront flottants et remonteront vers le haut lors de la saisie des données. Allons-y.

Aperçu

Jetez un coup d'œil à ce à quoi ressemblera notre formulaire d'aujourd'hui.

Conception du formulaire de newsletter

Création de formulaire d'option d'e-mail

Ouvrez la page avec Divi builder où vous souhaitez ajouter le formulaire. passer à la section et ajouter une ligne à une colonne.

Créer des sites Web incroyables

Avec le meilleur constructeur de page Elementor

Commencer Maintenant

Ajoutez maintenant un module de formulaire d'option de courrier électronique à la colonne.

Ouvrez les paramètres du module d'option d'e-mail. Depuis l'onglet contenu, modifiez les textes.

N'oubliez pas de le connecter avec l'e-mail fourni. Sans la connexion, le formulaire n'apparaîtra pas sur une page en direct.

Ensuite, ajoutez une belle couleur apaisante pour les yeux à la forme.

  • Couleur d'arrière-plan : #8B80F9

À partir de l'onglet Conception, veuillez mettre à jour la mise en page du formulaire.

  • Disposition : corps en haut, forme en bas

Maintenant, modifiez les propriétés du champ en conséquence.

  • 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, nous allons changer le style de bordure.

  • Champs Coins Arrondis : 0px
  • Largeur de la bordure inférieure des champs : 2px
  • Couleur de la bordure inférieure des champs : #ffffff

Modifiez maintenant 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

Apportez maintenant des modifications au bouton.

  • Utiliser des styles personnalisés pour le bouton : OUI
  • Couleur du texte du bouton : #8B80F9
  • 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

Maintenant, ajoutons une largeur maximale et un remplissage au formulaire. C'est le dernier ajustement de notre conception.

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

Enfin, nous ajouterons une classe CSS à notre conception afin que nous puissions la cibler dans notre section de codage où nous ajouterons du code CSS et JQuery à notre conception.

  • Classe CSS : et-float-labels

Ajout de code personnalisé

Ajoutez un module de code sous le design où nous ajouterons le code CSS et JQuery.

Code CSS

Copiez maintenant le code écrit ci-dessous et collez-le dans le module de code. N'oubliez pas de garder le code à l'intérieur de la balise Style .

.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;
  transition: all 0.4s;
  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;
  transform: translateY(0%);
  transform-origin: left;
}
.et_pb_module.et-float-labels form p .input:focus::-moz-placeholder {
  color: transparent !important;
  transform: translateY(0%);
  transform-origin: left;
}
.et_pb_module.et-float-labels form p .input:focus:-moz-placeholder {
  color: transparent !important;
  transform: translateY(0%);
  transform-origin: left;
}
.et_pb_module.et-float-labels form p .input:focus:-ms-input-placeholder {
  color: transparent !important;
  transform: translateY(0%);
  transform-origin: left;
}
.et_pb_module.et-float-labels form p .input:focus::placeholder {
  color: transparent !important;
  transform: translateY(0%);
  transform-origin: left;
}

Code JQuery

Maintenant, ajoutez la balise Script et collez-y le code JQuery suivant.

jQuery(document).ready(function ($) {
  var $floatLabelInput = $(".et-float-labels .input");
  var $floatLabelField = $(".et-float-labels p");
  $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");
    }
  });
});

Vue finale

Voici donc notre design final.

Conclusion

Ainsi, vous voyez qu'avoir un formulaire de newsletter créatif est très facile dans Divi et vous pouvez créer le formulaire d'inscription par e-mail à étiquettes flottantes en très peu de temps. Assurez-vous de personnaliser le design en fonction de vos besoins. Les codes personnalisés sont très importants pour faire flotter les étiquettes, alors placez-les soigneusement à l'intérieur des étiquettes. J'espère que vous aimerez ce design et si c'est le cas, partagez-le avec vos amis amoureux de Divi . Abonnez-vous à nos mises à jour pour obtenir plus de tutoriels Divi comme celui-ci.

Divi WordPress Theme