How to set up Contact Form with Elementor

In this article, we will guide you, on how to set up a contact form with Elementor?

Contact form is a vital element of any website. With a contact form, you always get in touch with users without sharing your contact detail like Email and Phone number. Contact form helps to understand the user’s preferences, ideas, and feedback that they have given to you.

There is plenty of Contact form plugin available like WP form, Contact form 7, Hubspot, Forminator, Lead Form Builder, Gravity form, Ninja form, Jet form builder, Formidable forms, and many others. Elementor itself has a contact form in the pro version.

You can use any Elementor Contact Form plugin discussed above. But for example, here we take Lead Form Builder.

Now here we share the step-by-step procedure about how to set up a contact form with Elementor. But before we begin, make sure that you have installed and activated the Elementor plugin on your website.

Let’s start a step-by-step process of adding a Contact form with Elementor.

Step 1: Installation of Lead Form Builder

Go to the Dashboard and navigate to WP-admin > Plugins > Add New. On the right-most top see the search box, type here ‘lead form builder‘. Then click on the ‘Install Now‘ button.

How to set up Contact Form with Elementor

Step 2 : Activation process

After the completion of installation, click on the ‘Activate‘ button. After activation, you can access the lead form builder.

How to setup contact form with Elemntor

Step 3 : Create your Elementor contact form

After successful completion of step 2, you find Lead Form Builder in your Dashboard menu. You will be redirected to the setting page of Lead Form Builder.

Now in the next step, you give the title name to the contact form like ‘Contact Us’ and then start to add the Field name, Field Type ( drop-down and select the field ), Default Value, Use Default value as Placeholder. So you can customize the field form as per your requirement, like in the first field name you can set the Name, then in the Field type drop-down and select the same, in Default box you also type the Name and after this process, your first row has been completed. Now you click on the ‘Add New’ button and add any number of the row as per your requirement and after the completion of the form, click on the ‘Save Form’ button to save the credential. You can check the demo below:

How to setup contact form with Elemntor

Step 4 : Edit Form With Elementor

After completing Step-3, now you go to the WordPress Dashboard and navigate to WP Dashboard> Pages > Add New. Now you open the new page, in the next process, you need to click on Edit with Elementor button. We show in the image below:

After clicking the ‘Edit with Elementor button’, you will find the page something like below.

We have already added the Lead form Builder with the title name ‘Contact Us’, So if we write the Contact Us to the Add Title then we will directly move to the form page.

Otherwise, in the next step, you need to click on Edit with Elementor button, and then you go to the page something like below:

How to setup contact form with Elemntor

You see in the above picture, in the center you find the ‘Drag widget here’ and in the left side menu bar, you see the list of Widgets. Now you need to scroll the Elements from upside-down and find the ‘Lead Form Styler’ widget.

In the next step, you have to drag the ‘Lead form Styler’ widget and drop it into the center ( Drag widget here ). Now you find your contact form like this:

After this, in the left menu bar, you see the Select Form icon, from here you need to select a form. Select the form ( Contact Us ), the form showing like this:

How to setup contact form with Elemntor

Step 5 – Customize the Form

If you want to change the icons, text, color, spacing, typography, and padding, then you can go to the ‘Style’ and ‘Advanced’ settings on the left side menu bar. In this, you find the options for customization of the form. These are:

  • Lead Form General Style – To set the container size and its alignment
  • Label and Title Styling – From here you can change the label color and typography style, hide all field labels, hide the Title and also change its color and typography.
  • Field Styling – From this option, you can change the color of the field background and input text, you can set the spacing between label and field and between fields as per your need. Also, you can set the padding and field margins.
  • Radio and Checkbox Styling – In this option, already given the default style. But if you want to change, you can set the size, spacing, and border-radius according to your need.
  • Button Styling – In this option, you can set the submit button padding, margin and typography style as per your requirement. You can also set the button dimensions (width and height), button text and background color, border radius, and more.
  • Attribute and Custom CSS – It offers you to add custom HTML attributes to any elements and add CSS code to any widget. If you want to use these options, you need to subscribe to the Pro version of this Plugin.

Besides, you can also set the ‘Motion effects’, ‘Background color’ of the form. If you want to hide the ‘form’ on your desktop, mobile, or tablet, you can be fixed this under the ‘Responsive’ option.

Step 6 – Publish

After following all the steps, now is the time to Publish the Contact form. It is very easy, just click the Publish button on the bottom left corner of the page and you will see the Contact form is successfully added to your website. You can see in the below picture:

How to setup contact form with Elemntor

Wrapping Up

The Contact Form is an integral part of the website. With Contact Form, you can easily connect with your users. In this blog, we shared the step-by-step process to create the Contact Form.

We hope this article will help you how to set up Contact Form with Elementor. If you have any doubt or ask something regarding this article, please feel free to contact us.

Read More