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.
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.
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.
Step 3 — The next step is to select the form template in the drop-down list.
Step 4 — As you can see the form is totally white. Click the Edit Section option and open the Style tab.
Step 5 — In the Background accordion block you can decide if you want the background to be an image, a video or a gradient.
Step 6 — Finally, go back to the Contact Form 7 widget settings and open the Style tab and style up the contact form.
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!