Complete Elementor Contact Form 7 Setup Tutorial for Free

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).

ZRzDHKfYRzzG0Ok HpLLK9AWOCYnYXD1rgVvMFgHpurvVb5lGU73AJJ0WaR5K JyN30UmUAuDmFDDfROu7rQ2OGtOi9k0EkWoalDQmJUOnAFgOeQAZwo3pQ t

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).

HIpvZwD5JGBUKtDs30BRZ1Rbq5LkXTIvkwuSdteh4nXPin035rnN8QO3No0 hFP2UOKKoUKYGx3Gatf3Z3K5dBs6Lt59sLJLq2ZZFSH 9OEZDet8awR0qTJ9J

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.

LDxCXAAuEVSEMJocpGeJDoG9e1 e6FdilzZ67

In your Elementor editor, add a new section on your contact page (03:36).

vqHThVdAQZez8UhpH72MoYTNWA iE1cxQAuJN6Wl

Go to your widgets area and search for the shortcode widget, drag it to your new section (03:41)

3wVmnuf7H2EG qrz9cTPnCgB4FJ3QzePE7gjQnrGrVgbIn5C8trU6WfTJ3Ms4CGO23M0cxI5D77mIreJygRwq1q7AlNxraRMbemOosqrteVVelaB3Ym

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.

To Read: Create Custom Elementor Tables with Images, Links, Icons and Lotties. Import Tables from CSV and Google Sheets

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)

pfYi F7CxdBW3 MIw a9MOtSCPVco2n8HUWSsKUPVVZi0ygj7wv9MNIf7R0QiNhGIRVtptAOVCemEuyolBpb lLDOIgLKcDcL2WlImVYtl

Click on the Widgets and Addons option, then activate the Premium Contact form 7  (05:29), then save changes.

7vvDh3kcXAf8pGM7iiA9aJPmzzmvDOmRDleHAwp1qZ2tRtXaTrEXv42yQFLHWJiooog75Gvscs3UyiLF3ASsaClBN4H 4GB9i4fqJ1rbFUqIqbQntak rrsjKU94N Ll6p1yqc8K

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)

qzpDUM m7BNHkWaAH EsBVgz aA4T74lMMo7fR9GMSSoLsFFTqTmVeivZFPSwE0pIrHX VgpL7Bm0HERmaEUcvmUMWkDrsHOSIYmekV cfMklumyUkesc0yYIfa2UY1QOviOG0o

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)

tiAZS vIB

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)

wF sTKJ9my 2BTAxDhdPawrCxsld0puYURTHF7wVJkkPCOwOE94hJGSiLxZaoAnHQFomWZQzHHdRjcXZb 8wrB7hjjymUa DbLeOOz51DdZ9MCGgMYFJlppNFZpTuhLwKUQGGfgh

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)

YvOF

Back under the Form option, give it the label; Your Device (07:46)

D4vrvIX5xnh Lz9XtMlaI glU2LTzC q5gTjSbll6ibTsFrWac49Z ngXXCtvuBDKUYczn9QLdCLNmdCepuvcE8jgaBisM8FrGTiHqmo79if7IUfXQUu8tHrQD2fu9 MZPchFVDR

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).

Ii 54ug97w8417C0 G2AJ0OsKa3akxFZwkciFMHky5y8t4xkP J8tTpYcFlaVeh5lfosuYe4wkSYcUERsb5dO3MeeKvU2UT01onsZgUqOTvkFUuwlh7LK9pJktACANEGsPF DFpU

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)

MhPbZkVH

Back to Form, label it Your reason (08:40)

iqgEVnfIfFZDfDbCXvIHAo9rDTVUIHJuHCZ6gRrC3poxvRT1FFtAGepSrFj74VLe5yth2jKu8MxY92H kM8WZW4BQqs5g2kNuLJqBvj7j5jrT5B6h4kSJEo7espSk4 SzKdwsHnw

If you don’t want to use checkboxes for any reason, then you can just use the dropdown menu option (09:02)

O0si6MB0J06BYQKVfdwLkVmZNSSYEKyXjL1uyGgF9cjVl37AWr5ZohiIzFZAj4spaJVIlF9P o6k8Xini h0L2SFk7Bv1w3R

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)

5uQ2QRdXndXROINQVEmTAL7DSIvn57zsWDVJZptq0Kq9U3etpfAt6VqN0tDpF7hlZDSGE33O8SSnywUOF3c3rarTpSVvYmtJXrBrhhOVJmzWhlc BlBOeDQSO2C6he 3 QTRfZ9g

The last field to add is the Contact field.

Back in your Form, go to the tel option (09:34)

mT4AT9oski5zbQfkVb4Ch W3592vusi Bkzuc WcVApzIBpgK 1eqthnGDy3UW0t2guA8nziRuwdG UI4y5YDCkcd 73ffoZIejbGfuixJn6h4nt UpfRgX5AFP3QSyd u0iB6R

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)

tXbFFxoSnPOf6CPRWPDMh5cJb0V38vdiLw0S6Tpvrcn57K VAxayeKur5digvq2B666lVPQP2r pVF GDT0CZFSdehXn 95b0eXJG3dMsNGDiietzCdd9mbhwTgiHrEbiSD2z MZ

Label it Zoom ID/WhatsApp contact, when you’re done adding your fields click the Save button. 

jIsi0rNNVY0LYVLt8GirvVrpaxzVygh8Ib6m5Xk7GubGl N2qt4Qm9kX16v4pnnh1SN6y HOGhwl91b7rDXeFAurwniJ00Ru9pTz

When you save, you are automatically given a shortcode for this form (10:14), copy it.

5LwVHcDvI8mrsgG YET1lo6uS4Wcf90GTEdvq0gIPeTo7jI5PgGVIX7DCKKyewa2vJONfXwzaSbgReC 8ZRf30dzx3yVZVIm ObilQjiEoGg EOa Vl5B4Q0s5Z8Nj vWX92mn Y

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).

QhGvQMJNH3RsMfFmVRzRAIYY4 A uSmUf9jGMdCSyR2Uxwee3MTQo QANH6sjUeMMm426QO1 Ra3RAtc0Q2d4mxYj9gTWYu0WNGxtq6W8p4EX6tw Ar vMouIsctVMCU0lmBemU

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).

RhGkg2Or119cdwoUNQwb3 4RsH2DfBftjNsv

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.

42SVK vxkPVynmfc4g5PZUNVJM0VRAdQRzClr44gojHGUH1dfTOIa9GHozfKPQuslzgkT91Kc8KbmYM7h4z5cIQ4SKBuoE4R9EsH7xK0MUS1f07IQU8 SKvSbySN yW2wFyR4 fG

Go to your form preview and fill in some info into your form then send it, to test it out (18:04).

RsNRxlAINFaU0UFJwDp0QPLQVPSvIZ8swfMLqWnZbGQEVgVbg5VJZ0V D9zx5j4JdABV
hpCl0BGyLdCKMRLuOCiiOAW5sVdXaKCYMg7ccVS HjNtRDYj0CMedtw3tmxbO yC0uM3sXxLxOyycBkQAd4iOR

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).

9iXHzOkkN ytKBq66Tt8Y8xb ipn6YuCT3yseynrW35XXjkDlwUAsD47bEuhGsXdpBWkAGZm 2h3mGnSqyTu3k WjZZMBmPi RvArfECDCASXN a4 OyYq3Ct0 sR2vHOwK4roXG

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). 

0ceOcCAnP9

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.

jNq7ucY46mL0MYemxpJi82v guZ LRL9U1CAa3jQXjByfKoWfATnN9mPhfmVROQWB1RC9Tl9blq2ElvSRPN32CUBXINB hVeR2PzKkjlS0XfDGXibXjJca1rVrzoG4vesU59d9m9

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.

W2UcwqRE8yRj0SgSQN8UYG3tnzbD8ZJDMOnev9K b5rBclr jT8rTHc3VbYE3qIYmEH4EhN PbOlBkq9WjgBIn060qFwiQsG8jOXQJDMytOgQMHAiE8mybc1H2d4tmMXIZ114tCe

Click the Update button and then preview your page.

Elementor Contact Form 7 with Premium addons

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).

VThV6XzWVfeFh0RsEXQSiOtdGlx1OhpVaG4EVpPXtxuqfCI4lZyEsJzSzQLCle7In5Be9PlfqS5 2FuUGMWawvpkTgP70FGlYjlbz9kXbiz2Njf0Bi2tpF9RBSHm L0J23gIAUQ3

Click on the reCAPTCHA link then go to the v3 Admin Console (26:13), 

TNoB5zccvom7a1ShquB86Dk5PJcbKQ1TgtwQEcx3VEW YlNs3lY770Yg0hOK0Aip1cSaH

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)

j1HAXewEtu0GCUG9VLqvwshoM8S
iz7v2cwQQA2W aQ8eCjJlhAdb84gomda8ezzcdZPhw

Under Domains, add your domain name still, check the Accept reCAPTCHA Terms of Service option, then click the Submit button.

Y23jNL OO9V2kscOtSDNqnhEjMQI3niIKSQ yN0yJIqZbzQsPQfZS9FpNns3znvlxlPII2psAH5ZXkkX7dXDhiPvSbjVt fq5So6CZm NnPD68oBraTOCmsXlS0DqQFFJH aRXHQ

After submitting, copy the site key and the secret key, go back to integrations and paste them the save the changes.

IdgOn7scmfS7D87taeysfTy9uRYBWMZqShzxITOATTBHsASWMnejWuQgUthG6LDAvgDcpyKQUimYFV9Z DHnB2 mrWgDbu7nQH5GsRmtUsuTRk1bN0W7F4OivBC8QGwYfEs k100
3fxWXg3TsZ 0ZI7FWBAQiG1rjLQMOPXcHLUS 2onJqpfrq33ltCOwcrq4OBAdWoZ AGriQf51BkMAbTRSchVMMrQuYXptJjM9kHKUJEwHbiHKUnsnVUW8wia3FtvsTpVGuuerw3Q

When you reload your page, there’s reCAPTCHA at the bottom.

ftBvCcHVcB3xHmdoAyBc5PCCIlWAybX7WMLFqZN4 refD4n09VtfrsHMBQM m9 pIlk7w0E8vc6ksITQpZzC7TJz

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.

Also Read. . .

Snapchat Device Ban: The Why And The How

Snapchat is one of the quickest and easiest social media platforms used to communicate through photos and videos. Because of its emphasis on security and safety, Snapchat may ban a user’s account due to violations,

Read More »
Newsletter Subscription (EF)
Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *