Jak utworzyć formularz Inline kontakcie z Divi
  • facebook
  • Twitter
  • Google+
  • Gmail
Bohater (lub powyżej krotnie) odcinek głównej jest pierwsza nieruchomości. I jak większość deweloperów, chcesz zmaksymalizować przestrzeń. To, gdzie forma kontaktu inline przydaje. Formularz inline jest w zasadzie formą, w którym wszystkie jego pola lub kontrole pobyt side-by-side, inline i wyrównany do lewej. Ten kompaktowy układ jest świetne dla zwiększenia konwersji na stronie głównej lub na stronie docelowej.

Dzisiaj mam zamiar pokazać, jak stworzyć formularz kontaktowy inline dla ciebie internetowej przy użyciu programu Visual Builder Divi za. Praca potrzebna do ciągnięcia tego off jest naprawdę wszystko o dostosowanie zarówno szerokość i wyrównanie pól formularza. Aby to osiągnąć, będziemy korzystając z cech konstrukcyjnych modułu kontaktowego jak również dodanie jakiś niestandardowy CSS na karcie Zaawansowane.

Jeśli jesteś nowy w Divi, nie pozwól, zakładka Zaawansowane powstrzymać się od rozwiązania tego samouczka. Próbowałem mojej mocy, aby zachować rzeczy proste i jasne.

Cieszyć się.

Oto przykład tego, co Inline Formularz kontaktowy będzie wyglądać

inline forma kontaktu
  • facebook
  • Twitter
  • Google+
  • Gmail

Koncept & Inspiration

Jeśli kiedykolwiek miał sklep na ubezpieczenie samochodu lub szukać nowego domu online, prawdopodobnie widział formularza inline, który jest celowo kompaktowy z minimalnymi pól wejściowych, dzięki czemu (użytkownik) byłby bardziej skłonny, aby uzyskać toczenia piłki na zasadzie nowy cytat. Chciałem więc stworzyć prosty in-line formularza kontaktowego, który zrobi coś podobnego dla użytkowników Divi. Chociaż ta forma kontaktu nie będzie w stanie robić takie rzeczy jak generowanie cytat lub podciągnąć listę domów, to nie pasuje potrzeby właścicieli firm i blogerów, którzy chcą zapewnić łatwy sposób dla klientów lub użytkowników, aby dotrzeć.

Wykonawczego Design z Divi

Zaczynamy dodając Regular rozdział z jednej struktury kolumna rzędu.

inline forma kontaktu
  • facebook
  • Twitter
  • Google+
  • Gmail

Ponieważ reszta naszych elementów trudno będzie zobaczyć na białym backround, chodźmy naprzód i dodać kolor tła do naszej sekcji, przechodząc do sekcji Ustawienia i aktualizowania co następuje:

Opcje treści

Kolor tła: # 006ea5

inline forma kontaktu
  • facebook
  • Twitter
  • Google+
  • Gmail

Zapisz ustawienia

Teraz możemy dodać naszą Moduł Formularz kontaktowy do wiersza.

inline forma kontaktu
  • facebook
  • Twitter
  • Google+
  • Gmail

Aktualizować Contact Form w następujący sposób:

Opcje treści

Prześlij tekst przycisku „Get Quote”
E-mail: [wprowadź adres e-mail, wiadomości powinna być wysłana]
Wyświetlacz Captcha: NIE
Kolor tła: Formularz rgba (255,255,255,0)

inline forma kontaktu
  • facebook
  • Twitter
  • Google+
  • Gmail

Opcje projektowania

Formularz Pole Czcionka: Lato
Pole forma Wielkość czcionki: 24px
forma Pole tekstowe Kolor: #ffffff
wejścia Border Radius: 3px
Korzystanie border: TAK
Kolor ramki: #ffffff
szerokość ramki: 1px
Przycisk Rozmiar tekstu: 24px Desktop, 20px, 20px Smartphone Tablet
przycisk TEXT color: # 0c71c3
Przycisk Kolor tła: # f4f11f
Przycisk Border Szerokość: 3px
Przycisk Border Radius: 3

inline forma kontaktu
  • facebook
  • Twitter
  • Google+
  • Gmail

Zapisz ustawienia

Wróć do zakładki Content i usuwać pola wiadomości, klikając na ikonę kosza po prawej stronie paska pola. Następnie dodać nowe pole, klikając przycisk szare kółko z białym znak plus znajdujący się pod poszczególnymi barów polowych. Będzie to pole Phone.

inline forma kontaktu
  • facebook
  • Twitter
  • Google+
  • Gmail

Aktualizować ustawień pola w następujący sposób:

Opcje treści

Pole ID: „Telefon”
Tytuł: Telefon

inline forma kontaktu
  • facebook
  • Twitter
  • Google+
  • Gmail

Opcje projektowania

Dokonać pełnej szerokości: NIE
dozwolone Symbole: tylko liczby (0-9)

inline forma kontaktu
  • facebook
  • Twitter
  • Google+
  • Gmail

Zaawansowane opcje

Wprowadź następujące niestandardowy CSS wewnątrz głównego elementu polu:

Max-width18%;
Float: left;
Margin-top-1.5%;
Clear: none !important;

inline forma kontaktu
  • facebook
  • Twitter
  • Google+
  • Gmail

Zapisz ustawienia

Teraz wróć do zakładki Content kontaktowej Ustawienia formy i powielać właśnie utworzony pole telefon i włączyć go do pola Kod pocztowy.

inline forma kontaktu
  • facebook
  • Twitter
  • Google+
  • Gmail

Aktualizować ustawień pola w następujący sposób:

Opcje treści

Pole ID: „Zip”
Tytuł: Kod pocztowy

inline forma kontaktu
  • facebook
  • Twitter
  • Google+
  • Gmail

Zaawansowane opcje

Wprowadź następujące niestandardowy CSS wewnątrz głównego elementu polu:

Max-width17%;
Margin-top-1.5%;

inline forma kontaktu
  • facebook
  • Twitter
  • Google+
  • Gmail

Zapisz ustawienia

Do tej pory regulować szerokość i wyrównanie naszych polach telefonu i kod pocztowy. Teraz musimy zrobić to samo dla nazwa i adres e-polami.

Przejdź do ustawień pól Nazwa i aktualizować Opcje zaawansowane z następującym Niestandardowe CSSwewnątrz głównego elementu polu:

Max-width20%;
Margin-top-1.5%;

inline forma kontaktu
  • facebook
  • Twitter
  • Google+
  • Gmail

Zapisz ustawienia

Następnie przejdź do ustawień pól email i aktualizować Opcje zaawansowane z następującym Niestandardowe CSS wewnątrz głównego elementu polu:

Max-width20%;
Margin-top-1.5%;

inline forma kontaktu
  • facebook
  • Twitter
  • Google+
  • Gmail

Zapisz ustawienia

Ważna uwaga: Należy zauważyć, że zwyczaj CSS stosowany do każdego z pól ma max-width Właściwość zestaw do pewnego procentu. Odsetek ten dyktuje jak szeroki wasze pola będą związane z szerokością obszaru zawartości. Na przykład, strefa domyślna zawartość Divi jest 1080px więc pole Nazwa wynosi 20% 1080px. To jest ważne, aby wiedzieć, czy chcesz stworzyć więcej przestrzeni dla swojej postaci inline. Wszystko trzeba by zrobić, to ustawić wartość procentową dla właściwości max-width, ile potrzeba.

Prawie skończony. Teraz wszystko, co musimy zrobić, to oczyścić rozstawu sekcji i wiersza, który posiada formę. Przejdź do sekcji Ustawienia , pod karcie Projektowanie i zaktualizować następujące elementy:

Niestandardowe padding: 12px Góra, Dół 14px

inline forma kontaktu
  • facebook
  • Twitter
  • Google+
  • Gmail

Zapisz ustawienia

Teraz przejdź do Ustawienia Row pod karcie Projektowanie i zaktualizować następujące elementy:

Niestandardowe padding: 48px Top, 0px Prawo, 0px Dół, Lewo 0px

inline forma kontaktu
  • facebook
  • Twitter
  • Google+
  • Gmail

Zapisz ustawienia

Czyni go Responsive

Ponieważ jest to forma pozioma, pola formularza muszą być dostosowane na urządzeniach mobilnych. Aby rozwiązać ten problem, wszystko, co potrzebne jest jeden mały fragment niestandardowego CSS. Przejdź do strony Ustawienia , pod karcie Zaawansowane , a następujące w Niestandardowe CSS polu:

@media (max-width767px) {
p.et_pb_contact_field {
max-width100% !important;
}
}

Oto jak forma odpowiada na różnych rozmiarach ekranu.

inline forma kontaktu
  • facebook
  • Twitter
  • Google+
  • Gmail

Tworzenie Trzy pola Inline Formularz kontaktowy

inline forma kontaktu
  • facebook
  • Twitter
  • Google+
  • Gmail

Teraz, gdy stworzyliśmy formularz inline z czterech pól, można łatwo przekształcić go w polu trzy formy aktualizując kilka opcji. Oto kroki:

  1. Edytować nowo utworzony formularz inline lub powielić formularz.
  2. Usuń Nagłówek Field (teraz masz tylko trzy pola)
  3. Zaktualizować pole telefonu (lub cokolwiek jest trzecim polu) Ustawienia na karcie Zaawansowane, z następującym niestandardowej w CSS
    Main Element box:max-width25%;
    float:left;
    margin-top-1.5%;
    clearnone !important;
  4. Aktualizować polu Email (lub cokolwiek to druga polowe) Ustawienia na karcie Zaawansowane, z następującym Niestandardowe CSS w oknie głównym elementem:
    max-width25%;
    margin-top-1.5%;
  5. Zaktualizuj nazwa pola (lub cokolwiek jest pierwszym polu) Ustawienia na karcie Zaawansowane, z następującym Niestandardowe CSS w oknie głównym elementem:
    max-width25%;
    margin-top-1.5%;

Uwaga: Zauważ, że własność max-width dla każdego z pól jest teraz 25% w celu zwiększenia szerokości pola.

Tworzenie Dwa pola Inline Formularz kontaktowy

inline forma kontaktu
  • facebook
  • Twitter
  • Google+
  • Gmail

Można również konwertować formularza inline do formularza dwa pola aktualizując kilka opcji. Oto kroki:

  1. Edytować nowo utworzony formularz inline lub powielić formularz.
  2. Usuń Nagłówek pole i pole telefon tak, że masz tylko dwa pola (imię i nazwisko oraz e-mail)
  3. Zaktualizuj nazwa pola (lub cokolwiek jest pierwszym polu) Ustawienia na karcie Zaawansowane, z następującym Niestandardowe CSS w oknie głównym elementem:
    max-width37%;
    margin-top-1.5%;
  4. Aktualizować polu Email (lub cokolwiek to druga polowe) Ustawienia na karcie Zaawansowane, z następującym Niestandardowe CSS w oknie głównym elementem:
    max-width37%;
    margin-top-1.5%;
    clearnone !important;

Dodawanie innych typów pól

Ten poradnik jest głównie dla zwykłych typów pól wejściowych, ale łatwo można go zmienić na inny typ pola. Na przykład, jeśli chcesz użyć wybierz typ pola rozwijanego, można zastosować wszystkie taką samą stylizację jak to było w przypadku innych dziedzin. Jednak trzeba będzie dodać kolor tła (# 006ea5) do tej konkretnej dziedzinie, dzięki czemu można zobaczyć opcje.

Oto co kropla w dół pola będzie wyglądać …

inline forma kontaktu
  • facebook
  • Twitter
  • Google+
  • Gmail

artykuł z bloga ElegantThemes

Share This