CSS Keywords
On this Page
Related Pages
FAQ
Introduction
Using our CSS Keyword feature, you can create advanced and alternative layouts for the fields in your forms. Created for designers interested in more advanced control over the look of their forms, keywords are really easy to use and can be a powerful tool in your Wufoo design arsenal.
Basically, CSS keywords are classnames that you can add to the parent element surrounding each field to take advantage of styles used in a CSS stylesheet. The classnames by themselves don’t do very much, but if you use the ones that refer to rules that we’ve built into our own Wufoo Form Stylesheet or to rules you’ve created on your own stylesheet (and reference in the advanced settings in the Theme Designer), then they can provide some really interesting effects.
How to Use CSS Keywords
To add a CSS Keyword to a field, just edit your form in the Form Builder and then select the field you want to add keywords to in the Form Preview. Under the Field Settings tab on the left, you’ll see an input called Add CSS Layout Keywords. Add the keywords or classnames you want to add to the field here and then save the form.
Please note that this feature does NOT update live in the Form Builder. After you specify your classnames, just save the form and you’ll see the classes being applied to your live form and the form in the Entry Manager.
The Keywords
Here are the CSS Keywords that are built in the Wufoo Form Stylesheet that you can activate right away without having to write any of your own CSS. The styles are built into every Wufoo form for your convenience.
hide
Add this keyword to visually hide a field from your users when they fill out the public version and the embedded version of your form. The field will still be visible in the Entry Manager to administrators. Since the field is only hidden visually, you can still programmatically fill in values to the field using our URL Modification API, which makes it useful for tracking purposes. This keyword works on all fields.
cloak
Add this keyword to a field if you want to visually hide the inputs and choices for any field on a public form, but still want to show the Field Labels. Useful in dynamic situations where you don’t want the user to be able to manipulate the values of the inputs on the fly, but still want to show some sort of confirmation without having to use a Section Break when using Field Rules. The field’s inputs and choices will still be visible in the Entry Manager and to administrators. Learn about how to use this keyword to create a coupon system.
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:
These keywords work on all fields except Likert Fields
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:
These keywords work on all fields except Likert Fields.
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:
These keywords work on all fields except Likert Fields.
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:
These keywords work on all fields except Likert Fields.
hideSecondary
Use this keyword on Page Breaks to hide the Secondary Action button on the bottom paging navigation of a form. Use this if you don’t want to provide a link to the user to navigate back to the previous page.
Please note that the user could still use the back button on their browser and so this only makes it less obvious. This keyword only works on Page Breaks.
hideCents
Use this keyword to hide the cents section of the Price Field. If the field is required, not filling out the cents section will not fail the validation. Useful if you don’t need to see the Price field at that granular level. This keyword only works on Price Fields.
hideSeconds
Use this keyword to hide the seconds section of the Time Field. If the field is required, not filling out the seconds section will not fail the validation. Useful if you don’t need to see the Time at that granular level. This keyword only works on Time Fields.
hideAMPM
Use this keyword to hide the AM/PM section of the Time Field. If the field is required, not filling out the AM/PM section will not fail the validation. Useful if you don’t need to see time of day for that field. This keyword only works on Time Fields.
hideAddr2
Use this keyword to hide the second street address input line in the address field. If the field is required, not filling out the second address field will not fail the validation. This keyword only works on Address Fields.
altInstruct
Use this keyword to make a field’s instructions show beneath the field rather than as a pop up box on the side. Here’s an example of the default field instructions with the altInstruct version below it:
scrollText
Use this keywords to convert a Section Break into a box with a fixed height that will automatically show a scroll bar if there’s a large amount of text. This is useful if you’re wanting to show large amounts of content to the user, but don’t want to have to link to it or make the form very long to show it (ie. Terms of Service Agreements). This keyword only works on Section Breaks.
How do I hide a field?
Add the hide keyword to the CSS Layout Keyword field settings for a field in the Form Builder to visually hide a field from your users when they fill out the public version and the embedded version of your form.
How do I make fields sit next to each other?
Use the leftHalf and rightHalf keywords in the CSS Layout Keyword field settings for a field in the Form Builder to align two fields next to each other in a form. You can learn more about keywords and how to use them for layout changes in our CSS Keyword Documentation
Can I use multiple keywords on the same field?
Yes, you can use multiple keywords together. Just separate each keyword by a space like so:
Can I create my own keywords?
Since keywords are just CSS classnames added to the parent element surrounding a field, you can easily attach your own stylesheet to a theme that contains your own rules based on that classname being added to the field.
If you come up with some styles that you think would be good for all Wufoo users, please contact the Wufoo Team and let us know!










