Cum să creați un formular de contact în linie cu Divi
Publicat: 2017-07-14Secțiunea erou (sau deasupra paginii) a paginii de pornire este proprietatea imobiliară de primă clasă. Și, ca majoritatea dezvoltatorilor imobiliari, doriți să vă maximizați spațiul. Aici este util un formular de contact în linie. O formă în linie este practic o formă în care toate câmpurile sau comenzile sale rămân una lângă alta, în linie și aliniate la stânga. Acest aspect compact este excelent pentru creșterea conversiilor pe o pagină de pornire sau pe o pagină de destinație.
Astăzi vă voi arăta cum să creați un formular de contact în linie pentru site-ul dvs. web folosind Visual Builder al Divi. Munca necesară pentru a elimina acest lucru se referă la ajustarea lățimii și a alinierii câmpurilor de formular. Pentru a realiza acest lucru, vom profita de caracteristicile de proiectare ale modulului de contact, precum și vom adăuga unele CSS personalizate în fila Advanced.
Dacă sunteți nou în Divi, nu lăsați fila Advanced să vă descurajeze să abordați acest tutorial. Am încercat din răsputeri să păstrez lucrurile simple și clare.
Bucurați-vă.
Iată un exemplu despre cum va arăta formularul de contact în linie
Conceptul și inspirația
Dacă ați trebuit vreodată să cumpărați asigurări auto sau să căutați o nouă casă online, probabil că ați văzut un formular în linie, care este compact în mod intenționat, cu câmpuri de intrare minime, astfel încât dvs. (utilizatorul) să fiți mai înclinați să faceți mingea să ruleze pe un citat nou. Așa că am vrut să creez un simplu formular de contact în linie care să facă ceva similar pentru utilizatorii Divi. Deși acest formular de contact nu va putea face lucruri precum generarea unei cotații sau ridicarea unei liste de case, se potrivește nevoii proprietarilor de afaceri sau a bloggerilor care doresc să ofere clienților sau utilizatorilor o modalitate ușoară de a ajunge.
Implementarea designului cu Divi
Abonați-vă la canalul nostru Youtube
Începem prin a adăuga o secțiune regulată cu un singur rând de structură a coloanei.
Deoarece restul elementelor noastre vor fi greu de văzut pe un fundal alb, să mergem mai departe și să adăugăm culoarea de fundal în secțiunea noastră, accesând secțiunea Setări și actualizând următoarele:
Opțiuni de conținut
Culoare fundal: # 006ea5
Salvează setările
Acum putem adăuga modulul nostru de formular de contact la rând.
Actualizați setările formularului de contact după cum urmează:
Opțiuni de conținut
Trimiteți textul butonului: „Obțineți o ofertă”
E-mail: [Introduceți adresa de e-mail unde ar trebui trimise mesajele]
Afișare Captcha: NU
Culoare fundal formular: rgba (255,255,255,0)
Opțiuni de proiectare
Font Field Form: Lato
Dimensiunea fontului câmpului formularului: 24 px
Culoarea textului câmpului formularului: #ffffff
Raza de margine de intrare: 3 px
Utilizați Border: DA
Culoare margine: #ffffff
Lățimea chenarului: 1 px
Dimensiune text buton: 24px Desktop, 20px Tablet, 20px Smartphone
Culoarea textului butonului: # 0c71c3
Culoarea fundalului butonului: # f4f11f
Lățimea chenarului butonului: 3 px
Raza chenarului butonului: 3
Salvează setările
Reveniți la fila Conținut și ștergeți câmpul de mesaj făcând clic pe pictograma coș de gunoi din dreapta barei de câmp. Apoi adăugați un câmp nou făcând clic pe butonul cercului gri cu semnul alb plus situat sub barele de câmp individuale. Acesta va fi câmpul Telefon.
Actualizați setările câmpului după cum urmează:
Opțiuni de conținut
ID câmp: „Telefon”
Titlu: Telefon
Opțiuni de proiectare
Faceți lățime completă: NU
Simboluri permise: Numai numere (0-9)
Opțiuni avansate
Introduceți următorul CSS personalizat în caseta Element principal :
Max-width: 18%; Float: left; Margin-top: -1.5%; Clear: none !important;
Salvează setările
Acum reveniți la fila Conținut din Setările formularului de contact și copiați câmpul Telefon pe care tocmai l-ați creat și transformați-l într-un câmp Cod poștal.
Actualizați setările câmpului după cum urmează:
Opțiuni de conținut
ID câmp: „Zip”
Titlu: Cod poștal
Opțiuni avansate
Introduceți următorul CSS personalizat în caseta Element principal :
Max-width: 17%; Margin-top: -1.5%;
Salvează setările
Până acum am ajustat lățimea și alinierea câmpurilor noastre de telefon și cod poștal. Acum trebuie să facem același lucru pentru câmpurile Nume și E-mail.
Accesați setările câmpului Nume și actualizați opțiunile avansate cu următoarele CSS personalizate din caseta Element principal :
Max-width: 20%; Margin-top: -1.5%;
Salvează setările
Apoi accesați setările câmpului E - mail și actualizați Opțiunile avansate cu următoarele CSS personalizate din caseta Element principal :
Max-width: 20%; Margin-top: -1.5%;
Salvează setările
Notă importantă: observați că CSS personalizat utilizat pentru fiecare dintre câmpuri are o proprietate de lățime maximă setată la un anumit procent. Acest procentaj dictează cât de largă va fi legată câmpurile dvs. de lățimea zonei de conținut. De exemplu, zona de conținut implicită a lui Divi este 1080px, astfel încât câmpul de nume este 20% din 1080px. Acest lucru este important pentru a ști dacă doriți să creați mai mult spațiu pentru formularul dvs. în linie. Tot ce trebuie să faceți este să ajustați valoarea procentuală pentru proprietatea de lățime maximă, după cum este necesar.
Aproape terminat. Acum tot ce trebuie să facem este să curățăm spațiul secțiunii și rândului care deține forma. Accesați Setările secțiunii , sub fila Proiectare și actualizați următoarele:
Căptușeală personalizată: 12 px sus, 14 px jos
Salvează setările
Acum accesați Setările rândului , sub fila Proiectare și actualizați următoarele:
Căptușeală personalizată: 48 px sus, 0 px dreapta, 0 px jos, 0 px stânga
Salvează setările
Făcând-o receptivă
Deoarece acesta este un formular orizontal, câmpurile formularului vor trebui ajustate pe dispozitivele mobile. Pentru a remedia acest lucru, nu trebuie decât un mic fragment de CSS personalizat. Accesați Setări pagină , sub fila Avansate , și următoarele în caseta CSS personalizată :
@media (max-width: 767px) {
p.et_pb_contact_field {
max-width: 100% !important;
}
}
Iată cum răspunde formularul la diferitele dimensiuni ale ecranului.
Crearea unui formular de contact în trei câmpuri
Acum că ați creat un formular în linie cu patru câmpuri, îl puteți converti cu ușurință într-un câmp cu trei forme, actualizând câteva opțiuni. Iată pașii:
- Editați formularul în linie pe care tocmai l-ați creat sau copiați formularul.
- Ștergeți câmpul cod poștal (acum aveți doar trei câmpuri)
- Actualizați setările pentru câmpul de telefon (sau oricare ar fi cel de-al treilea câmp), sub fila Avansat, cu următoarele CSS personalizate în
Main Element box:max-width: 25%; float:left; margin-top: -1.5%; clear: none !important;
- Actualizați setările pentru câmpul de e-mail (sau orice altceva este al doilea câmp), sub fila Avansat, cu următorul CSS personalizat în caseta Element principal:
max-width: 25%; margin-top: -1.5%;
- Actualizați setările câmpului de nume (sau oricare ar fi primul câmp), sub fila Avansat, cu următorul CSS personalizat în caseta Element principal:
max-width: 25%; margin-top: -1.5%;
Notă: observați că proprietatea lățimii maxime pentru fiecare dintre câmpuri este acum de 25% pentru a crește lățimea câmpurilor.
Crearea unui formular de contact în două câmpuri
De asemenea, vă puteți converti formularul în linie într-un formular cu două câmpuri, actualizând câteva opțiuni. Iată pașii:
- Editați formularul în linie pe care tocmai l-ați creat sau copiați formularul.
- Ștergeți câmpul Cod poștal și câmpul Telefon, astfel încât să aveți doar două câmpuri (nume și e-mail)
- Actualizați setările câmpului de nume (sau oricare ar fi primul câmp), sub fila Avansat, cu următorul CSS personalizat în caseta Element principal:
max-width: 37%; margin-top: -1.5%;
- Actualizați setările pentru câmpul de e-mail (sau orice altceva este al doilea câmp), sub fila Avansat, cu următorul CSS personalizat în caseta Element principal:
max-width: 37%; margin-top: -1.5%; clear: none !important;
Adăugarea altor tipuri de câmp
Acest tutorial este destinat în principal tipurilor de câmp de intrare obișnuite, dar îl puteți schimba cu ușurință la un alt tip de câmp. De exemplu, dacă doriți să utilizați un tip de câmp derulant selectat, puteți aplica același stil ca și celelalte câmpuri. Cu toate acestea, va trebui să adăugați o culoare de fundal (# 006ea5) la acel câmp special, astfel încât să puteți vedea opțiunile.
Iată cum ar arăta un câmp derulant ...
Gânduri finale
Din experiența mea, formularele de contact în linie pot fi un instrument puternic pentru afacerea dvs. Există pluginuri mai avansate, cu opțiuni mai robuste, dar dacă un alt plugin nu este ceașca dvs. de ceai și o soluție mai simplă are sens, încercați acest lucru. Sper că îți place.
Aștept cu nerăbdare să auzim de la dvs. în comentarii.