First, you will need to go to the Google reCAPTCHA website and click on the ‘v3 Admin Console’ button at the top right corner of the page.
From the AMP settings page, you can enable or disable AMP on your website, choose a website mode for AMP, and choose supported templates.
Next, a popup window will open, asking you to create a new page or choose an existing page.
In the WPForms form builder, you will see an ‘Embed’ button at the top. Simply click on it to add your form to a new page or an existing one.
For this tutorial, we will use the WPForms Pro version because it offers more features, form templates, addons, and customization options. There is also a WPForms Lite version that you can use to get started for free.
After that, enter your domain name (without https://www.) into the Domains field.
First, you will need to click on the ‘Go to Settings’ link.
From here, you can add or remove form fields. To add a new field to your form, you can simply click on a form field from the left panel and drag it onto the form template.
Next, you can publish or update your page.
Next, click the ‘Submit’ button.
After that, you can click on the ‘Settings’ tab to configure your form settings.
Their team recently worked with Google to make AMP forms easy for WordPress.
From here, simply enable the Google v3 reCAPTCHA option.
After the configuration is complete, you can save your form.
Simply head over to WPForms » Add New page to create a new WordPress form. WPForms is compatible with AMP by default, so you won’t need to turn on any special settings.
Next, you will need to enter a name for your new form page.
Alternatively, you could use one of the many responsive WordPress themes that offer excellent performance on desktop and mobile. This way, you don’t have to compromise on your website styling to deliver a superior experience on mobile.
After that, you can configure the field options. Simply click on a field, and then Field Options will appear on the left.
One of them is contact forms. Since AMP uses a limited set of HTML and JavaScript, it can’t load your WordPress forms properly on AMP pages.
After that, simply paste the site key and secret key. When you are done, just click on the ‘Save Settings’ button.
Next, you need to enter your website name in the Label field. Google AMP only supports reCAPTCHA v3, so you must choose the ‘Score based (v3)’ reCAPTCHA type option.
Accelerated Mobile Pages or AMP is a Google project that makes websites load faster on mobile devices.
Before we create a form, it’s important that you have AMP set up on your WordPress site.
Step 2: Add AMP to Your WordPress Site
Once activated, the plugin will automatically add Google AMP support for your WordPress site.
Accelerated Mobile Pages (AMP) help speed up websites. However, AMP removes WordPress forms to improve the performance of your site.
For this tutorial, we will pick the ‘Simple Contact Form’ template.
Now, you have the Google API keys to add reCAPTCHA to your forms. However, there is one more setting required to ensure AMP compatibility with the reCATCHA.
However, you can change AMP settings for your website by going to AMP » Settings from your dashboard.
We will select the ‘Create New Page’ option for this tutorial.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Once that’s done, save your form by clicking on the ‘Save’ button in the top right corner.
https://www.example.com/contact/?amp
Adding Google reCAPTCHA to Your AMP Form
The best way to create an AMP form is by using WPForms. It is the most beginner-friendly WordPress form plugin that helps you create AMP-ready WordPress forms.
Step 1: Install and Activate the WPForms Plugin
Go to WPForms » All Forms and select the form where you want to enable the reCAPTCHA. Simply click the ‘Edit’ button under the form name.
In this article, we will show you how to create AMP forms in WordPress using WPForms (the easy way).
Why Create an AMP Form in WordPress?
However, if you are using AMP on your WordPress site, then you can use a plugin to show forms. Let’s see how to add an AMP form to your site.
Adding AMP Forms in WordPress (Step by Step)
WPForms lets you show a message, show a page, or redirect users to a URL on form submission.
From here, you will see a preview of your AMP form in the content editor.
First, you will need to install and activate the WPForms plugin. If you need help, then please see our guide on how to install a WordPress plugin.
Next, you can click on the ‘Notifications’ tab to set up email notifications to notify you when a user completes the form.
Both the lite and pro version of WPForms allows you to create a basic AMP-ready contact form.
Alternatively, you can also use the WPForms block to add the form in the content editor. Simply select your AMP form from the dropdown menu.
Next, you can click on the ‘Confirmation’ tab to set up a confirmation message to be shown when a user submits the form.
Now that your WordPress form is ready, you can add it to a page.
Next, you will see the reCAPTCHA settings again with the ‘Allow this key to work with AMP pages’ checkbox. Simply check the box and click on the ‘Save’ button below.
Once the form setup screen appears, click on the ‘Settings’ tab and select the ‘Spam Protection and Security’ tab.
Next, you will see the form builder page, where there are different options to customize your template.
On the form setup screen, you can choose a form template and enter a name at the top. You can select the Blank Form if you want to start from scratch or use a prebuilt template to quickly edit it according to your needs.
Once you have configured AMP, the next step is to create an AMP-compatible contact form on your WordPress site.
After that, you need to sign in with your Google account. Once done, you will see the ‘Register a new site’ page.
Now that Google reCAPTCHA is added to WPForms, you can enable it in your forms where needed.
Now that you have Google API keys to add reCAPTCHA on AMP forms, you need to enter them in WPForms.
After that, you can revisit your contact page and see the AMP form with reCAPTCHA in action.
In order to use AMP with WordPress, you need to install and activate the official AMP plugin for WordPress. For more details, see our step-by-step guide on how to install a WordPress plugin.
We hope this article helped you to learn how to create AMP forms in WordPress easily. You may also want to see our guide on how to create GDPR-compliant forms in WordPress and the best drag-and-drop page builder for WordPress.
For instance, you can edit the label and format of a field, make it a required field, set up conditional logic, and more. Similarly, you can customize all the other fields.
Do you want to create AMP-friendly forms on your WordPress site?
To use Google reCAPTCHA with your AMP forms, you need to register your site for Google reCAPTCHA v3 and get the Google API keys.
If you want to see how it looks, then you can open the page on your mobile phone. Or you can open the page on your desktop browser by adding /amp/ or /?amp at the end of your page URL, like this:
You can open the WPForms » Settings » CAPTCHA page in your WordPress dashboard.
While AMP offers a great mobile browsing experience by making your web pages load faster, it disables many useful features on your WordPress website.
Step 4: Add Your AMP Form to a Page
Note: The Modern Style Dropdown and Number Slider fields are not compatible with Google AMP. Instead, you will need to use the Number and Classic Style Dropdown fields.
The ‘General’ settings allow you to change your form name, submit button text, submit button processing text, and more.
That’s all! You don’t need to configure anything else. The WPForms plugin will add full AMP support to your form now.
Step 3: Create a New AMP Form in WPForms
Next, you will see a success message along with the site key and the secret key to add reCAPTCHA to your site.
Simply copy these keys.
For more details, please see our guide on how to properly set up Google AMP on your WordPress site.
Next, you can scroll down and choose the ‘reCAPTCHA v3’ option.
Once that’s done, simply click the ‘Let’s Go’ button.
By default, WPForms includes anti-spam settings to catch and block spam. Additionally, you can use Google reCAPTCHA to reduce spam submissions.