What is Contact Form 7?

Hey there! Today I wanted to let you know about Contact Form 7, a super popular plugin for WordPress. It’s a fairly simple plugin that makes creating contact forms easy.

All you have to do is create the form with fields like name, email, message, and a submit button.

Once you publish it, you’ll get a shortcode that can be used anywhere on your website.

Up until recently, I had been using WP Forms for quite some time. However, I’m not very pleased with it. I have received so many spam messages even though my ReCAPTCHA is set to the most secure setting in the settings on the reCAPTCHA admin console.

I also wasn’t able to use V3 ReCAPTCHA with my Divi WP Forms Lite plugin, only V2. What’s with that? So I checked out what other plugins I could use that integrate reCAPTCHA V3 with the form plugin for free. 

Contact Form 7 is what I was taught to use way back in college for web design. I thought, what the heck, let’s see where this plugin is at. I don’t love that you have to card code these forms in HTML, but if all you need is a simple contact form on your portfolio website, the standard contact form will do just fine.

Want to learn how to install the Contact Form 7 plugin and integrate V3 reCAPTCHA for spam protection? It’s pretty easy so follow along with me on this beginner-friendly tutorial that includes screenshots.

What is reCAPTCHA?

reCAPTCHA is an awesome free service provided by Google. It’s designed to keep websites safe from spam and abuse.

CAPTCHA is a little test that helps differentiate between humans and bots. It’s super simple for humans to solve, but tricky for those sneaky bots and malicious software.

When you add reCAPTCHA to your site, you’re blocking automated software, while still making it easy for genuine users to enter.

reCAPTCHA v3 helps detect malicious visitors on your website, without user interaction, like selecting how many motorcycles you see.

First, let’s install the Contact Form 7 Plugin in WordPress

It is very simple to install the Contact Form 7 Plugin. Just navigate to the “Plugin > Add New Plugin” page in WordPress, and search “Contact Form 7”. Install and activate the plugin.

Create your first contact form

Once you have activated the plugin, you will see “Contact” appear on your WordPress dashboard menu. Navigate toward “Contact > Add New”.

Here, we are just going to keep the default labels. Name the contact form, and click “Save”.

Integrate reCAPTCHA with Contact Form 7

To configure the reCAPTCHA V3 with your forms, navigate to the dashboard menu under “Contact > Integration”.

Navigate toward the reCAPTCHA section, and click “Setup Integration”.

Input Your Site Key and Secret Key from reCAPTCHA

If you haven’t set up reCAPTCHA yet, visit the Google Admin console for reCAPTCHA here: https://www.google.com/recaptcha/admin

Login to your Google account.

Now, once you are logged in, click V3 Admin Console. 

Then, when you’re in the Admin Console, you will see a + symbol. Click this to create a new reCAPTCHA.

Create a label for your v3 reCAPTCHA site, add your domain, and click “Submit”

You will see the site key, and secret key here. This is what you need to integrate with your Contact Form 7

Your forms will be protected after you input those keys into the reCAPTCHA integration area of Contact Form 7. However, there is just one problem – it is ugly as SIN!!

How to Style Contact Form 7

Contact form 7 is very basic, and so the styles you get by default are well… hideous. You can visit their page about how to style their forms, or you can copy and paste my styles below and customize them to your heart’s content!

At the WordPress dashboard, navigate to “Appearance > Customize”.

Here you can add custom CSS to your theme. Just remember that if you don’t have a child theme set up, your custom code will disappear when your theme updates. If you are adding custom CSS to your website, make sure you have a child theme, or else you can keep this code saved so you can copy and paste after you update your theme.

Copy and Paste this custom CSS code to style your Contact Form 7

Copy and paste this CSS code in your “Custom CSS” area:

These styles make my contact form look like this: 

I hope this has been a helpful tutorial for you! If you need someone to chat with about your website, book a free consultation with Katelyn at Voiceover BrandSites! We will be happy to help you with your website needs.