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!

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

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](/docs/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](http://wufoo.com/2010/03/08/three-fields-in-a-row-and-more-with-css-keywords/) or turn a section break into a scrollable block [Terms of Service block](http://wufoo.com/2010/07/08/accepting-terms-of-service-through-a-wufoo-form/). 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](http://farm6.static.flickr.com/5148/5839773844_7546f327f8_o.png)

[View Example Form](https://examples.wufoo.com/forms/two-three-four-five/)

### 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](/docs/css-keywords/). Applying them like this:

![Wufoo · Form Builder – CSS Keywords](http://farm3.static.flickr.com/2545/5839246243_1411bd4102_o.png)

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](http://farm4.static.flickr.com/3065/5836738343_1282d7be2c_o.png)

#### 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](http://farm4.static.flickr.com/3058/5836799509_fa09868453_o.png)

#### 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](http://farm3.static.flickr.com/2630/5837373490_84afd53443_o.png)

#### 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](http://farm4.static.flickr.com/3152/5837396586_c7898a87f8_o.png)

### 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.