Back to contents

How to add Contact Form 7 to the page built with Elementor using JetElements

This step-by-step tutorial will take you through the process of adding the contact form to your website to enhance it with additional communication channel.

Contact form is a vital element of any site. That’s why there are so many plugins for contact forms in the WordPress directory. One of the most well-known plugins is Contact Form 7. It allows you to create versatile forms. Moreover, it’s completely responsive and customizable within the Contact Form 7 widget by Crocoblock. Thanks to the contact form your visitors can easily get in touch with you directly via the website.

Before we start, please, make sure you have Contact Form 7 and JetElements plugin installed and activated.

Building a contact form

Step 1 — Open your WordPress Dashboard and go to Contact > Add New.

WordPress dashboard

Step 2 — In the Form tab panel, you can see a form template where there is Your Name field, Your Email field, Subject field, Your Message field, and the Send submit button. This is the classic contact form. You can edit it using the tag-generator tools. If you need any extra help, read a tutorial on Editing Form Template.

Contact Form template

Step 3 — Give your contact form a name by typing it in the Title field.

Step 4 — In case you want to customize the Mail template, the Messages or some Additional Settings, look through the corresponding tabs.

Step 5 — Scroll down to the bottom of the page and click the Save button to save all the changes.

Adding the contact form to your page

Step 1 — Open the page where you want to add your contact form to with Elementor page builder.

Step 2 — Find the Contact Form 7 widget, then drag and drop it to the page.

Contact Form widget in Elementor

Step 3 — The next step is to select the form template in the drop-down list.

Contact Form widget content settings

Step 4 — As you can see the form is totally white. Click the Edit Section option and open the Style tab.

Contact Form fields

Step 5 — In the Background accordion block you can decide if you want the background to be an image, a video or a gradient.

Contact Page demo

Step 6 — Finally, go back to the Contact Form 7 widget settings and open the Style tab and style up the contact form.

Contact Form ready

Step 7 — Click the Publish button at the very bottom of the Elementor panel.

So now you should be afraid of nothing when it comes to creating a contact form!