Cea mai rapidă (și cea mai bună) modalitate de a crea formulare Wufoo

Wufoo este o aplicație web care intenționează să simplifice formularele. Formele pot fi, în general, obositoare cu care să lucrați. Va trebui să scrieți XHTML / CSS pentru elementele de formular, să configurați codul final pentru a capta toate datele și apoi să lucrați la generarea de rapoarte utilizabile pentru aceasta. Wufoo simplifică întregul proces de la crearea formularului până la integrarea acestuia pe site-ul dvs. prin intermediul unui suport extins de teme pentru a produce rapoarte destul de ușor de utilizat pentru a vă analiza datele.

Are chiar și o mulțime de lucruri avansate, inclusiv cârligele web și un API adecvat pentru a accesa datele colectate. Astăzi, vom examina cum să creăm un formular simplu cu Wufoo și apoi să folosim API pentru a accesa și modifica în mod programatic datele colectate.


Crearea primului dvs. formular

În primul rând, va trebui să înființăm un formular pentru a putea juca cu el. Înregistrează-te pentru un nou cont la Wufoo și te duci la una dintre cele mai pline de umor stări de aplicare ale tuturor timpurilor:

Dați clic pe buton pentru a începe să construiți un nou formular și vi se duce la aplicația de creare a formularului. Interfața este foarte intuitivă, cu un panou sensibil la context din stânga și secțiunea principală a formularului din dreapta. Adăugarea elementelor este la fel de simplă ca și click-ul sau tragerea lor în secțiunea principală.

Dând clic pe elementul creat vă permite să editați toate detaliile relevante.

Deoarece am dori să păstrăm cât mai simplu posibil, doar un singur câmp de text care are o adresă de e-mail va face. Faceți clic pe Salvați formularul și am terminat. Am creat primul nostru formular cu cod zero și a durat toate cele 60 de secunde.


Integrarea cu site-ul dvs.

Integrarea formularului creat cu site-ul nostru este incredibil de ușoară. Accesați pagina Formulare și faceți clic pe cod link-ul formularului nou creat.

Wufoo oferă o serie de modalități pentru a obține formularul vizitatorilor dvs., inclusiv o versiune JavaScript care funcționează în interiorul unui iframe, cod XHTML pentru o pagină completă care conține formularele sau doar un link pe care îl puteți partaja cu prietenii.


API-ul Wufoo

API-ul Wufoo vă permite să preluați programatic, să trimiteți și să modificați datele relevante pentru contul dvs. cu foarte puțină agitație. Setul API constă, în esență, din două API-uri stabile, fixe și încă unul sub testarea beta. Ne vom uita la părțile stabile astăzi.

Rețineți că veți putea prelua și trimite datele numai la formulare deja existente. Dacă doriți să creați formulare pe loc și apoi să le trimiteți date sau doar să creați câmpuri noi prin intermediul API, sunteți în afara norocului. Versiunea curentă a API nu permite această funcționalitate, ci o caută în viitorul apropiat împreună cu o grămadă de alte funcționalități.

Dar, mai întâi, veți avea nevoie de o cheie API. Puteți să-l obțineți de pe link-ul de informații API din pagina unde primiți fragmentele de cod.

Notați cheia dvs. API și codul câmpului pe care doriți să îl accesați și / sau să îl modificați. O vom folosi în scurt timp.


Noțiuni de bază privind datele dvs. - API-ul pentru interogări

Interogarea API vă permite să preluați informațiile pe care le-ați colectat prin formularele dvs., ocolind site-ul web Wufoo. În cazul în care căutați să obțineți toate datele brute și apoi să creați un raport personalizat din acesta, acesta este calea de urmat.

Primul lucru pe care trebuie să îl rețineți este adresa URL pe care va trebui să o solicitați pentru a obține datele corecte. Adresa URL arată astfel:

 http://username.wufoo.com/api/query/ 

A inlocui nume de utilizator cu numele dvs. de utilizator și sunteți bine să plecați. întrebare părțile l-au lăsat pe serverele Wufoo să știe că căutați să obțineți informații de la servere.

Trimiterea unei cereri către server

cURL este cea mai ușoară cale pentru a trimite date către server. Dacă sunteți un pic nou în cURL și vă simțiți pierdut, vă recomandăm să treceți prin acest articol cURL chiar aici, la Nettuts+.

  

Să trecem peste partea codului în parte. Avem mai întâi nevoie de cheia API pe care am făcut-o înainte. De asemenea, avem nevoie de numele formularului la care doriți să preluați datele. Aceste două, împreună cu versiunea API pe care o folosim, două în cazul nostru, sunt parametrii minime de care avem nevoie pentru a face o cerere de succes.

Conectăm toate elementele necesare ca perechi cheie / valoare și stocăm-o pentru o utilizare ulterioară.

În continuare, trecem la adresa URL corectă, după cum sa menționat mai sus, împreună cu șirul de solicitare creat mai sus. De asemenea, stocăm răspunsul la o variabilă, astfel încât să o putem folosi.

$ resp răspunde solicitării noastre. În mod implicit, API-ul Wufoo returnează datele într-un format JSON. În cazul în care XML se întâmplă să fie sarcina dvs. utilă de alegere, va trebui să adăugați un parametru suplimentar la șirul de solicitare. Parametrul suplimentar are formatul w_format = format unde formatul poate fi XML sau JSON.

Răspunsul JSON

Sarcina utilă returnată JSON este de fapt destul de mare, conținând numeroase informații. Partile relevante sunt prezentate mai jos:

Partea principală este rezultatul cererii, împreună cu informații despre formularul solicitat, inclusiv numele formularului, titlul acestuia, adresa URL, descrierea și o mulțime de alte informații.

Al doilea punct de interes sunt câmpurile, formularul conține. Deoarece forma noastră a fost foarte simplă, având doar un singur câmp, datele noastre returnate sunt destul de scurte. În orice caz, acesta conține informații despre ID-ul câmpului, titlul și diverse alte informații, inclusiv dacă este necesar sau nu, o descriere a câmpului și așa mai departe.

Punctul final de interes este partea care conține t intrările. Fiecare intrare pentru formularul selectat este returnată apelantului care conține o multitudine de informații, inclusiv id-ul intrării, valoarea câmpurilor, IP-ul utilizatorului, data la care a fost creat și așa mai departe.

Din acest punct, ceea ce faceți cu datele este total la latitudinea dvs. Puteți să analizați datele pentru a crea un raport personalizat, pentru a căuta informațiile pentru date specifice sau pentru a le introduce într-o foaie de calcul sau o bază de date. Imaginația ta este limita.


Trimiteți cu stil - API-ul Trimitere

API-ul de trimitere vă permite să trimiteți date direct către serverele Wufoo. Acest API este deosebit de util dacă aveți absolut nevoie să utilizați propriul XHTML / CSS, în timp ce utilizați în continuare toate capabilitățile de back end oferite de Wufoo. În acest fel, veți obține cele mai bune rezultate din ambele lumi: puteți utiliza propriul look personalizat, dar păstrați toată puterea lui Wufoo.

Frontul nu necesită diferențe semnificative. De exemplu, aici este marcajul pe care l-am utilizat pentru testarea API-ului de trimitere.

 

handler.php arata asa.

  

Există câteva lucruri de remarcat aici. Ca și în API-ul de interogare, salvează apikey și formid, astfel încât să putem folosi mai târziu. De asemenea, captează valoarea casetei de text POSTed, astfel încât să o putem trimite la Wufoo noi înșine.

Observați că am creat și o variabilă numită fieldid. Aceasta corespunde direct ID-ului API prezent în pagina cheii API.

După aceasta, totul este la fel ca înainte. Conectăm șirul și apoi folosim cURL pentru a transmite datele către server. Serverul returnează un răspuns JSON care arată mai jos:

Asta e. Fără greutăți, fără sens. Postarea la Wufoo prin codul personalizat este la fel de simplă.


Bonus: Integrarea cu serviciile terților

Ca o caracteristică bonus adăugată, Wufoo vă permite acum să postați la alte servicii atunci când o intrare nouă este înregistrată în sistem. Puteți face o mulțime de lucruri minunat cu această caracteristică minunat noi, dar voi doar stick la modul de utilizare a acestei caracteristici.

Pentru a accesa pagina de notificări, faceți clic pe link-ul de notificări din pagina de formulare.

Această pagină vă permite să alegeți să primiți notificări printr-o serie de opțiuni, inclusiv e-mail și SMS sau postați la servicii precum Highrise, Twitter și multe altele când este afișată o nouă înregistrare. Dar acestea nu sunt cele pe care le vom privi astăzi. Cea pe care o vom analiza este hârliile web - o tehnologie minunată care permite dezvoltatorilor să primească callback-uri HTTP atunci când o intrare este trimisă către Wufoo. Gândește-te ca un apel invers la steroizi.

Pe partea lui Wufoo tot ce trebuie să faceți este să introduceți o adresă URL la care Wufoo va trimite datele POST la fiecare dată. Tot ce trebuie să faceți de partea dvs. pentru a configura o pagină care captează datele POSTed. În scopuri de testare, puteți configura un cont la PostBin, care vă salvează hassle-ul. Introduceți această adresă URL în Wufoo și sunteți toți setați. Un exemplu de date postate de Wufoo către adresa URL țintă.

Foarte drăguț, dacă aș putea să spun așa.


Concluzie

Și am terminat! Ne-am uitat la crearea unui formular simplu cu Wufoo și apoi cum să manipulăm și să recuperăm în mod programatic datele colectate prin API ușor de folosit de Wufoo. Sperăm că acest lucru a fost util pentru dvs. și l-ați găsit interesant. Voi urmări îndeaproape secțiunea de comentarii; așa că sună acolo dacă ai întrebări.

Întrebări? Ce lucruri frumoase de spus? Critici? Activați secțiunea de comentarii și lasă-mă un comentariu. Codificare fericită!


Scrie un tutorial Plus

Știați că puteți câștiga până la 600 USD pentru a scrie un tutorial PLUS și / sau pentru noi? Căutăm tutoriale detaliate și bine scrise despre HTML, CSS, PHP și JavaScript. Dacă sunteți în măsură, contactați Jeffrey la [email protected].

Rețineți că o compensație reală va depinde de calitatea tutorialului final și a scenariului.

  • Urmați-ne pe Twitter sau abonați la Nettuts + RSS Feed pentru cele mai bune tutoriale de dezvoltare web de pe web.
Cod