CSS Ready Classes for Fluent Forms

In Fluent Forms, we’re adding some new “Ready Classes”. Using these new classes, you can easily create more advanced alternative layouts for the fields in your forms.

Essentially, Ready Classes are class names that you can add to the parent element surrounding each field to take advantage of pre-defined styles included in the default form stylesheet.

How to Use Ready Classes

To add a Ready Class to a field, just edit your form in the Form Builder and then select the field you want to add the classes to. Under the “Advanced Options” tab, you’ll see an input called “Container Class”. Add the Ready Class name or names 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 Ready Class names, just save the form and you’ll see the classes being applied to your form in the preview window and on the live site.

The Ready Class Names

Here are the Ready Classes that are built in the Fluent Forms default stylesheet that you can use right away without having to write any of your own CSS.

ff_list_2col

This turns a Radio/checkbox list into an equally-spaced 2 column format. This only applies to Radio/checkbox lists and work with any of the form label position settings.

ff_list_3col

This turns a Radio/checkbox list into an equally-spaced 3 column format. This only applies to Radio/checkbox lists and work with any of the form label position settings.

ff_list_4col

This turns a Radio/checkbox list into an equally-spaced 4 column format. This only applies to Radio/checkbox lists and work with any of the form label position settings.

ff_list_5col

This turns a Radio/checkbox list into an equally-spaced 5 column format. This only applies to Radio/checkbox lists and work with any of the form label position settings.

ff_list_inline

This turns a Radio/checkbox list into an inline horizontal list (not evenly spaced columns). This only applies to multiple Radio/checkbox lists and work with any of the form label position settings.

ff_scrolled_text

This converts an html field 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 (Terms of Service Agreements, etc). This class only works on section breaks and works with any of the form label position settings.



Over time, we will add more helper css class. Please feel free to suggest us what else built-in helper class you need.

Was this article helpful to you?

2

How can we help?

Please submit a support ticket if you have any question or pre-sale questions. Our Customer support engineers will answer your query as soon as possible

Open a support ticket