How to integrate Gravity Forms with the Beaver Builder Theme

Okay, I swear by Gravity Forms but its default styling makes it look terrible when integrating Gravity Forms with the Beaver Builder Theme. I’ve actually never used any other form plugin for WordPress because…well, I’ve never needed to do anything with forms that Gravity Forms could not do.

If you’re like me, you want two things when choosing a plugin:

  1. THE BEST OPTION AVAILABLE: You want the best software available for the option. You want one that is going to do the job, and do it well.
  2. YOU WANT THIS TO BE YOUR GO-TO PLUGIN FOR THE JOB: I needed a form software and I chose Gravity Forms. Now that I’ve learnt it, I don’t want to learn another form software, and that’s something I take into consideration when searching for a plugin. If there was a plugin that did the job I needed now, but there was another one that was a bit more expensive (and did things I would likely need for future projects), I’ll always pay the little bit more so I only have to learn that one software.
  3. AFFORDABLE:  Many companies will have budgets just like the next, but I am a massive fan in paying a bit more for less of a headache. I know Gravity Forms isn’t going anywhere anytime soon, and it is constantly updated. I’ll use it on all my client websites, and the updates always work. For me, that means NO HEADACHE. And it does everything. So, the way I saw it is that if I purchase this now for $199 (developer license), and use it on all my client websites, and I know it works, why would I go for another option? Any plugin costs should always be passed down to your client anyway, and say you have 50 website using it, you’re looking at $4 per site a year to run this plugin.

But I have always despised one thing about Gravity Forms

And it took me 3 years to actually work out a solution.

I hate the default Gravity Forms styling!!!

I mean, look at it! Blocky, red backgrounds on each field which, if you’re lucky, all the fields actually line-up correctly like below.


And then, on mobile, it gets even worse! So on desktop you make your form two columns as 1 column just makes the fields too long, yet on mobile the two columns are too tight and you wish they’d collapse into 1 column.

Screen Shot 2016-06-13 at 3.56.37 PM

To override the CSS you need to use long CSS selectors like

Which no-one wants to do.

You can use the Gravity Forms CSS-Ready classes but they are inflexible

Following the classes from you add things like gf-left-half and gf-right-half to the form fields to build your form. But, as discussed, you cannot define them to change their grid layout on mobile.


It’s so annoying! And I put up with it for years!

Stop overriding the default Gravity Forms CSS to best integrate Gravity Forms with the Beaver Builder Theme

Here’s an easy way you can overcome the default CSS styling of the Gravity Forms plugin and have more flexibility on the form’s layout. Tailor it to your needs. Have the flexibility you want. Use the power of the Beaver Builder Theme.

Step 1: Disable the output of the Default Gravity Forms CSS

Bear with me here, but the first thing you’re going to want to do is disable the output of the CSS by going to your WordPress Dashboard and then Forms > Settings and selecting the NO radio button, as per below.

NOTE: your existing forms may break their layout when you do this. But we’ll soon fix this.


Step 2: Build your form as normal using the Gravity Forms drag and drop form builder

Yep, go ahead and drag and drop your fields like normal.

If you add it to a page / post and preview it, you will have something like the below, where all the fields are 100% width.


Step 3: Add Bootstrap CSS classes to build the layout of your form

WHY THIS WORKS: The Beaver Builder theme bases its grid off Bootstrap, which works well for us as we don’t have to include Bootstrap separately into our theme – it’s already there, in all its Bootstrap glory.

Edit each form field and add the bootstrap column class you’d like to. As a reference, you can review the bootstrap grid here . The Bootstrap grid is explained rather well in that link, but if you’re not keen on learning it, you can add the following CSS class to each field to get a common two column form:


THIS CODE EXPLAINED: The col-xs-12 is saying that on small devices like mobiles it should take up 12/12 columns in the grid (i.e. be 100% or rather full width) and then the col-xs-6 is saying the field should take up 6/12 columns in the grid, or rather, this field will be 50% of the width).




So as per below, the col-xs-12 class on every field in the form forces the fields to be 100% as they are 12/12 columns in the grid, or rather, 100% each.



  1. Your name: col-xs-12 col-sm-6
  2. Your phone number: col-xs-12 col-sm-6
  3. Your ZIP / Post Code: col-xs-12 col-sm-6
  4. Your Message: col-xs-12
    1. By only having col-xs-12 it will always be 100%.

And it’s that easy!

Things to note when integrating Gravity Forms with the Beaver Builder Theme

  1. When you disable the Gravity Forms styling, all CSS is disabled, which means things like the date picker field will not be styled at all and will need custom CSS to style them.

If you have any questions, please leave them here or us using our contact form and we’d be happy to start a conversation with you.

Hey! I'm Grant Ambrose,

My WordPress website generates millions of dollars in sales each year and I put together this website to help you do the same

I believe that a lot of the time, we aren't doing things that will help our business NOT because we don't know how to do it, but rather we don't even know it is possible. My website aims to change this. My website is here to help show YOU what is possible - what YOU could set up in your business with WordPress to increase sales, automate tasks and (ultimately) turn your ideas into working WordPress solutions.

1 thought on “How to integrate Gravity Forms with the Beaver Builder Theme”

  1. Hi, thanks for this – just what I was looking for… It seems to have made all my fields have a 15px indent due to a style on both these classes. If I make that zero I get no space between fields. A little bit stuck here.

Leave a Comment

Your email address will not be published. Required fields are marked *

Grow your WordPress business by getting...
My best tips to your inbox!

I'll send you emails when I publish content I think will help you and your business. You can opt-out at any time and change the topics of emails you get.

This site is not a part of the Facebook website or Facebook Inc. Additionally, this site NOT endorsed by Facebook in any way. FACEBOOK is a trademark of FACEBOOK, Inc.

Scroll to Top