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.

Getting Started

Where to add custom CSS

You may add custom CSS in your Formidable → Global Settings → 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

Submit button

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;
}

Repeaters

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.

Hide Repeater "Add/Remove" buttons

#frm_field_13521_container .frm_repeat_buttons {
    display: none;
}

Switch 13521 with your Repeater field ID.

Hide Remove buttons on the first row in Repeatable Section

.frm_first_repeat .frm_remove_form_row.frm_button
 {  
   display: none;
 }

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; }

Multi-page forms

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;
}

Views

Set fixed height and scroll box for calendar View day content

By default, a calendar View will display all content entered in the View content, stretching the day box if the content is significantly long. Use the example below to scroll the day content instead of stretching it.

.frmcal-content {
    max-height: 100px !important;
    overflow: auto;
}

Change the color of Zebra stripes styling for Table View

By default, using Zebra Stripes as your Table View Row style will display the table in alternating row colors. To change the alternate color, use the example below.

.frm-alt-table tr:nth-child(even) {
    background-color: skyblue !important;
}

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;
}

Add a background image to a form

Note: this is now a built-in feature of Formidable Pro.
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.

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;
}

CSS Layout class

Use custom color with frm_color_block

The frm_color_block class is based on the form field's border color by default. If you want to use a custom color, use the example below. Change the hex code #ba1212 with your preferred color.

.frm_color_block {
    background-color: #ba1212;
}

Change Google map size

If you prefer to change the size of the Google map displayed using the Geolocation add-on, the width and height can be customized using the example below.

.frm-geolocation-map {
   height: 500px !important;
   width: 500px !important;
}