Form Layout and CSS Classes

Knowledge BaseFormsStyling and Layout → Form Layout and CSS Classes

The easiest way to place multiple fields in a row and design the layout of your form is to use Formidable’s built-in CSS classes. You can add these CSS classes to individual fields or section headings to organize large groups of fields.

Add a CSS Layout Class

Layout classes can be added by going into the Field Options for any field and adding a class to the box that is labeled “CSS layout classes”. On the form builder page in the right sidebar, there is a Layout tab. This tab gives you a complete, clickable list of all the layout classes which you may use. You can use multiple classes by inserting a space between each class. Example: “class_1 class_2″

Here’s an example of the output you can achieve with adding classes.

Adding classes to a Section Heading field will include all fields in that section. A section can be ended by the end of the form, a page break, or another Section Heading field. Using section headings can be a much faster way of creating a two column form because you only need to add classes to the section heading fields instead of adding them to every field in the column. If you don’t want the section heading to be shown in your form, you can set the Label Position to hidden or none.

Available Classes

Note: Any class containing “first” will always start a new row.

frm_first_half, frm_last_half
Align two fields side-by-side. Add “frm_first_half” for the first field, and “frm_last_half” in the second field.

frm_first_third, frm_third, frm_last_third
Align three fields in a row. Use “frm_first_third” for the first field, “frm_third” for the second field, and “frm_last_third” for the last field.

frm_first_two_thirds, frm_last_two_thirds
Use in conjunction with frm_last_third or frm_first_third to align two fields in a row, one will be two thirds width, and the other will be one third width.

frm_first_fourth, frm_fourth, frm_last_fourth
Align four fields in a row. Use “frm_first_fourth” for the first field, “frm_fourth” for the second and third fields, and “frm_last_fourth” for the last field.

frm_first_fifth, frm_fifth, frm_last_fifth
Align five fields in a row. Use “frm_first_fifth” for the first field, “frm_fifth” for the second, third and fourth fields, and “frm_last_fifth” for the last field.

frm_first_inline, frm_inline, frm_last_inline
Align fields in a row without setting a specific width.

frm_full
Force the field to fill the full space with 100% width.

frm_grid_first, frm_grid, frm_grid_odd
Create a table of fields with alternating colors. Use “frm_grid_first” for the first field in order to get the top border, “frm_grid” on the even numbered rows, and “frm_grid_odd” on the odd numbered rows.

frm_two_col, frm_three_col, frm_four_col
Put your radio button or checkbox options into two, three, or four columns.

frm_text_block
If you have a lengthy amount of text in a checkbox or radio button field and it runs onto multiple lines, use this class to align all the text in a block.

frm_total
Add this to a read-only field to display the text in bold without a border or background.

frm_scroll_box
If you have many checkbox or radio button options, you may add this class to allow your user to easily scroll through the options.

More Layout Customization

Users familiar with HTML can further customize the form layout by using the Customize HTML tab on the form settings page.