In this elementor contact form 7 setup tutorial, I’ll show you how to add a contact form to your Elementor website using the contact form 7 WordPress plugin.
I’ll also show you how to customize your contact form by adding/removing input fields, email subject, mail settings, and adding a reCAPTCHA to your contact form 7 to limit abuse and spam.
We’ll look at two different ways to add contact form 7 to the Elementor website for free using the Premium Addons contact form 7 widget to style our contact form.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Video: Elementor Contact Form 7 Tutorial
Creating a Contact Form
To create a contact form, first, you need to install the contact form 7 plugin.Â
To do this, go to Plugins > Add new on your WordPress dashboard, search for contact form 7 then install and activate it (02:49).
After installing your plugin, there will be a new menu item on your dashboard called Contact, when you click on it, you’ll see the default contact form that’s created when you install the contact form 7 plugin (03:10).
Copy the shortcode of your default contact form, then go to Pages and open up your contact page with Elementor (03:23), this is where you’re going to add the contact form.
In your Elementor editor, add a new section on your contact page (03:36).
Go to your widgets area and search for the shortcode widget, drag it to your new section (03:41)
Select the shortcode widget and in the Edit Shortcode area on the left, under Content, paste the shortcode you copied from the contact form 7 plugin, and you’ll get the default form (03:52)
The shortcode widget in the free version of Elementor does not give you options to style your contact form, you can only be able to do this with the Elementor Pro form widget.
The other way you can create your contact form and be able to style it is by using the Premium Addons for Elementor.
Install Premium Addons for Elementor
Back in your WordPress dashboard, go to Plugins > Add new, search for Premium Addons, install and activate it. After it’s installed, it will show up as a menu item on your dashboard (05:22)
Click on the Widgets and Addons option, then activate the Premium Contact form 7 (05:29), then save changes.
Customizing Your Contact Form 7
To be able to add other fields to your contact form, on your contact forms options on the dashboard and click Add New (06:39)
Give your new contact form a name, and down on the Form option you’ll see that it has the default form fields; Name, Email, Subject, Message, and the Submit button, but here we want to add more fields to it (07:17)
Let’s start off with an option for website visitors to choose the device they have.
Below the Email field, click on the radio buttons option (07:20)
Under Options on the radio button type the options; IOS and Android, uncheck the ‘Wrap each item with label element’ option, leave everything on default, then click the Insert Tag button (07:35)
Back under the Form option, give it the label; Your Device (07:46)
Next, we add a field for our website visitor to choose their reason for contacting us.
Below the Your Device option, click on checkboxes (08:01).
Under the Field type option, make it a required field.
Under the Options, enter the different reasons for your web visitor to choose from; Phone checkup, Repair, Accessories, Chat with us.
Uncheck the ‘Wrap each item with label element’ option, leave everything on default, then click the Insert Tag button (08:33)
Back to Form, label it Your reason (08:40)
If you don’t want to use checkboxes for any reason, then you can just use the dropdown menu option (09:02)
Under the Options, enter the different reasons for your site visitor to choose from; Phone checkup, Repair, Accessories, Chat with us.Â
Check the Allow multiple selections option, and the Insert a blank item as the first option, then click the Insert Tag button (09:21)
The last field to add is the Contact field.
Back in your Form, go to the tel option (09:34)
Under Default value, add a sample phone number, check the Use this text as the placeholder of the field option, then Insert Tag (09:56)
Label it Zoom ID/WhatsApp contact, when you’re done adding your fields click the Save button.
When you save, you are automatically given a shortcode for this form (10:14), copy it.
Back in your Elementor editor, select the shortcode widget you had added before, and under content, paste the new shortcode, then click the Update button at the bottom (10:38).
We’re going to delete the Subject field because in this case, the subject is the reason.
So go back to your contact form on your dashboard, select the subject field and just delete it.
Then rename the Your message option to Brief description, then save.
To Read: Elementor Slide in Image on Hover using Premium Addons
Contact Form 7 Mail Settings
To make sure the emails sent via this contact form go where you want them, go to the Mail setting of your contact form;
The To field; is where you specify where the email is going to be sent. By default, it is set to send to the Admin email of the site, (you can find your admin email under General settings).
You can however add whatever email you want the emails to be sent to.
The From field; this field should include the domain name of your website in the address. Without it, the form will be invalid. So for this field, create an admin email at your website.com, for my case admin[at]elementorforbeginners .com
The Subject; this field displays your site title and then the subject of the message.
Remember, we deleted the subject field so we have to set up our Reason field to reflect here. To do this just copy the checkbox option and replace the subject option (14:33).
On the Additional headers option; here we set up the reply to the email so that after reading the email when you press reply, your reply will be sent to the email the person filled into the contact form (that’s on the your email option).
The Message body field; here you filter the information you want to be in the message body.
Here for example we show the person’s name, their email, the subject (which you should replace with the [checkbox] so that the Reason the client chooses is what shows up here). The message is also displayed here.
You can add the Contact: [tel] option here too (16:13).
Check the Use HTML content type option then save changes.
Contact Form 7 Message Settings
On the Messages option of your contact form (16:41), here you can set up how you want for example the error messages to look like, and when you’re done just save.
Go to your form preview and fill in some info into your form then send it, to test it out (18:04).
To Read: Create a Clean Modern Elementor Info Card with Curved Shape on Hover
Styling Contact Form 7 with Premium Addons for Elementor
Back in your Elementor editor, we need to style this order form. To do this we need a third-party addon from the premium addons for elementor.
Select the contact form section and duplicate it.
In the new duplicated section delete the contact form widget we’ve been using, then in your Widgets area search for the Premium contact form 7 widget and drag it to your section (19:57).
In the Edit Premium Contact Form 7 area on the left, under Content, you can choose which contact form to display, but first, click the update button and reload the page. After the reload when you select the premium contact form widget and go to Content, your form will show up and you can select it (20:28).
Select your form and under Style > Form, under Input field background, put a color of your choice.
For Border Type, select Solid. Under Color select blue and on Border Radius set 50 on all sides.
On Focus border color, set a color of your choice.
On the Labels option;
Set the Default font color to black, then under Typography set the font color to 25 pixels.
Under Input Typography, set the text color to blue, and under Typography set Size to 25 pixels.
Set the Placeholder color (the phone number) to a color of your choice.
On the Button option;
Set the Text color to white, set the background color to blue.
On Hover, set text color to white and background color to pink/red.
Under Content, go to Fields > Width, set the Input Field and Text Area options to 75%
On the Height option, set the Input Field to 70 pixels and the Text area to 150 pixels.
On the Button;
Set the Width to 75%
Back in your Contact Form on the WordPress dashboard, select the dropdown menu and delete it, then save your settings.
Click the Update button and then preview your page.
You can go back to your editor and increase your input fields to 100% so that they fill up the form space.
Add a reCAPTCHA to Contact Form 7Â
To stop abuse and spam on your contact form, you need to add a reCAPTCHA to it. To do this go back to your contact form on your dashboard, on the Integration option, go to reCapture, and click the setup integration button (26:05).
Click on the reCAPTCHA link then go to the v3 Admin Console (26:13),
Click the (+) icon to add a site, copy your website domain and paste it under the Label option, then on the reCAPTCHA type, check the reCAPTCHA v3 option (26:30)
Under Domains, add your domain name still, check the Accept reCAPTCHA Terms of Service option, then click the Submit button.
After submitting, copy the site key and the secret key, go back to integrations and paste them the save the changes.
When you reload your page, there’s reCAPTCHA at the bottom.
Also Read: How PX, EM, REM, %, VW, VH Work In Elementor
In Closing
That’s how you can create a custom contact form 7 and add it to your Elementor website, as well as edit it and add the reCAPTCHA feature for protection from spam and abuse.
For any comments or questions, let me know in the comments section below.
Remember to subscribe to my youtube channel and newsletter for more tips and tutorials.
