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.

To add a CSS Layout Keyword to a field:

  1. Log in and go to Forms.
  2. Click the form you want to edit.
  3. Click the field whose layout you want to adjust. This opens the Field Settings.
  4. 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.
  5. 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.

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.

Three fields display horizontally across the page.
CSS Layout KeywordsDescriptionCompatible 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

The following keywords are for hiding fields, or specific parts of a field.

CSS Layout KeywordDescriptionCompatible Field Types
hideHides 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
cloakHides 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
hideSecondaryHides the Previous link that lets people go back to previous pages in your form.Page Break
hideCentsHides the Cents textbox in the Price field.Price
hideSecondsHides the Seconds textbox in the Time field.Time
hideAMPMHides the AM/PM dropdown menu in the Time field.Time
hideAddr2Hides the second street address textbox in the Address field.Address

The following keywords are for changing the way additional text in your form is displayed.

CSS Layout KeywordDescriptionCompatible Field Types
altInstructMoves 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
scrollTextConverts 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

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:

  1. Add a Custom CSS stylesheet to your theme, and apply that theme to your form.
  2. Go back to the Form Builder to edit your form.
  3. 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.