5 moduri unice de a modula modulul formularului de contact Divi

Formularele de contact sunt o parte vitală a multor site-uri web. Scopul lor principal este de a fi intuitiv și de a ajuta vizitatorii să intre în contact cu ușurință. Dar asta nu înseamnă că toate formularele de contact ar trebui să arate într-un mod anume și predefinit. Puteți combina cu ușurință o experiență intuitivă cu un design frumos. Exact asta vom face în această postare. Vom împărtăși 5 modele unice de formulare de contact Divi pe care le puteți construi folosind numai opțiunile integrate Divi.

Să ajungem la asta!

Previzualizarea proiectelor de module ale formularului de contact Divi

Desktop

Să începem aruncând o privire asupra proiectelor modulelor formularului de contact Divi de pe desktop.

Mobil

Și așa arată designul modulelor formularului de contact Divi pe dimensiuni mai mici de ecran:

5 moduri unice de a modula modulul formularului de contact Divi

Abonați-vă la canalul nostru Youtube

Crearea formularului de contact nr. 1

Adăugați o secțiune nouă

Fundal de gradient

Să începem cu primul exemplu! Adăugați o nouă secțiune, accesați setările de fundal și adăugați un fundal de gradient.

• Culoare 1: # 4c00ff
• Culoare 2: # ffd400
• Tipul gradientului: radial
• Direcție radială: jos stânga
• Poziția inițială: 34%
• Poziție finală: 34%

Spațiere

Apoi, accesați setările de spațiere și adăugați câteva valori de umplere personalizate.

• Căptușeală superioară: 200 px
• Căptușeală inferioară: 200 px

Adăugați un rând nou

Structura coloanei

Adăugați un rând nou folosind următoarea structură de coloane:

Coloana 1 Culoare fundal

Fără a adăuga încă module, deschideți setările rândului și adăugați un fundal de gradient în coloana 1.

• Coloana 1 Culoare fundal: rgba (255.255.255,0.55)

Coloana 1 Imagine de fundal

Adăugați și o imagine de fundal la prima coloană.

• Coloana 1 Repetarea imaginii de fundal: Fără repetare
• Coloana 1 Imagine de fundal Amestec: ecran

Coloana 2 Culoare fundal

Și o culoare albă de fundal la a doua coloană.

• Coloana 2 Culoare fundal: #ffffff

Dimensionare

Modificați setările de dimensionare în continuare.

• Egalizați înălțimile coloanei: Da

Spațiere

Eliminați și toate umpluturile personalizate implicite.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Raza de frontieră a coloanei

Adăugați o anumită rază de margine la ambele coloane din fila avansată.

border-radius: 10px;

Adăugați un modul de text în coloana 1

Adauga continut

Este timpul să începeți adăugarea diferitelor module! Adăugați un modul de text în prima coloană cu un anumit conținut la alegere.

Setări text

Apoi, accesați setările de text și efectuați câteva modificări.

• Font text: Satisfac
• Culoarea textului: # 333333
• Dimensiunea textului: 100 px
• Înălțimea liniei de text: 1em
• Orientare text: centru

Spațiere

Adăugați și câteva valori de umplere personalizate.

• Căptușeală superioară: 600 px
• Căptușeală inferioară: 100 px

Box Shadow

Pentru a adăuga adâncime designului, utilizați o umbră de casetă subtilă.

• Puterea neclarității umbrei cutiei: 80 px
• Puterea răspândirii umbrei cutiei: -16px
• Culoare umbră: rgba (0,0,0,0,3)

Adăugați modulul de imagine în coloana 2

Încărcați imaginea PNG

Continuați adăugând un modul de imagine la a doua coloană. Încărcați o imagine PNG la alegere.

Dimensionare

Modificați setările de dimensionare ale acestui modul.

• Lățime: 25% (desktop), 50% (tabletă), 60% (telefon)
• Alinierea modulului: centru

Spațiere

Creați o suprapunere utilizând o marjă superioară negativă.

• Marja superioară: -60%

Adăugați modulul de text nr. 1 în coloana 2

Adauga continut

Chiar sub modulul de imagine, adăugați un modul de text cu un anumit conținut.

Setări text

Modificați setările de text ale acestui modul.

• Font text: Satisfac
• Culoarea textului: # 333333
• Dimensiune text: 44 px
• Orientare text: centru

Adăugați modulul de text nr. 2 în coloana 2

Adauga continut

Adăugați un alt modul de text în continuare.

Setări text

Modificați și setările de text ale acestui modul.

• Font text: Arial
• Culoarea textului: # ffd400
• Dimensiune text: 18 px
• Spațiere scrisoare text: 2 px
• Orientare text: centru

Spațiere

Adăugați câteva margini de jos în continuare.

• Marja inferioară: 100 px

Adăugați modulul formular de contact în coloana 2

Activați opțiunea „Faceți lățimea completă” în câmpul Nume și e-mail

Ultimul modul necesar este modulul formular de contact. Înainte de a face orice altceva, deschideți numele și câmpurile de e-mail și schimbați aspectul.

• Faceți lățime completă: Da

Adăugați câmp subiect

Pentru a crea acest design, am adăugat un alt câmp pentru subiect.

Elemente

Dezactivați opțiunea captcha în continuare.

• Afișare Captcha: Nu

Setări text câmp formular

Efectuați câteva modificări la setările de text ale câmpului formularului din acest modul de formular de contact.

• Culoarea fundalului câmpului formularului: rgba (255,255,255,0)
• Font câmp formular: Arial
• Greutatea fontului câmpului formularului: ușoară
• Dimensiune text câmp formular: 16 px
• Spațierea literelor câmpului formularului: 2 px

Setări buton

Modificăm și aspectul butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Culoarea textului butonului: # ffd400
• Lățimea chenarului butonului: 0 px
• Distanța dintre litere și butoane: 2 px
• Buton Font: Arial
• Stilul fontului: subliniat
• Culoare subliniat: # 4c00ff

Spațiere

Adăugați câteva valori de umplere personalizate în continuare.

• Căptușeală inferioară: 100 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

Frontieră

Și adăugați o margine inferioară subtilă la fiecare dintre câmpuri.

• Lățimea marginii inferioare: 2 px
• Culoarea chenarului inferior: #efefef

Spațierea individuală a câmpului

Nu în ultimul rând, adăugați o marjă inferioară la fiecare dintre câmpurile individuale, cu excepția celui pentru mesaj.

• Marja inferioară: 20 px

Crearea formularului de contact nr. 2

Adăugați o secțiune nouă

Fundal de gradient

Trecem la următorul exemplu! Adăugați o nouă secțiune cu un fundal degradat.

• Culoare 1: # 562fef
• Culoare 2: #ffffff
• Tipul gradientului: liniar
• Poziția inițială: 50%
• Poziție finală: 50%

Spațiere

Adăugați câteva valori de umplere personalizate la setările de spațiere din această secțiune.

• Căptușeală superioară: 200 px
• Căptușeală inferioară: 200 px

Adăugați un rând nou

Structura coloanei

Adăugați un rând nou folosind următoarea structură de coloane:

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândului și adăugați o culoare de fundal rândului.

• Culoare fundal: #ffffff

Coloana 2 Fundal gradient

Adăugați un fundal de gradient la a doua coloană a rândului următor.

• Culoare 1: # 9932ff
• Culoare 2: # 562fef
• Coloana 2 Tip de gradient: Liniar
• Coloana 2 Direcție gradient: 160deg

Dimensionare

Modificați și setările de dimensionare ale rândului.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da

Spațiere

Apoi, adăugați câteva valori de spațiere personalizate.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Coloana 1 Căptușeală superioară: 100 px
• Coloana 1 Căptușeală inferioară: 50 px
• Coloana 1 Căptușeala din stânga: 50 px
• Coloana 1 Căptușeala dreaptă: 50 px
• Coloana 2 Căptușeală superioară: 100 px
• Coloana 2 Căptușeală inferioară: 100 px
• Coloana 2 Căptușeala din stânga: 50 px
• Coloana 2 Căptușeala dreaptă: 50 px

Frontieră

Adăugați „20px” la fiecare dintre marginile rândului.

Box Shadow

În cele din urmă, adăugați o umbră de casetă subtilă pe rând.

• Puterea neclarității umbrei cutiei: 45 px
• Puterea răspândirii umbrei cutiei: -11px
• Culoare umbră: rgba (0,0,0,0,3)

Adăugați un modul de text în coloana 1

Adauga continut

Este timpul să începeți adăugarea modulelor! Începeți cu un modul de text în prima coloană.

Setări text

Modificați setările de text ale acestui modul.

• Greutatea fontului textului: Ultra Bold
• Stil de text text: majuscule
• Culoarea textului: # 562fef
• Text Suze: 100 px (desktop), 80 px (tabletă), 60 px (telefon)
• Spațiere scrisoare text: -10px
• Înălțimea liniei de text: 1em

Spațiere

Adăugați și o marjă inferioară.

• Marja inferioară: 50 px

Adăugați modulul de formular de contact în coloana 1

Elemente

Al doilea modul de care vom avea nevoie în prima coloană este un modul de formular de contact. După ce ați adăugat modulul, dezactivați opțiunea „Afișați captcha”.

• Afișare Captcha: Nu

Setări text câmp formular

Schimbați apoi culoarea de fundal a câmpului formularului.

• Culoarea fundalului câmpului formularului: #ffffff

Setări buton

Jucați-vă și cu setările butoanelor pentru a crea un buton pictogramă în loc de unul care conține text.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 73 px
• Culoare text Botton: rgba (0,0,0,0)
• Culoare fundal buton cursor: rgba (255,255,255,0)
• Lățimea chenarului butonului: 0 px
• Culoare pictogramă buton: # 9932ff
• Afișați pictograma doar pe Hover pentru buton: Nu

Box Shadow

În cele din urmă, adăugați o umbră de casetă subtilă la fiecare dintre câmpuri.

• Puterea neclarității umbrei cutiei: 36 px
• Puterea neclarității umbrei cutiei: -14 px
• Culoare umbră: rgba (0,0,0,0,3)

Adăugați un modul de text în coloana 2

Adauga continut

Primul modul de care vom avea nevoie în a doua coloană este un alt modul de text.

Setări text

După ce ați adăugat conținutul, modificați setările de text ale acestui modul.

• Greutatea fontului textului: Ultra Bold
• Culoarea textului: #ffffff
• Dimensiune text: 23 px
• Spațiere scrisoare text: -1 px

Adăugați Blurb Module # 1 la Coloana 2

Adauga continut

Al doilea modul de care avem nevoie este un modul Blurb. Continuați și introduceți câteva informații de contact.

Selectați pictograma

Apoi, alegeți o pictogramă potrivită.

Setări pictograme

Modificați setările acestei pictograme.

• Culoare pictogramă: #ffffff
• Plasarea pictogramelor: stânga

Setări text titlu

Continuați prin efectuarea următoarelor modificări la setările textului titlului.

• Dimensiune text titlu: 15 px
• Spațiere litere titlu: -0,5px

Spațiere

Și adăugați o marjă de sus.

• Marja superioară: 120 px

Clonează modulul Blurb de două ori

După ce ați terminat modificarea primului modul Blurb, puteți continua și clona modulul de două ori.

Schimbați conținutul și pictograma ambelor duplicate

Schimbați conținutul și pictogramele ambelor duplicate pentru a partaja vizitatorii diferite tipuri de informații de contact.

Schimbați spațiul ambelor duplicate

Marja superioară a ambelor duplicate trebuie modificată, de asemenea.

• Marja superioară: 30 px

Crearea formularului de contact nr. 3

Adăugați o secțiune nouă

Culoare de fundal

Trecem la al treilea exemplu! Adăugați o nouă secțiune cu următoarea culoare de fundal:

• Culoare fundal: # 3491CE

Spațiere

Continuați adăugând câteva valori de umplere personalizate în setările de spațiere.

• Căptușeală superioară: 200 px
• Căptușeală inferioară: 200 px

Adăugați rândul # 1

Structura coloanei

Apoi, adăugați un rând nou folosind următoarea structură de coloane:

Adăugați un modul de text

Adauga continut

E timpul să începeți să adăugați module! Primul modul pe care va trebui să îl adăugăm la prima coloană este un modul de text. Introduceți un conținut la alegere.

Setări text

Apoi, modificați setările de text.

• Greutatea fontului textului: Ultra Bold
• Culoare text: rgba (255,255,255,0,24)
• Dimensiune text: 100 px (desktop), 86 px (tabletă), 60 px (telefon)
• Înălțimea liniei de text: 1em
• Orientare text: centru

Spațiere

Adăugați și o marjă de jos negativă.

• Marja inferioară: -100px

Adăugați rândul # 2

Structura coloanei

Al doilea rând de care avem nevoie pentru a completa acest exemplu conține următoarea structură de coloane:

Fundal de gradient

Fără a adăuga încă module, deschideți setările rândului și adăugați un fundal de gradient.

• Culoare 1: # 11CE84
• Culoare 2: # 10C77F
• Tipul gradientului: liniar
• Direcția gradientului: 160 grade
• Poziția inițială: 50%
• Poziție finală: 50%

Dimensionare

Modificați și setările de dimensionare.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da

Spațiere

Adăugați câteva valori de umplere personalizate în continuare.

• Căptușeală superioară: 150 px
• Căptușeală inferioară: 100 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

Frontieră

Apoi, accesați setările de margine și adăugați „20 px” la fiecare colț. Folosiți și un chenar inferior.

• Lățimea marginii inferioare: 10 px
• Culoarea chenarului inferior: # 1ba35a

Box Shadow

Completați setările rândului adăugând o umbră de casetă subtilă.

• Puterea neclarității umbrei cutiei: 80 px
• Puterea răspândirii umbrei cutiei: -24px
• Culoare umbră: rgba (0,0,0,0,3)

Adăugați modulul de formular de contact în coloana 1

Activați opțiunea „Faceți lățimea completă” în câmpul Nume și e-mail

Primul modul de care avem nevoie în prima coloană a rândului este un modul de formular de contact. Deschideți numele și câmpul de e-mail și modificați setările de aspect.

• Faceți lățime completă: Da

Elemente

Dezactivează următorul captcha.

• Afișare Captcha: Nu

Setări buton

Și modificați setările butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Culoarea textului butonului: #ffffff
• Culoare 1: # 3AA0E3
• Culoare 2: # 3491CE
• Tipul gradientului: liniar
• Direcția gradientului: 155 grade
• Poziția inițială: 50%
• Poziție finală: 50%
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 10 px
• Puterea răspândirii umbrei cutiei: -2 px
• Culoare umbră: # 0a60af

Frontieră

De asemenea, adăugăm „5 px” de colțuri rotunjite la fiecare dintre câmpuri.

Adăugați un modul de text în coloana 2

Adauga continut

În a doua coloană, primul modul de care avem nevoie este un modul de text. Continuați și introduceți conținut.

Culoare de fundal

Apoi, schimbați culoarea de fundal.

• Culoare fundal: rgba (255.255.255,0.13)

Setări text

Joacă-te și cu setările de text.

• Greutatea fontului textului: ușoară
• Culoarea textului: #ffffff
• Dimensiune text: 15 px
• Spațiere scrisoare text: -0,5 px

Spațiere

Și adăugați niște umpluturi personalizate pentru a oferi modulului spațiu pentru a respira.

• Căptușeală superioară: 12 px
• Căptușeală inferioară: 12 px
• Căptușeală stângă: 10 px
• Garnitura dreapta: 10 px

Frontieră

De asemenea, adăugăm „20 px” în colțurile din stânga sus și din colțul din stânga jos. În plus, vom adăuga o margine stângă.

• Lățimea marginii stângi: 34 px
• Culoare margine stângă: # edf000

Vizibilitate

Pentru ca acest design să se potrivească diferitelor dimensiuni ale ecranului, vom dezactiva modulul de text de pe telefon și tabletă.

Clonați modulul de text de două ori

După ce ați terminat modificarea primului modul de text, continuați și clonați modulul de două ori.

Schimbați conținutul ambelor duplicate

Schimbați conținutul ambelor duplicate în altceva.

Schimbați spațiul ambelor duplicate

Și adăugați o marjă de sus pentru a crea spațiu între fiecare dintre module.

• Marja superioară: 20 px

Schimbați marginea ambelor duplicate

Nu în ultimul rând, modificați culoarea marginii din stânga a fiecăruia dintre duplicate individual.

• Culoare 1: # 00faff
• Culoare 2: # 00f76f

Crearea formularului de contact # 4

Adăugați o secțiune nouă

Culoare de fundal

Trecem la al patrulea exemplu! Adăugați o nouă secțiune folosind următoarea culoare de fundal:

• Culoare fundal: #FFBABD

Spațiere

Eliminați umplutura implicită a acestei secțiuni.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Fundal de gradient

Fără a adăuga încă module, deschideți setările rândului și adăugați un fundal de gradient.

• Culoare 1: #ffffff
• Culoare 2: rgba (41.196.169,0)
• Tipul gradientului: radial
• Direcție radială: centru
• Poziția inițială: 38%
• Poziție finală: 38%

Dimensionare

Modificați setările de dimensionare în continuare.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Și adăugați niște umpluturi personalizate.

• Căptușeală superioară: 160 px
• Căptușeală inferioară: 160 px

Adăugați un modul de text

Adauga continut

Primul modul de care avem nevoie este un modul de text. Continuați și introduceți conținut.

Setări text

Modificați setările de text în consecință:

• Font text: Abril Fatface
• Culoarea textului: # 640076
• Dimensiune text: 45 px (desktop), 34 px (tabletă), 20 px (telefon)
• Înălțimea liniei de text: 1em
• Orientare text: centru

Spațiere

Adăugați câteva valori de spațiere personalizate în continuare.

• Marja superioară: 300 px
• Căptușeală superioară: 50 px
• Căptușeală inferioară: 50 px

Adăugați modulul formular de contact

Activați opțiunea „Faceți lățimea completă” în câmpul Nume și e-mail

Al doilea și ultimul modul de care avem nevoie este un modul de formular de contact. Deschideți atât câmpurile de nume, cât și cele de e-mail și modificați setările de aspect.

• Faceți lățime completă: Da

Elemente

Apoi, dezactivați opțiunea captcha din setările elementelor.

• Afișare Captcha: Nu

Setări text câmp formular

Efectuați și câteva modificări la setările de text ale câmpului formularului.

• Culoarea fundalului câmpului formularului: # fff6f6
• Culoarea textului câmpului formularului: # ff7c7c

Setări buton

Schimbați butonul într-un buton pictogramă utilizând următoarele setări:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 88 px
• Culoare text buton: rgba (255,255,255,0)
• Culoare fundal buton cursor: rgba (255,255,255,0)
• Lățimea chenarului butonului: 0 px
• Culoare pictogramă buton: # e60085
• Afișați pictograma doar pe Hover pentru buton: Da

Dimensionare

Și jucați-vă cu valorile de dimensionare pentru ca designul să se potrivească cu toate dimensiunile ecranului.

• Lățime: 42% (desktop), 50% (tabletă), 77% (telefon)
• Alinierea modulului: centru

Spațiere

Continuați adăugând câteva valori de spațiere personalizate la modul.

• Marja inferioară: 200 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

Frontieră

Și adăugați „10px” la fiecare colț.

Buton Marja

Nu în ultimul rând, apăsați butonul pictogramă spre dreapta utilizând următoarea linie de cod CSS din fila avansată:

margin-right: -100px;

Crearea formularului de contact nr. 5

Adăugați o secțiune nouă

Fundal de gradient

Trecem la ultimul exemplu! Adăugați o nouă secțiune cu următorul fundal de gradient:

• Culoare 1: # 4bf2d0
• Culoare 2: #ffffff
• Tipul gradientului: radial
• Direcție radială: stânga
• Poziția inițială: 36%
• Poziție finală: 36%

Spațiere

Apoi, accesați setările de spațiere și adăugați o umplutură personalizată.

• Căptușeală superioară: 250 px
• Căptușeală inferioară: 250 px

Adăugați un rând nou

Structura coloanei

După ce ați terminat modificarea setărilor secțiunii, adăugați un rând nou folosind următoarea structură de coloane:

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândului și adăugați o culoare de fundal.

• Culoare fundal: #ffffff

Coloana 1 Culoare fundal

Adăugați o altă culoare de fundal în prima coloană.

• Coloana 1 Culoare fundal: # f9f9f9

Dimensionare

Apoi, modificați setările de dimensionare ale rândului.

• Utilizați lățimea personalizată: da
• Unitate: PX
• Lățime personalizată: 1730 px
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da

Spațiere

Și adăugați câteva valori de spațiere personalizate pentru a se potrivi cu toate dimensiunile ecranului.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Coloana 1 Căptușeală superioară: 200 px (desktop), 0 px (tabletă și telefon)
• Coloana 1 Căptușeală inferioară: 150 px (desktop), 0 px (tabletă și telefon)
• Coloana 1 Căptușeala din stânga: 50 px
• Coloana 1 Căptușeala dreaptă: 50 px
• Coloana 2 Căptușeală superioară: 200 px (desktop), 100 px (tabletă și telefon)
• Coloana 2 Căptușeală inferioară: 150 px, 100 px (tabletă și telefon)

Box Shadow

Ultimul lucru pe care va trebui să îl faceți în setările rândului este să adăugați o umbră subtilă de casetă.

• Puterea neclarității umbrei cutiei: 56 px
• Puterea răspândirii umbrei cutiei: -17px
• Culoare umbră: rgba (0,0,0,0,3)

Adăugați un modul de text în coloana 1

Adauga continut

E timpul să începeți să adăugați module! Adăugați un modul de text în prima coloană.

Setări text

După ce ați adăugat conținutul, accesați setările de text și faceți câteva modificări.

• Font text: Cambay
• Culoarea textului: # 000000
• Dimensiune text: 26 px
• Spațiere scrisoare text: -0,5 px
• Orientarea textului: dreapta

Spațiere

Adăugați și câteva margini superioare.

• Marja superioară: 60 px

Vizibilitate

Și ascundeți modulul atât pe telefon, cât și pe tabletă.

Clonați modulul de text de două ori

Schimbați conținutul ambelor duplicate

După ce ați terminat modificarea primului modul de text, continuați și clonați modulul de două ori. Schimbați conținutul ambelor duplicate.

Schimbați spațiul ambelor duplicate

Modificați și marginea superioară a ambelor duplicate.

• Marja superioară: 80 px

Adăugați modulul formular de contact în coloana 2

Activați opțiunea „Faceți lățimea completă” în câmpul Nume și e-mail

Singurul modul de care avem nevoie în a doua coloană este un modul de formular de contact. Deschideți numele și câmpurile de e-mail și modificați setările de aspect.

• Faceți lățime completă: Da

Elemente

Dezactivați opțiunea captcha în continuare.

• Afișare Captcha: Da

Setări text câmp formular

Apoi, accesați setările de text din câmpul formularului și efectuați câteva modificări.

• Culoarea fundalului câmpului formularului: rgba (255,255,255,0)
• Font câmp formular: Cambay

Setări buton

Și creați un buton unic folosind următoarele setări ale butonului:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 64 px (desktop), 50 px (tabletă), 40 px (telefon)
• Culoarea textului butonului: # 000000
• Culoare 1: # 4bf2d0
• Culoare 2: rgba (41.196.169,0)
• Tipul gradientului: radial
• Direcție radială: centru
• Poziția inițială: 25%
• Poziție finală: 25%
• Lățimea chenarului butonului: 0 px
• Afișați butonul doar pe hover pentru buton: nu

Spațiere

Adăugați și câteva margini superioare la acest modul.

• Marja superioară: 50 px

Frontieră

Și utilizați o margine inferioară subtilă pentru fiecare dintre câmpuri.

• Lățimea marginii inferioare: 0,5 px
• Culoare margine inferioară: # 000000

Spațierea individuală a câmpului

Nu în ultimul rând, adăugați următoarea marjă inferioară la fiecare dintre câmpuri individual și ați terminat!

• Marja inferioară: 50 px

previzualizare

Desktop

Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra proiectelor modulelor formularului de contact Divi de pe desktop.

Mobil

Și asta este ceea ce vă puteți aștepta de la proiectele de module de formulare de contact Divi pe dimensiuni de ecran mai mici:

Gânduri finale

În această postare, am împărtășit 5 modele frumoase de module de formulare de contact Divi pe care le puteți utiliza și modifica cu ușurință pentru orice site web pe care îl creați. Formularele de contact sunt o parte vitală a multor site-uri web, așa că este important să vă asigurați că designul dvs. vă convinge vizitatorii să ia legătura. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!