How To Style Beaver Builder Contact Form Module

Disclosure: Some of the links in this post are affiliate links. This means, if you click on the link and purchase the product, I will receive a commission at no additional cost to you. Don’t worry, I only recommend products or services that I have personally used and believe will add value to my readers.

One of the best things about Beaver Builder is that it provides a Contact Form module. So you don’t need any other contact form plugin like Contact Form 7.

However, since Beaver Builder takes the styling of the fonts from the theme that you have installed, the Beaver Builder Contact Form that you add to your page might end up looking ugly.

Here is how the form looked like when I added it to this site.

Unstyled Beaver Builder Form

Ugly, right?

Let us style this form so that it looks good.

There are two ways in which you can style Beaver Builder’s Contact Form:

  1. Using CSS – The Hard Way
  2. Using PowerPack Addon of Beaver Builder – The Easy Way

Let me show you how both of these methods work.

Styling Beaver Builder Contact Form using CSS – The Hard Way

I styled my contact form with a bit of CSS and here is how it looked after adding some CSS.

Styled Beaver Builder Form

Looks better. Correct?

Here are the exact steps you need to carry out to style your contact form.

First, add the Contact Form module to your page and set the settings on the General tab as per your needs.

Beaver Builder Contact Form General Tab

Then on the Advanced tab, give some CSS Class name for this module. In this example, I gave the class name “ar_contact_form”.

Beaver Builder Contact Form Advanced Tab

We will use this class name in the CSS so that the CSS code that we write gets applied only to this module and nothing else.

Now it is time to write some CSS.

You can either write the CSS in the CSS tab of Layout Settings or the CSS tab of Global Settings if you want to apply the CSS across your entire site.

I chose to write it in Layout Settings so that the styles apply to only this page and not the entire site.

For doing this, click on Tools button on the top bar.

Then select Layout Settings in the popup that comes up.

Beaver Builder Layout Settings

Now, you can write your CSS in the CSS tab.

Beaver Builder Layout Settings CSS Tab

That is it! Now you have a good looking Beaver Builder Contact Form.

But in reality, CSS can get tricky to handle if you do not know how to write CSS. Writing CSS that makes the contact form look good on different browsers, devices and screen sizes is not easy if you do not know how to code.

This is where the second method comes in handy.

Styling Beaver Builder Contact Form using PowerPack Addon of Beaver Builder – The Easy Way

If you haven’t yet heard of PowerPack Addon, then this is a good time to go and check it out.

PowerPack comes with 13 different pre-made styles of Beaver Builder Contact Form which are called Contact Form Row Templates. All you need to do is drag-and-drop these pre-made Row Templates on your page to get a good looking Contact Form.

Here’s how all of the Contact Form Row Templates look like.

PowerPack Contact Form 1
PowerPack Contact Form 2
PowerPack Contact Form 3
PowerPack Contact Form 4
PowerPack Contact Form 5
PowerPack Contact Form 6
PowerPack Contact Form 7
PowerPack Contact Form 8
PowerPack Contact Form 9
PowerPack Contact Form 10
PowerPack Contact Form 11
PowerPack Contact Form 12
PowerPack Contact Form 13

Impressive! Correct?

PowerPack Addon makes styling of Beaver Builder’s Contact Form very easy. You don’t have to get your hands dirty with CSS, and your forms will look good on all browsers, devices and screen sizes.

So go and check out PowerPack Addon of Beaver Builder. It does a lot more than just styling Contact Forms.

Related Further Reading: 2 Different Methods To Add Breadcrumbs To Beaver Builder

Which Method Should You Use To Style Beaver Builder’s Contact Form?

PowerPack Addon is a premium add-on of Beaver Builder. So you will need to spend some money to get PowerPack in your hands.

If you value your time, then buying PowerPack Addon is the way to go.

But if you want to style your Contact Forms free-of-cost, then using CSS is the way to go.

With that said, I hope this tutorial helped you.

Don’t forget to share this tutorial with your friends if you liked it. I will really appreciate that.

About The Author