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 to edit your form.
2. Click on any field and open the Field Settings.
3. Click in the 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.
   
4. Click any of the classes in the Layout tab to insert them into the CSS layout classes box.
   
   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.

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 '1/2' icon. This will insert the frm_half class.
   

Section heading columns

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 '1/2' icon. This will insert the frm_half class.
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.
   

Align two 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/2' in the right sidebar. This will insert frm_first frm_half 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/2' in the right sidebar. This will insert frm_half in the CSS layout classes box.

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 '1/3' in the right sidebar. This will insert frm_third in the CSS layout classes box.
   

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, third, and fourth 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.
   

Align submit button with fields

If you want to put your submit button inline with the fields in your form, follow the instructions below. These instructions are specific to having two fields in your form, but they can be adapted to work with any number of fields.

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. Go into your form's 'Settings' → 'Customize HTML'. Scroll down to the 'Submit Button' section.
   Replace <div class="frm_submit"> with <div class="frm_submit frm_third frm_inline_submit">.
   

Create a grid

Create a grid with your radio button or checkbox fields by following the instructions below.

1. Open the first radio button or checkbox field's options and click in the CSS layout classes box. The right sidebar will automatically switch to the Layout tab. Click 'First Grid Row' in the right sidebar. This will insert frm_grid_first in the CSS layout classes box.
2. Open the second radio button or checkbox field's options and click in the CSS layout classes box. The right sidebar will automatically switch to the Layout tab. Click 'Even Grid Row' in the right sidebar. This will insert frm_grid in the CSS layout classes box. Do the same for all other even numbered radio buttons/checkboxes.
3. Open the third radio button or checkbox field's options and click in the CSS layout classes box. The right sidebar will automatically switch to the Layout tab. Click 'Odd Grid Row' in the right sidebar. This will insert frm_grid_odd in the CSS layout classes box. Do the same for all other odd numbered radio buttons/checkboxes.

   

4. If you would like to add labels at the top of your grid, you will need some extra HTML and CSS. You may follow these instructions to add labels to your grid.

Available classes

frm_hidden
Use 'frm_hidden' whenever you want a field this is not a Hidden Field to be hidden from view.

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_half
Align two fields in a row with 'frm_first frm_half' on the first field and 'frm_half' on the second field.

frm_third
Align three fields in a row. Use 'frm_first frm_third' for the first field and use 'frm_third' for the second and third fields.

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 up one-third width, put 'frm_first frm_two_thirds' on the first field and 'frm_third' on the second field.

frm_fourth
Align four fields in a row. Use 'frm_first frm_fourth' for the first field. Add 'frm_fourth' to the following fields in the row.

frm_three_fourths
Use next to a field with the 'frm_fourth' class on it. If you would like two fields in a row where the first takes up three fourths width and the second takes upon one fourth width, put 'frm_first frm_three_fourths' on the first field and 'frm_fourth' on the second field.

frm_sixth
Align six fields in a row. Use 'frm_first frm_sixth' for the first field. Use 'frm_sixth' for the following fields in the row.

frm_eighth
Align eight fields in a row. Use 'frm_first frm_eighth' for the first field. Use 'frm_eighth' for the following fields in the row.

frm_alignright
Align a field to the right side of the page.

frm_inline
Align fields in a row without setting a specific width. Use 'frm_first frm_inline' for the first field in the row and use 'frm_inline' for any fields following that.

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

frm_full_upload
Make a Single File Upload field look like a Multi File Upload field.

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_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. Please note that this will not affect the saved value. It will only affect how the value is displayed in the field.

frm_hidden
Add this to hide fields that you do not want visible, but are not Hidden fields. Examples could include fields used in calculations but that you might not want visible for aesthetic reasons, or certain uses of Lookup fields.

frm_inline_submit
Use this class to make sure your inline submit button lines up with the fields in your form.

Create natural language forms

Natural language forms go by several names including Mad Libs style forms. These types of forms include form fields inside of a sentence. They often use styling that shows only a blank line rather than a text box, similar to the available Modern Lines style template.

To create a form like this, follow these steps.

1. Add a section field to your form for each sentence or block of text. Set the label position to none.
2. Alternate HTML fields with other field types inside the section. The HTML fields are for the text between the other fields. Set the label position on each field to either placeholder or hidden.
3. If there are any fields followed by a period or comma, add no-right-margin into the 'CSS layout classes' box for that field.
4. Go to the Settings -> Customize HTML and add 'frm_madlib' into the Form Classes box.
5. Go to the Formidable -> Styles -> Custom CSS page and add this css:

   .frm_madlib .frm_section_heading {
   display:flex;
   flex-wrap: wrap;
   align-items: flex-end;
   }
   
   .frm_madlib .frm_section_heading div {
   margin: 5px;
   }
   
   .frm_madlib .frm_section_heading div.no-right-margin {
   margin-right: 0px;
   }

6. Create a new style or import the Modern Lines style template. See how to only show the bottom border in a field.
7. You're all done. Your form should look like the form in the screenshot above.

More layout customization

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