Cum să creați un formular de contact pe clic cu Divi

În acest tutorial Divi, vă vom arăta cum să creați un formular de contact care apare după ce faceți clic pe un buton (ca suprapunere) folosind altceva decât Divi, un cod jQuery și un cod CSS.

Acesta este un mod excelent de a ține vizitatorii site-ului dvs. concentrați asupra acțiunii la care s-au angajat făcând clic pe un buton. Nu le duce la o altă pagină, ci le blochează în acțiunea respectivă până când nu se termină.

Mai jos puteți lua un vârf rapid la ceea ce vom crea și apoi săriți în tutorial!

Rezultat pe desktop

Rezultat pe telefon și tabletă

Inspirație

Inspirația pentru această postare vine dintr-o cerere de comentariu și se găsește pe B3multimedia. Deși folosesc o altă metodă pentru ca acest lucru să funcționeze, au și un mod uimitor de a crea un formular de contact la clic. Aruncați o privire asupra rezultatului:

Creați secțiunea cu modulul buton

În mod obișnuit, vă arătăm cum să faceți aproape totul în constructorul vizual Dend. Cu toate acestea, în postarea de astăzi voi folosi constructorul de backend. Datorită codului pe care îl folosim, este puțin mai ușor. Acestea fiind spuse, dacă vă place editorul frontend la fel de mult ca noi, puteți completa la fel de ușor acest tutorial utilizând vizualizarea „schelet” a frontend-ului.

Ok, hai să intrăm în acest tutorial!

Abonați-vă la canalul nostru Youtube

Primul lucru pe care trebuie să-l facem este să adăugăm o nouă secțiune în care plasăm butonul care va permite să apară formularul de contact. Doar adăugați o secțiune standard și selectați un rând cu o coloană. După ce ați făcut acest lucru, adăugați un modul buton la acesta.

Puteți stiliza butonul oricum doriți, dar trebuie să vă asigurați că URL-ul butonului începe cu „#” urmat de altceva. Nu puteți să o lăsați necompletată sau să utilizați numai caracterul „#”. Prin adăugarea „#” și a unui text, pagina nu se va mișca după ce faceți clic pe buton. Dacă o lăsați necompletată, pagina se va reîmprospăta la clic. Și dacă utilizați doar „#”, veți fi trimis în partea de sus a paginii.

Următorul lucru important pe care trebuie să-l facem este să atribuim butonului o clasă CSS. Vom folosi această clasă CSS mai târziu în această postare în codul jQuery pentru a ne asigura că formularul de contact apare după ce faceți clic. Clasa pe care va trebui să o atribuim butonului este pur și simplu „buton”.

Creați formularul de contact desktop pe clic

Următorul lucru pe care trebuie să-l facem este să creăm formularul de contact desktop care va apărea după ce cineva face clic pe butonul pe care l-am creat în partea anterioară a acestei postări. Mai târziu în această postare, vă vom arăta, de asemenea, cum să creați versiunea mobilă.

Practic, puteți crea orice design doriți într-un rând și să-l faceți să apară ca fereastră pop-up dacă utilizați această metodă. Vă vom oferi doar o idee despre ceea ce puteți realiza arătându-vă cum să creați următorul exemplu:

Adăugați o nouă secțiune standard

Începeți prin adăugarea unei noi secțiuni standard la pagina la care lucrați. Accesați fila Advanced din secțiunea pe care tocmai ați adăugat-o și adăugați „popup” în câmpul CSS Class. Derulați în jos aceeași filă și plasați următoarele linii de cod CSS în câmpul Înainte din subcategoria CSS personalizată:

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

Adăugând acest lucru, ne asigurăm că secțiunea ocupă întreaga filă. Puteți regla culoarea de fundal în codul CSS pentru a crea suprapunerea de fundal dorită. În acest caz, folosim culoarea neagră cu o anumită transparență. În aceeași filă, adăugați următoarea linie de cod CSS și la Elementul principal:

display: none;

Ultimul lucru pe care trebuie să îl facem în fila Avansat este dezactivarea secțiunii de pe telefon și tabletă din subcategoria Vizibilitate.

Adăugați rândul din două coloane

Continuați adăugând un rând cu două coloane și accesați fila Proiectare. Începeți prin modificarea lățimii rândului din subcategoria Dimensionare. În acest exemplu, am folosit o lățime personalizată de 1291 px.

Derulați în jos fila Proiectare și utilizați „30 px” pentru partea de sus, stânga și dreapta a ambelor coloane din subcategoria Spațiu.

Finalizați accesând fila Advanced. În Elementul principal, adăugați următoarele linii de cod CSS:

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

Adăugați primul modul de text

După ce ați făcut toate modificările secțiunii și rândului, este timpul să adăugați diferitele module pe care doriți să le afișați. Primul lucru pe care îl vom adăuga este titlul care apare. Începeți prin adăugarea unui nou modul de text în prima coloană a rândului, scrierea textului în fila Conținut și trecerea la fila Proiectare. În fila Proiectare, am folosit următoarele setări pentru subcategoria Text:

• Orientare text: centru
• Font text: homar
• Stilul fontului: Bold
• Dimensiunea fontului textului: 37
• Culoarea textului: # 002282
• Înălțimea liniei textului: 1.7em

Adăugați al doilea modul de text

Continuați adăugând un nou modul de text și tastați textul pe care doriți să-l afișeze în fila Conținut. Treceți la fila Proiectare și aplicați următoarele setări pentru subcategoria text:

• Orientare text: centru
• Font text: Arial
• Dimensiunea fontului textului: 13
• Culoarea textului: # 002282
• Înălțimea liniei textului: 1.7em

Adăugați modulul Social Media Follow

Mergând mai departe, vom adăuga și modulul de urmărire a rețelelor sociale în prima coloană. În acest caz, am ales trei icoane sociale; Facebook, Twitter și Instagram. După ce ați adăugat aceste pictograme sociale în fila Conținut, schimbați forma de legătură în „Cerc” din subcategoria Pictogramă.

Ultimul lucru pe care trebuie să-l facem este să adăugăm o umplutură stângă la acest modul în fila Advanced. Adăugați următoarea linie de cod CSS la Elementul principal:

padding-left: 40%;

Adăugați modulul formular de contact

Apoi, putem trece la a doua coloană a rândului. În acea coloană, primul lucru pe care îl vom plasa este modulul Formular de contact. Pentru acest exemplu, am ales doar două câmpuri; numele și adresa de e-mail. După ce ați adăugat modulul Formular de contact, accesați fila Proiectare a modulului Formular de contact și efectuați următoarele modificări la subcategoria Text câmp formular:

• Dimensiunea fontului câmpului formularului: 15
• Culoarea textului câmpului formularului: # 002282
• Înălțimea liniei câmpului formularului: 1.7em

În aceeași filă, efectuați următoarele modificări pentru subcategoria Buton:

• Utilizați stilul personalizat pentru buton: Da
• Dimensiune text buton: 20
• Culoarea textului butonului: #FFFFFF
• Culoarea fundalului butonului: # 0086c4
• Lățimea chenarului butonului: 2
• Raza butonului: 3

Treceți la fila Avansat și adăugați o umplutură de sus de 5%.

Adăugați modul Blurb

Un alt lucru pe care va trebui să îl adăugăm la a doua coloană este un modul Blurb. Singurul lucru pentru care avem nevoie de acest modul este pictograma de ieșire din partea dreaptă sus a ferestrei pop-up. Alegeți următoarea pictogramă din lista de pictograme și lăsați toate celelalte lucruri goale.

Mergând mai departe, accesați fila Avansat și tastați „închide” ca clasă CSS. În aceeași filă, adăugați următoarele linii de cod la Elementul principal al subcategoriei CSS personalizate:

position: absolute;
top: -45px;
right: -30px;
cursor: pointer;

Aplicați fundalul de gradient la rând

Nu în ultimul rând, vom adăuga un fundal de gradient frumos la rând. Deschideți setările și efectuați următoarele modificări pentru opțiunea de fundal de gradient:

• Culoarea gradientului întâi: #FFFFFF
• Culoare gradient secund: # 0c71c3
• Tipul gradientului: liniar
• Direcția gradientului: 124 grade
• Poziția inițială: 50%
• Poziție finală: 50%

Creați formularul de contact pentru tabletă și telefon făcând clic pe

Acum că am creat versiunea desktop, versiunea pentru tabletă și telefon va merge mult mai repede. Majoritatea modulelor pe care le-am folosit pentru versiunea Desktop sunt aceleași pentru versiunea mobilă. Rezultatul final pe mobil arată astfel:

Adăugați o nouă secțiune standard

Începeți prin adăugarea unei alte secțiuni standard. Această secțiune va trebui să aibă aceleași setări ca secțiunea pe care am creat-o anterior. Adăugați „popup” la clasa CSS și adăugați următoarele linii de cod CSS în câmpul Înainte:

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

Adăugați și următoarea linie de cod CSS la elementul principal:

display: none;

În loc să o dezactivăm pentru telefon și tabletă, așa cum am făcut pentru versiunea desktop, o vom dezactiva pe desktop în subcategoria Vizibilitate:

Adăugați rândul cu o coloană

Pentru fereastra pop-up pentru telefon și tabletă, vom avea nevoie doar de o singură coloană. Pentru acest rând, nu vom folosi lățimea personalizată. Cu toate acestea, vom aplica capitonarea personalizată așa cum am făcut pentru versiunea desktop; 30 px pentru umplerea de sus, stânga și dreapta a coloanei.

De asemenea, va trebui să ne asigurăm că următoarele linii de cod CSS sunt adăugate elementului principal din subcategoria CSS personalizată:

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

Clonați textul, modulul de urmărire și formularul de contact pentru rețelele sociale

Următorul lucru pe care trebuie să-l facem este să clonăm primul modul de text pe care l-am folosit pentru versiunea desktop împreună cu modulul de urmărire și formular de contact pentru rețelele sociale. După ce le-ați clonat, plasați-le în rândul cu o coloană a noii secțiuni pe care tocmai ați creat-o.

Clonează Blurb Module & Change CSS Code în fila Advanced

De asemenea, puteți clona modulul Blurb care a fost utilizat pentru versiunea desktop, dar trebuie să existe o mică modificare a codului CSS. În loc să utilizați codul pentru desktop, utilizați în schimb următoarele:

position: absolute;
top: -15px;
right: -25px;
cursor: pointer;

Asigurați-vă că clasa CSS „închisă” este utilizată și pentru modulul Blurb.

Aplicați fundalul de gradient la rând

Pentru versiunea mobilă, folosim diferite setări pentru fundalul de gradient al rândului:

• Culoarea gradientului întâi: #FFFFFF
• Culoare gradient secund: # 0c71c3
• Tipul gradientului: liniar
• Direcția gradientului: 180 grade
• Poziția inițială: 40%
• Poziție finală: 40%

Adăugați cod jQuery la Opțiunile temei

Ultimul lucru pe care trebuie să-l facem pentru acest tutorial este adăugarea codului jQuery. Puteți adăuga codul prin Opțiunile temei sau printr-un modul de cod pe care îl plasați în pagina la care lucrați. Pentru acest exemplu, pur și simplu îl vom introduce în Opțiunile temei.

Pentru aceasta, accesați tabloul de bord WordPress> Divi> Opțiuni tematice> Integrare> Și lipiți următoarele linii de cod jQuery în capul site-ului dvs. web:

<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>

Rezultat

Dacă urmați postarea, pas cu pas, ar trebui să puteți obține următorul rezultat pe desktop:

Și următorul rezultat pe tablete și telefoane:

Gânduri finale

În această postare, v-am arătat cum să creați un formular de contact la clic. Utilizarea acestei metode pentru a intra în contact cu vizitatorii dvs. este subtilă, dar eficientă. Dacă aveți întrebări sau sugestii; asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos.

Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!

Imagine prezentată de La1n / shutterstock.com