Wufoo
Using CSS Keywords to Adjust Layout
CSS Layout Keywords, which you can enter in the Field Settings of any field on your form, let you adjust the layout and position of fields and text on your form, or hide certain form elements. They're super easy to use and give you more control over the look and feel of your form.
You don't need to know CSS to take advantage of this feature, but if you're familiar with CSS, here's how these work:
CSS Layout Keywords are classnames—adding one of our CSS Layout Keywords to a field adds that classname to the parent element surrounding that field. This applies the styles associated with that class, as defined in the CSS stylesheet that governs all Wufoo forms, to your field.
Adding CSS Layout Keywords to a Field
To add a CSS Layout Keyword to a field:
- Log in and go to Forms.
- Click the form you want to edit.
- Click the field whose layout you want to adjust. This opens the Field Settings.
- In the Add CSS Layout Keywords field, enter one or more CSS Keywords. If you're adding multiple keywords, separate each one with a space.
- Click Save Form.
You won't see the updated layout in the Form Builder—you'll have to view your form to see the magic at work! The CSS Keywords will also be reflected in the Entry Manager.
Keywords for Placing Fields Side by Side
You can also use CSS Keywords to place 2, 3, 4, or 5 consecutive fields side by side, instead of the default layout where each field starts on its own line.
| CSS Layout Keywords | Description | Compatible Field Types |
| leftHalf rightHalf | Use these keywords on two consecutive fields to place them side by side, two in a row. | All, except Likert |
| leftThird middleThird rightThird | Use these keywords on three consecutive fields to place them side by side, three in a row. | All, except Likert |
| leftFourth middleFourth middleFourth rightFourth | Use these keywords on four consecutive fields (use middleFourth on both the second and third field) to place them side by side, four in a row. | All, except Likert |
| leftFifth middleFifth middleFifth middleFifth rightFifth | Use these keywords on five consecutive fields (use middleFifth on the second, third, and fourth fields) to place them side by side, five in a row. | All, except Likert |
- View Examples
Keywords for Hiding Fields
The following keywords are for hiding fields, or specific parts of a field.
| CSS Layout Keyword | Description | Compatible Field Types |
| hide | Hides the entire field from your public-facing form. The field will still be visible to administrators in the Entry Manager, so you can still populate values into the field using URL Modifications, which makes it useful for tracking. | All |
| cloak | Hides all the inputs in a field, but leaves the field label. The field will still be visible to administrators in the Entry Manager. Learn how to use this keyword to create a coupon system. | All |
| hideSecondary | Hides the Previous link that lets people go back to previous pages in your form. | Page Break |
| hideCents | Hides the Cents textbox in the Price field. | Price |
| hideSeconds | Hides the Seconds textbox in the Time field. | Time |
| hideAMPM | Hides the AM/PM dropdown menu in the Time field. | Time |
| hideAddr2 | Hides the second street address textbox in the Address field. | Address |
Using the hide keyword on an unanswered required field will trigger an error when someone tries to submit the form. Make sure that all hidden fields are optional.
Keywords for Changing Text Layout
The following keywords are for changing the way additional text in your form is displayed.
| CSS Layout Keyword | Description | Compatible Field Types |
| altInstruct | Moves the Instructions for User under the field, instead of in a box to the right of the field. This keyword can't be used with the full width Newfangled theme. | All |
| scrollText | Converts a Section Break field into a fixed-height box with a scrollbar. This comes in handy if you have a long chunk of text that takes up too much room on your form. | Section Break |
- View Examples
Create Your Own CSS Keywords
If you know CSS, you can take this one step further by creating your own CSS 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, and then reference those classes in the field settings on your form:
- Add a Custom CSS stylesheet to your theme, and apply that theme to your form.
- Go back to the Form Builder to edit your form.
- Enter your custom class name in the Add CSS Layout Keywords field setting on the field of your choice!
This will add the class to the parent element of the field.