How to design a contact form 7 with Beaver Builder (2023)

Sometimes you may need more additional fields and features on your contact form. In this case, you want to use a contact form plugin like Contact Form 7. Contact Form 7 is a popular, easy to use and free contact form plugin for WordPress.

Beaver Builder also has its own contact form module, but only standard fields: name, email, subject, phone number, and message. Beaver Builder does not come with oneContact form module 7, so you have to style it via custom CSS, which is a very time-consuming and coding-oriented task.

To solve this problem and save time,PowerPack Beaver-Complementoshas a thinContact form module 7. This module is available in the free and professional versions of PowerPack.

Get the free version of PowerPack from

How to design contact form 7 with PowerPack?

Before we start, let's first make sure we have thosecontact form 7and the PowerPack Addon plugin installed on the website panel. If you have them, we can proceed!

How to Add Contact Form 7 with Beaver Builder

Paso 1:Open the page builder and select an empty layout.

How to design a contact form 7 with Beaver Builder (1)

(Video) Beaver Builder | How Does Contact Form Work?

Paso 2:Click the Add Content button at the top right of the page.

How to design a contact form 7 with Beaver Builder (2)

Paso 3:Go to the PowerPack Modules option and find the Contact Form 7 listed there.

How to design a contact form 7 with Beaver Builder (3)

Stage 4:Just drag and drop the form onto the page.

The contact form settings are displayed.

How to design a contact form 7 with Beaver Builder (4)

Congratulations! You have successfully added contact form 7.

Now we are going to learn how to change it.

(Video) WordPress Beaver Builder - How to Add Contact Form

Design your contact form

You can do a lot with the contact form with the PowerPack. To make changes to the design of the contact form, we must access its configuration. You can do this by clicking on the little wrench icon in the corner or simply by clicking on the contact form.

When you drag and drop the contact form for the first time, you will see a window like this.

How to design a contact form 7 with Beaver Builder (5)

The first thing to do after adding a contact form module on the page is to select a contact form from the list like this.

How to design a contact form 7 with Beaver Builder (6)

Once you select the form, the form will load in real time in the background.

Now there are 7 tabs in the contact form 7 settings: Form, Style, Input, Button, Error, Typography, Advanced. Let's understand each one.

How to design a contact form 7 with Beaver Builder (7)

form tab

The Form tab allows you to select the form to display, the form title, and a description. You can simply select the form from the dropdown list, enter the name and description, and click save. Here is an example.

(Video) Styled Beaver Builder Contact Forms and a guide for styling more.

How to design a contact form 7 with Beaver Builder (8)

Style tab.

The Style tab allows you to change the form as a whole. It has three subsections.

  1. Form Background –If you want to choose the background color of the form or set an image as the background, this option will suit your needs. To create an image as a background, simply click the image button, upload the image, and you're done. If you want to set a background color, simply select the color button and choose from the color palette or enter the color code.
  2. formulate and –The form limit is self-explanatory. This allows you to set a border for the entire form. You can choose the border color, border width, and border style (dashed, dotted, or solid).
  3. corners and upholsteryThe corners set the curve value for the edges of each cell, and the padding is the value that represents the space between each element. You can simply assign them a value and they will take effect in real time.

How to design a contact form 7 with Beaver Builder (9)

Tickets tab.

On the Inputs tab you can change the layout of the text fields. You can make them small, tall, curvy, sharp, colorful, etc.

  1. Color -This panel helps you set the text color and background color of the text boxes.
  2. Sizes and Padding –This section will help you resize text boxes and text area. You can change the spacing between another element relative to the top and bottom margins.How to design a contact form 7 with Beaver Builder (10)
  3. Should -As the name suggests, this option will help you change the bounds of the text area and text box. You can change the border width, color, color focus, and even the position of the border.
  4. Generally -You have two options, firstly to give round corners to input fields and secondly to enable box shadow. You can change this setting simply by entering the value of the rounded corners. The higher the value, the curvier the rounds will be.

How to design a contact form 7 with Beaver Builder (11)

tab button

As the name suggests, the button tab helps you change the appearance and functionalities of the button.

  1. Colors -This section defines the color of the button, as well as the color of the button and the text when you hover over the button. You can easily change the color by choosing the color from the color palette.
  2. Size and orientation –If you want to change the width of the button from one end to the other, set the "Full Width" option to "Yes", otherwise just select "No" and enter a custom width in the box below and the position of the button from the left/center right. The button adjusts automatically.
  3. corners and upholsteryThis option is useful when you want to round the edges of the button. Top/bottom padding and left/right padding can be increased or decreased simply by entering the value.
  4. Should -Again, you can choose the width of the border. You can also set the color of the frame and the color when someone hovers over it.

How to design a contact form 7 with Beaver Builder (12)

Errors tab.

This tab defines the behavior if an error occurs during the form submission. For example, if you don't want the Email ID field to be empty and the user accidentally clicks the Submit button without typing anything. These features will be enabled and the user will see a message when they are enabled.

The error field message changes the color of the field that has an error retrieving the value. You can disable or enable it and also choose the color of the error box.

(Video) How to Add a Contact Form to Beaver Builder

How to design a contact form 7 with Beaver Builder (13)

Typography tab

In the Typography tab, the user can change the font style, color, size, alignment, etc. This tab offers all the customization liberties for all the different elements one by one such as title, post, caption, button, and description. This is pretty obvious to understand, but I'll take a moment to explain the various attributes of this tab.

  1. Fuente –This allows you to choose from over 500 different Google fonts as well as system fonts. Just select the one you want from the dropdown list and it will take effect immediately.
  2. Font size -The font size you selected. Just enter the value and it will take effect immediately.
  3. The font color -You can select the color you want from a palette or just enter the color code.
  4. Orientation -The alignment defines where the text is placed, i. h left, center or right.

How to design a contact form 7 with Beaver Builder (14)

advanced tab.

The Advanced tab allows you to make changes to the entire form yourself. Changes like borders, responsiveness, visibility, animation, etc.

  1. Margin -They define the space between the form and other elements in each direction.
  2. Responsive design –It tells the code with which device the responsiveness of the form will kick in.
  3. Visibility –If you want the form to be visible only when the user is logged in, then this is the option. You can set when the form is visible to the user or not.
  4. amination -If you want your form to appear or appear, this option does the work for you.
  5. HTML element –This allows you to define custom HTML and CSS classes if you want to make additional changes to the form.

How to design a contact form 7 with Beaver Builder (15)

This completes the functionality of all Contact Form 7 and by editing these settings you can create a great looking contact page.

Here is the standard contact form 7 raw.

How to design a contact form 7 with Beaver Builder (16)

I took the form above and barely spent 5 minutes changing PowerPack settings and here is the result. It looks pretty impressive, right?

(Video) Contact Form 7 Tutorial 2023 | Form, e-mails, reCaptcha V3 & Flamingo

How to design a contact form 7 with Beaver Builder (17)


If you want to create a contact page as epic as the one above, go for it.power adapterToday. Contact Form 7 aside, you get 50+ Epiccontent modulesand more than 250 templates. You can get all the features withpro versionor just download free version.

Just to remind you, the Contact Form 7 module is available with the free version of PowerPack.


1. Contact page - Beaver Builder
(Lee Easysmart)
2. Ninja Beaver Addons Contact Form Module
(Ninja Beaver)
3. DWB + Beaver Builder + Formidable Forms + Dambuster - Two Row Inline Contact Form
(Sniffle Valve)
4. Styling Contact Form 7 plugin with Oxygen Builder -- No Coding needed.
5. How to Embed Application Form on Beaver Builder
(POWR Tutorials)
6. Add NINJA FORMS in WordPress using Beaver Builder
(Beaver Builder)


Top Articles
Latest Posts
Article information

Author: Neely Ledner

Last Updated: 02/06/2023

Views: 6344

Rating: 4.1 / 5 (62 voted)

Reviews: 85% of readers found this page helpful

Author information

Name: Neely Ledner

Birthday: 1998-06-09

Address: 443 Barrows Terrace, New Jodyberg, CO 57462-5329

Phone: +2433516856029

Job: Central Legal Facilitator

Hobby: Backpacking, Jogging, Magic, Driving, Macrame, Embroidery, Foraging

Introduction: My name is Neely Ledner, I am a bright, determined, beautiful, adventurous, adventurous, spotless, calm person who loves writing and wants to share my knowledge and understanding with you.