Cum să utilizați Webhooks cu formularele WordPress

Doriți să integrați formularele dvs. WordPress cu diferite aplicații și servicii web?

Dacă aveți nevoie de o modalitate simplă de a trimite date către o aplicație web direct din formularul dvs. WordPress, webhooks sunt soluția perfectă. Cu un formular webhook, nu aveți nevoie de ajutorul unui conector terț precum Zapier.

În acest articol, vă vom arăta cum să utilizați webhooks pe formularele dvs. WordPress, astfel încât să puteți trimite cu ușurință date în timp real către aplicațiile și serviciile preferate.

Dar mai întâi, dacă sunteți începător, vom acoperi ce sunt webhooks și de ce sunt importanți. Rețineți că metoda pe care o vom folosi astăzi nu necesită să aveți abilități de codare.

Ce sunt Webhooks?

Webhooks permit două aplicații web să comunice între ele. Deci, de exemplu, dacă cineva trimite un formular de comandă pe site-ul dvs., puteți trimite acele date către canalul dvs. Slack pentru a informa echipa dvs. de produse că a fost plasată o comandă. Puteți face acest lucru și atunci când primiți un nou lead sau un abonat.

În termeni tehnici, webhooks sunt apeluri HTTP definite de utilizator, care sunt declanșate de un eveniment într-un sistem sursă și trimise către sistemul destinație.

Aceasta înseamnă că atunci când un eveniment sau un declanșator are loc pe site-ul dvs., mesaje automate sunt trimise către un serviciu conectat. Un declanșator poate fi orice, cum ar fi comentarii pe blog, achiziții de produse, înregistrări de utilizatori și trimiteri de formulare.

Dacă vă întrebați de ce ar trebui să utilizați webhooks, iată câteva beneficii:

• Transferă informații între două servicii/aplicații automat
• Automatizează sarcinile și reduce timpul administrativ
• Reduce costul utilizării serviciilor de conectare precum Zapier și Hubspot pentru procesarea datelor în aplicații.

Webhook-urile sunt incredibil de utile pentru dezvoltatori și utilizatori WordPress cunoscători de tehnologie.

Cu asta, să începem ghidul nostru pas cu pas despre cum să creezi un formular webhook în WordPress.

Crearea unui formular Webhook în WordPress [Metodă Ușoară]

Există multe moduri în care poți folosi webhook-uri pentru a trimite trimiterile formularelor tale WordPress către alte aplicații web.

Vom folosi WPForms pentru acest tutorial, deoarece oferă un Addon Webhooks pe care oricine îl poate folosi cu ușurință, inclusiv începătorii. Nu implică absolut deloc codare.

WPForms este cel mai bun plugin pentru crearea de formulare pentru site-urile WordPress. Și ceea ce trebuie să știți este că oferă o mulțime de șabloane predefinite și câmpuri de formular gata de utilizare, care vă permit să creați tot felul de formulare WordPress. Acestea includ comenzi de produse, înregistrări, programări, formulare simple de contact și multe altele.

WPForms vine cu un constructor de formulare drag and drop care face personalizarea formularelor o joacă de copil. Are o mulțime de addon-uri și integrări pe care le poți folosi pentru a te conecta la aplicații de email, plată și marketing.

Cu Addonul său Webhooks, puteți conecta cu ușurință WordPress-ul dvs. cu orice serviciu sau aplicație. Tot ce este necesar sunt câteva clicuri pentru a activa această funcționalitate.

De asemenea, WPForms îți permite să folosești reguli condiționale pentru a declanșa o acțiune webhook bazată pe răspunsul utilizatorului la formular. Deci, doar dacă valoarea unui câmp este îndeplinită, atunci webhook-ul va rula. Acest lucru îți oferă mai mult control asupra datelor pe care vrei să le trimiți și către ce aplicație.

Puteți să vă conectați la o mulțime de aplicații și servicii. Pentru acest tutorial, vă vom arăta cum să vă conectați la Slack. Dar rețineți, puteți folosi aceiași pași pentru a vă conecta la alte aplicații și endpoint-uri.

Pasul 1: Creați o aplicație Slack nouă

Prin conectarea formularului dvs. webhook la Slack, puteți trimite automat mesaje și informații de pe site-ul dvs. web către canalele dvs. Slack. Puteți actualiza membrii echipei sau departamentele atunci când o persoană trimite un formular, abandonează un formular și multe altele.

Acum, pentru a trimite date din WordPress către un alt serviciu folosind webhooks, va trebui să creați o punte între cele două aplicații. Deci, pentru a vă conecta la Slack, va trebui să creați o aplicație Slack (puntea).

Dacă sunteți nou în acest domeniu, nu vă faceți griji, este destul de ușor și vă vom ghida pas cu pas. Mai întâi, va trebui să deschideți pagina Slack API și să faceți clic pe butonul Create an App.

În fereastra pop-up următoare, puteți alege cum doriți să creați o aplicație cu Slack. Există două opțiuni:

• De la zero
• Dintr-un manifest de aplicație.

Aici, vom crea o aplicație Slack de la zero. Sună ca multă muncă, dar în realitate necesită doar câteva clicuri.

Apoi, veți vedea fereastra pop-up unde puteți adăuga numele aplicației și puteți alege spațiul de lucru Slack. Odată ce ați terminat, faceți clic pe Create App.

Aceasta deschide pagina Informații de bază. Aici, trebuie să faceți clic pe opțiunea Incoming Webhooks.

În ecranul următor, activați setările Activate Incoming Webhooks. Acest lucru vă permite să postați mesaje pe Slack din servicii externe.

Odată activat, veți vedea secțiunea Webhooks URLs for Your Workspace pe pagină.

Acum, trebuie să creați un webhook nou pentru a obține informații din formularul dvs. WordPress. Deci, faceți clic pe butonul Add New Webhook to Workspace.

În continuare, puteți vedea fereastra pop-up unde puteți selecta un canal Slack pentru a publica trimiterile formularului dvs.

După ce ați ales un canal Slack, faceți clic pe Permite.

Acum, veți putea vedea noua adresă URL webhook pentru aplicația dvs. Slack.

Tot ce trebuie să faceți acum este să copiați adresa URL Webhook. Veți avea nevoie de ea peste câțiva pași.

Pasul 2: Instalați și activați WPForms

Odată ce aveți URL-ul webhook, îl puteți adăuga la formularul dvs. WordPress.

Pentru a începe, înregistrați-vă pentru un cont pe site-ul WPForms.

Există o versiune gratuită a pluginului, dar veți avea nevoie de versiunea premium pentru a accesa funcții avansate de formular, cum ar fi webhook-urile. WPForms vine cu o garanție de rambursare 100% fără riscuri, astfel încât să puteți încerca serviciul înainte de a vă angaja.

După ce vă înregistrați, veți găsi fișierul de descărcare a pluginului și cheia de licență în fila Descărcări.

Acum, accesați tabloul de bord WordPress și instalați pluginul. Dacă doriți mai multe detalii, puteți consulta ghidul nostru despre cum să instalați un plugin WordPress.

Odată ce instalați și activați WPForms pe site-ul dvs., va trebui să introduceți cheia de licență pentru a vă bucura de toate funcțiile și addon-urile premium.

Înainte de a începe crearea formularului, trebuie să instalați Addon-ul Webhooks.

Pentru aceasta, accesați fila WPForms » Addons și veți găsi o mulțime de addon-uri care vă ajută să extindeți funcționalitatea formularelor dvs. WordPress. Aici, faceți clic pe butonul Instalați Addon pentru Addon-ul Webhooks.

Acum, sunteți gata să creați formularul dvs. webhook în WordPress.

Pasul 3: Creați un formular Webhook

Pentru a crea un formular nou, accesați pagina WPForms » Adăugați nou unde veți vedea o listă de șabloane predefinite. Aceste șabloane vin pre-completate cu câmpurile de care veți avea nevoie, în funcție de scopul formularului dvs. Biblioteca de șabloane include:

• Formular simplu de contact
• Formular de solicitare ofertă
• Formular de donație
• Formular de facturare/comandă
• Formular de sondaj
• Formular de sugestii

...și multe altele! Pentru acest tutorial, vom alege șablonul Formular de sugestii deoarece am creat o aplicație Slack pentru feedback-ul utilizatorilor în pasul anterior. Simțiți-vă liber să alegeți unul care se potrivește cel mai bine nevoilor dvs.

Tot ce trebuie să faci este să dai un nume formularului tău în partea de sus a paginii. Apoi alege orice șablon în funcție de nevoile tale sau poți alege șablonul gol pentru a începe de la zero.

După ce selectezi un șablon, vei vedea constructorul de formulare drag and drop în fereastra următoare.

Dacă vrei să adaugi mai multe câmpuri, pur și simplu trage și plasează noi câmpuri din meniul din stânga în previzualizarea formularului.

WPForms oferă multe opțiuni de personalizare, așa că poți face clic pe orice câmp pentru a le edita. Îți permite să schimbi numele câmpurilor, descrierea și setări mai avansate.

Odată ce ai terminat de adăugat câmpurile formularului, fă clic pe butonul Salvează.

În pasul următor, vom învăța cum să configurăm webhooks pentru acest formular și să conectăm aplicația ta Slack.

Pasul 4: Configurarea unui Webhook pentru Slack

Pentru ca webhooks să funcționeze pe formularul tău, trebuie să navighezi la fila Setări » Webhooks și să faci clic pe opțiunea Activare Webhooks.

Va fi creat un nou webhook pe care îl poți edita pentru a configura integrarea ta Slack.

Mai întâi, poți schimba numele webhook-ului. Acest lucru te va ajuta să îl recunoști mai târziu.

Acum îți amintești URL-ul Webhook pe care l-ai copiat din aplicația ta Slack în Pasul 1? Va trebui să îl lipești aici în opțiunea URL cerere. Acest lucru îți va permite să conectezi formularul tău WordPress cu alte servicii precum Slack.

După aceasta, veți vedea diverse setări pentru configurarea webhook-ului dvs. Vom discuta ce face fiecare și ce să adăugați în aceste câmpuri aici.

• Request Method: It lets you choose what type of connection you want to create with your connected service. There are many types of HTTP methods that you can use based on what type of connection you’re looking to create:
  • GET: Aceasta va prelua date din formularul trimis și va trimite detaliile către o aplicație conectată.
  • POST: Aceasta va trimite datele către un serviciu secundar. Vom folosi cererea HTTP POST, deoarece trebuie să postăm date din formularul dvs. în canalul dvs. Slack.
  • PUT: Aceasta vă permite să actualizați date atunci când webhook-ul dvs. rulează.
  • PATCH: Aceasta vă permite să înlocuiți date atunci când webhook-ul dvs. rulează.
  • DELETE: Aceasta vă permite să ștergeți informații atunci când rulează acest webhook specific.
• Request Format: This option will show the server which type of content you are sending over. This is a bit technical but basically, there are two different request format types available:
  • JSON: Formatează datele dvs. în formatul application/json și va seta tipul de conținut ca charset=utf-8.
  • FORM: Formatează datele dvs. în formatul application/x-www-form-urlencoded și va seta tipul de conținut ca charset=utf-8.
• Secret: Dacă sunteți dezvoltator și doriți să integrați propriul API pentru autentificare, puteți folosi o cheie secretă. Dar pentru tutorialul nostru, nu avem nevoie de această opțiune, așa că o vom lăsa goală.
• Request Headers: Aceasta trimite valori specifice atunci când cererea este trimisă către aplicație. Când webhook-ul rulează, câmpurile vor fi generate automat. Vom lăsa și acest câmp gol.
• Request Body: Pentru această opțiune, trebuie să configurați tipul mesajului și să selectați un câmp pentru a posta mesajele. Deoarece utilizatorii vor introduce sugestii în format text, vom seta Cheia la Text. Apoi, selectați câmpul unde utilizatorii vor introduce mesajul lor.

După ce ați terminat cu setările cererii webhook, faceți clic pe butonul Save.

Pasul 5: Configurați notificările formularului

Apoi, puteți configura notificări prin e-mail pentru formularul WordPress. Aceasta vă permite să trimiteți e-mailuri automate administratorului, oricărui membru al echipei și clientului/utilizatorului după ce aceștia trimit formularul.

Pentru a configura aceste fluxuri de e-mail, accesați fila Setări » Notificări, bifați opțiunea Activare notificări pentru a vedea setările implicite.

Aici puteți personaliza setările de notificare și puteți adăuga adrese de e-mail ale destinatarilor.

WPForms vă permite, de asemenea, să trimiteți notificări automate prin e-mail utilizatorilor formularului. Pentru a configura acest lucru, faceți clic pe butonul Add New Notification din colțul din dreapta sus al paginii.

Apoi, trebuie să utilizați opțiunea Afișare etichete inteligente și să selectați E-mail. Cu această etichetă, WPForms va detecta automat adresa de e-mail introdusă de utilizator în formular.

În secțiunea Mesaj e-mail, puteți adăuga mesajul dvs. personalizat și puteți utiliza eticheta inteligentă {all_fields} pentru a afișa toate datele formularului introduse de utilizator.

Nu uitați să salvați setările la final.

Pasul 6: Personalizare mesaj de confirmare

WPForms vă permite, de asemenea, să afișați mesaje de confirmare pe partea frontală a site-ului dvs. după ce utilizatorii trimit cu succes formularul.

În fila Setări » Confirmări, veți vedea setările de confirmare. Implicit, Tipul de confirmare este setat la „Mesaj”, dar există 3 opțiuni în acest meniu:

• Mesaj: Adăugați un mesaj de confirmare care este afișat pe partea frontală după ce clienții își trimit comanda. 
• Afișare pagină: Redirecționați utilizatorii către orice pagină de pe site-ul dvs.
• Mergi la URL (Redirecționare): Trimite utilizatorii la un URL specific.

Pentru a afla mai multe despre acest subiect, puteți consulta ghidul nostru despre cum să configurați corect notificările și confirmările formularului.

După ce ați terminat cu setările, faceți clic pe butonul Salvare.

Trebuie să menționăm, de asemenea, că WPForms vă permite să vă integrați cu serviciul dvs. de e-mail preferat, cum ar fi Constant Contact și Mailchimp.

Trebuie doar să accesați acest lucru sub fila Marketing și să urmați instrucțiunile de pe ecran pentru a vă conecta contul de email. În majoritatea cazurilor, va trebui să furnizați o cheie API pe care o puteți genera la furnizorul de email.

Dacă doriți să conectați formularele online și la un gateway de plată, puteți afla cum să faceți acest lucru aici: Cum să creați un formular de comandă online

Tot ce trebuie să faceți acum este să publicați formularul webhook pe site-ul dvs. WordPress.

Pasul 7: Publicați formularul Webhooks pe site-ul dvs.

Pentru a începe să trimiteți trimiterile de formulare către servicii externe, trebuie mai întâi să publicați formularul webhook. Cu blocul personalizat WPForms, puteți adăuga formularele dvs. la orice pagină sau postare de pe site-ul dvs. WordPress.

Pentru acest tutorial, vom adăuga formularul la o pagină nouă de pe site-ul nostru. Deci, navigați la fila Pagini » Adăugare Nouă din panoul de administrare WP. Pe ecranul editorului de blocuri, adăugați un nou bloc și căutați „WPForms”.

Când adăugați blocul WPForms la pagina dvs., veți vedea un meniu derulant care vă permite să selectați formularul webhook pe care tocmai l-ați creat.

Apoi, puteți publica pagina dvs. pe site-ul dvs.

Dacă utilizați editorul clasic WordPress, puteți adăuga formularul folosind butonul Adăugare Formular din editor.

Puteți chiar să inserați formularul dvs. webhook într-o zonă pregătită pentru widget-uri, cum ar fi un subsol sau o bară laterală. Pentru a face acest lucru, accesați fila Aspect » Widget-uri și trageți și plasați widget-ul WPForms în bara laterală sau în meniul subsolului din dreapta.

Apoi, puteți selecta formularul pe care l-ați creat din meniul derulant și puteți salva modificările.

Acum formularul dvs. webhook este publicat pe site-ul dvs. Când utilizatorii completează și trimit formularul, veți primi notificări Slack de pe site-ul dvs.

Astfel, puteți utiliza WPForms pentru a vă conecta la diferite aplicații folosind URL-uri webhook. Aveți control complet asupra datelor pe care doriți să le preluați și să le trimiteți altor aplicații.

Acestea sunt toate! Sperăm că acest articol v-a ajutat să învățați cum să utilizați Webhooks pe formularele dvs. WordPress. Cu WPForms, puteți crea cu ușurință un formular webhook și vă puteți conecta cu un serviciu terț.

Îl puteți folosi, de asemenea, pentru a crea alte formulare profesionale WordPress, cum ar fi formulare de comandă, formulare de rezervare, formulare de înregistrare și multe altele. De asemenea, ați putea dori să aflați cum să utilizați WPForms pentru a salva datele formularului în baza de date WordPress.

Pentru următorii pași, puteți consulta aceste resurse:

• Cum să adaugi opțiunea „Salvează și continuă mai târziu” la formularele WordPress
• Cum să reduci abandonul formularelor și să crești conversiile
• Cele mai bune instrumente de captare a e-mailurilor și constructori de formulare pentru WordPress

Aceste postări vă vor ajuta să adăugați funcționalitatea de salvare și reluare mai târziu pe formularele dvs. WordPress și să reduceți ratele de abandonare a formularelor. Ultima vă va ajuta să vă extindeți lista de marketing prin e-mail.