Ați pierdut vreodată clienți potențiali deoarece formularul dvs. de contact era lent și greoi? Aceasta este o poveste pe care o auzim prea des. Am experimentat și noi direct cât de frustrante pot fi formularele tradiționale WordPress – atât pentru noi, cât și pentru cititorii noștri.
Formularele AJAX au rezolvat această problemă și pot face același lucru și pentru dvs.
Aceste formulare moderne trimit date instantaneu, fără a reîmprospăta pagina. Ele creează o experiență mai fluidă care ajută la menținerea vizitatorilor implicați.
Am aplicat aceste formulare de multe, multe ori pe site-urile clienților și partenerilor noștri, iar rezultatele vorbesc de la sine.
În acest ghid, vom împărtăși procesul nostru dovedit în 4 pași pentru construirea unui formular AJAX WordPress. Vom folosi un plugin prietenos pentru începători care simplifică aspectele tehnice, astfel încât să poți urmări cu ușurință. 🙌
Ce este AJAX și de ce să-l folosiți pentru formularele dvs.?
AJAX, prescurtare de la Asynchronous JavaScript and XML, este o tehnică de programare JavaScript care permite dezvoltatorilor să transfere date fără a reîncărca o pagină.
Este cel mai frecvent utilizat în formularele web, permițând utilizatorilor să trimită datele formularului fără a reîncărca o pagină. Acest lucru face trimiterea formularului ușoară și rapidă, ceea ce îmbunătățește experiența generală a utilizatorului.
În plus, aplicațiile web precum Gmail și Facebook folosesc pe scară largă această tehnică pentru a menține utilizatorii implicați, asigurând în același timp funcționarea perfectă a totul în fundal.
Poți folosi AJAX pentru formularele de pe site-ul tău WordPress. Va salva utilizatorii de la reîncărcări inutile ale paginii și îi va menține implicați pe pagina pe care o vizualizează în prezent.
Acest lucru este util atunci când ai un magazin online și vrei să colectezi feedback de la utilizatori fără a le distrage atenția.
Puteți folosi aceeași funcționalitate AJAX și pentru alte formulare personalizate de pe site-ul dvs. De exemplu, un formular personalizat de autentificare a utilizatorilor va permite utilizatorilor să se autentifice fără o încărcare suplimentară a paginii.
Acestea fiind spuse, vă vom arăta cum să creați cu ușurință un formular de contact WordPress AJAX în 4 pași simpli.
- Pasul 1: Instalați pluginul WPForms
- Pasul 2: Creează primul tău formular
- Pasul 3: Activați Funcția de Trimitere a Formularului AJAX
- Pasul 4: Adăugați Formularul cu AJAX Activat în WordPress
- Sfat Bonus: Exportați Intrările Formularului în CSV sau Excel 📄
- Resurse bonus: Mai multe ghiduri despre formulare WordPress
Să începem.
Pasul 1: Instalați pluginul WPForms
Primul lucru pe care trebuie să-l faceți este să instalați și să activați un constructor de formulare.
Pentru acest tutorial, vom folosi pluginul WPForms. Este cel mai bun constructor de formulare de contact WordPress de pe piață și vă permite să creați cu ușurință formulare cu funcționalitate Ajax.
La WPBeginner, folosim WPForms pentru a afișa formularul nostru de contact, pentru a desfășura sondaje anuale ale cititorilor și pentru a gestiona solicitările de servicii de migrare, printre altele.
A fost o experiență grozavă și puteți vedea recenzia noastră completă WPForms pentru mai multe informații despre acest plugin!
Deci, să instalăm și să activăm WPForms. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.
📝 Notă: Pentru a crea un formular AJAX, veți avea nevoie de versiunea Pro a pluginului. Dar există o versiune gratuită WPForms pe care o puteți consulta dacă doriți să explorați constructorul său drag-and-drop și funcționalitățile de bază ale formularului înainte de a face upgrade.
După activare, trebuie să vizitați pagina WPForms » Setări pentru a introduce cheia de licență.
După introducerea cheii de licență, vei putea primi actualizări automate și instala add-on-uri.
Acum sunteți pregătiți să creați formulare AJAX frumoase în WordPress.
Pasul 2: Creează primul tău formular
Să mergem mai departe și să creăm primul dvs. formular WordPress.
Pur și simplu vizitați pagina WPForms » Adăugare Nou din zona de administrare WordPress.
Pe ecranul următor, puteți mai întâi să denumiți noul dvs. formular. De exemplu, aici, am denumit formularul nostru „Formular de Contact”.
După aceea, veți alege cum veți construi formularele.
Cu WPForms, puteți crea formularele dvs. de la zero, puteți utiliza constructorul de formulare AI sau puteți alege dintre peste 2.000 de șabloane predefinite.
De exemplu, să spunem că doriți să utilizați WPForms AI. Atunci, tot ce trebuie să faceți este să-i oferiți un prompt simplu, iar acesta va genera formularul pentru dvs. în zona de previzualizare.
Pentru acest tutorial, însă, vom fi creând un formular de contact. Treceți cursorul peste caseta „Formular de contact simplu” și faceți clic pe „Utilizați șablonul”.
Rețineți că puteți crea orice alt tip de formular de care aveți nevoie; procesul este practic același.
WPForms va încărca acum formularul dvs. cu câmpuri de bază deja adăugate.
De aici, puteți pur și simplu să faceți clic pe orice câmp de formular pentru a-l edita.
Puteți, de asemenea, să adăugați orice câmp de formular nou din coloana din stânga, pur și simplu făcând clic pe el.
Noul câmp va apărea în partea de jos a formularului dvs., chiar deasupra butonului Trimite.
Puteți apoi să trageți și să plasați câmpurile formularului pentru a le rearanja ordinea.
După ce ai terminat de personalizat formularul, poți trece la pasul următor.
Pasul 3: Activați Funcția de Trimitere a Formularului AJAX
WPForms nu activează trimiterea formularului AJAX implicit, așa că va trebui să o activezi manual pentru formularul tău.
Pentru a face acest lucru, pur și simplu comutați la fila „Setări” din constructorul de formulare.
În fila de setări „Generale”, accesați și faceți clic pe comutatorul de lângă opțiunea „Activare trimitere formular AJAX”.
Acum să configurăm ce se întâmplă după trimiterea formularului.
Mai întâi, puteți comuta la fila „Confirmare” din setări. Aici este locul unde informați utilizatorii că ați primit trimiterea formularului lor.
WPForms îți permite să faci acest lucru în diferite moduri. De exemplu, poți redirecționa utilizatorii către un URL, să le arăți o pagină specifică sau pur și simplu să afișezi un mesaj pe ecran.
Deoarece am activat funcționalitatea AJAX pentru formular, redirecționarea utilizatorilor către o altă pagină ar înfrânge scopul creării unui formular AJAX.
Trebuie să selectezi opțiunea de mesaj și să editezi mesajul de confirmare. Simte-te liber să folosești bara de formatare din editor sau să adaugi unul sau două linkuri pentru a spune utilizatorilor unde să meargă mai departe.
După aceea, puteți configura cum doriți să fiți notificat despre trimiterea unui formular.
Comutați la fila „Notificări” din setările formularului și configurați setările de e-mail pentru notificări.
Odată ce ați terminat, puteți salva formularul și ieși din constructorul de formulare.
Pasul 4: Adăugați Formularul cu AJAX Activat în WordPress
WPForms face că este extrem de ușor să adăugați formulare pe site-ul dvs. WordPress, fie că este vorba de o postare, o pagină sau widget-uri din bara laterală.
Pur și simplu editați postarea sau pagina unde doriți să adăugați formularul și inserați blocul WPForms în zona de conținut.
După aceea, trebuie să selectați formularul pe care tocmai l-ați creat din setările blocului.
WPForms va încărca imediat o previzualizare live a formularului în editorul de conținut.
Acum puteți salva sau publica conținutul dvs. și apoi vizita site-ul dvs. WordPress pentru a testa funcționalitatea AJAX a formularului.
Iată o scurtă privire asupra exemplului de formular AJAX WordPress de pe site-ul nostru demo:
Puteți adăuga, de asemenea, formularul dvs. într-un widget de tip sidebar în WordPress.
Pentru a face acest lucru, accesați pagina Aspect » Widgeturi și adăugați blocul widget WPForms într-o bară laterală.
Selectați formularul pe care l-ați creat anterior și faceți clic pe butonul „Actualizare” pentru a salva setările widgetului. Acum puteți vizita site-ul dvs. web pentru a vedea formularul dvs. cu funcționalitate AJAX în acțiune.
Sfat Bonus: Exportați Intrările Formularului în CSV sau Excel 📄
Odată ce formularul dvs. AJAX este funcțional, s-ar putea să doriți să păstrați o evidență a tuturor trimiterilor. Mai ales dacă colectați lead-uri, solicitări de la clienți sau informații de înregistrare.
Cel mai simplu mod de a face acest lucru este prin exportarea acestuia ca fișier CSV sau Excel.
Acest lucru face ușoară organizarea și analiza răspunsurilor în instrumente de calcul tabelar precum Google Sheets sau Microsoft Excel. Este, de asemenea, util pentru partajarea rapoartelor cu echipa dvs. sau pentru backup-ul datelor formularului în afara WordPress.
Dacă utilizați WPForms, exportarea intrărilor din formulare este ușoară. Pur și simplu accesați WPForms » Intrări, selectați formularul dvs., alegeți opțiunile de export și descărcați datele ca fișier CSV sau Excel.
Doriți să configurați acest lucru? Urmați ghidul nostru complet despre cum să exportați intrările formularului WordPress în CSV și Excel.
Resurse bonus: Mai multe ghiduri despre formulare WordPress
Sperăm că acest articol v-a ajutat să învățați cum să creați un formular de contact AJAX WordPress pentru site-ul dvs. web. În continuare, este posibil să doriți să consultați și articolele noastre despre:
- Cum să Creați un Popup pentru Formularul de Contact în WordPress
- Cum să folosești formularele de contact pentru a-ți crește lista de email
- Cum să Creați Formulare de Contact cu Mai Mulți Destinatari
- Cum să creezi un formular de contact securizat în WordPress
- Cum să blocați spam-ul formularelor de contact în WordPress
- Cum să urmăriți și să reduceți abandonul formularelor
- Ghidul complet pentru utilizarea formularelor WordPress
Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.
Ai o întrebare sau o sugestie? Te rugăm să lași un comentariu pentru a începe discuția.