Cum să creați un formular de ofertă cu modulul de formular de contact Divi

Un formular de ofertă (denumit și formularul de solicitare a ofertelor de preț) este o soluție excelentă pentru întreprinderile mici care doresc să obțină clienți potențiali calificați, fără a fi nevoie să răspundă la telefoane. Un formular bun de cotație poate rezolva ouăle rele care nu sunt pregătite pentru serviciul dvs., punând întrebări adecvate de calificare. De asemenea, vă poate ajuta să identificați nevoile unui client, astfel încât să puteți pregăti un răspuns / ofertă eficientă și să închideți vânzarea după ce le primiți la telefon.

Există o serie de plugin-uri de formular excelente dedicate procesării formularelor. Dar dacă sunteți în căutarea unei soluții simple și eficiente pentru site-ul dvs. Divi, modulul actualizat al formularului de contact Divi este exact ceea ce aveți nevoie.

Astăzi, vă voi ghida prin procesul de construire a unui formular de cotație simplu, dar puternic, folosind logica condițională pentru a califica mai bine clienții potențiali. Voi adăuga, de asemenea, câteva caracteristici avansate de design folosind CSS personalizat, care vor face ca formularul să fie și mai curat și mai ușor de citit.

Să începem.

Implementarea proiectării cu Divi

Construirea secțiunii de antet pe ecran complet

Formularul de ofertă poate fi adăugat la orice pagină, dar pentru acest exemplu, voi folosi o pagină dedicată doar pentru formularul de ofertă.

Pentru a-i întâmpina pe vizitator, folosesc un antet cu ecran complet care îl obligă pe utilizator să facă clic pe buton sau să deruleze pentru a vedea formularul. Aceasta este o caracteristică interesantă care creează o experiență mai personală și încălzește utilizatorul până la ideea de derulare și clic înainte de a vedea formularul. În unele cazuri, mi se pare puțin neplăcut și copleșitor când ajung la o pagină fără altceva decât un formular lung de completat. Acest lucru este opțional, desigur și cu siguranță l-aș testa pentru a vedea dacă se convertește mai bine fără antetul pe ecran complet.

Folosind Visual Builder, adăugați o secțiune de lățime completă și un modul de antet de lățime completă în partea de sus a paginii.

Actualizați setările antetului Fullwidth după cum urmează:

Opțiuni de conținut

Titlu: [introduceți titlul; încearcă să fii mai personal decât un titlu plictisitor precum „Formular de cotare”]
Text subtitlu: [introduceți text subtitlu]

Butonul # 1 Text: [introduceți textul butonului; ceva de genul „arată-mi” sau „Să facem asta”]
Buton # 1 URL: #quote (acesta va fi utilizat pentru ancorarea codului CSS ID care va derula până la secțiunea care conține formularul de mai jos)
Adresa URL a imaginii logo-ului: [introduceți imaginea logo-ului]
Suprapunere de fundal: rgba (0,0,0,0,7)
Imagine de fundal: [încărcați imaginea de fundal 1920 x 1080]

Opțiuni de proiectare

Orientare text și siglă: centru
Faceți ecran complet: DA
Afișați butonul de derulare în jos: DA
Pictogramă: [alege pictograma]
Culoare pictogramă derulantă în jos: # 999999
Culoarea textului: deschis
Titlu Font: Ubuntu
Dimensiunea fontului titlului: 36 px
Font Subhead: Ubuntu
Dimensiune font subhead: 22 px
Utilizați stiluri personalizate pentru butonul 1: DA
Buton One Dimensiune text: 20 px
Culoarea textului butonului unu: #ffffff
Culoare fundal buton 1: # e09900;
Culoarea chenarului Buton One: # e09900
Buton Spațierea unei litere: 1 px
Butonul One Font: Ubuntu

Salvează setările

Construirea formularului de ofertă

Acum, pentru formularul de ofertă, vom folosi modulul formularului de contact Divi. Mai întâi trebuie să adăugăm o secțiune obișnuită cu un rând cu lățime completă (1 coloană). Apoi adăugați un modul de formular de contact pe rând.

Actualizați setările formularului de contact după cum urmează.

Opțiuni de conținut?

Titlu: [definiți un titlu pentru formularul dvs. de contact sau adăugați instrucțiuni suplimentare]
Trimiteți textul butonului: Obțineți o ofertă
E-mail: [introduceți adresa de e-mail unde trebuie trimise mesajele]
Activați adresa URL de redirecționare: DA (acest lucru este opțional, dar o idee bună)
Adresă URL de redirecționare: [introduceți adresa URL de redirecționare către o pagină de mulțumire personalizată]

Opțiuni de proiectare

Titlu Font: Ubuntu
Dimensiunea fontului titlului: 30 px
Spațierea literelor de titlu: 1 px
Font Field Form: Ubuntu
Dimensiunea fontului câmpului formularului: 24 px
Culoarea textului câmpului formularului: # e09900
Raza de margine de intrare: 5 px
Utilizați Border: DA
Culoare margine: # 999999
Lățimea chenarului: 1 px
Utilizați stiluri personalizate pentru buton: DA
Dimensiune text buton: 24 px
Culoarea textului butonului: #ffffff
Culoarea fundalului butonului: # e09900;
Culoarea chenarului butonului: # e09900
Distanța dintre litere și butoane: 1 px
Buton Font: Ubuntu

Opțiuni avansate (CSS personalizat)

Câmp Captcha:

Font-size: 24px;
Max-width: 60px;
Padding: 16px 14px 14px;

Text Captcha:

Font-size: 24px

Salvează setările

Adăugarea câmpurilor formularului de ofertă

Nu este ceea ce aveți setările pe loc, este timpul să adăugați elementele noastre de formular. În mod implicit, formularul conține câmpurile „nume”, „e-mail” și „mesaj”. Puteți șterge „mesajul”.

Domeniul companiei

Sub câmpul „e-mail” adăugați un câmp nou și actualizați setările din Opțiuni de conținut după cum urmează:

ID câmp : companie
Titlu : Care este numele companiei dvs.?
Câmp obligatoriu : DA

Câmp de servicii

Sub câmpul „companie” adăugați un câmp nou și actualizați setările din Opțiuni de conținut după cum urmează:

ID câmp : serviciu
Titlu : Cum te putem ajuta astăzi?
Tip : butoane radio
Opțiuni :

• Producția site-ului web
• Dezvoltarea aplicațiilor
• Regia de artă
• Creare video

Câmp obligatoriu : DA

Domeniul Scopului Artelor

Sub câmpul „serviciu” adăugați un câmp nou și actualizați setările din Opțiuni de conținut după cum urmează:

ID câmp : art_purpose
Titlu : De ce fel de direcție artistică aveți nevoie?
Tip : butoane radio
Opțiuni :

• Design grafic
• Publicitate
• Branding
• Ambalare

Câmp obligatoriu : DA
Activați logica condiționată
Relație : ORICE
Reguli : Cum vă putem ajuta astăzi? > Egal> Direcție artistică

Notă : Această logică arată acest câmp ori de câte ori un utilizator selectează „Art Direction” din întrebarea anterioară.

Câmpul de scop web

În câmpul „art_purpose” adăugați un câmp nou și actualizați setările din Opțiuni de conținut după cum urmează:

ID câmp : web_purpose
Titlu : De ce fel de site web aveți nevoie?
Tip : butoane radio
Opțiuni :

• Comerț electronic
• Blog
• Aplicație web
• Pagina de aterizare

Câmp obligatoriu : DA
Activați logica condiționată
Relație : ORICE
Reguli : Cum vă putem ajuta astăzi? > Egal> Producția site-ului web

Notă : Această logică arată acest câmp ori de câte ori un utilizator selectează „Producție web” din întrebarea anterioară.

Câmp video

Sub câmpul „web_purpose” adăugați un câmp nou și actualizați setările din Opțiuni de conținut după cum urmează:

ID câmp : video
Titlu : Pe ce dispozitiv doriți să fie afișat videoclipul?
Tip : butoane radio
Opțiuni :

• Telefon mobil
• Comprimat
• Monitor sau televizor
• Proiector

Câmp obligatoriu : DA
Activați logica condiționată
Relație : ORICE
Reguli : Cum vă putem ajuta astăzi? > Egal> Creare video

Notă : Această logică arată acest câmp ori de câte ori un utilizator selectează „Creare video” din întrebarea anterioară.

Câmpul platformei aplicației

Sub câmpul „video” adăugați un câmp nou și actualizați setările din Opțiuni de conținut după cum urmează:

ID câmp : app_platform
Titlu : Pe ce platformă doriți ca aplicația să fie dezvoltată?
Tip : butoane radio
Opțiuni :

• iOS
• Android
• Windows
• mure

Câmp obligatoriu : DA
Activați logica condiționată
Relație : ORICE
Reguli : Cum vă putem ajuta astăzi? > Egal> Dezvoltare aplicații

Notă : Această logică arată acest câmp ori de câte ori un utilizator selectează „Dezvoltare aplicații” din întrebarea anterioară.

Câmp bugetar

În câmpul „app_platform” adăugați un câmp nou și actualizați setările din Opțiuni de conținut după cum urmează:

ID câmp : buget
Titlu : Dacă aveți în vedere un buget, anunțați-ne.
Tip : butoane radio
Opțiuni :

• Mai puțin de $ 1k
• În jur de 5.000 USD
• Mai mare de 10.000 USD

Câmp obligatoriu : NU
Activați logica condiționată
Relație : ORICE
Reguli :
Cum vă putem ajuta azi? > Egal> Dezvoltare aplicații
Cum vă putem ajuta azi? > Egal> Creare video
Cum vă putem ajuta azi? > Egal> Producția site-ului web
Cum vă putem ajuta azi? > Egal> Direcție artistică

Salvează setările

Adăugați codul CSS pentru ancoră

Reveniți și editați Setările secțiunii pentru secțiunea care conține formularul. Sub fila Avansat, introduceți „citatul” CSS ID.

Aceasta va corespunde adresei URL a butonului din antetul lățimii complete, astfel încât butonul să deruleze la secțiune atunci când faceți clic.

Setați o lățime personalizată pentru coloana Formular de ofertă

Apoi, accesați Setări rând pentru rândul care conține formularul de ofertă și actualizați opțiunile de proiectare după cum urmează:

Utilizați lățimea personalizată: DA
Lățime personalizată: 556 px

Personalizări suplimentare de proiectare

Pentru acest formular de cotație, folosim butoane radio, după ce se face clic pe un buton radio / cerc, culoarea umpluturii cercului corespunde culorii accentului temei site-urilor dvs. în Personalizator temă> Setări generale> Setări aspect>

Dacă nu doriți să vă schimbați culoarea accentului tematic la nivel de site pentru culoarea de umplere a butonului radio, accesați Setări pagină și introduceți următorul CSS personalizat în fila CSS:

.et_pb_contact p input[type="radio"]:checked + label i:before { background: #e09900; } 

De asemenea, puteți adăuga următoarele CSS pentru a personaliza textul titlului pentru întrebările care conțin butoane radio:

.et_pb_contact_field_radio_wrapper .et_pb_contact_field_radio_title { font-size: 24px; font-family: 'ubuntu'; font-weight: 400; } 

În cele din urmă, puteți adăuga o margine cu stil la listele de butoane radio pentru a se potrivi cu stilul formularului cu următorul CSS:

.et_pb_contact_field_radio_wrapper .et_pb_contact_field_radio_list { float: left; overflow: hidden; border: 1px solid #999999; padding: 20px; border-radius: 4px; width: 100%; margin-top: 10px }

Asta e.

Verificați rezultatul final:

Gânduri finale

Acest formular de cotație este un exemplu simplificat de ceea ce puteți face cu formularul de cotație. Pentru propriul formular de ofertă, vă recomandăm să adăugați un câmp suplimentar, cum ar fi „Număr de telefon”, astfel încât să vă puteți întoarce apelurile. De asemenea, puteți utiliza o logică mai condiționată pentru a obține informații mai specifice cu privire la nevoile clientului.

Așa cum am spus la începutul articolului, există pluginuri mai avansate. Există companii întregi care se specializează în soluții solide de formulare de contact dintr-un motiv. Sper că această postare a fost utilă pentru a arăta cum modulul de formular de contact este mai mult decât capabil să gestioneze majoritatea nevoilor dvs. standard de contact.