Instantly add Bootstrap form styling to all your Formidable forms. This plugin also adds the option to prepend or append a symbol, such as currency, to your fields.

Download and install

1. If you haven't already, install and activate the current version of Formidable Forms Premium on your WordPress site.
2. After confirming your Formidable Forms license, proceed to the Formidable → Add-Ons page and toggle on the Bootstrap Forms WordPress plugin.
3. After the plugin is activated, the complete Bootstrap CSS will be included on your site, giving you access to various CSS classes. You may refer to the Bootstrap docs for a complete look at what this add-on offers.

Many Bootstrap classes can be placed in the CSS layout classes box in your field options. Specifically, the sizing options found here can be used in the CSS Layout Classes box.

Bootstrap Styling

Configure your Bootstrap styling settings by going to the Formidable → Global Settings → Manage Styles. You may choose whether to enable or disable the Bootstrap styling on your pages with these options:

• Load on every page - Loads the Bootstrap stylesheet on every page of your site. With this option selected, the CSS is loaded from the head before any forms or views.
• Only load on applicable pages - Loads the Bootstrap stylesheet only on pages containing a Formidable form, View, or another Formidable shortcode. The CSS is loaded in the page content, right before the first form on the page.
• Do not load - If this option is selected, none of your Formidable forms will receive any Bootstrap styling. The styling selection on a single form will not override this option.

Bootstrap version

You can choose between these Bootstrap versions, 5.0.2 (default) and 3.3.7, to apply to your pages. The older version, 3.3.7, will eventually be phased out, but it is included in case any new styling issues arise when upgrading to a newer Bootstrap version.

Append or prepend a value

Note: The latest versions of the Bootstrap plugin use the new Before & After Input options.

Prepend Bootstrap Glyphicons

If you'd like to prepend or append Bootstrap Glyphicons, you can do so by inserting the following HTML in the Before Input setting:

<i class="glyphicon glyphicon-calendar"></i>

Just change glyphicon-calendar to the correct Glyphicon title.

Change color of prepended character

1. Go to Formidable → Global Settings → Custom CSS or your form's style custom CSS area.
2. Insert the following CSS:

   .with_frm_style .input-group-addon:first-child {
       color: #004cad;
   }
   

3. Change #004cad; to the color you desire. An example is shown below with the icons matching the color of the submit button.

Change size of prepended character

1. Go to Formidable → Global Settings → Custom CSS or your form's style custom CSS area.
2. Insert the following CSS:

   .with_frm_style .input-group-addon {
       font-size:large;
   }
   

   Change 'large' to any font-size of your choice.

Troubleshooting

Font size changes

The Bootstrap add-on loads the standard Bootstrap stylesheet with the default font sizes. Most of the time when a site theme is using Bootstrap styling, it customizes the Bootstrap defaults. This would prompt the font sizes to change when the Bootstrap add-on is enabled.

To override this, you can manually adjust your font sizes to work with your theme stylesheet using their theme customizer. If for some reason this does not work, you can use custom CSS to adjust the font sizes.