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ă a se reîncărca.

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 folosi aceeași funcționalitate AJAX și pentru alte formulare personalizate de pe site-ul dvs. De exemplu, un formular personalizat de autentificare a utilizatorului poate permite utilizatorilor să se autentifice fără o încărcare suplimentară a paginii.

De ce să alegi WPForms pentru formulare AJAX?

WPForms este cel mai bun constructor de formulare WordPress pentru crearea de formulare cu activare AJAX, având încrederea a peste 6 milioane de site-uri web.

Iată ce face WPForms ideal pentru formularele AJAX:

• Configurare rapidă pentru non-programatori. Majoritatea utilizatorilor își creează primul formular AJAX în mai puțin de 10 minute, fără a scrie niciun cod. Constructorul drag-and-drop îți permite să creezi formulare profesionale instantaneu, chiar dacă nu ai mai lucrat niciodată cu cod.
• Suport de nivel enterprise. WPForms oferă suport în aceeași zi cu o echipă care primește laude constante pe platformele de recenzii. Dacă întâmpini probleme, persoane reale le rezolvă rapid – ceva ce pluginurile gratuite precum Contact Form 7 nu pot oferi.
• Integrări puternice. Formularele tale AJAX se pot conecta la Constant Contact, HubSpot, Stripe, PayPal, Salesforce și peste 2.000 de alte servicii. Captează lead-uri și trimite-le automat către platforma ta de email marketing sau CRM fără exporturi manuale.
• Fiabilitate solidă. Formularele WPForms continuă să funcționeze în timpul actualizărilor WordPress fără a se defecta. Utilizatorii raportează constant că „pur și simplu funcționează” – crucial atunci când fiecare formular defect înseamnă lead-uri pierdute.

Cu WPForms, obții funcționalitate AJAX plus șabloanele, integrările și suportul care fac crearea formularelor fără efort. Să vedem cum să creezi formularul tău de contact AJAX WordPress în 4 pași simpli.

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 constructor 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 consulta recenzia noastră completă despre WPForms pentru mai multe informații.

Pentru a începe, poate 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.

Cu asta gata, ar trebui să ai propriul tablou de bord al contului WPForms, unde poți descărca fișierul zip WPForms și copia cheia de licență.

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

În zona de administrare WordPress, poți accesa Pluginuri » Adaugă Plugin.

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, dacă ai achiziționat WPForms Pro, accesează pagina WPForms » Setări pentru a introduce cheia de licență. Utilizatorii versiunii gratuite pot sări peste acest pas și să treacă la Pasul 2.

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, poți crea formularele de la zero sau poți alege din șabloane predefinite. Reține că WPForms Lite include șabloane standard; biblioteca completă de peste 2.000 de șabloane necesită Basic sau un nivel superior.

Deținătorii de licență Basic sau superioară pot folosi, de asemenea, constructorul de formulare AI pentru a genera formulare dintr-un prompt text. WPForms va genera apoi formularul pentru tine î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.

După ce ați terminat de personalizat formularul, puteți trece la pasul următor.

Pasul 3: Configurează mesajul de confirmare AJAX

Veste bună! WPForms activează automat trimiterile de formulare AJAX implicit pentru toate formularele noi, deci nu trebuie să configurezi nicio setare tehnică.

Poți accesa fila de setări „General” și te poți asigura că opțiunea „Activare trimitere formular AJAX” este activată.

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 vă permite să faceți acest lucru în diferite moduri. De exemplu, puteți redirecționa utilizatorii către un URL, le puteți afișa o pagină specifică sau pur și simplu puteți afișa un mesaj pe ecran.

Dacă alegeți să redirecționați utilizatorii către un nou URL, browserul lor va trebui în continuare să încarce o pagină nouă. Pentru a obține magia „fără reîncărcare” reală, fără întreruperi, a AJAX, recomandăm cu tărie utilizarea tipului de confirmare „Mesaj”.

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ă adăugați formulare pe site-ul dvs. WordPress, fie într-un post, 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 interiorul blocului 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: Gestionează și automatizează trimiterile de formulare

Odată ce formularul dvs. AJAX este activ și colectează trimiteri, WPForms vă oferă opțiuni puternice pentru gestionarea și automatizarea acestor date.

Exportă intrările în CSV sau Excel

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 Basic sau o versiune superioară, exportarea intrărilor din formular este simplă.

Pur și simplu accesați WPForms » Intrări, selectați formularul, alegeți opțiunile de export și descărcați datele ca fișier CSV sau Excel.

Acest lucru este util pentru rapoarte trimestriale, analiza lead-urilor sau importarea contactelor în instrumente externe.

Doriți să configurați acest lucru? Urmați ghidul nostru complet despre cum să exportați intrările din formularele WordPress în CSV și Excel.

Automatizează cu integrări

Chiar mai bine: omiteți exporturile manuale conectând formularul dvs. AJAX direct la instrumentele dvs. de afaceri. Integrările WPForms funcționează perfect cu formularele AJAX și includ:

• Marketing prin Email — Constant Contact, AWeber, ConvertKit, Drip (necesită planul Plus sau superior)
• Platforme CRM — Salesforce, HubSpot, Zoho CRM (necesită planul Elite sau superior)
• Instrumente de Automatizare — Zapier (se conectează la peste 5.000 de aplicații), Webhooks, Uncanny Automator
• Procesoare de Plată — Stripe, PayPal, Square, Authorize.Net
• Google Workspace — Google Sheets, Google Drive, Google Calendar

Aceste integrări funcționează perfect cu formularele AJAX.

Odată ce un utilizator trimite formularul, WPForms procesează trimiterea în fundal ȘI trimite datele către platformele dvs. conectate instantaneu.

De exemplu, puteți crea un formular de contact AJAX care adaugă automat lead-uri în lista dvs. Constant Contact, creează o înregistrare de contact HubSpot și înregistrează intrarea în Google Sheets — totul fără a scrie o singură linie de cod.

Pentru a configura integrările, editați formularul, faceți clic pe fila „Marketing” sau „Plăți” și urmați instrucțiunile de pe ecran pentru a vă conecta conturile.

Î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.

De ce să folosesc WPForms pentru formulare AJAX în loc de alte plugin-uri?

WPForms combină designul ușor de utilizat pentru începători cu funcționalități de nivel enterprise. Puteți crea formulare AJAX în mai puțin de 10 minute, fără codare, iar dacă ceva nu merge bine, echipa de suport WPForms oferă soluții în aceeași zi.

Planurile plătite WPForms includ integrări încorporate cu Constant Contact, Zapier, Salesforce și peste 2.000 de alte platforme. Chiar și versiunea gratuită WPForms Lite include plăți Stripe de bază (cu comisioane de tranzacție).

În acest fel, formularele dvs. AJAX se pot sincroniza automat cu sistemele dvs. de marketing prin email, CRM și de plată, fără configurare manuală.

Cum folosesc AJAX pentru trimiterea formularelor?

Cea mai ușoară modalitate 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 pluginul se ocupă de tot pentru dvs.

Dacă construiți un formular personalizat, ar 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 caseta de selectare Activați trimiterea formularului AJAX. Când este activată, formularul va fi trimis fără a reîncărca pagina.

În mod implicit, WPForms activează automat această setare, deci, de obicei, nu este nevoie să schimbați nimic. Cu toate acestea, puteți verifica în continuare dacă este activată, dacă este necesar.

Care sunt dezavantajele AJAX?

AJAX se bazează pe JavaScript, deci uneori poate intra în conflict cu plugin-uri agresive de caching care minify sau defer scripturi. Dacă formularul dvs. se ‘rotește’ dar nu trimite, încercați să vă curățați cache-ul sau să verificați setările plugin-ului de optimizare.

Ocazional, poate cauza probleme cu page builder-ele sau temele mai vechi, motiv pentru care este întotdeauna important să vă testați formularele după publicarea lor.

Cu toate acestea, beneficiile depășesc cu mult dezavantajele. De fapt, WPForms folosește AJAX în mod implicit, deoarece permite încărcarea în fundal a token-urilor moderne anti-spam. Acest lucru ajută la prevenirea boților de spam să vă ocolească plugin-urile de caching, păstrând inbox-ul dvs. în siguranță.

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ă Creați Formulare de Contact cu Mai Mulți Destinatari
• Cum să creezi un formular de contact securizat în WordPress
• Cum să urmăriți și să reduceți abandonul formularelor
• Ghidul complet pentru utilizarea formularelor WordPress

Dacă v-a plăcut acest articol, atunci vă rugăm să vă abonați la Canalul nostru de YouTube pentru tutoriale video despre WordPress. Ne puteți găsi, de asemenea, pe Twitter și Facebook.