Both Elementor and Contact Form 7 are two of the most popular WordPress plugins. Elementor is the most popular page builder plugin while Contact Form 7 is one of the most popular form builder plugins. You can integrate these plugins to create a better contact form on your website.
You can actually create a beautiful contact form with Elementor only. However, you have to upgrade to the pro version since form element is only available on the pro version. Thankfully, Contact Form 7 works through shortcode and the shorcode element is available on the free version of Elementor so you can create a beautiful contact form for free on WordPress by integrating Elementor and Contact Form 7.
Integrating Elementor and Contact Form 7
Before getting started, make sure you have installed both Elementor and Contact Form 7 on your WordPress. Once you ready, follow the steps below.
Create a new form on Contact Form 7
First off, create a new contact form on Contact Form 7. To do so, click the Contact menu on your WordPress dashboard and select Add New.
Give your contact form a name and set all of the elements like email address, name and subject. Click the Save button to save your new form. Once you are done creating the new contact form, copy the shortcode of the form.
Start integrating
To start integrating Contact Form 7 with Elementor, create a new page (Pages -> Add New) and edit it with Elementor by clicking the Edit with Elementor button. Or you can also edit an existing Elementor template on your website.
On the Elementor editor, design your page by adding the elements you want. To add the form you have just created on Contact Form 7, add the shortcode element.
Paste the shortcode of your contact form to the available field.
Once you are done creating your page, publish it.
That’s it. You have successfully integrated Elementor with Contact Form 7. In addition to Contact Form 7, you can also integrate other plugins that work through shortcode with Elementor.
Looking to create a new website with Elementor? We strongly suggest use an Elementor hosting service that has a built-in CDN feature for a better performance. Some WordPress hosting services that have a built-in CDN feature are Kinsta, Rocket.net, Pressidium, and Pressable.
