Det snabbaste (och bästa) sättet att skapa formulär Wufoo

Wufoo är en webbapplikation som avser att förenkla formulär. Former kan i allmänhet vara tråkiga att arbeta med. Du måste skriva XHTML / CSS för formulärelementen, ställa in backendekoden för att fånga in alla data och arbeta sedan med att generera användbara rapporter för den. Wufoo förenklar hela processen från formskapande för att integrera den inom din webbplats genom omfattande tematjänst för att producera vackra, användbara rapporter för att du ska kunna analysera dina data.

Det gör till och med många avancerade saker, inklusive webbhakar och ett korrekt API för att komma åt de samlade data. Idag ser vi hur man skapar en enkel form med Wufoo och använder sedan API: n för att programmera åtkomst och modifiera de insamlade uppgifterna.


Skapa din första blankett

Först måste vi ställa in en blankett så vi kan leka med det. Registrera dig för ett nytt konto med Wufoo och du tas till ett av de mest humoristiska blanka ansökningsstadierna hela tiden:

Klicka på knappen för att börja bygga en ny blankett och du tas till formulärbyggaren. Gränssnittet är mycket intuitivt med en kontextkänslig panel till vänster och huvudformsdelen till höger. Att lägga till element är så enkelt som att klicka på det eller dra det i huvuddelen.

Genom att klicka på det skapade elementet kan du redigera alla relevanta uppgifter.

Eftersom vi skulle vilja hålla det så enkelt som möjligt, kommer bara ett enda textfält som tar en e-postadress att göra. Klicka på Spara formulär och vi är klara. Vi har skapat vår första blankett med nollkod och det tog 60 sekunder.


Integrera den med din webbplats

Att integrera den skapade formen med på vår webbplats är otroligt enkelt. Gå till formulärsidan och klicka på koda länk till det nyskapade formuläret.

Wufoo erbjuder ett antal sätt för dig att få formuläret till dina besökare, inklusive en JavaScript-version som fungerar i en iframe, XHTML-kod för en komplett sida som innehåller formulär eller bara en länk som du kan dela med dina vänner.


Wufoo API

Med Wufoo API kan du programmatiskt hämta, skicka in och ändra data som är relevanta för ditt konto med mycket lite väsen. API-uppsättningen består väsentligen av två stabila, fasta API och en och en under beta-testning. Vi tittar på de stabila delarna idag.

Observera att du bara kan hämta och skicka data till redan befintliga formulär. Om du letar efter att skapa formulär på flykt och sedan skicka in data till det eller bara skapa nya fält via API, är du inte lycka till. Den nuvarande versionen av API tillåter inte denna funktion, men letar efter den inom en snar framtid tillsammans med en massa andra funktioner.

Men först behöver du en API-nyckel. Du kan hämta den från länken API-information på sidan där du får dina kodsedlar.

Notera din API-nyckel och ID-numret för det fält du vill komma åt och / eller ändra. Vi ska använda det inom kort.


Komma till dina data - Query API

API-frågan låter dig hämta information som du har samlat in genom dina blanketter kring Wufoo-webbplatsen. Om du letar efter att få all rå data och sedan skapa en anpassad rapport ur den, är det här vägen att gå.

Det första du behöver notera är den webbadress du behöver för att få tillgång till rätt data. URL: n ser ut så här:

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

Byta ut Användarnamn med ditt användarnamn och du är bra att gå. De fråga delar låter dem Wufoo servrar vet att du letar efter att hämta information från servrarna.

Skicka en förfrågan till servern

cURL är det enklaste sättet för oss att skicka data till servern. Om du är lite ny på cURL och känner dig förlorad rekommenderar jag starkt att du går igenom den här cURL-artikeln här på Nettuts+.

  

Låt oss gå över koddelen med del. Vi behöver först API-nyckeln som vi noterade tidigare. Vi behöver också namnet på det formulär som du vill hämta data från. Dessa två tillsammans med den version av API som vi använder, två i vårt fall är minsta parametrar som vi behöver för att lyckas.

Vi sammanfogar alla nödvändiga element som nyckel / värdepar och lagrar det för senare användning.

Därefter skickar vi in ​​rätt webbadress enligt ovan, tillsammans med den begärsträng som vi skapade ovan. Vi lagrar också svaret på en variabel så att vi kan använda den.

$ resp svarar på vår begäran. Som standard returnerar Wufoo API-data data i ett JSON-format. Om XML råkar vara din nyttolast, måste du lägga till en ytterligare parameter i begäran strängen. Den extra parametern tar formatet på w_format = format där formatet antingen kan vara XML eller JSON.

JSON-svaret

Den återvände JSON nyttolasten är faktiskt ganska stor och innehåller många bitar av information. De relevanta delarna visas nedan:

Huvuddelen är resultatet av förfrågan tillsammans med information om den begärda blanketten inklusive namn på formuläret, dess titel, URL, beskrivning och mycket annan information.

Den andra intressepunkten är de fält som formuläret innehåller. Eftersom vår formulär var väldigt enkel med bara ett enda fält, är vår returnerade data ganska kort. Hur som helst bär den information om fältets ID, dess titel och annan information, inklusive om det krävs eller inte, en beskrivning för fältet och så vidare.

Den sista poängen är den del som innehåller själva inmatningarna. Varje post för den valda blanketten returneras till den som ringer med en mängd information, inklusive id för posten, värdet på fälten, användarens IP, datum den skapades och så vidare.

Från den här tiden är det helt upp till dig vad du gör med data. Du kan analysera data för att skapa en bra anpassad rapport, söka igenom informationen för specifika uppgifter eller bara ange dem i ett kalkylblad eller en databas. Din fantasi är gränsen.


Skicka med Style - Submit API

Inloggnings API låter dig skicka in data direkt till Wufoo-servrarna. Detta API är speciellt användbart om du absolut behöver använda din egen XHTML / CSS samtidigt som du utnyttjar alla de bakre ändfunktioner som Wufoo tillhandahåller. På så sätt får du det bästa av båda världarna: du får använda ditt eget anpassade utseende, men behåller all kraft i Wufoo.

Frontänden kräver ingen signifikant skillnad. Som ett exempel är här markeringen som jag använde för att testa ut API-inlägget.

 

handler.php ser ut så här.

  

Det finns ett par saker att notera här. Precis som med API-frågan reddar vi Apikey och formid, så vi kan använda den senare. Vi fångar också värdet på POSTed-textrutan så att vi kan skicka den till Wufoo oss själva.

Observera att vi också har skapat en variabel som heter fieldid. Detta motsvarar direkt det API-ID som finns på API-nyckelsidan.

Efter detta är allt som tidigare. Vi sammanfogar strängen och använder sedan cURL för att överföra data till servern. Servern returnerar ett JSON-svar som ser ut som nedan:

Det är allt. Inga krångel, ingen icke-känsla. Skicka till Wufoo genom vår anpassade kod är så enkelt som det.


Bonus: Integration med tredje parts tjänster

Som en extra bonusfunktion kan Wufoo nu skicka in till andra tjänster när en ny post är inloggad i systemet. Du kan göra många fina saker med denna fantastiska nya funktion men jag håller bara fast vid hur du använder den här funktionen.

För att komma till anmälningssidan, klicka på länken för anmälningar på formulärsidan.

På den här sidan kan du välja att bli anmäld via ett antal alternativ, inklusive e-post och sms eller post till tjänster som Highrise, Twitter och många fler när en ny post är publicerad. Men det är inte de vi ska titta på idag. Den vi ska titta på är webbhakar - en smidig teknik som låter utvecklare få HTTP-återuppringningar när en post skickas till Wufoo. Tänk på det som en återuppringning på steroider.

På Wufoos sida behöver du bara ange en webbadress till vilken Wufoo kommer att posta POST-data till varje gång. Allt du behöver för att skapa en sida som tar bort POSTed-data på din sida. För teständamål kan du skapa ett konto hos PostBin vilket sparar besväret. Ange den här webbadressen i Wufoo och du är alla inställda. Ett exempel på de uppgifter som Wufoo skickade till vår måladress.

Mycket snyggt, om jag kan säga det själv.


Slutsats

Och vi är klara! Vi tittade på att skapa en enkel form med Wufoo och sedan hur man programmässigt manipulerar och hämtar data som vi samlat in via Wufoo: s lättanvända API. Förhoppningsvis har det varit användbart för dig och du tyckte det var intressant. Jag kommer noga att titta på kommentarfältet. så chime in där om du har några frågor.

Frågor? Trevliga saker att säga? Kritik? Klicka på kommentarfältet och lämna mig en kommentar. Lycklig kodning!


Skriv en Plus-handledning

Visste du att du kan tjäna upp till $ 600 för att skriva en PLUS-handledning och / eller screencast för oss? Vi letar efter djupgående och välskrivna handledning på HTML, CSS, PHP och JavaScript. Om du har förmåga, kontakta Jeffrey på [email protected].

Observera att den faktiska ersättningen kommer att vara beroende av kvaliteten på den slutliga handledningen och screencast.

  • Följ oss på Twitter, eller prenumerera på Nettuts + RSS-flödet för de bästa webbutvecklingsstudierna på webben.