How to Arrange Form Fields to Sit Next 
to Each Other in Wufoo

Customize the layout of your forms using simple CSS attributes.

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

By: Chris Coyier

Here at Wufoo HQ, we do our best to make it really easy to customize the look of your forms without having to dive into code. One of the ways we do that is with something we call CSS Keywords. They’re basically classnames that you can add to your fields and depending on the field and the keyword, will make them do a fancy trick like hide the seconds of a date field or turn a section break into a scrollable block Terms of Service block. The reason it works is because our team writes all the fancy CSS code so it’s just baked right into the Wufoo form and you can unlock the styles you need whenever you need them by adding one little word.

Some of the most popular keywords in Wufoo are used to change the layout of the fields so they can fit two or even three fields in a row. To help our users new to CSS Keywords, we’re going to show you in detail how to use these keywords to implement this pretty popular enhancement. We are also excited to announce that we’ve added a few new CSS keywords to allow you to arrange four and five fields to set next to each other side by side. Yay! Alright, let’s dive in.

Two, Three, Four, Five

View Example Form

Applying CSS Keywords

You apply CSS keywords to specific fields in your form. You do this right from the Form Builder as you are building or editing your form. You can learn all about them (including other non-layout keywords) in our documentation. Applying them like this:

Wufoo · Form Builder - CSS Keywords

And here they are:

leftHalf rightHalf

To align two fields side by side you can add these keywords. The two fields have to be right next to each other in the Form Builder. The leftHalf keyword has to be added to the first field and the rightHalf keyword to the second field like so:

CSS Keywords lefthalf righthalf

leftThird middleThird rightThird

To align three fields side by side you can add these keywords. The three fields have to be right next to each other in the Form Builder. The leftThird keyword has to be added to the first field, the middleThird keyword to the second field and the rightThird keyword to the third field like so:

CSS Keywords leftThird middleThird rightThird

leftFourth middleFourth rightFourth

To align four fields side by side you can use these keywords. The four fields need to be sequential in the Form Builder. The leftFourth keyword is added to the first field, the middleFourth keyword to the two next fields, and the rightFourth to the last field. Like so:

CSS Keywords leftFourth middleFourth rightFourth

leftFifth middleFifth rightFifth

To align five fields side by side you can use these keywords. The five fields need to be sequential in the Form Builder. The leftFifth keyword is added to the first field, the middleFifth keyword to the three next fields, and the rightFifth to the last field. Like so:

CSS Keyword leftFifth middleFifth rightFifth

Couple of Quick Notes

These keywords work on all fields except Likert Fields. You’ll also just need to test and use good judgement. For example, address fields should work well with leftHalf and rightHalf, but you probably won’t be able to get five of them next to each other. Also note that CSS Keywords are CaSe SeNSatiVE. That means for “leftHalf”, you need to use it just like that. “LeftHalf”, “lefthalf”, “LEFTHALF” will not work.

We hope these new keywords are useful to you in building space-efficient forms to your aesthetic liking!

Video Tutorial

For those that like to watch and learn, this video goes through all of our different CSS Keywords, including these arrangement keywords.