Cum să construiești un formular AJAX WordPress (în 4 pași simpli)

Ați pierdut vreodată potențiali clienți pentru că formularul dvs. de contact a fost lent sau a necesitat reîncărcarea întregii pagini? Aceasta este o poveste pe care o auzim prea des.

Am văzut, de asemenea, pe propria piele cât de frustrante pot fi formularele tradiționale WordPress – atât pentru proprietarii de site-uri, cât și pentru vizitatorii lor. Formularele AJAX rezolvă 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 implementat aceste formulare de multe ori pe site-urile clienților și partenerilor, iar rezultatele vorbesc de la sine.

În acest ghid, vom împărtăși un proces simplu în 4 pași pentru a construi un formular AJAX WordPress. Vom folosi un plugin prietenos pentru începători, care simplifică munca tehnică, astfel încât să puteț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 care permite paginilor web să trimită și să primească date fără reîncărcare.

Este utilizat frecvent în formularele web, permițând utilizatorilor să trimită datele formularului fără a reîncărca pagina. Acest lucru face ca trimiterea formularului să fie ușoară și rapidă, ceea ce îmbunătățește experiența generală a utilizatorului.

Aplicațiile web precum Gmail și Facebook folosesc, de asemenea, această tehnică pe scară largă pentru a menține utilizatorii implicați în timp ce sarcinile de fundal rulează fără probleme.

Puteți utiliza AJAX pentru formularele de pe site-ul dvs. WordPress pentru a evita reîncărcările inutile ale paginii și pentru a menține utilizatorii implicați pe pagina pe care o vizualizează în prezent.

Acest lucru este deosebit de util dacă aveți un magazin online și doriți să colectați feedback de la utilizatori fără a întrerupe experiența de cumpărături.

Puteți utiliza aceeași funcționalitate AJAX și pentru alte formulare personalizate de pe site-ul dvs. web. De exemplu, un formular personalizat de autentificare a utilizatorilor poate permite utilizatorilor să se autentifice fără o încărcare suplimentară a paginii.

Având acest lucru în vedere, vă vom arăta cum să creați un formular de contact AJAX WordPress în 4 pași simpli.

Să începem.

Pasul 1: Instalați pluginul WPForms

Primul pas este să instalați și să activați un plugin de creare formulare.

Pentru acest tutorial, vom folosi pluginul WPForms. Este cel mai bun creator de formulare de contact WordPress de pe piață și vă permite să creați cu ușurință formulare bazate pe 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ă despre WPForms pentru mai multe informații.

Pentru a începe, s-ar putea să doriți să creați un cont WPForms. Pe site-ul WPForms, faceți clic pe butonul „Get WPForms Now”, alegeți un plan și finalizați procesul de checkout.

După ce ați făcut acest lucru, ar trebui să aveți propriul tablou de bord al contului WPForms, unde puteți descărca fișierul zip WPForms Pro și copia cheia de licență.

În continuare, să instalăm și să activăm pluginul WPForms.

În zona de administrare WordPress, puteți accesa Pluginuri » Adăugare Plugin Nou.

Apoi, poți folosi bara de căutare pentru a găsi rapid pluginul.

Când îl vedeți, faceți clic pe „Instalare Acum” și apoi din nou pe „Activare”.

Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activare, accesați pagina WPForms » Setări pentru a introduce cheia de licență.

Odată verificat, veți putea primi actualizări automate și instala add-on-uri. Acum sunteți pregătit să începeți crearea formularelor AJAX în WordPress.

Pasul 2: Creează primul tău formular

Acum 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 denumi mai întâi noul dvs. formular, de exemplu, „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, dacă doriți să utilizați WPForms AI, trebuie doar să introduceți o solicitare simplă și acesta va genera formularul pentru dvs. în zona de previzualizare.

Pentru acest tutorial, însă, vom crea un formular de contact folosind un șablon predefinit.

Să trecem cu mouse-ul peste caseta „Formular de contact simplu” și să dăm clic pe „Utilizează șablon”. Reține că poți crea orice alt tip de formular de care ai nevoie; procesul este același.

WPForms va încărca acum formularul tău cu câmpuri de bază deja adăugate.

De aici, poți pur și simplu să dai clic pe orice câmp al formularului pentru a-l edita.

Poți, de asemenea, să adaugi noi câmpuri ale formularului din coloana din stânga, dând clic pe ele.

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.

Odată ce ai terminat de personalizat formularul, poți trece la pasul următor.

Pasul 3: Activați Funcția de Trimitere a Formularului AJAX

În funcție de setările tale, este posibil ca WPForms să nu aibă activată implicit trimiterea formularului prin AJAX, așa că să verificăm asta acum.

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ă ce cineva trimite formularul.

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.

Deși poți redirecționa utilizatorii către o pagină nouă, acest lucru necesită încărcarea unei pagini. Pentru a beneficia la maximum de AJAX, recomandăm pur și simplu afișarea unui „Mesaj”, astfel încât utilizatorul să rămână pe aceeași pagină.

Trebuie să selectezi opțiunea de mesaj și să editezi mesajul de confirmare. Poți folosi bara de formatare sau poți adăuga linkuri pentru a ghida utilizatorii cu privire la ce să facă în continuare.

În continuare, configurează cum ai dori să fii notificat despre noile trimiteri de formulare.

Comutați la fila „Notificări” din setările formularului și configurați setările de e-mail pentru notificări.

Când ai terminat, poți salva formularul și ieși din constructorul de formulare.

Pasul 4: Adăugați Formularul cu AJAX Activat în WordPress

WPForms face ușor să aduci formulare pe site-ul tău WordPress, fie într-o postare, pagină sau widget de bară 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 meniul derulant din blocul WPForms.

WPForms va încărca imediat o previzualizare live a formularului în editorul de conținut.

Acum puteți salva sau publica conținutul dvs., apoi vizitați 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 creat anterior și faceți clic pe butonul „Actualizare” pentru a salva setările widget-ului. Acum puteți vizita site-ul dvs. 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 intrărilor dvs. 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 formularului este simplă: 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.

Întrebări frecvente: Formulare AJAX WordPress

Înainte de a încheia, iată câteva întrebări frecvente care apar atunci când oamenii încep să folosească formulare AJAX în WordPress.

Cum folosesc AJAX pentru trimiterea formularelor?

Cel mai simplu mod este să folosiți un plugin de formulare care suportă deja AJAX, cum ar fi WPForms. Pur și simplu activați opțiunea AJAX în setările formularului, iar plugin-ul se ocupă de tot.

Dacă creați un formular personalizat, va trebui să utilizați JavaScript și hook-urile AJAX ale WordPress. Dar pentru majoritatea site-urilor, un plugin este mult mai simplu și mai fiabil.

Unde găsesc setarea AJAX în WPForms?

În WPForms, opțiunea AJAX se află în setările formularului. După ce deschideți formularul în builder, accesați Setări » General, apoi căutați căsuța de selectare Activați trimiterea formularului AJAX. Odată activată, formularul se va trimite fără a reîncărca pagina.

Care sunt dezavantajele AJAX?

AJAX se bazează pe JavaScript, deci poate intra în conflict cu plugin-uri agresive de caching care minify sau defer scripts. Dacă formularul dvs. „se învârte” dar nu se trimite, încercați să vă ștergeți cache-ul sau să verificați setările plugin-ului de optimizare.

De asemenea, poate cauza probleme cu constructoarele de pagini sau temele mai vechi dacă nu este configurat corect. De aceea este important să testați formularele după activarea AJAX.

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.