Jak utworzyć formularz kontaktowy na kliknięcia Divi

W tym tutorialu Divi, mamy zamiar pokazać, jak stworzyć formularza kontaktowego, który pojawia się po kliknięciu przycisku (jako nakładka) za pomocą niczego innego niż Divi, trochę kodu CSS i jQuery kodu.

Jest to świetny sposób, aby zachować swoje odwiedzających witrynę koncentruje się na działaniach, które zostały popełnione w celu klikając przycisk. Nie bierze je do innej strony, ale blokuje je do takiego działania, dopóki to się robi.

Poniżej można wziąć szybki szczyt na co będziemy tworzyć, a następnie wskoczyć do tutorialu!

Wynik na pulpicie

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail
  • facebook
  • Twitter
  • Google+
  • Gmail
  • facebook
  • Twitter
  • Google+
  • Gmail

Wynik na Telefony Tablet

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail
  • facebook
  • Twitter
  • Google+
  • Gmail
  • facebook
  • Twitter
  • Google+
  • Gmail

Inspiracja

Inspiracją dla tego postu pochodzi z prośbą komentarz i znajduje się na B3multimedia . Chociaż oni innej metody, aby tę pracę, mają również wspaniały sposób na stworzenie formularza kontaktowego na kliknięcia. Spójrz na wynik:

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail

Tworzenie sekcji z modułu przyciskowego

Zazwyczaj pokażemy, jak to zrobić prawie wszystko w frontend budowniczego wizualnej Divi za. W dzisiejszym poście jednak będę korzystania z generatora backend. Ze względu na kodzie używamy to trochę łatwiejsze. Powiedział, że jeśli kochasz edytor frontend tak samo jak my, można równie dobrze zakończyć ten samouczek przy użyciu widoku frontend „szkielet”.

Pierwszą rzeczą, jaką musimy zrobić, to dodać nową sekcję, gdzie umieścić przycisk, który pozwolę formularz kontaktowy do pop-up. Wystarczy dodać sekcję standardową, a następnie wybierz jeden wiersz kolumny. Gdy już to zrobisz, dodać moduł przycisku do niego.

Można projektować przycisk jednak chcesz, ale trzeba się upewnić, że przycisk URL zaczyna się od „#”, a następnie przez coś innego. Nie można po prostu pozostawić puste lub używać tylko znak „#”. Dodając „#” i jakiś tekst, strona nie ruszy po kliknięciu na przycisku. Jeśli zostawisz to pole puste, strona zostanie odświeżona po kliknięciu. A jeśli używasz tylko „#”, będziesz wysłany na górze strony.

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail

Kolejną ważną rzeczą, którą musimy zrobić, to przypisać klasę CSS do przycisku. Będziemy używać tej klasy CSS później na tym stanowisku w kodzie jQuery aby upewnić się, że formularz kontaktowy pojawia się po kliknięciu. Klasa musimy przypisać do przycisku jest po prostu „przycisk”.

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail

Tworzenie pulpitu formularza kontaktowego Click

Następną rzeczą, którą musimy zrobić, to utworzyć na pulpicie formularza kontaktowego, który będzie wyświetlany, gdy ktoś kliknie na przycisk, który mamy utworzonego w poprzedniej części tego postu. Później na tym stanowisku, będziemy także pokazać, jak stworzyć wersję mobilną.

Można w zasadzie stworzyć dowolny projekt, który ma w rzędzie i sprawiają, że pojawiają się jako popup, jeśli używasz tej metody. Jesteśmy tylko zamiar dać wam przedsmak tego, co można osiągnąć poprzez pokazanie, w jaki sposób utworzyć następujący przykład:

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail
  • facebook
  • Twitter
  • Google+
  • Gmail
  • facebook
  • Twitter
  • Google+
  • Gmail

Dodaj Sekcja nowy standard

Zacznij dodając nową sekcję standardową do strony, nad którym pracujesz. Idź na karcie Zaawansowane w sekcji właśnie dodanej i dodać „okienko” do pola klasy CSS. Przewiń w dół, że samej karcie i umieść następujące linie kodu CSS w polu przed lub podkategorii Niestandardowe CSS:

top0px;
left0px;
width100%;
height100%;
z-index999;
content"";
background: rgba(0,0,00.8);
positionfixed;

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail
  • facebook
  • Twitter
  • Google+
  • Gmail

Dodając to, jesteśmy upewniając się, że sekcja zajmuje całą kartę. Można zmienić kolor tła w kodzie CSS do tworzenia tła nakładkę, którą chcesz. W tym przypadku używamy czarnego koloru z jakiegoś przejrzystości. W ramach tej samej karcie, należy dodać następujący wiersz kodu CSS do elementu głównego, a także:

displaynone;

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail
  • facebook
  • Twitter
  • Google+
  • Gmail

Ostatnią rzeczą, którą musimy zrobić w zakładce Zaawansowane jest wyłączenie sekcję na telefon i tablet w podkategorii widoczności.

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail

Dodaj dwukolumnowy Row

Kontynuuj dodając wiersz dwukolumnowy i przejdź do karty projektu. Zacznij modyfikując szerokość wiersza w podkategorii wymiarowania. W tym przykładzie użyliśmy niestandardową szerokość 1291px.

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail

Przewiń kartę Projekt i użyć „30px” na górze, po lewej i prawej wyściółka z obu kolumn w ramach podkategorii odstępach.

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail

Skończyć przechodząc do zakładki Zaawansowane. W ramach głównego elementu, należy dodać następujące linie kodu CSS:

transform: translatey(-50%) translatex(-50%);
positionfixed;
top50%;
left50%;
z-index1000;
border2px solid #0c71c3;
border-radius: 8px;

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail
  • facebook
  • Twitter
  • Google+
  • Gmail

Dodaj pierwszy moduł Text

Po wprowadzeniu wszystkich zmian w przekroju i wiersza, nadszedł czas, aby dodać różne moduły, które chcesz pokazać. Pierwszą rzeczą, dodamy to tytuł, który pojawia się. Zacznij dodając nowy moduł tekstowy do pierwszej kolumnie rzędu, pisząc tekst na karcie Zawartość i przechodząc do karty projektu. Na karcie projektu użyliśmy następujących ustawień dla podkategorii Tekst:

  • Orientacja tekstu: Centrum
  • Czcionki tekstu: Lobster
  • Styl czcionki: Bold
  • Rozmiar tekstu Czcionka: 37
  • Kolor tekstu: # 002282
  • Tekst Linia Wzrost: 1.7em

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail

Dodaj drugi moduł Text

Kontynuuj dodając nowy moduł tekstowy i wpisz w dół tekst, który ma być wyświetlany w zakładce Zawartość. Przejść do zakładki zaprojektować i wykonać następujące ustawienia dotyczą podkategorii Tekst:

  • Orientacja tekstu: Centrum
  • Czcionki tekstu: Arial
  • Rozmiar tekstu Czcionka: 13
  • Kolor tekstu: # 002282
  • Tekst Linia Wzrost: 1.7em

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail

Dodaj social media Śledź Module

Idąc dalej, mamy zamiar dodać Śledź moduł social media do pierwszej kolumny, jak również. W tym przypadku wybraliśmy trzy ikony społecznych; Facebook, Twitter i Instagram. Po dodaniu tych ikon społecznych w karcie Zawartość zmienić kształt Link do „Kręgu” w ikonie podkategorii.

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail

Ostatnią rzeczą, jaką musimy zrobić, to dodać lewy dopełnienie do tego modułu w karcie Zaawansowane. Dodaj następujący wiersz kodu CSS do elementu głównego:

padding-left40%;

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail

Dodaj Formularz kontaktowy Module

Następnie możemy przejść do drugiej kolumnie rzędu. W tej kolumnie, pierwszą rzeczą, którą mamy zamiar umieścić to Formularz kontaktowy modułu. W tym przykładzie wybraliśmy tylko dwa pola; imię i nazwisko oraz adres e-mail. Po dodaniu pola formularza moduł, przejdź do karty projektu z formularza kontaktowego moduł i wprowadzić następujące zmiany do tekstu podkategorii pól formularza:

  • Wielkość pól formularza czcionki: 15
  • Formularz Pole Kolor tekstu: # 002282
  • Tworzą pole linii Wysokość: 1.7em

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail

W ramach tej samej karcie, wprowadzić następujące zmiany dotyczą podkategorii przycisku:

  • Użyj styl niestandardowy dla Buttona: Tak
  • Przycisk Rozmiar tekstu: 20
  • Przycisk Kolor tekstu: #FFFFFF
  • Przycisk Kolor tła: # 0086c4
  • Przycisk Border Szerokość: 2
  • Przycisk Promień: 3

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail

Przejść do zakładki Zaawansowane i dodać górną wyściółkę o 5%.

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail

Dodaj Blurb Module

Inną rzeczą, musimy dodać do drugiej kolumnie znajduje się moduł Blurb. Jedyną rzeczą, jaką musimy tego modułu, jest ikona wyjście na prawej górnej części okienko. Wybierz następującą ikonę na liście ikon i zostawić wszystkie inne rzeczy puste.

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail

Idąc dalej, należy przejść do zakładki Zaawansowane i wpisz w dół „blisko” jako klasa CSS. W ramach tej samej karcie, należy dodać następujące linie kodu do głównego elementu podkategorii Niestandardowe CSS:

positionabsolute;
top-45px;
right-30px;
cursorpointer;

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail

Zastosuj gradient tło do Row

Last but not least, mamy zamiar dodać jakąś ładną gradientu tła do wiersza. Otwórz ustawienia i wprowadzić następujące zmiany odnoszą się do opcji gradientu:

  • Pierwszy gradient Kolor: #FFFFFF
  • Drugi Gradient color: # 0c71c3
  • Typ gradientu: liniowy
  • Gradient Kierunek: 124deg
  • Zacznij stanowisko: 50%
  • Pozycja końcowa: 50%

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail

Tworzenie tabletkę telefon kontakt formularz na kliknij

Teraz, stworzyliśmy wersję pulpitu, wersja dla tabletu i telefonu pójdzie dużo szybciej. Większość modułów, które używaliśmy do komputerowej wersji są takie same dla wersji mobilnej. Wynik końcowy na komórkę wygląda następująco:

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail
  • facebook
  • Twitter
  • Google+
  • Gmail
  • facebook
  • Twitter
  • Google+
  • Gmail

Dodaj Sekcja nowy standard

Zacznij dodając kolejną sekcję standardową. Ta sekcja będzie mieć takie same ustawienia jak w dziale utworzonej wcześniej. Dodaj „okienko” do klasy CSS i dodaj następujące linie kodu CSS do pola wcześniej:

top0px;
left0px;
width100%;
height100%;
z-index999;
content"";
background: rgba(0,0,00.8);
positionfixed;

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail
  • facebook
  • Twitter
  • Google+
  • Gmail

Dodaj następujący wiersz kodu CSS do elementu głównego, a także:

displaynone;

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail
  • facebook
  • Twitter
  • Google+
  • Gmail

Zamiast wyłączać go do telefonu i tabletu, jak my do wersji dla komputerów, mamy zamiar wyłączyć go na pulpicie w podkategorii Widoczność:

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail

Dodaj jednokolumnowym Row

Dla telefonu i tabletu popup, będziemy potrzebować tylko jedną kolumnę. W tym wierszu, nie będziemy używać niestandardowej szerokości. Jednak mamy zamiar zastosować niestandardową wyściółkę jak my do wersji dla komputerów stacjonarnych; 30px na górze, po lewej i prawej wypełnienie kolumny.

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail

Będziemy też należy upewnić się, że następujące linie kodu CSS są dodawane do głównego elementu w podkategorii Niestandardowe CSS:

transform: translatey(-50%) translatex(-50%);
positionfixed;
top50%;
left50%;
z-index1000;
border2px solid #0c71c3;
border-radius: 8px;

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail
  • facebook
  • Twitter
  • Google+
  • Gmail

Sklonować tekstu, Social Media podążają Formularz kontaktowy Module

Następną rzeczą, którą musimy zrobić jest sklonowanie pierwszego modułu Text mamy używany do wersji dla komputerów stacjonarnych wraz z Social Media Śledź i forma kontaktu Module. Po sklonowany je umieścić je w wierszu jednokolumnowym nowego właśnie utworzonej sekcji.

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail

Clone Blurb Module & Zmień kod CSS w Advanced Tab

Można również sklonować Blurb moduł, który został użyty do wersji dla komputerów stacjonarnych, ale nie musi być niewielka zmiana w kodzie CSS. Zamiast używać kodu na komputerze, zamiast używać następujących:

positionabsolute;
top-15px;
right-25px;
cursorpointer;

Upewnij się, że „blisko” klasa CSS służy do modułu Blurb również.

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail

Zastosuj gradient tło do Row

Dla wersji mobilnej, używamy różnych ustawień na tle gradientu rzędu:

  • Pierwszy gradient Kolor: #FFFFFF
  • Drugi Gradient color: # 0c71c3
  • Typ gradientu: liniowy
  • Gradient Kierunek: 180 stopni
  • Zacznij stanowisko: 40%
  • Pozycja końcowa: 40%

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail

Dodaj kod jQuery do Opcje tematu

Ostatnią rzeczą, jaką musimy zrobić na tym kursie jest dodanie kodu jQuery. Możesz dodać kod w opcjach tematu lub poprzez moduł kodu, który umieścisz w obrębie strony, nad którym pracujesz. W tym przykładzie, jesteśmy po prostu zamiar umieścić go w Opcjach Motywu.

Aby to zrobić, przejdź do WordPress Dashboard> Divi> Opcje tematyczne> Integracja> i wklej następujące linie kodu jQuery w głowie swojej stronie:

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

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail

Wynik

Jeśli zastosujemy się do stanowiska, krok po kroku, powinieneś być w stanie osiągnąć następujący wynik na pulpicie:

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail
  • facebook
  • Twitter
  • Google+
  • Gmail
  • facebook
  • Twitter
  • Google+
  • Gmail

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

Formularz kontaktowy na kliknięcie
  • facebook
  • Twitter
  • Google+
  • Gmail
  • facebook
  • Twitter
  • Google+
  • Gmail
  • facebook
  • Twitter
  • Google+
  • Gmail

Artykuł z bloga ElegantThemes

Share This