How to style Gravity Forms with Bootstrap and LESS

Gravity Forms is the best solution for building forms in WordPress. There currently aren’t any other plugins that come close to what Gravity Forms has to offer, and the features in Gravity Forms allow you to build very complex forms all within WordPress.

One problem with Gravity Forms is that you can’t easily edit the form markup. You’re able to apply CSS classes to certain areas but you won’t be able to target the exact elements that you want. Applying Bootstrap’s styling for forms, buttons, and alerts to Gravity Forms is extremely easy by editing Bootstrap’s LESS files.

Before you read further you must be able to compile Bootstrap’s LESS files to the appropriate CSS files. This usually means that bootstrap.less compiles to bootstrap.css, and responsive.less compiles to bootstrap-responsive.css.

Lately I’ve been using a grunt.js build script that handles compiling LESS, but there are several tools available that have made it painless: CodeKit (OS X), SimpLESS, WP-LESS

Gravity Forms Settings

After downloading and activating Gravity Forms you’ll need to change a couple general settings. Navigate to Forms > Settings through the admin navigation:

  1. Set Output CSS to No
  2. Set Output HTML5 to Yes

The included Gravity Forms CSS includes too many styles (their forms.css includes almost 2,500 lines) you’d need to override so it’s just easier to start from scratch.

Go ahead and create a new form and then include it on a post or page so that you’re able to test your new styles. When including a Gravity Form I opt for not displaying the form title and description and instead just manually include those if necessary.

General Styling for Gravity Forms

Before we start editing LESS files we’ll need to apply some basic styling to the form, such as making the <ul> have list-style: none; and removing unnecessary margins.

In your theme’s stylesheet add the following:

.gform_wrapper ul { list-style: none; margin-left: 0; }
.gform_wrapper form { margin-bottom: 0; }

To get radio and checkbox inputs to display properly, add:

.gfield_radio input,
.gfield_checkbox input {
  vertical-align: 0;
}
.gfield_radio label,
.gfield_checkbox label {
  display: inline-block;
  margin-left: 8px;
}

I use LESS for my stylesheet and like to use Bootstrap’s @red to style the asterisks on required fields:

.gform_wrapper .gfield_required {
  color: @red;
  padding-left: 1px;
}

Editing Bootstrap’s LESS for Gravity Forms Styling

buttons.less

Open up buttons.less so that we can apply the Bootstrap styles associated with both .btn and .btn-primary to .gform_button.

Update the first .btn style block so that it gets applied to the Gravity Forms submit button:

// Core
.btn,
.gform_button {
  display: inline-block;
  .ie7-inline-block();
  padding: 4px 14px;

  ...etc.

Update the backgrounds further down in the file to apply the styling to the Gravity Forms button:

// Set the backgrounds
// -------------------------
.btn,
.gform_button {
  // reset here as of 2.0.3 due to Recess property order
  border-color: #c5c5c5;
  border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25);
}
.btn-primary,
.gform_button {
  .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
}

After making these changes and re-compiling your Bootstrap LESS you’ll notice that the Gravity Forms submit button now looks like a Bootstrap button with the primary styling.

alerts.less

Edit your theme stylesheet to hide the error messages from Gravity Forms associated with each field since we’ll be applying Bootstrap’s error styling to the inputs:

.gform_wrapper .validation_message { display: none; }

Open up alerts.less so that we can apply the Bootstrap alert styles to the necessary Gravity Forms elements:

Update the first .alert style block so that it gets applied to the Gravity Forms error and confirmation messages:

// Base styles
// -------------------------

.alert,
.validation_error,
#gforms_confirmation_message {
  padding: 8px 35px 8px 14px;
  margin-bottom: @baseLineHeight;

  ...etc.

Update the .alert-error style block so that it gets applied to the necessary Gravity Forms form elements:

.alert-danger,
.alert-error,
.validation_error,
.gform_wrapper .gfield_error input[type=text],
.gform_wrapper .gfield_error input[type=tel],
.gform_wrapper .gfield_error input[type=email],
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
  background-color: @errorBackground;
  border-color: @errorBorder;
  color: @errorText;
}

I like to also apply the @errorText to the form labels in my theme stylesheet:

.gform_wrapper .gfield_error label {
  color: @errorText;
}

Further Customizations

Now that you have Bootstrap’s button and alert styling applied to Gravity Forms you might want to customize and style your forms further. You can either edit forms.less or just make your customizations in your theme stylesheet.

Alternative Method

You can also apply the styles just by editing your theme stylesheet if you add imports for buttons.less and alerts.less at the top of the file, although this will result in a lot of duplicated code in the final output. Example:

@import "bootstrap/alerts.less";
@import "bootstrap/buttons.less";

.gform_wrapper .gform_button {
  .btn;
  .btn-primary;
}

I’ve created a gist that includes the modified Bootstrap LESS files (only tested on Bootstrap v2.1.1).