Create Great Multi-Page Forms with Wufoo

Wufoo makes it easy to quickly and intuitively create multi-page forms.

Not already signed up for Wufoo? Let's get started!

By: Kevin Hale

Last night, we enabled a new button in the Form Builder that allows you to add Page Breaks to your Wufoo forms. This single button ushers in a whole load of new pagination features that enable you to create really stunning multi-page forms, and we are thrilled to present them to you today.

To quickly illustrate the power of Page Breaks, let’s suppose you’ve created a 10-question customer satisfaction survey in Wufoo, but you’ve noticed that it’s quite long and should, ideally, be broken down into the following three sections:

With Page Breaks, you can very quickly (and we’re talking seconds here) drag them to the appropriate places in the form builder and create a three-part form complete with previous/next buttons and a progress bar that will work exactly like this:

Break a form down into multiple pages with pagination.

Pagination was one of the most frequently-requested features for Wufoo, and we’re really proud of our approach to the problem. We’ve spent months architecting and testing the workflow of this implementation, just to make sure that it feels effortless at your end, and we think you’re going to love all the goodies that come with creating multi-page forms on our service. For those of you who want to see the experience for yourselves, Ryan and Tim have created this introductory screencast to show off all the great features.

Here’s a more detailed breakdown of the new pagination features:

Drag and Drop Interface

One of the really nice things about setting up multiple page forms in Wufoo is that you do not have to go through the process of assigning fields to specific pages. All you have to do is just drag a page break between some fields and Wufoo will automatically assign fields before it to one page and the fields after it to the next page. Basically, it just works, in the way you would expect it to work.

One of the nice results from this approach is that it also makes it extremely easy for you to reorder fields within and across pages on your Wufoo forms. This means that you can experiment very quickly with the different orders of your questions and better determine the best flow for collecting your data.

Pagination Options

Custom Progress Bar

By default on forms with more than one page, Wufoo tries to present to the user some context at the top and bottom of every page to help the user understand how much of the form has been completed and what remains to be filled in. You can choose to show this progress as a series of steps, a percentage bar or not have it shown at all. In addition to showing the page number or percentage of the form that’s been completed, you can specify individual names for each page on your form.

Pagination Styles

This is great for forms that need to create clear signposts for each step in the form completion process. We’ve also added the ability to easily show or hide the current page number in the footer of every page.

Page Button Settings

Custom Pagination Buttons

Based on internal testing and the latest research on best practices for presenting buttons used for pagination, we’ve created a versatile system for customising the primary and secondary actions (next and previous buttons) for each page. You can make each page’s buttons unique from the other pages. You can use either a standard button or an image for your primary action. And you can use a built-in CSS classname (hideSecondary) to hide all previous buttons on your form.

Many thanks goes out to all of you who have helped us test out the feature on our example pagination form. You guys have given us some fantastic feedback and we really appreciated your help with adding the polish. These new pagination features are available to all users across all plans and we hope you enjoy breaking it down for your users!