CSS Keywords

 


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.

leftThird middleThird rightThird

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.

CSSKeywords

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 Modifications, 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:

CSS Keywords lefthalf righthalf

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:

CSS Keywords leftThird middleThird rightThird

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:

CSS Keywords leftFourth middleFourth rightFourth

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:

CSS Keyword leftFifth middleFifth rightFifth

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.

Original Pagination

Pagination with hideSecondary CSS Keyword

 

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.

CSS Keywords for Time Field

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.

hideAddr2

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:

Original Field Instructions and Field Instructions with altInstruct CSS Keyword

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.

scrollText Keyword Example

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 how to set up to 5 fields on the same line using CSS Keywords here on our Blog.

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:

You can use multiple CSS keywords at the same time.

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!

Video Tutorial