CSS Examples

Below are some commonly requested styling changes that aren't currently included in the visual form styler settings or in the field options.

Where to add custom CSS

You may add custom CSS in your Formidable → Styles → Custom CSS. Alternatively, most themes include a custom.css file or a location in the admin section to add Custom CSS.

Tips for getting started

Each form has a unique styling ID that allows you to style one form separately from all other forms on your site. This unique ID looks like: #frm_form_25_container where 25 is the ID of your form.

Each field also has a unique ID that allows you to style one individual field without affecting all similar fields in your form. This unique field ID looks like: #frm_field_250_container where 250 is the ID of your field

Add a background image to a form

By default there is no background for your forms, which allows your form to use the the same styling as the rest of your site. To add an image for the background of your form, you would use something similar to this:
#frm_form_25_container {background:url(path_to_bg_image.png) repeat; top left}
As always, remember to replace the 25 in our examples with the ID of your form.

Replace the submit button with an image

If you would like to replace the submit button on your forms, first go into Formidable → Styles → Buttons and check the box to disable submit button styling. This will provide you with a browser-default button to begin styling.

To style all submit buttons on your site:

.with_frm_style button[type="submit"] {
 background:#f8f8f8 url('path_to_image.png') no-repeat right top;
 width:200px;
 height:70px;
 }

Note: to style forms that were created with a version earlier than 2.03, change button to input in the previous example.

To style only one submit button on your site, you use the form container div (replace 25 with the ID of your form):

#frm_form_25_container button[type="submit"] {
 background:#f8f8f8 url('path_to_image.png') no-repeat right top;
 width:200px;
 height:70px;
 }

Note: you will most likely need to adjust the width and height to the size of the image you are using for your submit button.

Additional note: to style forms that were created with a version earlier than 2.03, change button to input in the previous example.

Use a floating submit button

Note: this may require additional custom javascript for variable screen widths for optimal appearance.
This will make it so the Submit button is visible at all times, and will scroll with the user.

Site-wide:

.frm_final_submit {
    position: fixed !important;
    right: 25px;
    bottom: 20px;
}

For a single form (replace 25 with the ID of the form):

#frm_form_25_container.frm_final_submit {
    position: fixed !important;
    right: 25px;
    bottom: 20px;
}

Limit rows in Repeatable Section

Note: limiting rows in Repeatable Sections is now a built-in feature, so there's no need to use CSS for this.
This example will hide the add button for a Repeatable Section after (5) rows has been added. Replace 376 with the ID of the repeating section field. If you would like to adjust how many rows it takes to trigger this, you can increase or decrease how many times .frm_repeat_sec is added.

#frm_field_376_container .frm_first_repeat + .frm_repeat_sec + .frm_repeat_sec + .frm_repeat_sec + .frm_repeat_sec .frm_add_form_row{
  display:none;
}

Note: this example only works with Repeatable Sections that have default formatting, not inline or grid formatting.

Alternate Repeatable Section row color

Sometimes if you have a lot of rows in a repeatable section, it can be hard to decipher one from the other. The following CSS will  alternate the color of each row added in a repeatable section. Just change 3424 to the Field ID of your Repeatable Section. You can also change the hex codes to a color of your choice.

.frm_repeat_3424:nth-child(odd) { background-color: #fff; }
.frm_repeat_3424:nth-child(even) { background-color: #efefef; }

With inline or grid formatting, you can add this CSS to prevent the div from collapsing and allow the background colors to show.

.frm_repeat_3424{
  overflow: auto;
}

Sometimes, the Add/Remove Buttons do not fall in the background color. If that happens, you can add this line to increase the
padding around each row.

.frm_repeat_3424{ padding: 10px 0; }

Increase Height of Progress Bar

This example will allow you to increase the height of a progress bar in a multi-page form. Change 53 to the ID of your Form, and change 50 to the desired progress bar height, as needed.

div#frm_form_53_container li.frm_rootline_single input {
 height: 50px;
}

Style the active page in View pagination

This example will allow you to style the background color of the active page in the pagination of a View.

.frm_pagination_cont ul.frm_pagination > li.active > a {
background: tan;
}

Resize Checkbox and Radio Buttons

This example will allow you to enlarge the size of check and radio buttons in your forms. Note: There does appear to be a slight conflict with this working in Safari.

.with_frm_style input[type="checkbox"], .with_frm_style input[type="radio"] {
transform: scale(1.5) !important;
-webkit-transform: scale(1.5) !important;
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
padding-bottom: 5px !important;
}

Hide Address Field Line 2

If you prefer to only have a single street address line showing in your address field, use the following CSS. Change 12505 to the field ID of the address field.

div#frm_field_12505-line2_container {
    display: none;
}

Hide Form Validation Error Message

The following example allows you to hide the form validation error message box that shows up at the top of the page, but still allows for validation to pass. This means that the field that didn't pass validation will show the error underneath it. Change 28 to the form ID for your form.

div#frm_form_28_container div.frm_error_style {
  display: none;
}

This example allows your to hide the form validation error text that appears directly beneath the field. Change 123 to the field ID that you want to hide the error for.

div#frm_field_123_container div.frm_error {
  display: none;
}

Set label position below field input

This example will allow you to display the label position below the field input box. You can add a class (e.g. frm_bottom_labels) to the section fields that include fields where you want to reverse the labels. To reverse all labels in the form, add the class to the form.

.frm_bottom_labels .frm_form_field.form-field {
  display: flex;
  flex-direction: column-reverse;
}

Optional: Since the label will be close to the input box, you can have a bit of separation between them by adding some margin. Change 5px to the amount you would like to use.

.with_frm_style .frm_bottom_labels label.frm_primary_label {
  margin-top: 5px !important;
}