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.

VIDEO: Placing Fields Next to Each Other

Adding CSS Layout Keywords to a Field

To add a CSS Layout Keyword to a field:

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

Use these keywords on two consecutive fields to place them side by side, two in a row.

All, except Likert
Use these keywords on three consecutive fields to place them side by side, three in a row.All, except Likert
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
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

2 Fields Side by Side

3 Fields Side by Side

4 Fields Side by Side

5 Fields Side by Side

Keywords for Hiding Fields

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

CSS Layout Keyword
Compatible Field Types
hideHides the entire field from your public-facing form. Any entries

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

If you use a "hide" keyword on a required field, not filling out the hidden textbox won't fail the validation, so no one will get stuck on your form for not being able to fill out a field they can't see.

Keywords for Changing Text Layout

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

CSS Layout Keyword
Compatible Field Types
altInstructMoves the Instructions for User under the field, instead of in a box to the right of the field.
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

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:

  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.

Use CSS Layout Keywords to place fields side by side, hide entire fields or parts of fields, and adjust the placement of additional text on your form. No knowledge of CSS necessary!

Create online forms

Add HTML forms to your site in a snap—no coding required.

Change Language