Wufoo Form Builder – Easy online data gathering

What is Wufoo?

Wufoo is an online service that helps you create forms without writing a single line of code.

It is so easy to use that even the greenest web designer or freelancer, can have wonderfully styled forms inside his or her own web pages, and without the need of even one single aspirin to combat all the headaches associated with the creation of forms.

With Wufoo you can visually create a form, just adding elements with drag and drop mouse gestures, visually change its design and presentation (colors, backgrounds, font-type, sizes, etc.). And also decide what to do with the information later on, like for example send it to your e-mail box.

It even creates reports and charts of the submissions, has the ability to export data to many different formats (like for example Excel or PDF files), and many other options that we will talk about later.

We are truly in love with this service, we not only use it ourselves, but also recommend it to all our clients, let it be its free incarnation or a paid one if the free plan is not enough for them.

But before we talk about Wufoo, let’s first see what exactly HTML forms are, what can be done with them, and why it takes so much time to implement them.

HTML Forms

Almost every web site in existence has at least one kind of form embedded in its pages, it could be just a simple contact form, a newsletter e-mail form, or even a complex client or product survey form.

The extended use of forms in web pages showed how indispensable they were for communications purposes, and we shouldn’t forget that they brought us the first real dynamic and interactive aspects of internet. They continue to be very useful, even if their complexity have grown exponentially.

The creation of a form is not a complex task for coders or programmers, but it did, and it still does, prove often difficult for beginners or graphic designers.

The HTML code in itself is not the real problem. Using normal HTML (in this case with XHTML formatting), a simple normal form could look like this:

<form id="ContactForm" action="submit.php" method="post"> <label id="Name" for="Name">Name:</label>
   <input name="Name" type="text" />
   <label id="Email" for="Email">Email:</label>
   <input name="Email" type="text" />
   <label id="Message" for="Message">Message:</label>
   <textarea cols="25" rows="10" name="Message"></textarea>
   <input class="submit-button" name="submit" type="submit" value="Submit" />
</form>

The real problem is what to do with this information once that the user clicks the “Submit button”, and how to do it. And we are not even talking about how to style it with CSS, that also, is very time consuming.

There are many methods to process a form after it is submitted, like for example using cgi-scripts, PHP, python, server extensions, etc. Also we need to take into account how to store that information, let it be into a file, a database or just to send it to our e-mail.

Let’s check some of this methods in more detail.

A little history on how we created forms

With the passing of time, we found ourselves creating forms in very different ways throughout the last 10 years.

• In the beginning, we used FrontPage to create them. This program allowed us to make a new form in a WYSIWYG way, just dropping a form into a page and consecutively its components, modifying its options one by one. If the hosting allowed the use of FP extensions, we didn’t need to worry about any coding, any scripts or problems, the extensions managed everything for us. We just configured the form to send an e-mail and to save all the information into a .cvs file.
• A few years later, when we started to get more serious about web design and found out how bad FrontPage was at creating standard and valid code, we moved forwards and started using cgi-scripts. By then we were using Dreamweaver and just starting to understand the use of CSS, but we quickly found out that this method was a little more complex to set up and make it work just like we wanted. We were using much more of our time into coding and solving script problems. The results, at least, were more than satisfactory.
• Not so long ago, we changed our form creation habits yet again, this time choosing for an even more complex but more controllable way of creating and managing them, that was the start of the age of PHP and databases. They were more secure, the use of databases allowed us to quickly create reports and lists of all the submissions and we were able to accommodate almost any kind of strange client requests. The drawback was that the level of complexity did jump a little higher, not to mention that the servers were busier with PHP and databases running, and that we needed a lot of time to code and configure each form. It is also noteworthy to mention, that by this time we also dropped WYSIWYG methods and start coding more and more by hand, helped by code editors.
• How do we create forms now you may ask?
  The answer is simple.
  Enter the Wufoo world.
  We don’t need any coding, any scripts or any worry. We only need to concentrate in the design itself.

How does the Wufoo service work?

Wufoo is an online service, so you need to create an account with them and use their website for everything.

Wufoo uses a fantastic AJAX interface with a Web 2.0 look, so most of its functions and menus have the same feeling as a desktop application, things like drag and drop, visual changes, configurations and so on, work right from the web UI, and all of this is presented without a page refresh.

With the free version, you can create a maximum of 3 forms, have 100 submissions per month, and use no more than 10 fields per form.

The form creation is very simple, you only need to drag and drop your components, after you finished configuring your form you can then use a theme or create a new one (colors, font-types, etc.). The last step is to copy and paste the HTML code, generated by Wufoo, into your website, and there you have it, a wonderful looking form with AJAX functionality, reports, e-mail notifications, etc.

Now let’s look at it in more detail.

Creating a form and its fields

Go to the Wufoo Website and choose a plan. I recommend the Free plan, at least to get started, it might be all you need after all.

After you logged on into your new account, you can start creating forms right away.
Your start page is the form manager, where you can see a list of your forms and view them, edit them, edit or view entries, change notifications, choose a theme or delete them. In my preview I have 3 forms already created.

Now you can click the New Form! button to start creating your form. You can manually add fields or choose between many templates for free. The process is simple, use the left column to choose a field and drag and drop it inside the right column. You can change many options per field with just clicking them in the right side, like name or label, description, if it is required or not, etc.

The last step is to edit the Form Settings (the last tabbed menu in the right side). There you can give the form a name, description, change the Confirmation Message and so on.

Using Themes or creating a new one

Our new form has already a default theme applied to it, but we can change it to compliment the colors of our own website. This is done in the Themes menu. Here you can change many options like colors, font-types and sizes, borders, shadows, and even upload your own logo or use your own CSS stylesheet. Wufoo also offers a Theme Gallery, where you can choose already created designs.

Once you finished with the theme, save it and apply it to your form in the Form Manager.

Using the Form in your site

Now the last step is to gather the code you need to use the form in your own website, in the Form Manager choose the Code button, this will take you to a page with the many options that allow you to use your form (link, embed, full page, pop up, XHTML/CSS, etc.), normally I choose the second option “Embed Form Code” because I can just copy and paste the code inside my own pages, it uses an iFrame to gather the information from the Wufoo servers.

Managing Entries

Now that we have a fully functioning form, people can start to use it. We will receive an e-mail notification every time that this happens, and with the Entries function, we can manage and view every single post. In the Form Manager click the “Entries” button under the Form name.

Every time you click in one of the entries, the form view appears and you can edit them, create new ones or make comments on them. If you have an address field, it will even show a map of that location, a very nice feature.

Statistics and Reports

Wufoo provides a very nice statistics view for every form (accessed via the “Statistics” button in the Form Manager), so you can view the form use daily, weekly, monthly or by year.

It is also possible to create reports for every form, a full list of all entries (you can choose specific fields to be included if you want) and even add a nice Pie, Bar or Line Graph. All reports can be viewed online or exported to a file in Excel format, as TXT with tab separators or as a CSV file. This function is very useful, so take the extra time to create your own reports, mostly if you are expecting many responses.

Benefits of using Wufoo

• You don’t need to know anything about HTML, PHP, cgi-scripts or AJAX to create a wonderful form.
• It has a free plan and is priced reasonably compared to other services.
• It is easy to use, fast and a lot of fun.
• It integrates with your own website, using your own colors and design.
• It looks beautiful and it has AJAX effects, like date pickers, help hovers and data checking.
• It has a very nice UI, great Help and Documentation, and a large community.
• W3C Valid XHTML and CSS
• It degrades gracefully (Runs with or without JavaScript, CSS and Cookies)

Nothing is perfect – The negatives

• It is not free if you want more functions like file uploads, more users, SSL, payment integration, more forms, more submissions, more fields, etc.
• Themes could be a little bit more configurable.
• The free version only has 3 forms, 3 reports, 100 submissions per month and 10 fields per form, also you can’t use a 2 column layout.
• You have to rely on their 24/7 up-time, and is not in your hands to solve any problems they could have.
• Free version shows a powered by Wufoo link and a logo after submitting.

Other alternatives

There are not many alternatives to this wonderful online service, at least not one that is so elegantly constructed and presented, or one that is so easy to use, but some of them are worthy competitors, and you should at least take a quick look at them:

• A very similar service is FormSpring, it has almost the same functionality and options, the same ease of use and it generates nice and clean code, you can’t use templates thought you can’t use templates in the free version, but the free services are almost exactly the same as Wuffo, and the basic one has even the same price. It is worth mentioning that I like the usability of the website a lot, almost as good as Wuffo itself.
• Another online service that deserves a mention is FormAssembly, being very similar to Wufoo in many regards, but not so customizable and with different plans. The free one gets you unlimited forms, reports, charts and notifications, but it lacks advanced features like file uploads, export to different formats (no Excel), etc. But still, both services are good, and you should weight their pluses and negatives, choosing the one that best fit you.
• Another alternative is GoogleDocs, that allows to create forms and embed them to your pages, this option is a very simple solution, that works fine, but it doesn’t have any extra functions like AJAX, themes or advanced fields, but in reality, it will be more than useful and enough for most users. It is free and it doesn’t have any restrictions.
• ZohoCreator is also a very good alternative, but much more complex as is not only related to forms, but to full database applications. Also I don’t like the code that it generates, it uses a lot of tables and is not clean. The other drawback is that the free plan is only for personal use.
  Still, it is a very nice tool if you give it some time and learn it.

Even more alternatives (not yet tested by us)

• FormLogix
• TheBlueForm
• Appnitro MachForm
• FLOVV (Free Online Multipage Form Builder)
• Survey Gizmo
• WyaWorks
• JotForm
• Perfect Forms

Conclusions

We designers, and mostly freelancers, tend to be in the cheap side, and will try to get by without using a single penny.

Our views are based on the FREE versions of every one service, as you could guess, almost all of them also have more powerful paid versions, in this case, you should compare yourself their plans to see what you get for your money. The memorable quote “you get what you pay for” is very true in this case.
If you have a small website and need a form, any of these services will make your life easier, and speed up your work flow, so don’t hesitate to take some time to review them and to try them out, you won’t regret it.

Wufoo gets our top vote, as you could read throwout this post, its ease of use, great design and fun work flow is unbeatable. But in reality, any of the alternatives will do just fine. If you could just get by using Google Docs, please do, it is totally free and it works perfectly, it doesn’t have some advanced features, but you don’t have any limitations like the rest.

If you can live with just a few forms, a few submissions per month and you don’t need that many fields, Wufoo and FormSpring are the winners.

Are you creating more serious websites and you care about your clients, consider a paid plan.

Of course, if you have all the time in the world, keep coding everything by hand, no service beats that freedom.