How to use Contact Form 7 on different page builders?

How to use Contact Form 7 on different page builders?

When you are using WordPress for creating your new website, then you must know that you will have a lot of amazing options that you can use to improve the presentation of your website. WordPress will provide you unlimited ways to improve the overall appearance of your website. If you are not sure how to

When you are using WordPress for creating your new website, then you must know that you will have a lot of amazing options that you can use to improve the presentation of your website. WordPress will provide you unlimited ways to improve the overall appearance of your website. If you are not sure how to use Contact Form 7 on different page builders, then you must follow these guidelines. There are countless plugins that you can use to improve the functionality of your website. Moreover, you can choose different premium WordPress themes to enhance the functionality of your WordPress site.

However, you should have complete knowledge of how WordPress works and how you can improve the design of your website using different features. There are multiple plugins out there that will provide you with a way to improve the design of your website. You can also use different page builders that will help you increase productivity as well.

We will be sharing few important notes that will help you use Contact Form 7 plugin to style your contact page. You can use different page builders to create amazing contact pages just by using Contact Form 7 plugin. Here are few important steps that you need to follow when you are using Contact Form 7 with different page builders.

How to use Contact Form 7 with Beaver Page Builder

Beaver page builder is one of the best options out there that you can use to create amazing websites. If you are using Beaver page builder, then you can easily use Contact Form 7 to create stunning contact pages. Once you have set up your theme and pages, then you can install Contact Form 7 plugin from the plugin directory of WordPress.

Once you have installed Contact Form 7 plugin, you can visit Contact tab in your WordPress dashboard and there you will have to create a new form.

Create contact form 7

You can easily create a contact form using this plugin. You need to add the desired fields and after creating a form, you will have to hit save. You can then copy the shortcode which is generated by the plugin

Now you need to visit the contact page that you have created separately. After opening a page, you can hit the option of Page builder that will take you to the front-end of your website.

Go to contact us page

After that, you will be able to see multiple options and you will have to select basic module.

edit with front editor

You can then drag the text editor from the basic module to the area where you want to place the element.

Place the contact element

Once you have opened the editor, you simply have to paste the shortcode to make it work.

Paste contact form shortcode
Publish contact form 7

You can then save the editor and publish the changes you have just made to have a contact form on the desired page.

Using Contact Form 7 with Elementor Page Builder

When you are using Elemntor page builder for building multiple pages of your website, then you will have to repeat the same process. After creating a contact page using Elementor page builder, you will be able to see an option for editing with Elementor. You will have to click that option.

elementor contact form page

After opening a page builder, you will be able to see different elements and you will have to drag shortcode element and drop it onto the dotted lines.

elementor contact form shortcode

After dropping the shortcode element, you will be able to paste the shortcode that you copied previously. After pasting it, you will have to hit save.

Contact form 7 with elementor editor

After saving the page, you will be able to see the contact form on the contact page.

How to use contact form 7 with elementor

Creating Contact Page with SiteOrigin Page Builder

Here is another great option for building website pages. If you are using SiteOrigin page builder, then you will have multiple options and you will be able to create a stunning website. You will have multiple content elements that you can use to create pages according to your requirements. When you are creating contact forms using Contact Form 7 with SiteOrigin page builder, then you will have to follow a few basic steps. First of all, you can create a contact form, and then you will have to copy the shortcode generated by the plugin.

You will have to edit the contact page and you will have to select the option of page builder from the upper right corner of the WordPress editor.

Once the page builder is open, you will have to choose the elements within a row and a column. After selecting ‘Add Row’, you can create a single row.

Adding SiteOrigin row

When you have selected a single row option, you will have to click on ‘add widget’ option. After clicking it, you will have to choose SiteOrigin editor.

Adding SiteOrigin widget

Once you have selected a SiteOrigin editor, you will have to open the editor, and you will have to paste the shortcode that you have copied before. After pasting the shortcode, you can hit save.

Adding contact form 7 shortcode

After saving the page, you can preview the changes.

contact form 7 with siteorigin page builder

If you are not sure how to use Contact Form 7 with different page builders, then these are the few basic steps that you can use to create contact pages for your website.

WPCue
ADMINISTRATOR
PROFILE

Posts Carousel

Leave a Comment

Your email address will not be published. Required fields are marked with *

Latest Posts

Top Authors

Most Commented

Featured Videos