Jak dodać pływające etykiety do pól formularza w Divi

Dodanie pływających etykiet do pól formularzy w Divi może poprawić wygląd i UX dowolnego formularza Divi w subtelny, ale potężny sposób. Każdy formularz na stronie internetowej (nie tylko Divi) zwykle zawiera jakieś pole wejściowe i etykietę dla tego pola wejściowego. Na przykład formularz może mieć pole wprowadzania tekstu na nazwę, w którym można wprowadzić tekst (lub nazwę) oraz etykietę pola wprowadzania tego pola (tj. „Nazwa”). Ta etykieta może być widoczna lub ukryta w zależności od stylu formularza. Oprócz etykiety pola wejściowe mogą również zawierać pseudoelement zastępczy, który służy jako rodzaj tymczasowej etykiety w polu wejściowym, która pozostaje widoczna, dopóki użytkownik nie wprowadzi wartości wejściowej. W Divi domyślny projekt ukrywa element etykiety i pokazuje tylko tekst zastępczy. Dodanie pływającej etykiety do formularza Divi pozwoli projektantom zachować elegancki styl formularza „tylko symbol zastępczy”, a także odsłonić (lub unieść) etykietę nad polem za każdym razem, gdy użytkownik doda wartość.

W tym samouczku pokażemy, jak dodać pływające etykiety do formularza opcji e-mail Divi. Aby to zrobić, użyjemy konstruktora Divi do zaprojektowania formularza opcji e-mail. Następnie dodamy niestandardowe CSS i JQuery, aby wyświetlić te ukryte etykiety, gdy użytkownik skupi się na polu.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku.

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

https://youtu.be/j1m14XFztdc

Subskrybuj nasz kanał YouTube

Aby zaimportować układ sekcji do Biblioteki Divi, przejdź do Biblioteki Divi.

Kliknij przycisk Importuj.

W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

Po zakończeniu układ sekcji będzie dostępny w Divi Builder.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Buduj od podstaw”.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Dodawanie pływających etykiet do pól formularza w Divi

Budowanie formularza e-mail Optin

Dodaj jednokolumnowy wiersz do domyślnej sekcji w Divi Builder.

Dodaj formularz Email Optin do kolumny.

Otwórz modalne ustawienia poczty e-mail Optin. Na karcie treści zaktualizuj tekst tytułu i usuń treść.

Upewnij się, że łączysz swojego dostawcę usług konta e-mail. Jeśli nie, e-mail optin nie pojawi się na aktywnej stronie.

Następnie dodaj następujący kolor tła do opcji e-mail:

• Kolor tła: #1f4b74

W zakładce projekt zaktualizuj układ formularza:

• Układ: korpus na górze, formularz na dole

Następnie zaktualizuj style pól w następujący sposób:

• Kolor tła pól: przezroczysty
• Kolor tekstu pól: #ffffff
• Margines pola: 1,5 em góra
• Dopełnienie pól: 0,5 em na górze, 0,5 em na dole, 1 em w lewo, 1 em w prawo
• Rozmiar tekstu pól: 1.2 em
• Wysokość linii pól: 2em

Następnie zaktualizuj style obramowania pól:

• Pola zaokrąglone rogi: 0px
• Szerokość dolnego obramowania pól: 2px
• Kolor dolnego obramowania pól: #ffffff

Zaktualizujmy również style czcionki tytułu:

• Grubość czcionki tytułu: pogrubiona
• Styl czcionki tytułu: TT
• Wyrównanie tekstu tytułu: do środka

A teraz przejdźmy dalej i stylizujmy przycisk.

• Użyj niestandardowych stylów dla przycisku: TAK
• Kolor tekstu przycisku: #1f4b74
• Kolor tła przycisku: #ffffff
• Odstępy między literami przycisków: 0.1em
• Waga czcionki przycisku: pogrubiona
• Styl czcionki przycisku: TT

W celu ostatniego dostosowania projektu dodajmy do formularza maksymalną szerokość i dopełnienie w następujący sposób:

• Maksymalna szerokość: 500px
• Wypełnienie: 5% góra, 5% dół, 3% lewo 3% prawo

Na koniec musimy dodać do modułu klasę CSS, aby w następnym kroku móc ją skierować za pomocą naszego kodu CSS i JQuery.

Dodawanie niestandardowego kodu

Aby dodać niestandardowe CSS i JQuery, dodaj moduł kodu pod modułem formularza zgody na e-mail.

CSS

W polu treści kodu wklej następujący kod CSS, upewniając się, że kod CSS jest zawinięty w niezbędne znaczniki stylu:

.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;
}

JQuery

Pod tagiem ending style wklej następujący kod JQuery i opakuj go niezbędnymi tagami skryptu.

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");
    }
  });
});

Łamanie kodu

O CSS

Najpierw kierujemy na pola i nadajemy im pozycję względną, dzięki czemu możemy nadać elementowi label pozycję bezwzględną w polu (lub element p).

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

Następnie podajemy element etykiety na formularzu i pozycję bezwzględną z innymi stylami, które umieszczają tekst etykiety tak, aby nakładał się na tekst miejsca docelowego. Display:block zastępuje domyślną właściwość display:hidden, dzięki czemu etykieta jest gotowa do wyświetlenia. Następnie ukrywamy go z ukrytą widocznością.

.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;
}

Następnie pokazujemy, skalujemy i tłumaczymy (przesuwamy) etykietę z animacją slajdu w górę, gdy otrzyma ona „aktywną” klasę kontrolowaną przez JQeury.

.et-float-labels .et_pb_contact_form_label.active {
  visibility: visible;
  opacity: 0.6;
  top:0;
  transform: translateY(-100%) scale(0.9);
}

Reszta CSS dotyczy ukrywania symbolu zastępczego z przejściem. Jest na to wiele wierszy, ponieważ każda przeglądarka wymaga różnych prefiksów do kierowania na pseudoelement zastępczy. Ale pomysł jest prosty – zmień kolor symbolu zastępczego na przezroczysty.

.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;
}

O JQuery

Najpierw definiujemy zmienną $floatLabelInput jako element wejściowy każdego pola formularza.

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

Następnie używamy procedury obsługi zdarzeń fokusa z funkcją, która dodaje klasę („aktywna”) do elementu label (poprzedniego rodzeństwa elementu input) za każdym razem, gdy element input jest w fokusie. Gdy „aktywna” klasa zostanie dodana do etykiety, etykieta jest wyświetlana, skalowana i przenoszona na miejsce nad danymi wejściowymi z odpowiednim CSS.

  $floatLabelInput.on("focus", function (e) {
    $(e.target).prev().addClass("active");
    e.stopPropagation();
  });

Na koniec używamy obsługi zdarzeń rozmycia z funkcją, która określa, kiedy zachować „aktywną” klasę na etykiecie. Jeśli dane wejściowe nie mają wartości, pozostaną aktywne, nawet jeśli pole wejściowe nie jest aktywne. Jeśli nie ma wartości, klasa jest usuwana i zwracany jest domyślny stan pola.

  $floatLabelInput.on("blur", function (e) {
    if (!$(e.target).val()) {
      $(e.target).prev().removeClass("active");
    } else {
      $(e.target).prev().addClass("active");
    }
  });

Dodanie i usunięcie klasy za pomocą obsługi zdarzeń „focus” i „blur” (zamiast „kliknięcia”) pozwala użytkownikowi zobaczyć efekt nawet podczas nawigowania za pomocą tylko klawiatury (tj. naciskając tabulator, aby przełączać się między polami).

Ostateczny wynik

Oto ostateczny wynik naszych pływających etykiet na polach formularza w formularzu opcji e-mail Divi.

Końcowe przemyślenia

Dodawanie pływających etykiet do formularza Divi nie jest takie trudne. Projektowanie formularza opcji e-mail (lub dowolnego formularza Divi) jest zaskakująco łatwe. Jednak podczas dodawania etykiet pływających pamiętaj o dostosowaniu rozmiaru i odstępów pól formularza, aby pozostawić odpowiednią ilość miejsca na etykietę pływającą. Następnie używamy niestandardowego CSS, aby skutecznie ukryć lub pokazać symbol zastępczy, gdy użytkownik skupi się na polu. Ponieważ każda przeglądarka wymaga różnych prefiksów do kierowania na pseudoelement zastępczy, ważne jest, aby je poprawnie. Dodane przez nas JQuery dodaje i usuwa klasę w elemencie label, która w razie potrzeby wyświetli ją w widoku. Podsumowując, jest to solidna mikrointerakcja, która poprawia wrażenia użytkownika.

Możesz również użyć tego samego procesu w innych formularzach Divi (takich jak formularz logowania lub formularz kontaktowy). Tylko nie zapomnij dodać niestandardowej klasy w formularzu przed dodaniem niestandardowego kodu. Następnie może być konieczne dostosowanie ustawień projektowych pól formularza, aby upewnić się, że jest wystarczająco dużo miejsca na te pływające etykiety.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!