Tutorial Details
- Topic: Wufoo
- Difficulty: Moderate
Wufoo is a web application which intends to simplify forms. Forms can generally be tedious to work with. You’d have to write the XHTML/CSS for the form elements, set up the back end code to capture all the data and then work on generating usable reports for it. Wufoo simplifies this entire process right from form creation to integrating it within your site through extensive theme support to producing pretty, usable reports for you to parse your data.
It even does a lot of advanced stuff, including web hooks and a proper API to access the collected data. Today, we’ll look at how to create a simple form with Wufoo, and then use the API to programmatically access and modify the data collected.
Creating Your First Form
First up, we’ll need to set up a form so we can play around with it. Register for a new account with Wufoo and you are taken to one of the most humorous blank application states of all time:
Click on the button to start building a new form and you are taken to the form builder application. The interface is very intuitive with a context sensitive panel on the left and the main form section on the right. Adding elements is as simple as clicking on it or dragging it into the main section.
Clicking on the created element lets you edit all the relevant details.
Since we’d like to keep it as simple as possible, just a single text field which takes an email address will do. Click save form and we’re done. We’ve created our first form with zero code and it took all of 60 seconds.
Integrating it With Your Site
Integrating the created form with in our site is incredibly easy. Go to the forms page and click on the code link of the newly created form.
Wufoo provides a number of ways for you to get the form to your visitors including a JavaScript version which works inside an iframe, XHTML code for a complete page containing the forms or just a link you can share with your friends.
The Wufoo API
The Wufoo API lets you programmatically retrieve, submit and modify data pertinent to your account with very little fuss. The API set essentially consists of two stable, fixed APIs and one more under beta testing. We’ll look at the stable parts today.
Do note that you’ll only be able to retrieve and submit data to already existing forms. If you are looking to create forms on-the-fly and then submit data to it or just creating new fields through the API, you are out of the luck. The current version of the API doesn’t allow this functionality but look for it in the near future along with a bunch of other functionality.
But first, you’ll be needing an API key. You can get it from the API information link in the page where you get your code snippets.
Make a note of your API key and the ID of the field you want to access and/or modify. We’ll be using it shortly.
Getting to Your Data – The Query API
The Query API lets you retrieve information you’ve collected through your forms bypassing the Wufoo web site. In case you are looking to get all the raw data and then create a custom report out of it, this is the way to go.
The first thing you need to note is the URL you’ll need to request to get to the right data. The URL looks like so:
http://username.wufoo.com/api/query/
Replace username with your username and you’re good to go. The query parts let them Wufoo servers know that you are looking to retrieve information from the servers.
Sending a Request to the Server
cURL is the easiest way for us to send data to the server. If you are a little new to cURL and feel lost, I highly recommend you go through this cURL article right here at Nettuts+.
<?php
$apikey = '1234-1234-1234-1234';
$form = 'net-tuts';
$req = 'w_api_key='.$apikey.'&w_version=2.0&w_form='.$form;
$ch = curl_init("http://username.wufoo.com/api/query/");
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $req);
$resp = curl_exec($ch);
curl_close ($ch);
echo $resp;
?>
Let’s go over the code part by part. We first need the API key we made a note of before. We also need the name of the form you want to retrieve the data from. These two along with the version of the API we are using, two in our case, are the minimum parameters we need to make a successful request.
We concatenate all the required elements as key/value pairs and store it for later use.
Next up, we pass in the correct URL as noted above along with the request string we created above. We also store the response to a variable so we can use it.
$resp holds the response to our request. By default, the Wufoo API returns data in a JSON format. In case XML happens to be your payload of choice, you’ll need to add an additional parameter to the request string. The additional parameter takes the format of w_format=format where format can either be XML or JSON.
The JSON Response
The returned JSON payload is actually pretty large containing numerous pieces of information. The relevant parts are shown below:
The main part is the result of the request along with information about the requested form including the name of the form, its title, URL, description and a lot of other information.
The second point of interest is the fields, the form contains. Since our form was very simple with just a single field, our returned data is pretty short. Either way, it carries information about the ID of the field, its title and various other information including whether its required or not, a description for the field and so on.
The final point of interest is the portion containing tthe entries themselves. Each entry for the selected form is returned to the caller containing a myriad of information including the id of the entry, the value of the fields, the IP of the user, date it was created and so on.
From this point, what you do with the data is completely up to you. You can parse the data to create a nice custom report, search through the information for specific data or just enter them all into a spreadsheet or database. Your imagination is the limit.
Submit with Style – The Submit API
The submit API lets you submit data directly to the Wufoo servers. This API is specially useful if you absolutely need to use your own XHTML/CSS whilst still leveraging all the back end capabilities Wufoo provides. This way you get the best of both worlds: you get to use your own customized look but retain all the power of Wufoo.
The front end requires no significant difference. As an example, here is the markup, I used for testing out the submit API.
<form action="handler.php" method="post"> <input id="input1" name="input1" type="text" maxlength="255" value="" /> <input id="saveForm" class="btTxt" type="submit" value="Submit" /> </form>
handler.php looks like so.
<?php
$apikey = '1234-1234-1234-1234';
$formid = 'net-tuts';
$data = $_POST['input1'];
$fieldid = '205';
$req = 'w_api_key='.$apikey.'&w_form='.$formid.'&'.$fieldid.'='.$data;
$ch = curl_init("http://ssiddharth.wufoo.com/api/insert/");
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $req);
$resp = curl_exec($ch);
curl_close ($ch);
echo $resp;
?>
There are a couple of things to note here. As with the query API, we save the apikey and formid so we can use it later. We also capture the value of the POSTed text box so we can send it to Wufoo ourselves.
Notice that we’ve also created a variable called fieldid. This corresponds directly to the API ID present in the API key page.
After this, everything is just as before. We concatenate the string and then use cURL to pass the data to the server. The server returns a JSON response which looks like below:
That’s it. No hassles, no non-sense. Posting to Wufoo through our custom code is as simple as that.
Bonus: Integration With Third Party Services
As an added bonus feature, Wufoo now lets you post to other services when a new entry is logged into the system. You can do a lot of nifty things with this awesome new feature but I’ll just stick to how to use this feature.
To get to the notifications page, click on the notifications link on the forms page.
This page lets you choose to get notified via a number of options including email and SMS or post to services like Highrise, Twitter and many more when a new entry is posted. But those aren’t the ones we are going to look at today. The one we are going to look at is web hooks – a nifty technology which lets developers receive HTTP callbacks when an entry is submitted to Wufoo. Think of it like a callback on steroids.
On Wufoo’s side all you need to do is enter a URL to which Wufoo will POST data to every time. All you need to on your side it to set up a page which captures the POSTed data. For testing purposes, you can setup an account at PostBin which saves you the hassle. Enter this URL into Wufoo and you are all set. An example of the data posted by Wufoo to our target URL.
Very nifty, if I may say so myself.
Conclusion
And we are done! We looked at creating a simple form with Wufoo and then how to programmatically manipulate and retrieve the data we’ve collected through Wufoo’s easy to use API. Hopefully, this has been useful to you and you found it interesting. I’ll be closely watching the comments section; so chime in there if you have any queries.
Questions? Nice things to say? Criticisms? Hit the comments section and leave me a comment. Happy coding!
Write a Plus Tutorial
Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.
Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Siddharth
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
RoyalSlider – Touch-Enable ... only $12.00 
Kult House - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Great tutorial. I’ve been waiting for this. Looking on creating an account on WuFoo myself. Thanks!
HyperBaseHyperBase is another great web form creator with a drag and drop form builder. The benefit of HyperBase is that the data you collect can be channeled into simple database applications you can also build with HyperBase. For example, you create a web form to collect order data from suppliers, and can channel this information to a simple order processing application you build.
HyperBase is another great web form creator with a drag and drop form builder. The benefit of HyperBase is that the data you collect can be channeled into simple database applications you can also build with HyperBase. For example, you create a web form to collect order data from suppliers, and can channel this information to a simple order processing application you build.
Like this.
Thanks
I thought this would be a form code generator, but realizing that you can only display the form code via wufoo api, I really don’t see the point in using this.
I agree. It’s very limited with the free account.
Agreed, i also don’t see how this could be benefiting my projects. It’s cool that you can create ready to use forms without a hustle with all xhtml/css, but this is just creating more http requests on my app and slowing down all process.
One way i would use it is to create forms and then simply copying ready form from source code and then re-paste it in my project.
Wufoo actually has the option to download all the code as normal html with css files etc. if you just want to use it for making good looking forms.
I’ve used wufoo like that a couple of times and it works great.
jotform.com also works well for quickly putting together the base structure of a form. You can view the source at any time and style it pretty easily.
If you are going to programmatically access and modify the data collected then i think it would be very feasible for a Web Dev to make their own form. Wuffoo makes it easy in one area but makes it …normal in another
Conceptually it seems like a great idea. At a quick glance, it seems to get in the way of developers, and appears to be too complex for non developers. Is this intended to compete with services like A-Weber? Is it tied to an auto responder service?
Yeah, I do not really want a third party collecting my clients vital records.
That’s among the one of the most important factors in favor of Wufoo. You don’t have to deal with setting up the backend, the frontend and everything else. You just create the forms with Wufoo, integrate it with your site and you’re done.
Wufoo is not cheap and a web dev would be better off building their own forms. Anybody who knows to play with an API will definitely not be comfortable letting their data reside in some third party’s hands.
The interface and the features of Wufoo are top class but i don’t see a point of creating a ‘how-to’ tutorial which is pretty useless! It is the next level of telling people how to create an email account!
I think you’re completely missing the point here. Wufoo is aimed towards people who don’t want to bother with setting up everything, it’s not aimed to please hard-core developers.
That’s the first thought that entered my mind. I would probably never use Wufoo, but I could see where it would be attractive to people. Especially people who have a site with little to no back-end.
To give you guys an idea…Envato uses Wufoo for their invoicing system.
Agreed. I am a total novice and really geared to learning how to construct my own functional form.
Any tips where i can get started? I can code one up easily but have not come to get the form action to work. Example, say I want it to send to my personal email, how would i do that? It always will open up a new window exposing my email account.
Thanks !
That’s good !
thanks
Wufoo is my best solution to i can create the best forms
Wufoo is pretty dang awesome. The spam collection alone is enough of a time saver for most businesses to justify the cost. I know at my last place of employment one employee got 100 spam emails a day. We moved the forms to Wufoo and no spam at all ever. For $9/month that’s awesome.
I do wish that it was easier to integrate with Google Analytics. At this point you have to build a few hidden form fields then grab their values. Ideally you would add your tracking code to Wufoo and they would take care of the rest.
it can be integrated into WordPress by pasting the embed code in a custom field, then in functions.php
function my_woo_form() {
global $post;
if ( !is_singular() )
return;
/* Don’t need the check for page ID. Just check for the custom field. */
$form = get_post_meta( $post->ID, ‘wufoo-embed’, true );
if ( !empty( $form ) ) {
echo $form;
/* Add any additional code. */
}
}
thanks to Justin Tadlock
I love wufoo!
I know some developers that LOVE WuFoo; and for what it is and what it intends to offer it does a great job. But considering the costs associated with the service, and considering the limitations others have brought up in their own comments… and the fact that you’re trusting potentially sensitive data to a 3rd party service and database I have to question the title’s claim that this is “The Best” service.
Certainly it is one of the best options for those people who are not willing to setup their own forms. But that does not make it the best overall.
WuFoo is great, but for those running WordPress and wanting to host your own forms and collect data, I highly recommend GravityForms. A little bit of cash up front, but this plugin is easy the best form building plugin I’ve ever used.
http://www.gravityforms.com
Kinda of a silly service. What is the point, am I missing something here? Why not just write your own forms?
I, too, see nothing I couldn’t do now with my own code. Forms aren’t a super difficult to achieve.
agree..
agreed.
Uuuum – agree (use modX – get a eform built in for FREE)
Storing in Wufoo servers.. *thumbs down*
Not goin to tbe useful for my projects..
Wow. this is worthy of a post on nettuts?
I think so, yeah. Wufoo is a great service and this tut was intended to get you started with its API.
Thanks for reading.
Of course it is. :)
I do normally create my own forms as well. However, I someties see a value in using these services. I have used formspring(similar to WuFoo from what I can see) occasionally when a client is serious about having a form where “they” would like to update it frequently, add fields, or have other users be able to login and access the data. IMO, these services are for more user-friendly for non-tech people even vs. WordPress plugins, etc.
The one thing I don’t see with WuFoo(and I may have just missed it) is that you can’t pre-populate form fields. ie With formspring I can pass dynamic data to a form easily.
Hey Randy, we do have this feature documented here:
http://wufoo.com/docs/url-modifications/
It isn’t promoted heavily in the UI, so it can be easily missed.
A simple for statement in the form processing can handle the work regardless of how many fields are in the form, removed from the form, or added to the form.
The tutorial is well done but I still don’t see the point of the service. This is basically overpriced managed hosting after reading the tutorial and looking at the pricing/features on their website so far as I’m concerned. I’m sure it’s right for someone though.
Very nice article!
This article is quite nice written… But, wufoo is an absolutely useless service.
I really don’t see how this is faster than doing your own leg work. Seems like a bit of over kill for form dev.
I love Wufoo. I’m a designer who builds sites. Yes, I write my own HTML and CSS. And am working up the JavaScript learning curve. But forms are simply painful, time consuming, and not my specialty.
I use Wufoo on my site and some clients. I’ve never received a smidgen of span from my (lengthy) contact form. I like how I can customize easily to match sites’ look.
I don’t see why any competent web developer would have a reason to use such a service.
This site is great for forms, when I was learning how to do forms I went to a great learning site http://www.aplacetocode.com which helped me get my fingers wet with web development. There service is top notch.
@Why? I came here with a similar sentiment about it. Thanks but no thanks. If you made a form right the first time, reuse it. It really is that simple.
really good
Sponsored post?
Not in the least.
Of course not. Why would you assume that?
Generating forms is always a slow process to perfect, and because most sites require a form to be stylised in a certain way they can take many hours of programming and stylising.
Any software that makes creating these a quicker and easier option is a huge advantage for the designer, and this is exactly what Wufoo appears to do. Looking at it I particularly like the great range of field types and options available in the program.
I look forward to seeing some examples of this in action, and will be looking into possibly using it as some point in the near future.
Great application but isn’t possibile to use it in a production/business area because WuFoo company name is view in every email sent:
I hope to see in next future, in the control panel, the possibility to change or hide your email; pay more 50$ every month and create free marketing for WuFoo is not more correct/professional.
In the previous post is not view the email; this is the email that every time a user receive in a notification post: no-reply AT wufoo.com
I’ve come across Wufoo in the past. Here are my thoughts…forms take a lot of time to develop if you do them right. You also have to have an understanding of what you’re doing. Pretty much Wufoo makes it 1, 2, 3 easy. However, I wouldn’t use Wufoo.
1) I prefer to stay away from third parties as much as possible
2) Forms aren’t that hard to develop and if you make a form you can always re-use it…so in that case it’s pretty 1, 2, 3 easy too.
3) Wufoo is too expensive…who needs all the extra bells and whistles when it can be done for free.
4) People who don’t have an understanding of forms should pay a developer to do it once and save money
a third party collecting all your data.. Noooo thank you.
Not for me, but that doesnt mean it’s not for everyone.
Is this a sponsored post?, doesn’t really look like good advice for net-tutsy people…
I will try
Thanks to this tut I’ve used Wufoo when I needed to make a form with the diverse notifications really quickly, because it was for a small seminar with a small budget.
In such a case Wufoo comes in handy. The most serious drawback is the no-replyATwufoo.com sender. That’s a showstopper for any serious project.
Also for the free service there is a ‘ powered by wufoo’ link underneath each notification.
while as far as matter is only jst create the form the Wufoo is the best bt when u try to get values then it is quite useless. in this artical only one field is created & look the code when i m going to integretd it with my site.. now look when i have 20 to 30 field then how much code it be ..ohh .!! well good job bt not so gud..!!
Wufoo is great but it looks lame to me. Do they think they have a really fun web form builder. Showing that it is fun is a good approach but it doesn’t look that easy to me. I like the colors and the designs though.
Our marketing team uses Wufoo to create forms for landing pages. It actually saves quite a bit of time and the marketing managers like that they can build and manage form entries completely on their own.