Tworzenie wielu ukierunkowanych formularzy kontaktowych po najechaniu kursorem w jednym projekcie za pomocą Divi

Sposób wyświetlania formularzy kontaktowych w witrynie może zdecydowanie pomóc w zwiększeniu współczynników konwersji. Oprócz tworzenia pięknych i przyjaznych dla użytkownika formularzy kontaktowych, możesz również podejść do tego w bardziej ukierunkowany sposób. W tym poście pokażemy Ci, jak stworzyć jeden projekt z wieloma formularzami kontaktowymi, które pojawiają się w zależności od usługi, którą interesują Twoi goście. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz układ ukierunkowanych formularzy kontaktowych ZA DARMO

Aby położyć ręce na darmowym, ukierunkowanym układzie formularzy kontaktowych, 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!

Po przesłaniu układu na swoją stronę nadal będziesz musiał dodać kod CSS do strony, nad którą pracujesz. Kod CSS znajdziesz na końcu tego samouczka.

Subskrybuj nasz kanał YouTube

Zacznijmy odtwarzać!

Dodaj sekcję #1

Otwórz nową lub istniejącą stronę i dodaj nową zwykłą sekcję.

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Dodaj moduł tekstowy

Dodaj zawartość H2

Dodaj moduł tekstowy do kolumny z wybraną zawartością H2.

Ustawienia tekstu H2

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu H2:

• Grubość czcionki nagłówka 2: Ultra Bold
• Styl czcionki nagłówka 2: Wielkie litery
• Nagłówek 2 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 2: #000000
• Rozmiar tekstu nagłówka 2: 6vw
• Nagłówek 2 Odstępy między literami: -0,4vw
• Wysokość linii nagłówka 2: 0,8 em

Rozstaw

Dodaj również niestandardowy górny i dolny margines.

• Górny margines: 2vw
• Dolny margines: 2vw

Dodaj sekcję #2

Tło gradientowe

Dodaj kolejną sekcję tuż pod poprzednią i zastosuj następujące tło gradientowe (lub dowolne wybrane tło gradientowe):

• Kolor 1: #30fff1
• Kolor 2: #4635ff
• Kierunek gradientu: 110 stopni
• Pozycja końcowa: 85%

Górny rozdzielacz

Przejdź do zakładki projektu i dodaj górną przegrodę.

• Styl dzielnika: Znajdź na liście
• Układ rozdzielaczy: pod treścią sekcji

Dolny rozdzielacz

Dodaj również dolną przegrodę.

• Styl dzielnika: Znajdź na liście
• Układ rozdzielaczy: pod treścią sekcji

Rozmiary

Zmień wysokość w ustawieniach rozmiaru.

• Wysokość: 200px

Rozstaw

Następnie dodaj niestandardowe ustawienia odstępów.

• Margines dolny: 30vw (komputer stacjonarny), 45vw (tablet), 200vw (telefon)
• Górna wyściółka: 0vw
• Dolna wyściółka: 0vw

Klasa CSS

W dalszej części postu dodamy trochę kodu CSS, aby efekt działał. Przygotowując się do tego, dodamy do sekcji klasę CSS.

• Klasa CSS: sekcja kontaktowa

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Przelewowy

Otwórz ustawienia wiersza i ukryj przepełnienia.

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Przejścia

Usuń również czas trwania przejścia.

• Czas trwania przejścia: 0 ms

Dodaj moduł Blurb

Dodaj tytuł do pola zawartości

Czas zacząć dodawać moduły! Dodaj Moduł Blurb i wprowadź wybrany przez siebie tytuł, który reprezentuje jedną z Twoich usług.

Wybierz ikonę

Następnie wybierz ikonę.

Domyślny kolor tła

Kontynuuj, dodając domyślny kolor tła.

• Kolor tła: #ffffff

Wskaż kolor tła

Zmień kolor tła po najechaniu myszą.

• Kolor tła: #000000

Domyślne ustawienia ikon

Przejdź do zakładki projekt i odpowiednio zmień ustawienia ikon:

• Kolor ikony: #000000
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 2.5vw (komputer), 5vw (tablet), 7vw (telefon)

Ustawienia ikony kursora

Zmodyfikuj kolor ikony po najechaniu myszą.

• Kolor ikony: #ffffff

Domyślne ustawienia tekstu tytułu

Następnie otwórz ustawienia tekstu tytułu i zastosuj następujące zmiany:

• Grubość czcionki tytułu: Ultra Bold
• Styl czcionki tytułu: wielkie litery
• Wyrównanie tekstu tytułu: do środka
• Kolor tekstu tytułu: #000000
• Rozmiar tekstu tytułu: 0,9vw (komputer), 1,8vw (tablet), 3vw (telefon)

Ustawienia tekstu w tytule najechania kursorem

Zmień kolor tekstu tytułu po najechaniu myszą.

• Kolor tekstu tytułu: #ffffff

Rozmiary

Następnie zmodyfikuj szerokość w różnych rozmiarach ekranu.

• Szerokość: 10vw (komputer stacjonarny), 17vw (tablet), 30vw (telefon)
• Wyrównanie modułu: Środek

Rozstaw

I dodaj niestandardowe wartości marginesów i dopełnienia do ustawień odstępów.

• Górny margines: 4vw
• Dolny margines: 4vw
• Górna wyściółka: 2vw (komputer), 3vw (tablet), 6vw (telefon)
• Dolna wyściółka: 2vw (komputer), 3vw (tablet), 6vw (telefon)

Granica

Zamieniamy również moduł w okrąg, dodając „50vw” do każdego z rogów w ustawieniach obramowania.

Cień Pudełka

Dodaj również cień do pudełka.

Domyślna skala transformacji

Przejdź do ustawień transformacji i upewnij się, że domyślne wartości skali transformacji pozostają „100%”.

Skala przekształcenia najechania

Zmień te wartości po najechaniu myszą.

• Dół: 120%
• Prawo: 120%

Dodaj formularz kontaktowy

Utwórz pola nazwy i adresu e-mail o pełnej szerokości

Drugim modułem, którego potrzebujemy w tym wierszu, jest Moduł Formularza Kontaktowego. Po dodaniu formularza kontaktowego otwórz pola nazwy i adresu e-mail i ustaw je na pełną szerokość.

• Zrób pełną szerokość: Tak

Usuń pole wiadomości i wstaw trzy pola wejściowe dla pytań specyficznych dla usługi

Dodaj następnie trzy pytania, które dotyczą tej konkretnej usługi.

Wyłącz Captcha

Wyłącz również opcję captcha.

• Pokaż Captcha: Nie

Ustawienia pól

Przejdź do zakładki projektu i odpowiednio zmień ustawienia pól:

• Górna wyściółka pól: 0,6vw (komputer), 0,9vw (tablet), 1,5vw (telefon)
• Dolna wyściółka pól: 0,6vw (komputer), 0,9vw (tablet), 1,5vw (telefon)
• Rozmiar tekstu w polach: 0,8vw (komputer), 1,6vw (tablet), 2,3vw (telefon)

Ustawienia przycisków

Zmień wygląd przycisku dalej.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #000000
• Szerokość obramowania przycisku: 0px
• Grubość czcionki przycisku: Ultra Bold
• Styl czcionki przycisku: wielkie litery

Rozstaw

Dodaj też kilka wartości dopełnienia.

• Górna wyściółka: 2vw
• Dolna wyściółka: 2vw
• Lewa wyściółka: 2vw
• Prawa wyściółka: 2vw

Ustawienia granicy

Na koniec przejdź do ustawień obramowania i dodaj „10px” do każdego z rogów.

Klonuj rząd trzy razy

Po ukończeniu pierwszego rzędu możesz go sklonować trzy razy.

Zmień zawartość i ikonę Blurb dla każdego zduplikowanego wiersza

Pamiętaj, aby zmienić tytuł i ikonę notki dla każdego duplikatu.

Zmień pytania specyficzne dla usługi dla każdego zduplikowanego wiersza

Zmodyfikuj również szczegółowe pytania formularza kontaktowego.

Dodatkowe ustawienia wierszy

Domyślna wysokość

Otwórz ponownie ustawienia pierwszego wiersza, przejdź do ustawień rozmiaru i zmień wysokość w różnych rozmiarach ekranu.

• Wysokość: 18vw (komputer stacjonarny), 27vw (tablet), 38vw (telefon)

Wysokość zawisu

Przywróć wysokość do automatycznego najechania.

• Wysokość: auto

Rozszerz ustawienia rozmiaru wierszy na wszystkie wiersze w przekroju

Po zmodyfikowaniu ustawień rozmiaru dla pierwszego wiersza możesz rozszerzyć je na wszystkie wiersze w całej sekcji.

Umieść rzędy obok siebie na pulpicie i tablecie

Otwórz ustawienia strony

Na koniec umieścimy wszystkie cztery rzędy obok siebie na tablecie i komputerze. Aby to zrobić, otwórz ustawienia strony.

Wstaw niestandardowy CSS

Przejdź do niestandardowego pola CSS i dodaj następujące wiersze kodu CSS:

@media (min-width: 767px) {
.contact-section {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
}

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak stworzyć wiele ukierunkowanych formularzy kontaktowych w jednym projekcie. To świetny sposób, aby dowiedzieć się więcej o odwiedzających i o tym, jaką konkretną usługą są zainteresowani. Jeśli masz jakieś pytania lub sugestie, zostaw komentarz w sekcji komentarzy poniżej!

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.