Do you want to create an AMP-friendly contact form? AMP or Accelerated Mobile Pages is a technology by Google that loads your web pages quickly on mobile devices.
Create Your WordPress Form Now
In this article, we’ll show you how to create a contact form that’ll load on your AMP pages without any hassle. We’ll also explain how to add reCAPTCHA to your AMP contact form to protect it from spammers.
In This Article
How to Create an AMP-Friendly Contact Form in WordPress
AMP (Accelerated Mobile Pages) provides the best experience to people with a slow internet connection. It loads the pages faster on mobile devices and thus, helps you to improve the traffic to your website.
However, AMP comes with a number of challenges for website owners.
One of them is it allows limited usage of resources in order to load the pages faster. Thus, some functionalities won’t work on your AMP pages as they would normally.
So what will happen to the contact form on your website? Will it work properly?
If you’re using the WPForms plugin, then it’ll automatically detect whether the form is loading on an AMP page or not. And then, it’ll display the link to the non-AMP version of the page to load the form properly.
However, you can also add a form to your AMP page instead of showing the above message.
To do that, you’ll have to use the WPForms Lite plugin and then create a form that is fully compatible with AMP.
So without further ado, let’s take a look at the step-by-step process to create an AMP-friendly contact form for your WordPress site.
Step 1: Install the AMP Plugin
The first thing you need to do is install and activate the official Google AMP plugin for WordPress. This free plugin is essential for adding AMP support to your website.
You may check out the step-by-step guide on how to install a WordPress plugin for detailed instructions.
Once activated, this plugin automatically adds AMP support to your site. However, you can still make changes to the settings by visiting the Settings » AMP page.
For more details, you can follow the guide on how to properly set up Google AMP on your WordPress site.
Step 2: Create a WordPress Form
It’s time to create a contact form with the help of the WPForms Lite plugin.
To get things started, you’ll have to install and activate the WPForms Lite plugin. Upon activation, you need to go to WPForms » Add New to create a new form.
On the Setup page, you’ll find some default form templates. These templates allow you to speed up the process of creating the form. You can also use the blank form template to build a form from scratch.
Since we want to create a contact form, go ahead and click on the Simple Contact Form template.
This will take you to the Form Builder page where you can easily add or remove a field. For example, if you want to add a subject field, then simply drag and drop the Single Line Text field from the left panel to your form.
And to change the field name, you need to click on the field in the right panel and then, make changes to the label in the left panel.
The best part is you’ll be able to see the changes live. Cool, isn’t it?
Similarly, you can edit the other form fields the way you want. You can also follow our step by step tutorial on how to create a simple contact form in WordPress.
Once you’re done with the customization part, you can head over to the form Settings page from the left sidebar of the form builder. Here you’ll be able to change the notification and confirmation settings.
Finally, you need to store the changes by clicking on the Save button, present at the top-right corner of your screen.
That’s all! You don’t need to configure anything else. The WPForms Lite plugin will automatically add full AMP compatibility to your form now.
In addition, you can add reCAPTCHA support to your AMP contact form to protect it from spammers.
Let’s show you how to do it in the next step.
Step 3: Register Your Website to Get reCAPTCHA Keys
To stop contact form spam, WPForms supports 3 different types of CAPTCHA for your forms:
- Custom CAPTCHA
- reCAPTCHA
- hCaptcha
In this tutorial, we”ll focus on reCAPTCHA, a spam filtering service by Google. It helps you to protect your website from spammers and automated bots.
To use it on your site, you’ll have to register your site on the Google reCAPTCHA website so that you can get the site key and the secret key for your website.
And then you can use them to add reCAPTCHA support to your AMP-friendly contact form.
So head over to the Google reCaptcha website and then click on the Admin console button, present at the top-right corner of your screen.
Google will now ask you to sign in to your account. After that, you’ll be redirected to the reCAPTCHA dashboard.
If you’ve previously configured a reCAPTCHA with this account, then you’ll have to click on the plus (+) icon to register your new site.
However, if you’re using this account for the first time, then you’ll automatically see the “Register a new site” page after logging to your account.
Once you’re on that page, you should write any name of your choice in the Label field for future reference.
Next, you need to select the type of reCAPTCHA that you want to use.
It’s important to note that reCAPTCHA V2 is not supported by AMP. So you’ll have to select “reCAPTCHA V3” to add reCAPTCHA support to your AMP-friendly contact form.
In the Domain field, you should write the domain name (without http:// or www) of your website where you want to add reCAPTCHA support. You can also add multiple domains or subdomains by clicking on the plus (+) icon.
As far as the Owners field is concerned, your email address will be present there by default. However, you can add another email address if you want.
Finally, select the “Accept the reCAPTCHA Terms of Service” checkbox and then, scroll down to the bottom of the page to click on the Submit button.
You’ll now see a success message along with the site key and the secret key of your website. You need to copy these keys as you’ll have to use them on your WordPress site.
But before that, there’s one last thing that you should do.
First, you need to click on the Go to Settings link. Next, scroll down to the bottom of the page and then select the “Allow this key to work with AMP pages” checkbox.
This is required for making the reCAPTCHA v3 work on the AMP pages. Once done, you need to click on the Save button to store the changes.
Step 4: Add reCAPTCHA to Your Contact Form
To get started, you’ll have to add the site key and the secret key to your website.
So head over to your WordPress site and go to the WPForms » Settings page from the left sidebar of your WordPress admin panel.
Next, you need to click on the reCAPTCHA tab to tweak the settings.
Here, you’ll have to select “reCAPTCHA v3” as the type, and then paste the site and secret keys to the respective fields.
Once done, you need to scroll down and click on the Save Settings button to store the changes.
It’s time to add reCAPTCHA to the AMP-friendly contact form.
To do that, you need to head over to WPForms » All Forms and then click on the title of your form to open it.
Next, go to the Settings » General page and then check the “Enable Google v3 reCAPTCHA” option. And don’t forget to click on the Save button to store the changes.
Final Thoughts
Congratulations! You’ve successfully created an AMP-friendly contact form for your WordPress site. You’ve also added reCAPTCHA to this form to protect it from spammers.
If you liked this article, then you may also want to check out our step by step tutorial on how to create a simple survey form in WordPress.
Also, please follow us on Facebook and Twitter to get updates from our blog.
