By: Chris Coyier Back to Guides
Here at Wufoo HQ, we do our best to make it really easy to customise 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 hiding the seconds of a date field or turning a section break into a scrollable block Terms of Service block. The reason why it works is because our team writes all the fancy CSS code so that 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 that they can fit two or even three fields in a row. To help our users who are new to CSS Keywords, we’re going to show you in detail how to use these keywords to implement this quite 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 get started.
Applying CSS Keywords
You apply CSS keywords to specific fields in your form. You do this directly 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:
And here they are:
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:
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:
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:
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:
A 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 SeNSitiVE. This means that for “leftHalf”, you need to use it just like that. “LeftHalf”, “lefthalf”, “LEFTHALF” will not work.
We hope that these new keywords are useful to you in building space-efficient forms to your aesthetic liking!
For those who like to watch and learn, this video goes through all of our different CSS Keywords, including these arrangement keywords.