Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Bootstrap Forms

Last Updated: January 18, 2021

Knowledge Base → Add-Ons → Appearance and UI → 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.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

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.
Bootstrap Styling
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.
    unicode-example-color

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.

  • Download and install
  • Bootstrap Styling
    • Show form error messages
  • Append or prepend a value
    • Prepend Bootstrap Glyphicons
    • Change color of prepended character
    • Change size of prepended character
  • Troubleshooting
    • Font size changes
Categories
×

Categories

  • Installation & Getting Started
  • Account Management
  • Forms
  • Entries
  • Views
  • Styles
  • Importing & Exporting
  • Add-Ons
  • Extend Formidable Forms

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

You do not have permission to view this form.

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews