Back to Basics: Use Section Breaks To Make Your Forms Easier To Fill Out

It’s time for another installment of the totally irregular (really sorry for my delinquency!), but super useful (hopefully!) Back to Basics series. This time we’re going to tackle the unique and incredibly handy [Section Break](http://help.wufoo.com/articles/en_US/SurveyMonkeyArticleType/Field-Types#section) field type.

As always, these series of posts are meant for *newer* Wufoo users who are not as familiar with the incredible breadth of Wufoo features. If you’re a **Wufoo Vet**, then this might not be for you. If you want more Tips & Tricks, check out this [archive](http://www.wufoo.com/category/tips/). Super helpful.

Onward to section breaks!

—–

The basic, but still the best use, of Section Breaks on forms is similar to what I talked about last week regarding long forms. [Last week](http://www.wufoo.com/2014/02/21/3-things-to-avoid-forms/), we showed how breaking up a long form into [multiple pages](http://www.wufoo.com/2014/02/21/3-things-to-avoid-forms/) is crucial in *reducing* user anxiety and *increasing* completion rates. The same goes for section breaks. If you don’t want to break up your form into multiple pages, you can still get a lot of the benefits and keep to one page by using section breaks.

Let’s take a look at the following example.

This is a *relatively* simple form for a fundraising event looking for people to sign up, work it, and find out who’s bringing what. Asking for people’s personal contact information is also a must in the case that something comes up and we need to contact folks. We also need to know what days they’re planning to work, whether mornings, afternoons, or both are best, what dish they’re bringing, how many people their dish will feed and on and on. Simple enough, right? But after asking all of our questions, we end up with a **fairly long form**. Long enough that some people might see it and not fill it out.

But what if we summoned the courage and decided to use, **GASP**, section breaks? Well, we know we’ll need some contact info from people when they sign up for the event, so we’ll group those questions together in the same section. We also know we need to ask people some basic information about the event, like when they’ll be able to work it, so we can place those questions in a different section. Throw some section breaks in, add some salt, stir, let simmer for 10-12 minutes, and, well, look at that. *Super delicious awesomeness*.

Now instead of one **super long, daunting** form, it now looks like two **super short** forms. When used, section breaks quickly allow users the ability to *scan* the form at a very high level and get an idea of what they’re about to get themselves into. The first version of this form didn’t allow them the ability to do this as all of the form questions kind of bled into one another. But the section breaks in the second form act as *waypoint markers* for users so a) they know at a high level what’s going on in each section, and b) can figure out what’s going in the form without having even answered a single question. Now that’s what we call effective.

If you’ve been following along, you’re now well-versed in the most important function of the section break. Which is? The ability to help *break up long forms into logical sections* so that it’s easier to see what’s going on and thus easier for users to fill out their forms. Questions or comments regarding section breaks, when or how to use them, or just want to say “Hi!”, leave a comment below!

Also, if you’ve mastered the primary use of the section break and you’re interested in doing more advanced functions with the section break, you can check out the esteemed Mike Wong’s two part post (Part One, “[Hyperlinks & Image Embeds](http://www.wufoo.com/guides/section-break-with-html-and-image-embeds/)”. Part Two, “[Movies & Maps](http://www.wufoo.com/2013/05/10/section-break-part2-movies-maps/)) detailing the advanced and super secret life of the section break.

Comments

  • Everyone needs a hug.

    Posted February 26th, 2014 by Doug.
  • Hi I’m a newbie, could you please show how to add a section break?

    Posted February 26th, 2014 by Leslyn.
  • @Leslyn: Sure thing! On the Form Builder screen, look on the left hand side of the screen where all of the field types are located. The Section Break is a basic field type and is actually colored blue to help make it more distinct. You can either click it to add a section break to your form (which will appear the end of the form) or click-and-drag the section break to place it where you want it on your form. Hit save, and voila, you’ve got section break!

    Posted February 26th, 2014 by Johan Lieu.
  • Awesome, thank you so much 🙂

    Posted February 26th, 2014 by Leslyn.
  • Hello – I was wondering if it was possible to apply different themes to different sections, i.e. so the two sections pictured above have different background colors?

    Posted February 26th, 2014 by Harrison.

Add a Reply

You may use HTML for style.