Cum să adăugați formulare de contact utilizând pluginul – P2: utilizați WPForms

În articolul anterior al seriei „Formular de contact”, am aflat ce este un formular de contact și cum să folosim pluginul Formular de contact 7. După cum am promis, am scris un alt tutorial cu WPForms și vă voi arăta în acest articol.

WPForms este un plugin freemium pentru formularul de contact cu drag-and-drop, cu o previzualizare în timp real. Din experiența mea, este ușor și convenabil să lucrezi cu acest plugin.

Vă amintiți acest model de formular de înscriere la universitate pe care l-am creat în partea 1 a acestei serii? Acum, vom crea același cu WPForms.

Pasul 1: Instalați și activați pluginul WPForms

Acest plugin are o versiune gratuită pe wordpress.org, așa că trebuie doar să instalați și să activați pluginul chiar în Tabloul de bord de administrare .

Formular de contact de la WPForms – Creator de formulare Drag & Drop pentru WordPress

Autor(i): WPForms

Versiunea curentă: 1.7.1.2

Ultima actualizare: 18 noiembrie 2021

wpforms-lite.1.7.1.2.zip

98% Evaluări 5.000.000+ Instalări WP 4.9+ Necesită

Pasul 2: Creați un formular de contact nou și alegeți un șablon

Pe tabloul de bord de administrare , accesați WPForms > Adăugați nou .

Iată interfața cu care trebuie să lucrați:

În bara laterală din stânga, puteți vedea 5 secțiuni:

1. Configurare : Denumiți formularul de contact și alegeți șablonul acestuia.
2. Câmpuri : Adăugați și personalizați câmpuri pentru formularul de contact.
3. Setări : Configurați notificările, confirmările și setările generale.
4. Marketing : Legătură cu instrumente de marketing prin e-mail, cum ar fi Constant Contact, Campaign Monitor, Mailchimp, …
5. Plăți : adăugați plata de la PayPal Standard, Stripe și Authorize.Net.

Notă : nu derulez nicio campanie de marketing prin e-mail și formularul meu nu necesită informații de plată. Prin urmare, nu am nevoie de secțiunile Marketing și Plăți .

În secțiunea Configurare , introduceți numele formularului și selectați șablonul dorit.

Există patru șabloane implicite:

• Formular simplu de contact
• Formular de înscriere la buletin informativ
• Sugestie Pentru
• Formular necompletat

Excluzând formularul necompletat , alte șabloane au propriile câmpuri predefinite pe care le puteți utiliza pentru a crea mai rapid formulare de contact. În plus, puteți instala suplimente WPForms (disponibile numai pentru versiunile plătite) pentru a obține mai multe șabloane.

În acest articol, aleg șablonul Formular Blank pentru a construi un formular de contact pas cu pas de la început. Acest lucru vă va ajuta să înțelegeți totul mai ușor și mai profund.

Pasul 3: Adăugați câmpuri pentru formularul de contact

Adăugați câmpuri

După ce ați ales șablonul Formular necompletat la pasul 2, veți fi mutat la secțiunea Câmpuri .

Pentru a adăuga câmpuri pentru formularul de contact, trageți câmpurile dorite din fila Adăugare câmpuri și plasați-le în formularul de contact.

Apoi, pentru a personaliza un câmp, faceți clic pe el, apoi editați parametrii acestuia în fila Opțiuni câmpuri .

În plus, puteți șterge sau duplica un câmp trecând cu mouse-ul peste el și făcând clic pe butoanele dorite.

În acest articol, trebuie să adaug următoarele câmpuri:

După ce adăugați toate aceste câmpuri, trebuie să personalizați fiecare câmp în pașii următori.

Personalizați opțiunile generale pentru fiecare câmp

În general, există două tipuri de opțiuni pentru a personaliza fiecare câmp:

Opțiuni de bază : toate câmpurile conțin aceste opțiuni și ar trebui să lucrați cu ele pentru a face formularul de contact clar și ușor de înțeles.

• Etichetă : introduceți numele câmpului pe care doriți să-l afișați.
• Descriere : acesta este afișarea textului de sub câmp pentru a le spune utilizatorilor ce trebuie să facă.
• Obligatoriu : este optional! Bifați-l pentru ca acest câmp să fie obligatoriu.

În următorii pași, când menționez „informații de bază”, înseamnă că trebuie să vă ocupați de aceste opțiuni de bază.

Opțiuni avansate : există câteva caracteristici avansate pentru fiecare câmp. Este opțional pentru tine să te ocupi de ele, dar există câteva lucruri importante pe care ar trebui să te uiți:

• Text substituent : afișați un text în interiorul câmpurilor înainte ca utilizatorii să introducă date. Acest text poate fi folosit ca ghid sau exemplu pentru a ajuta utilizatorii să înțeleagă cu ușurință ce trebuie să completeze. De exemplu, puteți seta textul substituent al câmpului de e-mail ca „Introduceți adresa de e-mail”.
• Valoare implicită : dacă există multe persoane care au același răspuns, puteți seta un răspuns implicit pentru a economisi timp și efort utilizatorilor. De exemplu, creați un formular de contact pentru persoanele care locuiesc în New York, astfel încât să puteți introduce o valoare implicită „New York” în câmpul „Locație”.
• Clase CSS : Introduceți clase CSS în această casetă pentru a stila câmpul. În pasul următor, voi include cod în această secțiune pentru a stila formularul de contact.

Notă :

• În Formularul de contact 7, puteți utiliza valoarea implicită ca text substituent. Dar este mai convenabil în WPForms, deoarece aveți secțiunea Text de substituent separată. În plus, WPForms are secțiunea Descriere care afișează textul sub câmp. Folosesc acest mod pentru că îmi face formularul de contact să arate mai bine.

• Puteți face clic pe butonul semn de întrebare de lângă opțiuni/câmpuri pentru a citi instrucțiunile WPForms pentru acestea.

În plus, există câteva opțiuni diferite în funcție de fiecare câmp. Să aflăm care sunt ele!

Personalizați câmpul „Numele dvs.”.

Selectați câmpul Text Line Simple și completați doar informațiile de bază:

În acest câmp, există încă 2 opțiuni în secțiunea Opțiuni avansate :

• Lungime limită : bifați-l pentru a alege o limită pentru numărul maxim de caractere care pot fi introduse în câmp.
• Mască de intrare : introduceți măști de intrare pentru a solicita formate specifice pentru câmp. Citiți mai multe detalii aici.

Personalizați câmpul „Numărul dvs. de telefon”.

Acest domeniu nu are nimic special. Doar selectați câmpul Numere și completați informațiile de bază:

Personalizați câmpul „E-mailul dvs.”.

Selectați câmpul E - mail și completați informațiile de bază pentru câmp:

Acest câmp are încă o opțiune de bază: Activați confirmarea prin e-mail . Îl puteți verifica pentru a le cere utilizatorilor să furnizeze adresa lor de e-mail de două ori. Acest lucru vă asigură că e-mailul lor este corect.

Personalizați câmpurile „Locație de studiat” și „Major”.

Mai întâi, alegeți câmpul dropdown . În secțiunea Opțiuni, introduceți opțiunile pentru câmp. Puteți face clic pe (+) (-) pentru a adăuga/elimina opțiuni.

În plus, puteți, de asemenea, să faceți clic pe butonul Adăugare în bloc pentru a adăuga mai multe opțiuni simultan. În caseta Adăugați opțiuni , completați opțiunile în ordinea dorită (fiecare alegere este o linie) și apoi faceți clic pe Adăugați opțiuni noi .

În plus, în acest domeniu, există 2 opțiuni avansate de care ar trebui să vă pese:

• Stil : vă puteți stila meniul drop-down cu două opțiuni: clasic și modern. Stilul modern vă permite să căutați după cuvinte cheie. Prin urmare, funcționează bine în meniurile cu o mulțime de opțiuni (mai mult de 10 opțiuni).
• Opțiuni dinamice : permiteți utilizatorilor să selecteze opțiuni din tipurile de postări sau taxonomii. De exemplu, dacă alegeți Sursă tip de postare dinamică ca Postări , fiecare opțiune din meniul derulant este o postare pe site-ul dvs. web.

Personalizați câmpul „Înregistrați-vă la”.

Selectați câmpurile Casete de selectare și introduceți opțiuni precum câmpurile dropdown .

În acest domeniu, există 2 opțiuni avansate de care ar trebui să vă pese:

• Utilizați opțiuni de imagine : îl puteți utiliza pentru a ilustra alegerile dvs. și pentru a face formularul de contact mai atractiv și mai vizualizat.
• Alegeri aleatorii : Acest lucru poate evita ca oamenii să aleagă o alegere doar pentru că este prima.

Pasul 4: Configurați formularul de contact

După crearea unui formular de contact, trebuie să-l configuram. În versiunea gratuită a WPForms, puteți configura trei secțiuni de mai jos:

Configurați setările generale

Pluginul WPForms are instrucțiuni specifice pentru fiecare opțiune din această parte. Ar trebui să faceți clic pe butonul cu semnul întrebării, să îl citiți cu atenție și să acordați atenție acestor câmpuri:

• Textul butonului Trimitere : În Formularul de contact 7, trebuie să creați câmpul Trimitere . Dar în WPForms, butonul de trimitere este încorporat. Puteți schimba textul acestui buton din această secțiune cu orice doriți, cum ar fi Înregistrați-vă la, Trimiteți e-mail, ...
• Activați protecția anti-spam : uneori, spammerii vă pot deranja prin tone de „formule de gunoi”. În acest caz, ar trebui să activați această funcție de anti-spam.

Configurați notificările

Dacă doriți să primiți o notificare prin e-mail ori de câte ori un utilizator trimite un formular de contact, treceți la Setări > Notificări .

Puteți adăuga „etichete inteligente” sau text în câmpurile din această secțiune pentru a gestiona mai ușor e-mailul pe care îl primiți atunci când un utilizator trimite un formular de contact.

Notă : Etichetele inteligente pot adăuga automat informații la notificările formularului de contact.

Acesta este un exemplu al setărilor mele:

Configurați Confirmările

În secțiunea Confirmare , puteți configura mesajele pe care utilizatorii le primesc după ce trimit formularele de contact.

Când ați terminat toată configurația, faceți clic pe Salvare .

Pasul 5: Afișați formularul pe pagini/postări

Pentru a vă afișa formularele pe pagini/postări, există 2 moduri.

Prima modalitate este să faceți clic pe Încorporare pentru a afișa formularul pe o pagină:

După aceea, încorporați formularul de contact într-o pagină nouă sau într-o pagină existentă pe site-ul dvs.

A doua modalitate este introducerea codului scurt al formularului de contact în pagini/postări. Vă recomand să alegeți a doua modalitate deoarece poate afișa formularul de contact atât pe postări, cât și pe pagini . Pentru a face acest lucru, în Tabloul de bord de administrare , accesați WPForms > Toate formularele , găsiți formularul de contact și copiați codul scurt al acestuia.

Apoi, lipiți acest shortcode în postările / paginile dorite.

Și iată rezultatul:

Nu arată încă ca exemplul de formular de contact, așa că trebuie să-l stil puțin.

Pasul 6: stilați formularul

Pe tabloul de bord admin , mergeți la WPForms > Toate formularele , găsiți formularul de contact și apoi faceți clic pe Editare .

Acum, faceți clic pe fiecare câmp, accesați Opțiuni avansate > Clase CSS și adăugați următoarele valori:

• Numele și înregistrarea dvs. la : ip-100
• Numărul dvs. de telefon , e-mail , locație pentru a studia , Major : ip-50

Apoi, accesați Personalizator > Adăugare CSS , adăugați acest cod:

 .wpforms-field-container {
    display: flex;
    flex-wrap: wrap;
		justificare-conținut: spațiu-între
}

.ip-50 {
    latime: 48%!important;
}

.ip-100{
		latime: 100%!important;
}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
div.wpforms-container-full .wpforms-form select.wpforms-field-medium {
	latime maxima: 100%;
}

.ip-100 ul {
	display: flex;
	justificare-conținut: spațiu-între;
}

div.wpforms-container-full {
    margine-jos: 24px;
    fundal: #eeeeee;
    umplutură: 20px;
}

În cele din urmă, faceți clic pe Publicare .

Și iată rezultatul final:

Formularul de contact arată mai bine acum, nu-i așa? Ei bine, tocmai am terminat ultimii pași pentru a avea un formular complet similar cu eșantionul meu.

Ultimele Cuvinte

Din experiența mea, folosirea interfeței de glisare și plasare ca în WPForms este mai ușoară și mai rapidă decât utilizarea Formularului de contact 7. În plus, are butonul de trimitere pre-construit și încă 2 secțiuni utile ca Text și Descriere substituent . Previzualizarea live este, de asemenea, foarte convenabilă. Mă ajută să detectez mai ușor greșelile atunci când creez și personalizez formularul.

Pentru a afla cum să utilizați mai multe pluginuri de formulare de contact, urmați următorul nostru articol din această serie! Dacă aveți întrebări despre WPForms sau sugerați orice plugin de formular de contact, nu ezitați să îl lăsați în secțiunea de comentarii.