Jak stworzyć wbudowany formularz kontaktowy z Divi
Opublikowany: 2017-07-14Sekcja główna (lub nad krawędzią) strony głównej to najlepsze nieruchomości. I jak większość deweloperów, chcesz zmaksymalizować swoją przestrzeń. Tutaj przydaje się wbudowany formularz kontaktowy. Formularz wbudowany to w zasadzie formularz, w którym wszystkie jego pola lub kontrolki pozostają obok siebie, w linii i wyrównane do lewej. Ten kompaktowy układ doskonale nadaje się do zwiększania konwersji na stronie głównej lub stronie docelowej.
Dzisiaj pokażę Ci, jak stworzyć wbudowany formularz kontaktowy dla Twojej strony internetowej za pomocą Visual Buildera Divi. Praca potrzebna do wykonania tego polega tak naprawdę na dostosowaniu zarówno szerokości, jak i wyrównania pól formularza. Aby to osiągnąć, wykorzystamy funkcje projektowe modułu kontaktowego, a także dodamy niestandardowe CSS w zakładce Zaawansowane.
Jeśli jesteś nowy w Divi, nie pozwól, aby karta Zaawansowane zniechęciła Cię do zajęcia się tym samouczkiem. Staram się, aby wszystko było proste i jasne.
Cieszyć się.
Oto przykład tego, jak będzie wyglądał formularz kontaktowy w tekście
Koncepcja i inspiracja
Jeśli kiedykolwiek musiałeś kupować ubezpieczenie samochodu lub szukać nowego domu w Internecie, prawdopodobnie widziałeś formularz inline, który jest celowo zwarty z minimalnymi polami wejściowymi, dzięki czemu Ty (użytkownik) byłbyś bardziej skłonny do potoczenia piłki po nowy cytat. Chciałem więc stworzyć prosty formularz kontaktowy w linii, który zrobi coś podobnego dla użytkowników Divi. Chociaż ten formularz kontaktowy nie będzie w stanie wykonać takich czynności, jak wygenerowanie wyceny lub wyświetlenie listy domów, odpowiada on potrzebom właścicieli firm lub blogerów, którzy chcą zapewnić klientom lub użytkownikom łatwy sposób na dotarcie do nich.
Wdrażanie projektu za pomocą Divi
Subskrybuj nasz kanał YouTube
Zaczynamy od dodania zwykłej sekcji z pojedynczym wierszem struktury kolumny.
Ponieważ reszta naszych elementów będzie trudna do zobaczenia na białym tle, dodajmy kolor tła do naszej sekcji, przechodząc do ustawień sekcji i aktualizując następujące elementy:
Opcje treści
Kolor tła: #006ea5
Zapisz ustawienia
Teraz możemy dodać nasz moduł formularza kontaktowego do wiersza.
Zaktualizuj ustawienia formularza kontaktowego w następujący sposób:
Opcje treści
Tekst przycisku Prześlij: „Pobierz wycenę”
E-mail: [Wpisz adres e-mail, na który mają być wysyłane wiadomości]
Wyświetl Captcha: NIE
Kolor tła formularza: rgba (255,255,255,0)
Opcje projektowe
Czcionka pola formularza: Lato
Rozmiar czcionki pola formularza: 24px
Kolor tekstu pola formularza: #ffffff
Promień obramowania wejściowego: 3px
Użyj ramki: TAK
Kolor obramowania: #ffffff
Szerokość obramowania: 1px
Rozmiar tekstu przycisku: 24px pulpit, 20px tablet, 20px smartfon
Kolor tekstu przycisku: #0c71c3
Kolor tła przycisku: #f4f11f
Szerokość obramowania przycisku: 3px
Promień obramowania przycisku: 3
Zapisz ustawienia
Wróć do zakładki Treść i usuń pole wiadomości, klikając ikonę kosza po prawej stronie paska pola. Następnie dodaj nowe pole, klikając przycisk z szarym kółkiem z białym znakiem plus znajdującym się pod poszczególnymi paskami pól. Będzie to pole Telefon.
Zaktualizuj ustawienia pola w następujący sposób:
Opcje treści
Identyfikator pola: „Telefon”
Tytuł: Telefon
Opcje projektowe
Zrób pełną szerokość: NIE
Dozwolone symbole: tylko liczby (0-9)
Zaawansowane opcje
Wprowadź następujący niestandardowy kod CSS w polu Main Element :
Max-width: 18%; Float: left; Margin-top: -1.5%; Clear: none !important;
Zapisz ustawienia
Teraz wróć do zakładki Treść w ustawieniach formularza kontaktowego i zduplikuj właśnie utworzone pole Telefon i zamień je w pole Kod pocztowy.
Zaktualizuj ustawienia pola w następujący sposób:
Opcje treści
Identyfikator pola: „Kod”
Tytuł: kod pocztowy
Zaawansowane opcje
Wprowadź następujący niestandardowy kod CSS w polu Main Element :
Max-width: 17%; Margin-top: -1.5%;
Zapisz ustawienia
Do tej pory dostosowaliśmy szerokość i wyrównanie naszych pól Phone i Zip Code. Teraz musimy zrobić to samo dla pól Nazwa i E-mail.
Przejdź do ustawień pola Nazwa i zaktualizuj Opcje zaawansowane za pomocą następującego niestandardowego kodu CSS w polu Element główny :
Max-width: 20%; Margin-top: -1.5%;
Zapisz ustawienia
Następnie przejdź do ustawień pola E-mail i zaktualizuj Opcje zaawansowane za pomocą następującego niestandardowego kodu CSS w polu Element główny :
Max-width: 20%; Margin-top: -1.5%;
Zapisz ustawienia
Ważna uwaga: Zwróć uwagę, że niestandardowy CSS używany dla każdego pola ma właściwość max-width ustawioną na określoną wartość procentową. Ta wartość procentowa określa, jak szerokie pola będą powiązane z szerokością obszaru zawartości. Na przykład, domyślny obszar zawartości Divi to 1080px, więc pole nazwy ma 20% 1080px. Ważne jest, aby wiedzieć, czy chcesz stworzyć więcej miejsca na formularz inline. Wszystko, co musisz zrobić, to odpowiednio dostosować wartość procentową właściwości max-width.
Prawie skończony. Teraz wszystko, co musimy zrobić, to wyczyścić odstępy w sekcji i wierszu, w których znajduje się formularz. Przejdź do sekcji Ustawienia na karcie Projekt i zaktualizuj następujące informacje:
Niestandardowe wypełnienie: 12px góra, 14px dół
Zapisz ustawienia
Teraz przejdź do Ustawień wiersza , na karcie Projekt i zaktualizuj następujące informacje:
Niestandardowe dopełnienie: 48px góra, 0px prawo, 0px dół, 0px lewo
Zapisz ustawienia
Sprawianie, że jest responsywny
Ponieważ jest to formularz poziomy, pola formularza będą musiały zostać dostosowane na urządzeniach mobilnych. Aby to naprawić, wystarczy jeden mały fragment niestandardowego CSS. Przejdź do strony Ustawienia , na karcie Zaawansowane , a następnie w polu Niestandardowy CSS :
@media (max-width: 767px) {
p.et_pb_contact_field {
max-width: 100% !important;
}
}
Oto jak formularz reaguje na różne rozmiary ekranu.
Tworzenie wbudowanego formularza kontaktowego z trzema polami
Teraz, po utworzeniu formularza wbudowanego z czterema polami, możesz łatwo przekonwertować go na trzy pola, aktualizując kilka opcji. Oto kroki:
- Edytuj właśnie utworzony formularz wbudowany lub zduplikuj formularz.
- Usuń pole kodu pocztowego (teraz masz tylko trzy pola)
- Zaktualizuj pole telefonu (lub cokolwiek to jest trzecie pole) Ustawienia na karcie Zaawansowane z następującym niestandardowym kodem CSS w
Main Element box:max-width: 25%; float:left; margin-top: -1.5%; clear: none !important;
- Zaktualizuj ustawienia pola e-mail (lub cokolwiek to jest drugie pole) na karcie Zaawansowane za pomocą następującego niestandardowego kodu CSS w polu elementu głównego:
max-width: 25%; margin-top: -1.5%;
- Zaktualizuj Ustawienia pola nazwy (lub cokolwiek jest pierwszym polem) na karcie Zaawansowane za pomocą następującego niestandardowego kodu CSS w polu elementu głównego:
max-width: 25%; margin-top: -1.5%;
Uwaga: Zwróć uwagę, że właściwość max-width dla każdego z pól wynosi teraz 25% w celu zwiększenia szerokości pól.
Tworzenie dwupolowego wbudowanego formularza kontaktowego
Możesz również przekonwertować formularz wbudowany na formularz dwupolowy, aktualizując kilka opcji. Oto kroki:
- Edytuj właśnie utworzony formularz wbudowany lub zduplikuj formularz.
- Usuń pole kodu pocztowego i pole telefonu, aby mieć tylko dwa pola (imię i nazwisko oraz adres e-mail)
- Zaktualizuj Ustawienia pola nazwy (lub cokolwiek jest pierwszym polem) na karcie Zaawansowane za pomocą następującego niestandardowego kodu CSS w polu elementu głównego:
max-width: 37%; margin-top: -1.5%;
- Zaktualizuj ustawienia pola e-mail (lub cokolwiek to jest drugie pole) na karcie Zaawansowane za pomocą następującego niestandardowego kodu CSS w polu elementu głównego:
max-width: 37%; margin-top: -1.5%; clear: none !important;
Dodawanie innych typów pól
Ten samouczek dotyczy głównie zwykłych typów pól wejściowych, ale można go łatwo zmienić na inny typ pola. Na przykład, jeśli chcesz użyć typu pola rozwijanego Wybierz, możesz zastosować wszystkie te same style, co w przypadku innych pól. Będziesz jednak musiał dodać kolor tła (#006ea5) do tego konkretnego pola, aby zobaczyć opcje.
Oto jak wyglądałoby rozwijane pole…
Końcowe przemyślenia
Z mojego doświadczenia wynika, że wbudowane formularze kontaktowe mogą być potężnym narzędziem dla Twojej firmy. Istnieją bardziej zaawansowane wtyczki z bardziej niezawodnymi opcjami po wyjęciu z pudełka, ale jeśli inna wtyczka nie jest twoją filiżanką herbaty i prostsze rozwiązanie ma sens, spróbuj. Mam nadzieję że ci się spodoba.
Czekamy na kontakt z Państwem w komentarzach.