Using the CSS Ready Classes in Fluent Form, you can easily create more advanced alternative layouts for the fields in your forms. You can also to take advantage of pre-defined styles included in the default form stylesheet.
This article will guide you how you can use CSS ready classes in Fluent Forms.
Add CSS Classes #
First, edit your form in the Form Builder and select the field where you want to add the classes.
Now, From 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 and click the Save Form button.
This feature does not update live in the form builder.
Ready Class Names #
Here are the Ready Classes built into the Fluent Forms default stylesheet, which you can use immediately without writing your own CSS.
Ff_list_2col #
This turns a Radio/checkbox list into an equally-spaced 2-column format. It only applies to Radio/checkbox lists and works with any 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 works with any form label position settings.
A Forms preview that without Container Class
A preview Forms with Container class.
ff_list_4col #
This turns a Radio/checkbox list into an equally-spaced 4-column format. This only applies to Radio/checkbox lists and works 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 works 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 works 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 want to show a large amount 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 with any form label position settings.
ff_force_hide #
This will hide an input field from being displayed on the front end of the website. This is useful when you want to use an input field in your form to store some values or data but don’t want to display it to the users when they fill up the form.
ff_pointer #
The cursor will change to a pointer when hovering over an input field.
ff-read-only #
This class restricts the input fields from being edited; they can only be viewed by the user. Under the “Advanced Options” tab, you’ll see an input called Element Class. Add the Ready Class name to the field and save the form.
ff-hidden #
This will keep the input field hidden, where this field is visible to the admin.
CSS classes are not compatible with Conversational Forms.
Apply these classes to style your forms effortlessly. If you have any further questions, concerns, or suggestions, please do not hesitate to contact our support team. Thank you.
