How to Add and Customise Contact Form 7 with Elementor

Have you been using Elementor to manage your website? Great choice! Now that you’ve designed a great website and attracted some visitors to your site, you may also want to capture their interest and then engage with them to increase your sales. Well, the next step is to add a WordPress Forms to your pages. If you haven’t included forms on your website already, Contact Form 7 is a good form plugin to start with. It’s not only free but it’s also a popular and versatile form plugin for WordPress that allows you to create simple forms easily. What’s even better is that it perfectly integrates with Elementor.

The question is, how do you add and customise Contact Form 7 with Elementor? Don’t worry, we’re here to help!   

In this article, we’ll guide you through the process of adding and customising contact forms within an Elementor-designed page. Here’s a step-by-step guide:

Step 1. Install and activate Contact Form 7 and Elementor plugins

If you haven’t already, install both the Contact Form 7 and Elementor plugins on your WordPress website. To do this, 

1. Go to your WordPress Dashboard and navigate to “Plugins” > “Add New” 
2. Search for “Contact Form 7” and “Elementor”, and click “Install Now” for each plugin. 
3. Once installed, click “Activate“.

Step 2. Create a contact form with Contact Form 7

Once you have both Contact Form 7 and Elementor, the next step is to create a contact form. Here’s how to do it:

1. Go to “Contact” > “Add New” in your WordPress Dashboard, you’ll find a default form.
2. Edit the form template and customise the form fields.
3. Click “Save” and copy the shortcode provided in the “Form” box.

Step 3. Edit a page or post with Elementor

You need a page or a post built with Elementor in order to customise Contact Form 7 with Elementor. If you don’t have one already, you can easily create it by following the steps below:

1. Go to “Pages” or “Posts” on your WordPress dashboard and create a new page or post, or edit an existing one. 
2. Click the “Edit with Elementor” button to open the Elementor editor.
3. Design the post or page the way you want. 

Elementor provides a simple drag-and-drop interface to design your website. However, make sure you have the basic knowledge of the tool’s functionalities so it doesn’t take you forever to build a page. You can find many resources on the internet about using Elementor tools.  

Step 4. Add the Contact Form 7 shortcode to your Elementor page

Your form’s ready and you’ve published an Elementor-designed page. Now, you need to add your Contact Form 7 shortcode to your page. You can do this on Elementor editor by following the steps below: 

1. In the Elementor editor, search for the “Shortcode” widget in the panel. 
2. Drag and drop the widget onto the page where you want the contact form to appear. 
3. In the “Shortcode” widget settings, paste the Contact Form 7 shortcode you copied earlier.

Step 5. Customise your form’s appearance with custom CSS

To style your Contact Form 7 form, you’ll need to add custom CSS. You can do this in a couple of different ways:

• Add CSS directly to the page: You can add your CSS code in the Elementor editor by clicking the gear icon at the bottom left. It opens the “Page Settings” panel where you can locate the “Custom CSS” field and add your custom CSS code under “Advanced”.
• Add CSS using a theme or custom CSS plugin: Alternatively, you can add your custom CSS to your theme’s stylesheet through a custom CSS plugin, such as “Simple Custom CSS” or “WP Add Custom CSS”. 

Step 6. Save and preview your changes

After adding and customising your Contact Form 7, click the “Update” button in Elementor to save your changes. Preview your page or post to ensure the contact form appears and functions correctly.

Keep in mind that it’s crucial to correctly configure Contact Form 7 to receive submissions. Make sure you have the right email addresses mentioned and there are no spelling mistakes in the “Forms”, “Mail”, “Messages”, and “Additional Settings” tabs.

👉 Read this article to know how to correctly configure Contact Form 7.   

Conclusion

Contact Form 7 is a great free WordPress form plugin, and it works perfectly with Elementor. However, you should keep in mind that customising Contact Form 7 with custom CSS may require some CSS and web design knowledge. While you can learn simple commands or use plugins to customise general form designs, you may also consider using a form builder plugin with built-in styling options if you’re not familiar with CSS. Some famous examples of optional WordPress form plugins include Elementor Pro’s Form widget, WPForms, Ninja Forms, etc. These forms offer more straightforward customisation options for beginners.

If you have been generating leads on your website through WordPress contact forms, you probably know that one of the most important things is to contact your leads fast. Well, most WordPress form plugins allow you to receive your leads in your email inbox. However, manually sorting the data, managing it on your spreadsheets, and then finally contacting your leads can be quite inefficient. Things can get even more complicated if you prefer running your sales process from a smartphone. How about installing a free mobile-first tool that helps you receive your leads in real time and allows you to contact them instantly? 

Privyr is a mobile-first CRM that allows you to not only receive your leads on your smartphone instantly, but also lets you run your whole sales process from a smartphone. It integrates with all WordPress form plugins, as well as popular messaging apps like WhatsApp, SMS, or iMessage, so you can contact your leads within seconds of receiving leads from the contact form. But wait, there’s more! The tool is also designed to help you seamlessly run your sales process, and you can learn to use it within a minute. 

So what’s keeping you from staying ahead in your sales game? Try Privyr for free today!