Jak utworzyć formularz kontaktowy na Click z Divi

W tym samouczku Divi pokażemy, jak utworzyć formularz kontaktowy, który pojawia się po kliknięciu przycisku (jako nakładka), używając niczego innego niż Divi, trochę kodu jQuery i kodu CSS.

To świetny sposób na skupienie odwiedzających witrynę na czynnościach, do których się zobowiązali, klikając przycisk. Nie przenosi ich na inną stronę, ale blokuje je w tej akcji, dopóki nie zostanie wykonane.

Poniżej możesz rzucić okiem na to, co będziemy tworzyć, a następnie przejść do samouczka!

Wynik na pulpicie

Wynik na telefonie i tablecie

Inspiracja

Inspiracją do tego posta jest prośba o komentarz i znajduje się na B3multimedia. Chociaż używają innej metody, aby to zadziałało, mają również wspaniały sposób na utworzenie formularza kontaktowego po kliknięciu. Spójrz na wynik:

Utwórz sekcję za pomocą modułu przycisków

Zazwyczaj pokazujemy, jak zrobić prawie wszystko w kreatorze wizualnym frontendu Divi. Jednak w dzisiejszym poście będę używał konstruktora zaplecza. Ze względu na kod, którego używamy, jest to nieco łatwiejsze. To powiedziawszy, jeśli kochasz edytor frontendu tak samo jak my, możesz równie łatwo ukończyć ten samouczek, korzystając z widoku „szkieletu” frontendu.

Ok, przejdźmy do tego samouczka!

Subskrybuj nasz kanał YouTube

Pierwszą rzeczą, którą musimy zrobić, to dodać nową sekcję, w której umieścimy przycisk, który pozwoli na wyświetlenie formularza kontaktowego. Wystarczy dodać sekcję standardową i wybrać wiersz z jedną kolumną. Gdy to zrobisz, dodaj do niego moduł przycisku.

Możesz dowolnie stylizować przycisk, ale musisz upewnić się, że adres URL przycisku zaczyna się od „#”, po którym następuje coś innego. Nie możesz po prostu zostawić go pustego lub użyć tylko znaku „#”. Dodając „#” i trochę tekstu, strona nie przesunie się po kliknięciu przycisku. Jeśli zostawisz to pole puste, strona odświeży się po kliknięciu. A jeśli użyjesz tylko „#”, zostaniesz wysłany na górę strony.

Następną ważną rzeczą, którą musimy zrobić, jest przypisanie do przycisku klasy CSS. Użyjemy tej klasy CSS później w tym poście w kodzie jQuery, aby upewnić się, że formularz kontaktowy wyskoczy po kliknięciu. Klasa, którą musimy przypisać do przycisku, to po prostu „przycisk”.

Utwórz formularz kontaktowy na pulpicie po kliknięciu

Następną rzeczą, którą musimy zrobić, to utworzyć formularz kontaktowy na pulpicie, który pojawi się, gdy ktoś kliknie przycisk, który utworzyliśmy w poprzedniej części tego posta. W dalszej części tego posta pokażemy również, jak stworzyć wersję mobilną.

Możesz w zasadzie stworzyć dowolny projekt w rzędzie i wyświetlić go jako wyskakujące okienko, jeśli użyjesz tej metody. Pokażemy Ci tylko, co możesz osiągnąć, pokazując, jak stworzyć następujący przykład:

Dodaj nową sekcję standardową

Zacznij od dodania nowej sekcji standardowej do strony, nad którą pracujesz. Przejdź do karty Zaawansowane w sekcji, którą właśnie dodałeś i dodaj „popup” w polu Klasa CSS. Przewiń w dół tę samą kartę i umieść następujące wiersze kodu CSS w polu Przed podkategorii Niestandardowy CSS:

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

Dodając to, upewniamy się, że sekcja zajmuje całą kartę. Możesz dostosować kolor tła w kodzie CSS, aby utworzyć żądaną nakładkę tła. W tym przypadku używamy koloru czarnego z pewną przezroczystością. Na tej samej karcie dodaj również następujący wiersz kodu CSS do elementu głównego:

display: none;

Ostatnią rzeczą, którą musimy zrobić na karcie Zaawansowane, jest wyłączenie sekcji na telefonie i tablecie w podkategorii Widoczność.

Dodaj wiersz z dwiema kolumnami

Kontynuuj, dodając wiersz z dwiema kolumnami i przejdź do karty Projekt. Zacznij od zmodyfikowania szerokości wiersza w podkategorii Rozmiar. W tym przykładzie użyliśmy niestandardowej szerokości 1291px.

Przewiń w dół kartę Projekt i użyj „30px” dla górnego, lewego i prawego dopełnienia obu kolumn w podkategorii Odstępy.

Zakończ przechodząc do zakładki Zaawansowane. W elemencie głównym dodaj następujące wiersze kodu CSS:

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

Dodaj pierwszy moduł tekstowy

Po wprowadzeniu wszystkich zmian w sekcji i wierszu nadszedł czas, aby dodać różne moduły, które chcesz wyświetlić. Pierwszą rzeczą, którą dodamy, jest tytuł, który się pojawi. Zacznij od dodania nowego modułu tekstowego do pierwszej kolumny wiersza, wpisując tekst w zakładce Treść i przechodząc do zakładki Projekt. Na karcie Projekt użyliśmy następujących ustawień dla podkategorii Tekst:

• Orientacja tekstu: Środek
• Czcionka tekstu: Homar
• Styl czcionki: pogrubiony
• Rozmiar czcionki tekstu: 37
• Kolor tekstu: #002282
• Wysokość linii tekstu: 1,7 em

Dodaj drugi moduł tekstowy

Kontynuuj, dodając nowy moduł tekstowy i wpisz tekst, który chcesz wyświetlić w zakładce Treść. Przejdź do karty Projekt i wprowadź następujące ustawienia w podkategorii Tekst:

• Orientacja tekstu: Środek
• Czcionka tekstu: Arial
• Rozmiar czcionki tekstu: 13
• Kolor tekstu: #002282
• Wysokość linii tekstu: 1,7 em

Dodaj moduł śledzenia mediów społecznościowych

Idąc dalej, dodamy również moduł Social Media Follow do pierwszej kolumny. W tym przypadku wybraliśmy trzy ikony społecznościowe; Facebook, Twitter i Instagram. Po dodaniu tych ikon społecznościowych na karcie Treść zmień kształt łącza na „Okrąg” w podkategorii Ikona.

Ostatnią rzeczą, którą musimy zrobić, to dodać lewe wypełnienie do tego modułu w zakładce Zaawansowane. Dodaj następujący wiersz kodu CSS do elementu głównego:

padding-left: 40%;

Dodaj moduł formularza kontaktowego

Następnie możemy przejść do drugiej kolumny wiersza. W tej kolumnie pierwszą rzeczą, którą umieścimy, jest Moduł Formularza Kontaktowego. W tym przykładzie wybraliśmy tylko dwa pola; imię i nazwisko oraz adres e-mail. Po dodaniu modułu Contact Form należy przejść do zakładki Design modułu Contact Form i wprowadzić następujące zmiany w podkategorii Tekst pola formularza:

• Rozmiar czcionki pola formularza: 15
• Kolor tekstu pola formularza: #002282
• Wysokość linii pola formularza: 1,7 em

Na tej samej karcie wprowadź następujące zmiany w podkategorii Przycisk:

• Użyj niestandardowego stylu dla przycisku: Tak
• Rozmiar tekstu przycisku: 20
• Kolor tekstu przycisku: #FFFFFF
• Kolor tła przycisku: #0086c4
• Szerokość obramowania przycisku: 2
• Promień przycisku: 3

Przejdź do zakładki Zaawansowane i dodaj górną wyściółkę w wysokości 5%.

Dodaj moduł Blurb

Kolejną rzeczą, którą musimy dodać do drugiej kolumny, jest moduł Blurb. Jedyne, do czego potrzebujemy tego modułu, to ikona wyjścia w prawym górnym rogu wyskakującego okienka. Wybierz następującą ikonę z listy ikon i pozostaw wszystkie pozostałe puste.

Idąc dalej, przejdź do zakładki Zaawansowane i wpisz „zamknij” jako klasę CSS. Na tej samej karcie dodaj następujące wiersze kodu do głównego elementu podkategorii Custom CSS:

position: absolute;
top: -45px;
right: -30px;
cursor: pointer;

Zastosuj tło gradientowe do wiersza

Na koniec dodamy do wiersza ładne tło gradientowe. Otwórz ustawienia i wprowadź następujące zmiany w opcji gradientowego tła:

• Pierwszy kolor gradientu: #FFFFFF
• Drugi kolor gradientu: #0c71c3
• Typ gradientu: liniowy
• Kierunek gradientu: 124deg
• Pozycja startowa: 50%
• Pozycja końcowa: 50%

Utwórz formularz kontaktowy dla tabletu i telefonu po kliknięciu

Teraz, gdy stworzyliśmy wersję na komputer, wersja na tablet i telefon będzie działać znacznie szybciej. Większość modułów, których użyliśmy w wersji na komputery, jest taka sama w wersji mobilnej. Wynik końcowy na urządzeniu mobilnym wygląda tak:

Dodaj nową sekcję standardową

Zacznij od dodania kolejnej sekcji standardowej. Ta sekcja będzie musiała mieć takie same ustawienia jak sekcja, którą stworzyliśmy wcześniej. Dodaj „popup” do klasy CSS i dodaj następujące wiersze kodu CSS do pola Przed:

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

Dodaj również następujący wiersz kodu CSS do elementu głównego:

display: none;

Zamiast wyłączać ją na telefonie i tablecie, tak jak to zrobiliśmy w wersji na komputery, wyłączymy ją na komputerze w podkategorii Widoczność:

Dodaj wiersz jednokolumnowy

W przypadku wyskakującego okienka telefonu i tabletu będziemy potrzebować tylko jednej kolumny. W tym wierszu nie będziemy używać niestandardowej szerokości. Zamierzamy jednak zastosować niestandardowe wypełnienie, tak jak w przypadku wersji na komputery; 30px dla górnego, lewego i prawego wypełnienia kolumny.

Musimy również upewnić się, że następujące wiersze kodu CSS zostały dodane do elementu głównego w podkategorii Niestandardowy CSS:

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

Sklonuj moduł tekstowy, śledź w mediach społecznościowych i formularz kontaktowy

Następną rzeczą, którą musimy zrobić, jest sklonowanie pierwszego modułu tekstowego, którego użyliśmy w wersji na komputery, wraz z modułem śledzenia w mediach społecznościowych i formularzem kontaktowym. Po ich sklonowaniu umieść je w jednokolumnowym rzędzie nowo utworzonej sekcji.

Klonuj moduł Blurb i zmień kod CSS w zakładce Zaawansowane

Możesz także sklonować moduł Blurb, który był używany w wersji na komputery, ale konieczna jest niewielka zmiana w kodzie CSS. Zamiast używać kodu dla komputerów stacjonarnych, użyj następującego:

position: absolute;
top: -15px;
right: -25px;
cursor: pointer;

Upewnij się, że klasa CSS „zamknij” jest używana również w module Blurb.

Zastosuj tło gradientowe do wiersza

W wersji mobilnej używamy różnych ustawień gradientowego tła wiersza:

• Pierwszy kolor gradientu: #FFFFFF
• Drugi kolor gradientu: #0c71c3
• Typ gradientu: liniowy
• Kierunek gradientu: 180 stopni
• Pozycja startowa: 40%
• Pozycja końcowa: 40%

Dodaj kod jQuery do opcji motywu

Ostatnią rzeczą, jaką musimy zrobić w tym samouczku, jest dodanie kodu jQuery. Możesz dodać kod za pomocą opcji motywu lub modułu kodu, który umieszczasz na stronie, nad którą pracujesz. W tym przykładzie po prostu umieścimy go w opcjach motywu.

Aby to zrobić, przejdź do pulpitu WordPress > Divi > Opcje motywu > Integracja > I wklej następujące wiersze kodu jQuery w nagłówku swojej witryny:

<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>

Wynik

Jeśli śledzisz post, krok po kroku, powinieneś być w stanie osiągnąć następujący wynik na pulpicie:

Oraz następujący wynik na tabletach i telefonach:

Końcowe przemyślenia

W tym poście pokazaliśmy, jak utworzyć formularz kontaktowy po kliknięciu. Korzystanie z tej metody w celu nawiązania kontaktu z odwiedzającymi jest subtelne, ale skuteczne. Jeśli masz jakieś pytania lub sugestie; upewnij się, że zostawiłeś komentarz w sekcji komentarzy poniżej.

Pamiętaj, aby zapisać się do naszego biuletynu e-mail i kanału YouTube, aby nigdy nie przegapić ważnego ogłoszenia, przydatnej wskazówki lub gratisów Divi!

Polecane zdjęcie autorstwa La1n / shutterstock.com