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 the many CSS layout classes offered by Formidable. You can add these CSS layout classes to individual fields or add them to Section Headings to organize large groups of fields.

Add a CSS layout class

  1. Go into edit your form.
  2. Click on any field and open the Field Options.
  3. Click in the CSS layout classes box.
    CSS Layout Classes Box
    When you click in this box, the right sidebar will switch to the Layout tab. This tab gives you a complete, clickable list of all the layout classes which you may use.
    CSS Layout Sidebar
  4. Click any of the classes in the Layout tab to insert them into the CSS layout classes box.
    CSS Layout GIF
    You can use multiple classes by inserting a space between each class. Example: 'frm_first frm_half'

Example

Here's an example of the output you can achieve with adding classes.
CSS Layout Classes

Add columns in a form

Creating columns in a form is as easy as adding a CSS layout class to your fields.

  1. Add fields to your form. Alternate between adding a field for the first column and a field for the second column. Every other field will be in a different column, so order your fields with that in mind.
  2. Open the field options for each field that should be in the first column. Click in the 'CSS layout classes' box. In the Layout panel (right sidebar), click the 'First' and '1/2' icons. This will insert the frm_first frm_half classes.
  3. Open the field options for each field that should be in the second column. Click in the CSS layout classes box. In the Layout panel (right sidebar), click the 'Last' and '1/2' icons. This will insert the frm_last frm_half classes.

    CSS Layout 2 Columns

Section heading columns

*Pro-only feature*

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.

  1. Add a Section Heading field to your form. This will be for your first column. Open the field options and click in the CSS layout classes box. In the Layout panel (right sidebar), click the 'First' and '1/2' icons. This will insert the frm_first frm_half classes.
  2. Add another Section Heading field to your form. This will be for your second column. Open the field options and click in the CSS layout classes box. In the Layout panel (right sidebar), click the 'Last' and '1/2' icons. This will insert the frm_last frm_half classes.
  3. Add fields that you want in the first column to the first Section field.
  4. Add fields that you want in the second column to the second Section field.
  5. If you don't want the Section Heading text to be shown in your form, set the Label Position to hidden or none on both of your Section Headings.

    CSS Layout 2 Sections

Align three fields in a row

  1. Open the first field's options and click in the CSS layout classes box. The right sidebar will automatically switch to the Layout tab. Click 'First' and '1/3' in the right sidebar. This will insert frm_first frm_third in the CSS layout classes box.
  2. Open the second field's options and click in the CSS layout classes box. The right sidebar will automatically switch to the Layout tab. Click '1/3' in the right sidebar. This will insert frm_third in the CSS layout classes box.
  3. Open the third field's options and click in the CSS layout classes box. The right sidebar will automatically switch to the Layout tab. Click 'Last' and '1/3'. This will insert frm_last frm_third in the CSS layout classes box.

    CSS Layout 3 Column

Align four fields in a row

  1. Open the first field's options and click in the CSS layout classes box. The right sidebar will automatically switch to the Layout tab. Click 'First' and '1/4' in the right sidebar. This will insert frm_first frm_fourth in the CSS layout classes box.
  2. Open the second field's options and click in the CSS layout classes box. The right sidebar will automatically switch to the Layout tab. Click '1/4' in the right sidebar. This will insert frm_fourth in the CSS layout classes box.
  3. Open the third field's options and click in the CSS layout classes box. The right sidebar will automatically switch to the Layout tab. Click '1/4' in the right sidebar. This will insert frm_fourth in the CSS layout classes box.
  4. Open the fourth field's options and click in the CSS layout classes box. The right sidebar will automatically switch to the Layout tab. Click 'Last' and '1/4'. This will insert frm_last frm_fourth in the CSS layout classes box.

    CSS Layout 4 Column

Available classes

frm_first
Use 'frm_first' whenever you want a field to be the first in a row. This is designed to be used in conjunction with the field width classes.

frm_last
Use 'frm_last' whenever you want a field to be the last in a row. This is designed to be used in conjunction with the field width classes.

frm_half
Align two fields in a row with 'frm_first frm_half' on the first field and 'frm_last frm_half' on the second field.

frm_third
Align three fields in a row. Use 'frm_first frm_third' for the first field, 'frm_third' for the second field, and 'frm_last frm_third' for the last field.

frm_first frm_two_thirds, frm_last frm_two_thirds
Use next to a field with the frm_third class on it. If you would like two fields in a row where the first takes up two thirds width and the second takes upon third width, put 'frm_first frm_two_thirds' on the first field and 'frm_last frm_third' on the second field.

frm_fourth
Align four fields in a row. Use 'frm_first frm_fourth' for the first field, 'frm_fourth' for the second and third fields, and 'frm_last frm_fourth' for the last field.

frm__fifth
Align five fields in a row. Use 'frm_first frm_fifth' for the first field, 'frm_fifth' for the second, third and fourth fields, and 'frm_last frm_fifth' for the last field.

frm_sixth
Align six fields in a row. Use 'frm_first frm_sixth' for the first field, 'frm_sixth' for the second, third, fourth and fifth fields, and 'frm_last frm_sixth' for the last field.

frm_seventh
Align seven fields in a row. Use 'frm_first frm_seventh' for the first field, 'frm_seventh' for the second, third, fourth, fifth and sixth fields, and 'frm_last frm_seventh' for the last field.

frm_eighth
Align eight fields in a row. Use 'frm_first frm_eighth' for the first field, 'frm_eighth' for the second, third, fourth, fifth, sixth and seventh fields, and 'frm_last frm_eighth' for the last field.

frm_inline
Align fields in a row without setting a specific width. Use 'frm_first frm_inline' for the first field, 'frm_inline' for any fields in between, and 'frm_last frm_inline' for the last field in the row.

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 the grid, '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, frm_html_scroll_box
If you have many checkbox or radio button options, use the frm_scroll_box class to allow your user to easily scroll through the options. Add the frm_html_scroll_box class to an HTML field to allow your user to easily scroll through text.

frm_capitalize
Add this to automatically capitalize the first letter in each word.

More layout customization

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