Bootstrap Forms

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 done so, install and activate Formidable Forms Premium.
2. In your WordPress admin, go to Formidable → Add-Ons and click the Install button for the Bootstrap Forms WordPress plugin.

After the plugin is activated, the full Bootstrap CSS will be included on your site, which means you will have access to a variety of CSS classes. You may refer to the Bootstrap docs for a complete look at what this add-on offers. Many of the 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.

This add-on enqueues Bootstrap CSS on your site and does not load Bootstrap scripts.

Bootstrap Styling

Configure your Bootstrap styling settings by going to the Formidable → Global Settings → Bootstrap Styling page.

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.

This section also includes the following options:

Show form error messages

You can choose if you would like to show the error messages from your forms or not. All error messages are hidden by default unless the Show form error messages is checked.

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' → 'Styles' → 'Custom CSS'.
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' → 'Styles' → 'Custom CSS'.
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.

Related Articles

• New Bootstrap Add-on
  Read More