# How To Style Beaver Builder Contact Form Module

Here is how you can style Beaver Builder Contact Form module. You might want to do this to make your Contact Form attractive.

Author: Abhijit Rawool
Source: https://abhijitrawool.com/how-to-style-beaver-builder-contact-form-module-with-css/
Published: 2016-03-03T20:06:17Z
Updated: 2020-10-12T07:23:47Z

One of the best things about [Beaver Builder](/beaver-builder-review/) 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.

[

<img loading="lazy" decoding="async" width="737" height="409" src="/wp-content/uploads/2016/03/unstyled-beaver-builder-form.png" alt="Unstyled Beaver Builder Form">

](/wp-content/uploads/2016/03/unstyled-beaver-builder-form.png)

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.

[

<img loading="lazy" decoding="async" width="713" height="532" src="/wp-content/uploads/2016/03/styled-beaver-builder-contact-form.png" alt="Styled Beaver Builder Form">

](/wp-content/uploads/2016/03/styled-beaver-builder-contact-form.png)

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.

[

<img loading="lazy" decoding="async" width="602" height="570" src="/wp-content/uploads/2016/03/beaver-builder-contact-form-general-tab.png" alt="Beaver Builder Contact Form General Tab">

](/wp-content/uploads/2016/03/beaver-builder-contact-form-general-tab.png)

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

[

<img loading="lazy" decoding="async" width="602" height="567" src="/wp-content/uploads/2016/03/beaver-builder-contact-form-advanced-tab.png" alt="Beaver Builder Contact Form Advanced Tab">

](/wp-content/uploads/2016/03/beaver-builder-contact-form-advanced-tab.png)

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.

[

<img loading="lazy" decoding="async" width="300" height="270" src="/wp-content/uploads/2016/03/beaver-builder-layout-settings.png" alt="Beaver Builder Layout Settings">

](/wp-content/uploads/2016/03/beaver-builder-layout-settings.png)

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

[

<img loading="lazy" decoding="async" width="604" height="574" src="/wp-content/uploads/2016/03/beaver-builder-layout-settings-css-tab.png" alt="Beaver Builder Layout Settings CSS Tab">

](/wp-content/uploads/2016/03/beaver-builder-layout-settings-css-tab.png)

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

But in reality, [CSS can get tricky to handle](/how-to-make-a-website/) 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](/recommends/beaver-builder-powerpack/ "Beaver Builder PowerPack"), 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.

[

<img loading="lazy" decoding="async" width="1280" height="581" src="/wp-content/uploads/2016/03/powerpack-contact-form-1.png" alt="PowerPack Contact Form 1">

](/wp-content/uploads/2016/03/powerpack-contact-form-1.png)

[

<img loading="lazy" decoding="async" width="1280" height="605" src="/wp-content/uploads/2016/03/powerpack-contact-form-2.png" alt="PowerPack Contact Form 2">

](/wp-content/uploads/2016/03/powerpack-contact-form-2.png)

[

<img loading="lazy" decoding="async" width="1280" height="687" src="/wp-content/uploads/2016/03/powerpack-contact-form-3.jpg" alt="PowerPack Contact Form 3">

](/wp-content/uploads/2016/03/powerpack-contact-form-3.jpg)

[

<img loading="lazy" decoding="async" width="1280" height="674" src="/wp-content/uploads/2016/03/powerpack-contact-form-4.jpg" alt="PowerPack Contact Form 4">

](/wp-content/uploads/2016/03/powerpack-contact-form-4.jpg)

[

<img loading="lazy" decoding="async" width="1280" height="673" src="/wp-content/uploads/2016/03/powerpack-contact-form-5.jpg" alt="PowerPack Contact Form 5">

](/wp-content/uploads/2016/03/powerpack-contact-form-5.jpg)

[

<img loading="lazy" decoding="async" width="1280" height="649" src="/wp-content/uploads/2016/03/powerpack-contact-form-6.jpg" alt="PowerPack Contact Form 6">

](/wp-content/uploads/2016/03/powerpack-contact-form-6.jpg)

[

<img loading="lazy" decoding="async" width="1280" height="631" src="/wp-content/uploads/2016/03/powerpack-contact-form-7.jpg" alt="PowerPack Contact Form 7">

](/wp-content/uploads/2016/03/powerpack-contact-form-7.jpg)

[

<img loading="lazy" decoding="async" width="1280" height="693" src="/wp-content/uploads/2016/03/powerpack-contact-form-8.png" alt="PowerPack Contact Form 8">

](/wp-content/uploads/2016/03/powerpack-contact-form-8.png)

[

<img loading="lazy" decoding="async" width="1280" height="483" src="/wp-content/uploads/2016/03/powerpack-contact-form-9.png" alt="PowerPack Contact Form 9">

](/wp-content/uploads/2016/03/powerpack-contact-form-9.png)

[

<img loading="lazy" decoding="async" width="1280" height="459" src="/wp-content/uploads/2016/03/powerpack-contact-form-10.png" alt="PowerPack Contact Form 10">

](/wp-content/uploads/2016/03/powerpack-contact-form-10.png)

[

<img loading="lazy" decoding="async" width="1280" height="445" src="/wp-content/uploads/2016/03/powerpack-contact-form-11.png" alt="PowerPack Contact Form 11">

](/wp-content/uploads/2016/03/powerpack-contact-form-11.png)

[

<img loading="lazy" decoding="async" width="1280" height="559" src="/wp-content/uploads/2016/03/powerpack-contact-form-12.jpg" alt="PowerPack Contact Form 12">

](/wp-content/uploads/2016/03/powerpack-contact-form-12.jpg)

[

<img loading="lazy" decoding="async" width="1280" height="373" src="/wp-content/uploads/2016/03/powerpack-contact-form-13.png" alt="PowerPack Contact Form 13">

](/wp-content/uploads/2016/03/powerpack-contact-form-13.png)

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](/recommends/beaver-builder-powerpack/ "Beaver Builder PowerPack"). It does a lot more than just styling Contact Forms.

**Related Further Reading:** [2 Different Methods To Add Breadcrumbs To Beaver Builder](/how-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.