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 load of new pagination features that allow 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 say you’ve created a 10 question customer satisfaction survey in Wufoo and you noticed that it’s kind of long and would ideally be broken 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’ll work exactly like this:

Pagination was one of the most 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 on 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 that want to see the experience for yourself, Ryan and Tim created this introductory screencast to show off all the sweet features.

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

Drag & 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 automatically assigns fields before it to one page and the fields after it to the next page. Basically, it just works and works the way you’d expect it to.

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 you can experiment very quickly with the different orders of yours questions and better determine the best flow for collecting your data.

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 is left to be filled out. You can choose to show this progress as a series of steps, a percentage bar or not have it show 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.

This is great for forms that want to create clear sign posts 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.

Custom Pagination Buttons

Based on internal testing and the latest research on best practices for presenting buttons used for pagination, we created a versatile system for customizing the primary and secondary actions (next and previous buttons) for each page. You can have each pages’ buttons be 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 helped us test out the feature on our example pagination form. You guys gave us some fantastic feedback and we really appreciated getting help on 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!