Getting Started with Wufoo
On this Page
Download Video Tour
Part I : Creating a Form
Hi, my name is Kevin Hale and I am one of the creators of Wufoo. In the following guide, I’m going to take you on a tour of our key features so that you can get up and running quickly with Wufoo to collect information over the Internet.
What you’re looking at right now is the nerve center of our application, the Form Manager. This is the first thing you see when you log in to Wufoo. It presents an overview of the forms you’ve created within the application.
Since I don’t have any forms right now, I’m going to create one by clicking on the New Form button here.
This is our Form Builder, the workhorse of our application. It’s divided into two parts, the live form preview on the right and a control panel on the left. The control panel is divided into three sections that can be accessed by the tabs at the top. The first tab presents the types of fields we can add to our Wufoo form. When we click on one of these buttons, it adds an input to our form, which can be seen in our form preview.
When we select the field in the preview, the control panel automatically shows the settings and options available for that input under the Field Settings tab. When you make a change in the control panel, it’ll automatically update in the preview. I’m going to make this field required so the user can’t leave it blank. Notice the asterisk that shows next to the field name when I set this.
If I click on the Form Settings tab, I’m presented with all of the options available to us at the form level. Today, I’m going to be creating one of the most common types of forms created within Wufoo…the Contact Form. There’s a lot of features to play with here, but the most popular deals with what happens after the user submits an entry.
Under the confirmation message settings, we can either show a specific message to our users or redirect them to a web site of our choosing after they successfully fill out our form. I’m going to present a message and change it so it’s more specific to our form.
To add another field, just click on the Add a Field tab at the top. For our contact form I’m going to request an email address and a drop down menu to help me structure the data as it comes in. While clicking these field buttons will add the field to the bottom of the form, I can also drag to add a field to a specific location and even rearrange the field order after they’ve been added.
For the drop down field, I can manage the choices available in the Field Settings. For this contact form, I’m going to ask my users to help structure and organize their feedback by question, comment and suggestion.
Now that my form is completed, I’m going to hit the save form button and then return to the Form Manager.
Part II : Viewing and Managing Your Form
In part two, we’ll be going over some of the functions available to us in the Form Manager now that we’ve created our form. Here, we can see the name of the form and several buttons that let us access our form’s data and additional settings. If I want to duplicate this form I can click on the double document icon here or delete it using the red X.
The first thing you’ll want to do after creating your form is take a look at it to see how it’ll be experienced by your users. You can do this by clicking on the View button. I’m going to open this link in a new tab.
One of the really nice things about Wufoo is that a lot of functionality is built into your form without any additional programming. When you select a field it automatically highlights the input to help your users keep track of where they’re entering their data.
If I try to submit this form without a message, it will automatically validate the information and present the user with the appropriate error messages. When I create a successful submission, Wufoo will present the confirmation message I set up in the form settings.
Now, if I go back to the Form Manager in Wufoo we can see that there’s now a number next to the name of the form. This indicates the number of new entries collected today.
If I want to change how this form looks to my users, I can set the Theme associated with the form using the Drop Down field next to the palette icon. I’m going to set this to an orange theme I created earlier and then click on the View button to see the changes made to my form.
Part III : Viewing and Editing Entries
To view and edit entries collected by your form, click on the Entries button under the form’s name. This will take you to the Entry Manager, a powerful data browsing tool to help you manage the information collected by your form.
The Entry Manager is divided into two parts…a Viewing section at the top and a Data Grid at the bottom that contains a table of recently submitted entries.
When you first come to the Entry Manager, we can either create a new entry or select an entry that’s been collected by our Wufoo form. I’m going to go ahead and make a new submission. The form in the Entry Manager contains the same fields and validations as the one we created with the Form Builder. It’s conveniently accessible here in case you want to avoid going back and forth between browser windows or want to enter data without having to make your form publicly available on the Internet.
Notice that the Data Grid is fixed to the bottom of the interface so that it’s always accessible even when we scroll to see the rest of our form or entry.
When I submit this entry, the data grid automatically updates with the new submission information. By default, the data grid sorts entries by entry ID. If you want to sort your entries by a different column, click on a different column header at the top of the table. Clicking again will sort it the data in the opposite direction.
One of the nice things about Wufoo’s Data Grid is that you can customize the columns to show you more or less information about your entries based on what’s relevant to you. To adjust the columns, click on the green box with the plus sign. This will bring up a menu list of columns available for the data grid.
I’m going to have the data grid show the IP address of the user that submitted the entry and then click Done. Notice that I can now see the IP addresses in its own column.
If I click on one of the entries in the Data Grid, Wufoo will show the entry in the top viewing section in edit mode. There’s lots of things I can do now that I’ve selected an entry:
- I can view the information in a read only format.
- I can add a comment.
- I can browse to the next entry.
- And I can send myself a copy of the entry to an email address of my choosing.
When I view the entry in my email client, I can see that Wufoo sent the information in the same easy to read format presented in the Entry Manager.
To change the information in an entry, click on the Edit button. The Entry Manager will then change out of the read only format and present the information inside the Wufoo form so it can easily be changed and saved.
When you’re dealing with multiple entries, the Entry Manager presents a number of useful functions to filter and act on your data. To quickly search your entries for a word or phrase, use the quick search input at the top of the Data Grid. For advanced filtering, you can get more options by clicking on the Search Icon.
After you filter your data the way you want it, if you click on the Bulk Actions link, you’ll be presented with a way to delete multiple entries at once or export your entries to an Excel friendly format.
Part IV : Email Notifications
Wufoo provides a number of ways to keep you updated on the information collected by your forms. To set up the application to send email notifications every time a new entry is submitted, click on the Notifications button under the form’s name in the Form Manager. This will to take you to that form’s form’s Notification Settings
In the first panel, add the email address you’d like Wufoo to send a read only format of the submitted entry. If your form contains an email address field, you can have Wufoo set the Reply To of the email notification automatically to the input collected by that field. This is useful if you’re using Wufoo for contact and lead generation forms. You can then reply directly to the email notifications in your email client without having to copy and paste the information from the appropriate fields.
If you’d like to also receive email notifications about new comments on your entries, check off the appropriate New Comments checkbox.
The notification settings also allow you to send text message notices to your cell phone or mobile device. Just add your phone number, select the carrier associated with that phone number and check off the information you’d like sent. Remember, mobile text messages are limited by a 160 character limit and so you will only receive a summary of the information about that activity.
For users that prefer to receive updates via their RSS feedreader, you can also subscribe to the New Entries and New Comments feed buttons in the third panel.
It is important to note that all Wufoo RSS feeds are encrypted and password protected and so you’ll need to use your Wufoo account email address and password to access them in your feedreader.
Once you’re done setting up your notifications, click on the Save Settings button at the top of the page. Now, when your form receives a new submission, you’ll be notified and sent a copy of the entry in your email client.
Part V : Web Site Integration
Inserting and integrating your Wufoo form into your web site is easy. To get started, click on the Code button under the form’s name in the Form Manager. This will take you to the Code Manager, which contains a number of useful copy and paste scripts that will help you easily place your Wufoo form on your web site so it can start collecting data in a familiar context.
In this video tutorial, we’re going to use the Integrated Form Code to place our Contact Form into a blog post. I’m just going to select the iframe code snippet and then copy it.
I’ll then go to my blog account and paste the code snippet into my blog post like so. When I publish the entry and view the blog, I can see that my Wufoo form is integrated right into the page and can be filled out and sent to Wufoo’s servers without taking the user away from my blog.
Part VI : Creating a Theme
Using Wufoo’s Theme Designer, you can create visual themes that can be applied to your Wufoo forms and reports to match your personal tastes or organization’s identity and web site.
To get to the Theme Designer, click on the “Themes” tab at the top of the Wufoo interface.
The Theme Designer is composed of two halves. The top of the Theme Designer that’s surrounded by a charcoal background contains a series of menus that can be used to create new themes and to manage and organize themes you’ve already created. The bottom portion contains a sample form that serves as a live preview to show you how changes made in the top half will affect the visual look of your Wufoo form.
To create a new theme make sure the drop down of themes (Theme Menu) is set to Create New. The Theme Designer will always start with a blank template for creating new themes.
The themes in Wufoo are organized into a series of menus that display the appropriate options based on the property you’ve selected. For example, if you wanted to change the highlight color that surrounds a field when it’s selected you would click on Backgrounds in the Properties Menu and then **Highlight* in the Backgrounds Menu and then select a color from the color picker that displays. The theme preview will show your changes accordingly.
When you’re done with your beautiful creation, just click on the Save Theme button in the upper right hand corner.
