Uzyskaj natychmiastowy hosting z elementem ELEMENTORem i ELEMENTOR PRO

Z CDN, SSL i kopią zapasami.

Zacznij dzisiaj

Jak zrobić formularz biuletynu z pływającymi etykietami w Divi

Rifat Divi Tutorials Oct 17, 2021

Zwykle zauważamy obecność formularzy newslettera w czasopismach lub serwisach blogowych. Uwagę zwracają zawsze formy przeróżnych, przyciągających wzrok wzorów. Ponadto kreatywnie zaprojektowane formularze są bardzo aktywne w zakresie wywierania pozytywnego wpływu na user experience. Formularze mają symbole zastępcze, które informują użytkowników, jaki typ wartości powinni wprowadzić. Jak by to było, gdybyśmy ustawili nazwę pola zastępczego i pola wejściowego na tę samą i sprawili, że symbol zastępczy był niewidoczny, gdy ktoś próbuje dodać informacje o tym polu i sprawić, że wyskoczy nazwa etykiety, która nie była widoczna w pierwszej kolejności.

Brzmi trochę skomplikowanie? Bez obaw, dzisiaj pokażemy, jak zaprojektować formularz na Divi, w którym symbole zastępcze formularza będą unosić się i wznosić na górę podczas wprowadzania danych. Weźmy się za to.

Zapowiedź

Rzuć okiem na to, jak będzie wyglądał nasz dzisiejszy formularz.

Projektowanie formularza biuletynu

Tworzenie formularza e-mail Optin

Otwórz stronę za pomocą kreatora Divi, do której chcesz dodać formularz. przejdź do sekcji i dodaj jednokolumnowy wiersz.

Twórz niesamowite strony internetowe

Z najlepszym darmowym kreatorem stron Elementor

Zacząć teraz

Teraz dodaj moduł formularza opcji e-mail do kolumny.

Otwórz ustawienia modułu zgody na pocztę e-mail. Z zakładki treści zmień teksty.

Pamiętaj, aby połączyć go z podanym adresem e-mail. Bez połączenia formularz nie pojawi się na aktywnej stronie.

Następnie dodaj do formy ładny, kojący dla oka kolor.

  • Kolor tła: #8B80F9

Z zakładki projekt proszę zaktualizować układ formularza.

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

Teraz zmień odpowiednio właściwości pola.

  • 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 zmienimy styl obramowania.

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

Teraz zmień style czcionki tytułu:

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

Teraz dokonaj zmian w przycisku.

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

Teraz dodajmy do formularza maksymalną szerokość i dopełnienie. To ostatnia modyfikacja naszego projektu.

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

Na koniec dodamy klasę CSS do naszego projektu, abyśmy mogli kierować ją do naszej sekcji kodowania, gdzie dodamy kod CSS i JQuery do naszego projektu.

  • Klasa CSS: et-float-labels

Dodawanie niestandardowego kodu

Dodaj moduł kodu pod projektem, w którym dodamy kod CSS i JQuery.

Kod CSS

Teraz skopiuj poniższy kod i wklej go do modułu kodu. Pamiętaj, aby zachować kod wewnątrz tagu 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;
}

Kod JQuery

Teraz dodaj tag Script i wklej do niego następujący kod JQuery.

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

Widok końcowy

Oto nasz ostateczny projekt.

Wniosek

Widzisz więc, że posiadanie kreatywnego formularza biuletynu w Divi jest bardzo łatwe i możesz w bardzo krótkim czasie utworzyć formularz zgody na e-maile z pływającymi etykietami. Upewnij się, że dostosujesz projekt do swoich potrzeb. Niestandardowe kody są bardzo ważne, aby etykiety były unoszące się na powierzchni, dlatego należy je ostrożnie umieszczać wewnątrz tagów. Mam nadzieję, że spodoba ci się ten projekt, a jeśli tak, podziel się nim ze znajomymi miłośnikami Divi . Subskrybuj nasze aktualizacje, aby uzyskać więcej samouczków Divi, takich jak ten.