How to Use Contact Form 7 with Elementor [+video guide] (2023)

Did you ever face trouble contacting the authorities?

The answer is affirmative, right?

To be honest, you’re not alone in this sector. Most of the consumers like us cannot get proper service from a company just because of communication gap.

Recently Drift conducted research about the importance of contacting customers. The result shows that there’s a 10x decrease in sales just because the company didn’t respond within 5 minutes.

So, what will happen if you don’t have any contact form? You might lose more than 90% of your customers.Do you want to lose your customers?

I don’t think so!

So, how can you overcome this issue?

Well, it’s simple! Just add a contact form to your website and you are done!

In this section, I’m going to share the easiest procedure to design a contact form using Elementor contact form 7.

Let’s hit it!

How to Design a Form with Elementor Contact Form 7

Fortunately, adding a contact form on WordPress websites isn’t complicated. In fact, it becomes easier than ever with the Elementor page builder and Contact form 7.

By the way, you have to set up the environment before designing a contact form for your WordPress website. Here are the recommended tools that you have to install to design an eye-catchy contact form.

Get ElementsKit

(Video) Setup Contact Form 7 in Elementor the Right Way (Contact Form 7 Tutorial)

Get ElementsKit Pro

Done with installing? It’s time to start designing an Elementor contact form. Let’s get rolling.

Step #1: Get into the canvas

Login into your website admin dashboard panel. Create a blank post and Name it. After the naming, click on the ‘Edit with Elementor’ button.

How to Use Contact Form 7 with Elementor [+video guide] (1)

Creating the canvas

Step #2: Add a Contact Form on Your Post

Now, it’s time to add a contact form to your blog post. You can do it simply by drag and drop the “contact form 7” icon into your post. It will automatically show a contact form on your post.

However, you may get a 404 error message. Nothing to worry about that at all! It will happen if you don’t select any contact form from the drop-down menu.

How to Use Contact Form 7 with Elementor [+video guide] (2)

Adding a contact form

Step #3: Typography Style

In this section, we will change different sections like font family, font size, weight, transformation, font style, decoration, line height, letter spacing, etc.

How to Use Contact Form 7 with Elementor [+video guide] (3)

Styling typography

Remember, changing these options won’t affect the responsiveness of your website.

Step #4: Customizing Input Area

Besides customizing the text area, you can change the input box too. ElementsKit allows you to customize the padding, width, input box height, text height, and margin-bottom of the input box.

How to Use Contact Form 7 with Elementor [+video guide] (4)

Customizing input box

Step #5: Customizing Input Area Background

By this time, we’ve completed designing our texts and customized texts of our Elementor contact form. Now we will change the background color, design, shadow, etc of our text area.

How to Use Contact Form 7 with Elementor [+video guide] (5)

Customizing input area

You can also colorize the input box with multiple colors and shadows. However, I cannot resist myself to mention one of my most favorite features in this part. And that is, you can add these shadows and colors both on the internal and external sections of your contact form.

(Video) HOW TO ADD A CUSTOM CONTACT FORM 7 IN ELEMENTOR (Elementor Contact Form 7 Tutorial)

Point to be noted: you can perform all of these actions both for hover and focus options. Awesome, isn’t it?

Step #6: Modifying Submit Button

Well, we are now in the last section of designing our contact form. Yes, you’ve got it! We will modify the Submit button here.

ElementsKit allows you to change the alignment, typography, border-radius, margin, padding, color, box-shadow, text-shadow, border type, etc.

How to Use Contact Form 7 with Elementor [+video guide] (6)

Customizing submit button

And, that’s it! We just completed designing our contact form. I hope, you have also completed the design without any problem.

Designing Elementor Contact Form with ElementsKit Layout

In this section, I’ll show you the process of adding a contact form to your post by using the ElementsKit layout.

To ease the process even more, I’ll add a video tutorial too. Hope that it will help you. Now, let’s focus on the tutorial.

Step #1: Inserting the Form

At first, choose a contact form design from the ElementsKit layout library. Head to the ElementsKit icon > Section > Contact form.

In this section, you will notice three different contact form design for your blog post. Simply choose your desired design, and add to your post by clicking the ‘Insert’ button.

How to Use Contact Form 7 with Elementor [+video guide] (7)

Inserting contact form from layout

Step #2: Customizing the Contact Form

Your desired contact form will become visible to your blog post. Now it’s time to customize the color, margin, padding, font, text box, etc of your contact form.

Fortunately, the customization process is 100% similar to the previous one. Follow the previous procedure from step #3 and you’ll get it.

If you face any trouble to design a contact form for your WordPress website, check the video. It will get everything covered.

That’s it! I hope, you have successfully added an Elementor contact form on your webpage. Designing a form with Contact Form 7 and ElementsKit is the easiest process let alone taking the time.

Get ElementsKit

Get ElementsKit Pro

(Video) Contact form 7 Elementor | 100% Free With Elementor | Elementor WordPress tutorial

Importance of Using Contact Form

A case study of Venture Harbour shows that they boost up their conversion rate by about 743% only by optimizing their web forms. You can also boost your sale just by implementing an appropriate contact form.

Let’s have a look at a few other importance of using a contact form on your website.

  1. Professionalism

A website looks incomplete without a contact form. Adding an appropriate contact form increases professionalism as well as works as a medium of communication between the consumers and webmasters.

You may add the form link on your transparent sticky header aka primary menu. It makes the form easily accessible as well as looks professional.

By the way, if you want to create a high-converting web form automatically, you may use the MetForm plugin. We have lots of premium predesigned form on MetForm. Simply choose one and customize it.

It won’t take more than few minutes to create a professional looking web form by using MetForm.

Get MetForm

Get MetForm Pro

  1. User-friendliness

A simple contact form keeps your website one step ahead of being user friendly. When a user lands on your website, he might want to communicate with you for different queries.

(Video) Add Contact Form 7 Form In Elementor Tutorial

If you don’t have any contact form, visitors can’t communicate with you. You might lose thousands of potential customers just because of this communication gap. Most importantly, these customers won’t visit your website further let alone recommend it to someone else.

And, you can also solve all of these problems and grow your business just by adding a proper contact form.

  1. Increase in Sales

Running a business successfully isn’t easy. You have to work hard and soul to improve the business. You may get surprised to know that you can increase your sale only by responding to the customer’s query faster.

You know, sales highly depend on the response rate. A report says that you have to face a 10x decrease in sales if you failed to respond to your customer’s query within 5 minutes.

How to Use Contact Form 7 with Elementor [+video guide] (8)

But it is possible to keep anyone available 24×7 in person. In this case, a contact form helps you a lot. It keeps the communication bridge open among both customers and website owners.

If you design a gorgeous looking contact form on your website, consumers will definitely use it and contact the owner.

  1. Stay Safe from Spamming

Exposing your email address or phone number directly on the website increases the possibility of being spammed. There are thousands of bots available which are continuously crawling the internet to collect the exposed emails.

Once you expose your contact info directly on your website, those bots will capture your email and deliver it to the spammers. Soon after that, your inbox will get flooded with unnecessary spam emails.

You can get rid of this solution by adding a contact form on your website. It will work as a security layer. By using advanced contact forms like contact form 7 will increase the security even more.

Contact form 7 will automatically filter the real messages from the spam box. Further, you can also add some security checks like reCAPTCHA, bot filtering, etc.

  1. Organize your contacts

An appropriate contact form helps the business owner to keep the customer’s informations organized. Thus you can contact the customers effortlessly whenever needed.

  1. Reachability

Most of the business owners use their social media profile to communicate with the customers. Well, it might be a good platform for social media lovers. But, what about the customers who don’t active on social media sites?

You’ll definitely lose them. That’s why it is always preferable to communicate with your consumers on your own. And, a proper contact page creates the bridge between the consumers and the business owner.

Wrapping Up

We are about to leave the page. By this time, you must have good knowledge about contact forms, the importance of contact form, and the process of adding a contact form on your website.

What are you waiting for? Add an Elementor contact form today and grow your business. If you have any confusion about this process, don’t hesitate to contact us via our Contact Us page.

Don’t let the communication gap create a barrier between you and your customers.

(Video) Contact Form 7 Tutorial


How to integrate contact form 7 with Elementor? ›

Open the page where you want to add your contact form to with Elementor page builder. Find the Contact Form 7 widget, then drag and drop it to the page. The next step is to select the form template in the drop-down list. As you can see the form is totally white.

How do I use contact form 7? ›

Log in to the WordPress Admin Dashboard, go to Plugins → Add New and then type “Contact Form 7” in the search box. Once find, install and activate the plugin by clicking on Install → Activate. To display a form, open Contact → Contact Forms at your WordPress dashboard. You can manage multiple forms from this location.

How do I configure contact form 7? ›

To do so, in your WordPress dashboard, select Plugins → Add Plugin from the menu. Then type Contact Form 7 into the search function. Once the Contact Form 7 plugin is displayed, click Install → Activate. Once it's activated, you can find the plugin's functionality in the new Contact area of your WordPress dashboard.

Why is my contact form not working Elementor? ›

If your Elementor contact form is not working, it's probably because emails from your site are being treated as spam. When your Elementor form sends an email, it uses the wp_mail() function. This sends emails through your hosting provider without authentication.

What is the easiest way to embed a video in WordPress? ›

How to Embed Video in the Sidebar or Footer
  1. Find the video you want to embed and click on the Share button.
  2. Copy the URL.
  3. Inside your WordPress admin panel, go to Appearance → Widgets.
  4. Drag a video widget to the necessary location.
  5. Click Add Video.
  6. Select Insert from URL and paste the video URL in the given space.
Aug 2, 2021

How do I add floating text to video? ›

How to Add Text to a Video:
  1. Upload your video. Click on 'Choose Video' and select your file to upload it to VEED. ...
  2. Add text. Start adding text by clicking on the 'Text' tool on the left menu. ...
  3. Export. Save your video with the text you typed by clicking on 'Export'.

What is text overlay in video? ›

Text overlay or video overlay refers to adding a text element over a video file so that users see text appear on their screen while watching a video. Text overlay is one of the most important components of social video, a growing trend in social media content.

Which is better contact form 7 or WPForms? ›

WPForms is far better than Contact Form 7 because it has a beginner-friendly drag & drop form builder interface whereas you have to build a contact form using code in Contact Form 7. Even when comparing just the WPForms free version, WPForms comes with better spam protection, customization options, and more.

How do I get data from contact form 7 in WordPress? ›

Because Contact Form 7 stores its contact form data as a custom post (post type: wpcf7_contact_form ), you can export and import form data via Tools > Export and Tools > Import in the WordPress admin screen. In the Export menu, choose Contact Forms if you want to export contact form data only.

Does contact form 7 require SMTP? ›

Does Contact Form 7 Use SMTP? No, Contact Form 7 doesn't use SMTP by default. Instead, it sends emails through your web server, which is unreliable and can cause your contact form emails to get lost. You can install the WP Mail SMTP plugin to easily enable SMTP in Contact Form 7.

How do I customize contact form 7 in WordPress? ›

In the left-hand admin panel, click Contact Style and select the Add New option. The Contact Form 7 Style plugin page has a very detailed demo video on how to style a form. You can change the margins, background color, border color, button color, text box color, and much more.

How do I redirect a page in contact form 7? ›

1. Redirection for Contact Form 7
  1. Go to Contact >> Contact Form.
  2. Select the Redirect Settings tab.
  3. Choose the page where you want to redirect the users from the drop-down menu. ...
  4. Click Save.
Sep 29, 2020

What is the CSS code for contact form 7? ›

Each Contact Form 7 form uses the CSS class . wpcf7 that you can use to style your form.

How do I create a custom contact form in Elementor? ›

Creating a contact form with Elementor can be achieved by using the Form Widget in Elementor Pro. Simply drag a form widget to your page from the editor panel and use the controls to create a beautiful and responsive form on your website.

How do I link a contact form to an email Elementor? ›

Add Contact Form with Elementor Pro
  1. In Elementor, this is the widget called “Form”.
  2. To add a field to your Elementor form, click “Add Item“:
  3. In the Elementor editor, click on “Email” to display the available options:
  4. Click “Additional Options” and then click the toggle switch for “Custom Messaging” to “Yes.”

How do I create a pop up contact form in Elementor? ›

Using this guide, you will manually trigger a popup using a button.
  1. Go to Dashboard > Templates > Popups > Add New.
  2. Name your template and click 'Create Template'
  3. Choose a template from the Library or create your own design.
  4. Click 'Publish', then 'Save and Close'
  5. Open a new page in Elementor (CTRL / CMD + E, new page)

Why is video not embedded in WordPress? ›

Why Is My Video Not Embedded in WordPress? Check the settings to make sure that you allow embeds in your WordPress site. Head to Settings → Media, and under Embeds, check the option When possible, embed the media content from a URL directly onto the page.

Why can't I watch embedded videos? ›

If you cannot play embedded videos in chrome, a good solution would be to delete all the cache and history, here is how. Step 1: Launch Chrome and go to Settings > Privacy and Security > Clear Browsing data. Step 2: Go to the Advanced tab and select all the options. Now click on 'Clear Data'.

Why are embedded videos not working? ›

Open the Settings of Google Chrome. Go to the Privacy and Security category and open Site Settings. If the JavaScript is disabled, then you should enable it. Relaunch Chrome and play the video again.

Is it better to embed a video in a website? ›

Video embed benefits your overall search engine optimization, as your video will play faster and have better quality when hosted on a third-party server. Additionally, since different browsers support different video formats, you'd have to convert your video files for each browser and upload and host multiple videos.

What is the best video format for WordPress? ›

With that said, we recommend using MP4 format for video on WordPress. MP4 is a popular format that is compatible with most devices and browsers.

What is the best way to embed a video in a website? ›

The good news is, it's really simple.
  1. Step 1: Edit your HTML. Go into edit mode for the page, post, or section of your website where you'd like to embed the video. ...
  2. Step 2: Copy your embed code. Next, copy your embed code. ...
  3. Step 3: Paste the embed code into your HTML.
Feb 19, 2022

What's the difference between embed and video? ›

Let's discuss the difference between embedding and linking videos. An embedded video lets you borrow the video from another platform. Visitors can watch the video on your website without leaving the current page. In contrast, linking a video shares the URL of the video.

What does embedding a video mean? ›

Definition: Embedding refers to the integration of links, images, videos, gifs and other content into social media posts or other web media. Embedded content appears as part of a post and supplies a visual element that encourages increased click through and engagement.

How do I make a video with text and audio only? ›

How to create a video with text:
  1. Upload. Drag and drop your video into VEED. It's all online, no software required!
  2. Add text. Just click on the 'Text' tool, and 'Add New Text'. ...
  3. Download. Once you're happy with how your new video-and-text-combo looks, hit 'Download', and you're ready to share it with everyone.

What are video overlays called? ›

A video overlay, also called a picture-in-picture effect, is an editing tool used to enhance any video by adding additional items that are customizable for many different purposes.

How does video overlay work? ›

A video overlay is simply a term for any time that you have a video and you add another video layer on top of your original video. The goal of this extra layer is not to replace or cover your original video, but rather add an extra element or give footage a texture or feeling.

Are contact forms outdated? ›

Because there's a common misconception that contact forms are an outdated method of communication, that nobody ever really uses them anymore, and that it's virtually impossible to screw up a simple form design anyway. All of these statements are myths.

What is the easiest contact form for WordPress? ›

WPForms is the best free form builder plugin for WordPress for a lot of reasons. It's a beginner-friendly contact form plugin that's easy to use yet very powerful. WPForms is also the most popular form builder for WordPress with 5+ million active installations and 12,000+ 5-star reviews.

Which contact form is best in WordPress? ›

  1. WPForms. WPForms is the best contact form plugin for WordPress. ...
  2. Formidable Forms. Formidable Forms is another contact form plugin that comes with a drag-and-drop form builder. ...
  3. Forminator. ...
  4. Ninja Forms. ...
  5. Gravity Forms. ...
  6. Jetpack Forms. ...
  7. Contact Form 7.
Mar 30, 2022

Where do contact form 7 submissions go? ›

Contact Form 7 submissions will go straight to your email inbox.

How do I integrate contact form in WordPress? ›

In your WordPress dashboard, go to Appearance » Widgets and navigate to the WPForms widget. Then, drag the widget to the sidebar area on the right-hand side of the page. Add the title for your widget and select your form from the drop down menu and click the Save button. That's it!

How do I create a multi step form in contact form 7? ›

Create a Contact Form 7 form. Place your cursor at the end of the form. On the “Form” tab of the Contact Form 7 form, click on the button named “multistep”. In the window that pops up, check the checkbox next to “First Step” if this is the first step of your multi step forms.

What are the five mandatory commands used in SMTP? ›

List of All SMTP Commands and Response Codes
  • AUTH.
  • ATRN.
  • BDAT.
  • ETRN.
Aug 14, 2019

Is radio button required in Contact Form 7? ›

Starting with version 4.9, Contact Form 7 (CF7) has made it mandatory to have a default option checked for radio buttons. If a radio button is not selected, a validation error will appear. In other words, it is now required to have a default radio button pre-selected.

What mail server does Contact Form 7 use? ›

By default, Contact Form 7 sends emails using the wp_mail function, which relies on the PHP mail function of your hosting server. Some hosting providers, like GoDaddy, don't support the PHP mail function, which is why WordPress can't inform you about the messages left on your site.

How do I show contact form 7 in a popup in WordPress? ›

The Contact Form 7 plugin is required for this plugin. So if you don't have the Contact Form 7 plugin installed, make sure you install this plugin as well. After installing the plugin, activate it. Then go to Dashboard > Contact > Popup.

How do I send contact form 7 from WordPress? ›

How do I send with Contact Form 7 and Postmark for WordPress?
  1. Prerequisites. If you have not already done so, create a Postmark account and install/configure the Postmark for WordPress plugin. ...
  2. Install Contact Form 7. ...
  3. Set where emails will be sent to. ...
  4. Add the form to a page. ...
  5. Send a test form submission.
Jun 11, 2020

How do I add an email contact form 7 in WordPress? ›

Setting up mail
  1. To field# Set the recipient email address here. ...
  2. From field# Set the sender email address here. ...
  3. Subject field# Set the subject of the message here. ...
  4. Additional headers# You can insert additional message header fields here, such as Cc and Bcc. ...
  5. Message body# ...
  6. File attachments# ...
  7. Mail (2)#

Where do contact form 7 Submissions go? ›

Contact Form 7 submissions will go straight to your email inbox.

How do I receive emails from contact form 7? ›

To access the mail delivery settings, go to the contact form editor and select the “Mail” tab. Mail delivery settings in Contact Form 7. Contact Form 7's mail delivery settings let you customize the templates and parameters that are used to generate and send a notification to you after someone makes a form submission.

How to add contact form 7 in HTML? ›

Adding HTML links to your Contact Form 7 forms (with Visual...
  1. Go to your Contact >> Contact Forms >> Form.
  2. Scroll down to the Skins section.
  3. From the FIELDS (CF7 SKINS ITEMS) section, drag and drop a new HTML element to the desired position in the form.
  4. Click the Edit icon of the HTML element.
Nov 18, 2018

How do I incorporate a contact form into my website? ›

Installing the contact form on your web site
  1. Unzip the downloaded contact form code.
  2. Edit contactform.php and edit the email address to your email address. ...
  3. Upload the folder contents to your website (to a sub-folder say, /contact)
  4. The contactform.

How do I add contact forms to WordPress Elementor for free? ›

How to Make a Free Elementor Contact Form
  1. Install the WPForms Plugin.
  2. Make Your Elementor Contact Form.
  3. Set up Elementor Form Notifications.
  4. Set up Elementor Form Confirmation Messages.
  5. Create Your Elementor Contact Us Page.
  6. Publish Your Elementor Contact Us Page.
Jul 6, 2022

How do I set up two email addresses in contact form 7? ›

How To Send Contact Form 7 To Multiple Email Addresses
  1. Add CC & BCC Tags to Additional Headers Section. *A quick reminder that if you use CC, all recipients will see who received the email, use BCC to hide a recipient. ...
  2. Note the name of each field. ...
  3. New Mail Tags Available For Use. ...
  4. Add Mail Tags To Additional Headers.
Sep 10, 2016

How do I link a contact us form to my email in WordPress? ›

Activate the Contact Form to Email plugin through the Plugins menu in WordPress. Configure the contact form settings at the administration menu >> Settings >> Contact Form to Email. To insert the contact form into some content or post use the icon that will appear when editing contents.

How to design contact form 7 email template? ›

To design the email that Contact form 7 sent through Elementor, After installing Elemailer Lite from the WordPress repo, Elemailer > Form templates > Add New. Design your email template and here you can use shortcode of CF7. Publish the template.


1. How to customize contact form 7 with elementor
(Farjana Rashid)
2. Contact form 7 Complete Tutorial using Elementor free
(Suhail Ahmad - Wordpress Tutorials)
3. Creating A Contact Form Using Contact Form 7 in WordPress
(Bryce Matheson)
4. How to Configure and Style a Contact Form 7 (Elementor Contact Form 7 Tutorial)
(Exclusive Addons)
5. How to use Contact Form 7 in WordPress Tutorial | Quick Tips
(Quick Tips)
6. New Elementor Contact Form setup | Elementor Pro Contact Form Tutorial
(Quick Tips)
Top Articles
Latest Posts
Article information

Author: Kareem Mueller DO

Last Updated: 03/20/2023

Views: 5905

Rating: 4.6 / 5 (66 voted)

Reviews: 81% of readers found this page helpful

Author information

Name: Kareem Mueller DO

Birthday: 1997-01-04

Address: Apt. 156 12935 Runolfsdottir Mission, Greenfort, MN 74384-6749

Phone: +16704982844747

Job: Corporate Administration Planner

Hobby: Mountain biking, Jewelry making, Stone skipping, Lacemaking, Knife making, Scrapbooking, Letterboxing

Introduction: My name is Kareem Mueller DO, I am a vivacious, super, thoughtful, excited, handsome, beautiful, combative person who loves writing and wants to share my knowledge and understanding with you.