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:
- 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.
- 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.
- 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.
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 https://www.gravityhelp.com/css-ready-classes-for-gravity-forms/ 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 https://getbootstrap.com/examples/grid/ . 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).
THE RESULT AFTER ADDING BOOTSTRAP CLASSES TO THE FIELDS
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.
THE CLASSES I ADDED TO EACH FIELD ARE
- Your name: col-xs-12 col-sm-6
- Your phone number: col-xs-12 col-sm-6
- Your ZIP / Post Code: col-xs-12 col-sm-6
- Your Message: col-xs-12
- 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
- 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.