Get Premium Stock 4 Free

Use our free stock for your own projects or for clients

How to Style Formidable Forms with Bootstrap for a Sleek UI

Plugin Name

Formidable Forms – Bootstrap Form Styling

Licence

GPL - licensed

Price

Free

February 3, 2025

Information

Formidable Forms is one of the most powerful form builder plugins for WordPress, and when combined with Bootstrap, it allows for sleek, responsive, and professional-looking forms. In this guide, we’ll walk you through how to style Formidable Forms using Bootstrap to achieve a modern and elegant UI.

Why Use Bootstrap for Formidable Forms?

Bootstrap is a popular front-end framework that provides pre-designed components, including form elements, to make styling easier. By integrating Bootstrap with Formidable Forms, you get:

Responsive Design: Forms automatically adjust to different screen sizes.
Consistent UI: Pre-styled inputs, buttons, and alerts create a uniform design.
Customizable Components: Bootstrap’s CSS classes allow easy customization.
Improved User Experience: Clean and modern design enhances usability.

Steps to Style Formidable Forms with Bootstrap

Step 1: Load Bootstrap in WordPress

To use Bootstrap with Formidable Forms, you need to add Bootstrap to your WordPress website. There are multiple ways to do this:

Option 1: Use a WordPress Theme with Bootstrap

Many WordPress themes come with Bootstrap built-in. If your theme already includes Bootstrap, you can skip this step.

Option 2: Manually Add Bootstrap via CDN

If your theme does not include Bootstrap, add it manually by inserting the following code into your theme’s header.php file (inside the <head> section):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

You can also enqueue Bootstrap in your functions.php file:

function load_bootstrap() {
    wp_enqueue_style('bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'load_bootstrap');

Step 2: Add Bootstrap Classes to Formidable Forms

Formidable Forms allows you to add custom CSS classes to form elements. Here’s how you can apply Bootstrap styling:

1. Navigate to Formidable Forms

In your WordPress dashboard, go to Formidable → Forms.
Select the form you want to style.

2. Add Bootstrap Classes to Form Fields

Click on a form field.
In the Field Options panel, locate the CSS layout classes section.
Add relevant Bootstrap classes, such as:
- form-control for text inputs and text areas
- form-select for dropdowns
- btn btn-primary for submit buttons

For example, for a text input field, add form-control in the CSS layout classes section.

Step 3: Customize Form Layout with Bootstrap Grid

Bootstrap’s grid system allows for a more structured form layout. You can use Formidable Forms’ HTML fields to structure your form using Bootstrap’s grid system.

For example, to create a two-column layout, use the following HTML in an HTML Field:

<div class="row">
    <div class="col-md-6">[input your_field_id]</div>
    <div class="col-md-6">[input another_field_id]</div>
</div>

Replace your_field_id with the actual field ID from Formidable Forms.

Step 4: Style Buttons and Alerts

Formidable Forms’ default submit button can be styled using Bootstrap’s button classes. Navigate to the form settings and update the button’s CSS layout classes:

btn btn-primary for a blue button
btn btn-success for a green button
btn btn-danger for a red button

For example, adding btn btn-primary will make the submit button look like this:

<button class="btn btn-primary">Submit</button>