How to add Contact Form to your WordPress website along with Google reCaptcha?

Contact Form enables website visitors to contact you. This is different from comments on articles posted. When a visitor send you a message using the Contact Form, the message is delivered to an email address you setup with the contact form. Contact Forms are great for allowing visitors to get in touch with you and enhances interaction, sending feedback, queries etc. If you are looking to add a contact form to your WordPress website, Contact Form 7 is a good plugin just for that. And to tackle spams, it is better to integrate Google reCaptcha with the Contact Form. In this post, we will see how to add Contact Form to your WordPress website and integrate with Google reCaptcha.

How to add Contact Form 7 to WordPress website:

Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. You can setup separate contact form for queries, feedback, etc. or for different branches of your organisation like billing, support etc. which, visitors will get an option to choose in the form.

To add Contact Form on your WordPress website, do the following:

• Login to WordPress Admin > go to Plugins > Add New
• Search for Contact Form 7 > Install > Activate
• Go to Installed Plugins > Find Contact Form 7 > Click on Settings
• There will be a default contact form already which is good enough to be used without customizing. But if you prefer to customize,  click DUPLICATE to create a copy of the contact form so that you can refer to the settings if you mess up.
• After creating a copy, click on the  EDIT on ‘Contact Form 1’.

FORM tab > This section contain elements for the Contact Form like the placeholders and text boxes for users to enter name, email address, message and a submit button. The default is good enough but if necessary, edit the texts to customize. Make sure not to mess up the syntax. The form uses predefined tags.

Mail Tab > This is where you can setup the TO, FROM, SUBJECT, MESSAGE BODY of the email.

TO: An email address where the message will be delivered to. Eg: info@yourwebsitedomain.com

FROM: An email address which will be used to deliver the message. This is usually an email associated with your domain.

NOTE:  You can login to your web host administration (CPanel / Plesk) and create email address for your website domain. You will usually get a webmail acces to login and test email is working or not.

SUBJECT: The tag “[your-subject]” is included which will pick up the subject filled by the visitor / sender on the Contact Form. You can edit it with prefix or suffix text. Eg. WebsiteName – “[your-subject]”.

MESSAGE BODY: You can customize the message body also. Here is an example:

Hello Admin,

Someone left you a message using the contact form on your website.
Here is the message details.
*********
From: [your-name] <[your-email]>
Subject: [your-subject]

Message:
[your-message]

MESSAGES TAB> Here you can customize the messages that will be displayed in the Contact Form such as when the message is sent successfully, or if there was an error, etc.

• After you are done customizing the Contact Form, click SAVE at the bottom of the page.
• Copy the Contact Form 7 ShortCode displayed which looks something like this:

  Your Name (required)
  

  Your Email (required)
  

  Subject
  

  Your Message
  

  This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
• Go to PAGES > Add New
  • Set Page Title, name it ‘Contact’
  • Paste the Contact Form ShortCode copied from above step in the body section of the page.
  • Click PUBLISH
  • View the page just published. You should be able to see the Contact Form.

How to add Google reCaptcha with Contact Form 7:

It is recommended to integrate Google reCaptcha with Contact Form 7 for tackling Spam.  reCAPTCHA protects you against spam and other types of automated abuse. With Contact Form 7’s reCAPTCHA integration module, you can block abusive form submissions by spam bots. For that, we need Site Key and Secret Code from Google reCaptcha. reCAPTCHA is Google’s service so you need a Google account to use it. If you already have a Google Account, do the following:

• Go to the Google reCaptcha admin page – Google reCAPTCHA.
• Click on the + sign to create a project
• Enter the required details such as a LABEL, website domain, owners’ email addresses, accept terms and conditions.
• There are two versions of Google reCaptcha, v2 and v3. Google reCaptcha needs reCaptcha v3. Select reCaptcha v3.
• Click SUBMIT
• You will come to a page where Google reCaptcha Site Key and Secret Code is displayed. We’ll use it later, so keep this page open.
• Go to the WordPress admin, then click on INTEGRATION under the CONTACT menu in the WordPress Admin sidebar.
• Click on ‘Setup Integration’
• Copy the SITE KEY and SECRET CODE from the Google reCaptcha page and paste it in its respective places here.
• Click SAVE CHANGES.

That’s all. We have finished adding Contact Form and integrated Google reCaptcha with the Contact Form for our WordPress website.

NOTE:

• Earlier, we used to add Google reCaptcha in the Contact Form 7 using the tag [recaptcha]  in the Contact Form 7 Form design. However, reCAPTCHA v3 doesn’t need a CAPTCHA widget (the “I’m not a robot” checkbox used in reCAPTCHA v2) to work. So [recaptcha] form-tags are no longer necessary.
• For Contact Form 7 to work correctly, your website should be able to send emails. You can use WP SMTP plugin. WP SMTP help us to send emails via SMTP instead of the PHP mail() function. This plugin adds a settings page to “Dashboard”->”Settings”->”WP SMTP” where you can configure the email settings.

 

References:

https://wordpress.org/plugins/contact-form-7/

https://contactform7.com/setting-up-mail/

 

# How to add Contact Form in WordPress website # How to integrate Google reCaptcha in Contact Form 7 WordPress plugin #Add Contact Form 7 in WordPress website #Contact Form WordPress Plugin