Being able to get in touch is one of the most common goals for your website users. In this video, you’ll learn how to use Elementor along with popular WordPress plugin Contact Form 7 to make a contact form for your website.
How to Build a Contact Form with Elementor
In this tutorial I’ll show you how to use the Pro version of Elementor to create a contact form. In case you don’t have access to Elementor Pro I’ll also demonstrate two ways of creating contact forms using the free version. Let’s get started!
Our Elementor Contact Form
During this tutorial we’ll be building the following contact form:
What You’ll Need
All you need to build this form is a WordPress installation with Elementor installed, a basic understanding of how WordPress works, and a spare half an hour. You may also find the resources listed below helpful.
- How to Install WordPressRachel McCollin17 Apr 2020
- How to Create an Elementor Landing Page for WordPressAdi Purdila11 Mar 2021
- How to Create an Elementor Coming Soon Page for WordPressNitish Kumar27 Sep 2022
What We’ll Cover in this Tutorial
The following timestamps mark useful sections of the tutorial which you may want to revisit later on.
- Setting up the landing page (which we built in a previous tutorial)
- How to add a free contact form with the Elementor HTML widget
- How to add a free “contact form 7” form with Elementor
- How to add a contact form with the Elementor form widget (Pro version)
Premium WordPress Themes and Plugins
Once you have your site set up, you’ll want to explore the thousands of WordPress themes on ThemeForest and WordPress plugins on CodeCanyon. Purchase these high-quality WordPress themes and plugins and improve your website experience for you and your visitors.
You’ve Built a Contact Form for WordPress!
If you followed along you should now be looking at your own Elementor contact form for WordPress. I hope you’ve seen how easy it is to work with Elementor (even the free version is a great visual builder) and feel confident enough to have a go on more designs yourself.
Stay tuned for more practical tutorials coming soon, and don’t forget to check out more Elementor resources on Tuts+!