Skip to main content

How To Add a Contact Form With a CAPTCHA To WordPress

The goal of any website is to reach its target audience, and interacting with visitors and allowing them to open a line of communication with the site goes a long way in accomplishing this goal. As such, website owners need to provide visitors with a means of contacting them. You could just list your email address on your website, but visitors may see opening up their inbox and writing an entire email as too much work and decide not to contact you altogether – which we don’t want. Your email address being out there like that would also open your inbox up to unsolicited spam, quickly and (very) annoyingly teaching you what the internet slang “RIP inbox” actually means.

This is where your new friend, the contact form, comes in. Having a contact form on your website allows users to simply type essential information (such as their name, their email address, and their message for you) into a form, which is then converted into an email using a pre-programmed template and sent to your email address. From there, you can take a look at what the user has to say and reply to them on the email address they provided. A contact form is much more user-friendly than the alternative of listing your email address (which now remains safe from would-be spammers) on your website.

However, contact forms have their vulnerability – bots can be programmed to fill these out and submit them to spam website owners’ inboxes with emails. To minimize the threat of bots exploiting a contact form on your website, you will need to add CAPTCHA to the contact form. To make things easier to follow, we’ll be breaking down the process of adding a contact form with an integrated CAPTCHA to your WordPress website into two parts – creating a contact form and adding it to your website, and how to add CAPTCHA to contact form.

How to Create and Add a Contact Form on WordPress

The easiest way to create and add contact forms on WordPress is to use a dedicated contact form plugin – but there are a plethora of specialized contact form plugins out there of both the free and paid variety. To make sure we cover all our bases (and that you have a few options to choose from), we’ll be guiding you on creating and adding a contact form with an integrated reCAPTCHA using the Contact Form 7 plugin by Takayuki Miyoshi, the WPForms plugin, and the Elementor Pro page builder plugin.

Step 1: Install Your Plugin of Choice

Contact Form 7

If you’re not looking to spend any money on a premium form builder, the Contact Form 7 plugin is the way to go – to this day, Contact Form 7 remains the gold standard as far as free form-building plugins for WordPress go. First and foremost, you’re going to have to make your way to the official Contact Form 7 listing in WordPress’s plugins directory and click on Download. Doing so will initiate a download for a ZIP file containing the plugin – once you download this ZIP file, locate it and move it to someplace memorable on your computer. Next, you’re going to have to install the plugin – and you can go about doing so in two different ways. You can either install the plugin using your website’s WordPress Admin Panel or upload it directly to the servers that host your site. To install the Contact Form 7 plugin from the Admin Panel, simply:

  1. In the left pane of the WordPress Admin Panel, click on Plugins > Add New.
  2. Click on the Upload Plugin button.
  3. Click on the Choose File button.
  4. Navigate to the directory the ZIP file containing the Contact Form 7 plugin is located in, and click on the ZIP file to select it.
  5. Click on Open.
  6. Back on the WordPress Admin Panel with the ZIP file chosen, click on Install Now.
  7. Wait for WordPress to install the Contact Form 7 plugin. When the plugin has been installed, you’ll see a message stating “Plugin installed successfully”. Upon seeing this message, click on the Activate Plugin button at the bottom – installed WordPress plugins don’t actually start working until you activate them.

If the WordPress plugins repository is down or if you simply like doing things yourself, you can also install the Contact Form 7 plugin by uploading the contents of the ZIP file you downloaded directly to the servers that host your website. You’re going to need an FTP client to be able to do so, and we recommend FileZilla – it’s completely free, and it’s beyond competent. Once you have downloaded and installed FileZilla, you need to:

  1. Navigate to the directory the ZIP file containing the Contact Form 7 plugin is located in, and unzip the file. Once the file has been unzipped, you’ll see a folder named after the plugin.
  2. Launch FileZilla and click on File > Site Manager….
  3. In the Site Manager window, click on New Site.
  4. Type in a name for your website and press Enter.
  5. Furnish the right pane of the window with the FTP settings and credentials for your website (your website’s domain name, username for FTP connections, FTP password, and encryption type, among others). These will have been provided to you by your hosting provider when you signed up for WordPress hosting, but if you no longer have them, simply get in touch with your web host, and they’ll help you out.ftp plugin captcha
  6. Click on OK.
  7. Click on File > Site Manager….
  8. Click on the entry for your website in the left pane of the Site Manager window to select it, and click on Connect.
    Note: When you establish an FTP connection with your website for the first time, FileZilla may display a popup for an unknown certificate. Simply check the Always trust certificate for future sessions option within the popup and click on OK.
  9. Once FileZilla has established an FTP connection with the servers hosting your website, all of the files and folders that constitute the WordPress installation for your website will be displayed under FileZilla’s Remote site section. Under the Remote site section, open the WordPress folder (which is usually named www or public_html), and navigate to wp-content > plugins.
  10. Under FileZilla’s Local site section, navigate to the directory that contains the unzipped contents of the ZIP file from step 1, locate the contact-form-7 folder, and right-click on it.
  11. In the resulting context menu, click on Upload. FileZilla will proceed to transfer the folder from your computer to the servers hosting your website, effectively installing the Contact Form 7 plugin on your website.
  12. If you choose to manually install the Contact Form 7 plugin over an FTP connection, you will not be given an option to activate the plugin upon installation and will have to enable it manually. To do so, navigate to your website’s WordPress Admin Panel, click on Plugins > Installed Plugins in the left pane, locate the entry for Contact Form 7 in the list of installed plugins in the right pane, and click on Activate right under it.

Elementor Pro

Elementor Pro is a premium WordPress plugin, so if you want to use it to fulfill your form building needs, you are going to have to purchase a subscription to it from its official website. Once you’ve purchased a subscription to Elementor Pro and have been provided with a ZIP file containing the plugin, you can use the process described above to install the plugin. Be sure to activate the plugin once it’s been installed!

WPForms

While WPForms is a premium form-building plugin, there’s a free Lite version of it available on the WordPress plugins repository. WPForms’ highlight is the fact that it provides users with a graphical interface to create forms, allowing them to add and remove form fields by simply dragging and dropping them.

  1. In the left pane of the WordPress Admin Panel, click on Plugins > Add New.
  2. Search for “WPForms Lite”.
  3. Click on Install Now next to the search result named Contact Form by WPForms – Drag & Drop Form Builder for WordPress.add wpform plugin
  4. Wait for WPForms Lite to be installed, and click on Activate on the next screen to enable it.

Step 2: Create and Configure a Contact Form 

Using Contact Form 7

When you activate the Contact Form 7 plugin, a new menu item named Contact will be created in the left pane of your website’s WordPress Admin Panel. Click on Contact > Contact Forms, and you’ll see that the plugin has already created your first contact form for you and aptly titled it Contact form 1. Hover your mouse over Contact form 1 and click on Edit to configure the form. If you would like to rename the contact form, replace Contact form 1 in the Title field with what you want the form to be named. Be sure to navigate to the Mail tab and make sure that the To field contains the email address(es) you want to receive the messages on.

add wpform plugin 1

Switch back to the Form tab, and you’ll see that the form already includes the standard fields (the user’s email address, their name, the subject of their message, and their message). If you would like to add a field or two to the form, you can do so with the help of the pre-configured buttons for fields found right above the text box. When you’re satisfied with how the contact form is set up, click on Save.

If you would like to create a new contact form, simply click on Contact > Add New in the left pane of the Admin Panel. Give the new contact form a name, add/remove fields as you see fit, and make sure you specify an email address for the form to send messages to before clicking on Save.

Using Elementor Pro

Unfortunately, Elementor Pro does not have any options for users to create, configure, and save contact forms or other forms of any kind for later use. This means that every time you want to add a contact form to your website, you’ll have to create a new one. Thankfully, though, creating a contact form from scratch using Elementor Pro is exceptionally easy, with the plugin doing most of the work for you.

Using WPForms

When you activate the WPForms plugin, a new menu item named WPForms will be created in the left pane of your website’s WordPress Admin Panel. Click on WPForms > Add New, and you’ll see that most of your WordPress Admin Panel’s real estate is taken over by the WPForms graphical form-building interface. Once the form-building interface is up, you need to:

  1. Type a pertinent and memorable name for the contact form into the Form Name field. “Contact Form 1” or something to that effect will do just fine.
  2. Click on Simple Contact Form under the Select a Template section.wpforms select template
  3. You’ll see that the form already has all of the staple fields for a contact form (Name, Email Address, and Message). Additional fields can be added to the form by clicking on them in the left pane, and existing fields can be reordered by dragging and dropping them into the desired location in the right pane. Existing fields can also be edited and resized by clicking on them in the right pane.wpforms
  4. Once you’re satisfied with the fields on the contact form, navigate to the Settings tab.
  5. Click on Notifications in the left pane.
  6. Locate the Send To Email Address field in the right pane, and make sure that it contains the email address(es) you want the contact form to send responses to.wpforms notifications
  7. Click on Save.

Step 3: Add a Contact Form to Your Website

A very intuitive and common practice is for websites to have dedicated Contact pages with contact forms on them to facilitate communication between a website’s users and the folks running it. Here’s how you can add a dedicated Contact page to your website:

Using Contact Form 7

  1. In the left pane of your website’s WordPress Admin Panel, click on Contact > Contact Forms.
  2. Copy the shortcode for the contact form you want on your website’s dedicated Contact page. This is going to be the text under the Shortcode section right next to the name of the contact form you’ve chosen.CF7 Shortcode
  3. Click on Pages > Add New in the Admin Panel’s left pane.
  4. Type Contact (or what you want to name your website’s dedicated Contact page) into the Add title field.
  5. Paste the shortcode you copied back in step 2 into the text box.
  6. Click on Publish.

Using Elementor Pro

  1. Click on Pages > Add New in the WordPress Admin Panel’s left pane.
  2. Click on the Edit with Elementor button.
  3. When the Elementor page builder interface loads up, click on the hamburger menu icon (represented by three horizontal lines stacked on top of each other) in the top-left of the interface’s left pane.Elementor Left Pane
  4. Click on Page Settings.
  5. Type Contact (or what you want to name your website’s dedicated Contact page) into the Title field.
  6. Click on the nine tiles icon in the top-right of the interface’s left pane to be taken back to the widget selector.elementor nine tiles
  7. Search for “form” or locate the Form widget under the Pro Elements section.elementor form
  8. Drag and drop the Form widget from the left pane of the interface to the right pane, and you will see the widget manifest into a contact form, complete with pre-populated Name, Email, and Message fields.
  9. In the left pane of the interface, under the Form Fields section, type a name for your form into the Form Name field. “Contact Form 1” or something along those lines will suffice.
  10. Under the Form Name field, you will find a list of all the fields your contact form contains. You can drag and drop items on this list to reorder the fields on your form, click on a specific item to edit that field’s label, placeholder text, and more, and click on Add Item to add a new field to your form.
  11. Once you are satisfied with the fields on your contact form, scroll down to the Emails & Options section, and click on it to switch to it. Ensure that the Email-To field in the Emails & Options section contains the email address(es) you want the contact form to send responses to.elementor form options
  12. Click on Save and Publish the page.

Using WPForms

  1. In the left pane of your website’s WordPress Admin Panel, click on WPForms > All Forms.
  2. Locate the contact form you want on your website’s dedicated Contact page and click on it.
  3. When the WPForms interface pulls up, click on Embed.
  4. Copy the shortcode provided to you in the resulting dialog and click on Close.wpforms embed shortcode
  5. Close the WPForms graphical form-building interface, and click on Pages > Add New in the Admin Panel’s left pane.
  6. Type Contact (or what you want to name your website’s dedicated Contact page) into the Add title field.
  7. Paste the shortcode you copied back in step 4 into the text box. Alternatively, you can also click on the Add Form button above the text box, select the contact form you want to be displayed on the page and choose whether or not to display its name and description and click on Add Form for the same result.contact page wpforms insert
  8. Click on Publish.

Once the page has been published, your website will have a dedicated Contact page. Most sites also provide users with contact forms at the end of blog posts or announcements. If you’re using Contact Form 7 or WPForms, you can add a contact form to any page, post, or text widget on your WordPress website if you simply paste the shortcode for the contact form you want where you want it. If you’re using Elementor Pro, simply edit any page or post with Elementor and drag and drop the Form widget where you want the contact form to be.

How to Add a CAPTCHA to Your Contact Forms

Ever wondered why most of the contact forms you’ve seen online have included a CAPTCHA of some sort? Well, CAPTCHAs (attempt to) prevent bots – a contact form’s biggest weakness – from (ab)using contact forms, only allowing actual human users to submit them. If you want to keep spam bots from being able to exploit a contact form on your website and making a mess of your inbox, you need to add CAPTCHA to the contact form. Spambots and bots of all kinds have been continually evolving, but so have CAPTCHAs and CAPTCHA services. We recommend reCAPTCHA – a truly cutting-edge CAPTCHA service developed by none other than Google – for all your CAPTCHA needs. While there are several different CAPTCHA plugins available for WordPress installations, none are as formidable a bot-deterrent as Google’s reCAPTCHA service. And to top it all off, reCAPTCHA is compatible with all three of the form-building plugins we’re using.

Step 1: Register Your Website with Google’s reCAPTCHA Service

Before you can effectively add CAPTCHAs to your contact forms, you need to register your website with Google’s reCAPTCHA service and procure API keys for the service. To do so, you need to:

  1. Make your way to the reCAPTCHA Admin Panel.
  2. If prompted to sign in to your Google account, do so. If you are already signed in, move on to the next step.
  3. Type in a name for your website in the Label field, and type in your website’s domain (yourdomain.com) under the Domains section.
  4. Next, you have a choice between two different kinds of CAPTCHAs for your contact forms. You can choose the user-friendly reCAPTCHA v2, which displays a simple “I’m not a robot” checkbox for users to check before they submit a contact form. If reCAPTCHA suspects the user of being a bot, the user is given a challenge to prove they aren’t one before they can proceed. To go with reCAPTCHA v2, simply select the reCAPTCHA v2 and “I’m not a robot” tickbox options under the reCAPTCHA type section.google recaptcha type

    Alternatively, you can opt for the more advanced but less transparent reCAPTCHA v3 – an unobtrusive CAPTCHA that works in the background and assigns each user a score (between 0.0 and 1.0) based on their interactions with the website and various other factors to predict the likelihood of the user in question being a bot. Whether or not reCAPTCHA v3 allows a user to submit a contact form depends on what their score is. If you would like to use reCAPTCHA v3, select reCAPTCHA v3 under the reCAPTCHA type section.

    google recaptcha v3

  5. Check the Accept the reCAPTCHA Terms of Service option.
  6. Click on Submit.
  7. Upon successful registration, you’ll be given two API keys – a Site Key and a Secret Key. Copy both of them to a safe location on your computer.google recaptcha site key

Step 2: Add a CAPTCHA to Your Contact Forms

On Contact Form 7

  1. In the left pane of your website’s WordPress Admin Panel, click on Contact > Integration.
  2. Locate the reCAPTCHA service, and click on Setup Integration under it.recaptcha cf7
  3. Paste the previously copied Site Key and Secret Key into the respective fields.
  4. Click on Save Changes. If you registered your website for reCAPTCHA v3, all of your contact forms will now be protected by reCAPTCHA v3 effective immediately – there’s nothing more for you to do.
  5. If you went with reCAPTCHA v2, however, you’re going to have to paste the following text into each of the contact forms you want to protect with a CAPTCHA:
    [recaptcha size:compact]
    Where, within the text of the contact form, you paste the reCAPTCHA shortcode will determine where the reCAPTCHA dialog is placed on the form.determine where the reCAPTCHA dialog is placed on the form.
  6. Click on Save.

On Elementor Pro

  1. In the left pane of the WordPress Admin Panel, click on Elementor > Settings.elementor settings
  2. Navigate to the Integrations tab.
  3. Under the reCAPTCHA section, paste the API keys you copied into the Site key and Secret key fields respectively.
  4. Scroll all the way down and click on Save Changes.
  5. Navigate to the page or post that contains the contact form you want to integrate reCAPTCHA into and click on Edit with Elementor.
  6. Select the contact form to edit it in the left pane.
  7. In the Content tab under the Form Fields section, click on Add Item.elementor add captcha
  8. Open the dropdown menu next to the Type option. If you opted for reCAPTCHA v2, select the reCAPTCHA option, and you will see the “I’m not a robot” tickbox manifest on your contact form. If you chose reCAPTCHA v3, select the reCAPTCHA v3 option in the dropdown menu, and choose whether you want the reCAPTCHA badge to be displayed on the right (bottom of the page), left (bottom of the page), or inline.
  9. Click on Save.

On WPForms

  1. In the left pane of the WordPress Admin Panel, click on WPForms > Settings.wpforms settings
  2. Navigate to the reCAPTCHA tab.
  3. Next to the Type option, select Checkbox reCAPTCHA v2 or reCAPTCHA v3, depending on whether you registered your website for reCAPTCHA v2 with the “I’m not a robot” tickbox or reCAPTCHA v3 respectively.invisible recaptcha v2 invisible recaptcha v3
  4. Paste the Site Key and Secret Key you copied into their respective fields. If you have chosen to use reCAPTCHA v3, you may also want to set a custom Score Threshold below which form submissions will be declined.
  5. Click on Save Settings.
  6. In the left pane of the WordPress Admin Panel, click on WPForms > All Forms.
  7. Locate the contact form you want to add a CAPTCHA too and click on it.
  8. Wait for the form-building interface to be pulled up, and under the Standard Fields section in the Add Fields tab, locate and click on reCAPTCHA.Wait for the form-building interface to be pulled up, and under the Standard Fields section in the Add Fields tab, locate and click on reCAPTCHA
  9. You should now see the “I’m not a robot” tickbox or a reCAPTCHA badge (depending on the version of reCAPTCHA you’re using) on the contact form, confirming that a CAPTCHA has been embedded into the form.
  10. Click on Save. This change will be immediately applied to every instance of the contact form on your website.

Test the Captcha on your Contact Form

Create and add a contact form to your website? Check.

Add CAPTCHA to contact form? Check.

Go ahead and test out both your contact form and the reCAPTCHA service by navigating to your website’s Contact page, filling out the form, and submitting it to see if you successfully get the message on the email address(es) you specified.

That’s all, folks!

Wp-dd.com

WordPress Design, WordPress Development, cPanel Hosting, Web Design, Web Development, Graphic Design, Mobile Development, Search Engine Optimization (SEO) and more.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.