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 WordPress.org

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.

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

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

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

The contact form settings are displayed.

Congratulations! You have successfully added contact form 7.

Now we are going to learn how to change it.

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.

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.

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.

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.

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.

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.
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.

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.

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.

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.

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.

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.

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

Finally

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 itWP.org free version.

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