Fix WPForms CAPTCHA Not Working with AMP (Google reCAPTCHA v3)

Installing a contact page form with WPForms with Google reCAPTCHA V3 in WordPress Accelerated Mobile Pages (AMP) can be tricky. I spent hours figuring out and setting up test environments. So I thought that my experience could maybe help you save some time ! Here is my checklist and my buglist. This post traces and summarizes the problems I encountered during this installation and their solutions or workarounds.

If WPForms CAPTCHA is not working with AMP, here is how to check your installation :

• WPForms Plugin Version
• HTTPS / SSL
• WPForms Lite settings
• Google reCAPTCHA Admin Site
• A Simple Contact Page

I will details all my checks in this post. I also listed some currently opened support issues in this article too.

Before starting with the first check, I would like to describe my environment :

• I’m using WordPress 5.4.1
• my theme is WordPress core theme Twenty Twenty
• AMP plugin is AMP by AMP Project Contributors
• WPForms Lite plugin by WPForms

WPForms Plugin Version

All versions of WPForms do not allow to create AMP contact pages with Google reCAPTCHA.

WPForms delivered a major release in Mar 18, 2020 which contains :

• AMP Compatibility in WPForms Lite 1.5.3.
• the support of ReCAPTCHA V3 in WPForms Lite 1.5.3 and WPForms 1.5.3 Pro.

Note that WPForms Pro support for AMP will come later. So if you use WPForms Pro, check if AMP pages are supported in WPForm when you read this post.

You can check if you are using WPForms Lite or WPForms Pro, as well as the code version in the WordPress Plugins panel :

You can read WPForms announcement letter for the support for AMP and Google reCAPTCHA V3 here.

HTTPS / SSL

When you create AMP pages, the AMP documentation recommends to use the HTTPS protocol (vs. HTTP). Although, HTTPS is not required for the AMP document itself or for images and fonts, there are many AMP features that require HTTPS, for instance forms.

If you use the HTTP protocol with your contact page, you will have an error or an incomplete page.

Use the HTTPS protocol for your contact page.

Activating SSL / HTTPS implies mainly two steps :

• Configure SSL for Your Subdomain (for instance test.laurencebichon.com)
• Configure your WordPress site

Configure SSL for Your Subdomain

How to install SSL in your WordPress site :

• Activate the SSL certificate on you web hosting plan. A lot of web hosting companies offer you a free SSL certificate or allow you to use a paying one. For instance, here is a guide for activating a free SSL certificate with Blue Host. If you are using OVH, you may consult OVH guide on Activating HTTPS on your website with an SSL certificate.
• Activate SSL for your subdomain in your web hosting interface. For instance, I will activate SSL for test.laurencebichon.com and www.test.laurencebichon.com. This declaration can be done when you create the subdomain. You can also activate SSL for the subdomain later on.
• Once SSL is activated on your subdomain, you must regenerate the SSL certificate. This may take a while, depending on your Web Hosting Site. Around 5 minutes with OVH.
• At this stage, you will be able to access your mail page with HTTPS.

You can check if SSL is correctly running on your domain now. Open a browser and type in your domain name with https, for example https://essai.laurencebichon.com.

In the following example, I did not activate SSL for the subdomain essai.laurencebichon.com. Here is the message I got with Google Chrome when asking to display https://essai.laurencebichon.com :

Configure your WordPress site for SSL and HTTPS

I will not describe here how to configure SSL in your WordPress site. It is not the main purpose of this post.

Basically, the idea is that from now on, your will only see https address in your WordPress site.

Addresses with HTTP or only your raw subdomain name will be transformed with HTTPS when arriving in your site.

Pages of your site will be viewed as HTTPS addresses in search engine results for instance.

Before migrating your site to RSS / HTTPS, make sure you make a complete backup of your website.

“Go to the full page to view and submit the form” Error

For the record, one problem I had when testing reCAPTCHA, is that I created a new test subdomain test.laurencebichon.com. I activated SSL on this subdomain and regenerated the SSL certificate. But in WordPress – Settings > General, I had “WordPress Address (URL)” set to http://test.laurencebichon.com instead of https://test.laurencebichon.com. I created my contact page with WPForms, configured it as an AMP page, but when I viewed the page, the HTTP address wad used instead of the HTTPS address. AMP could not display the contact page correctly.

AMP could not render all the page and suggested a link to the non-AMP version of the page : “Go to the full page to view and submit the form”.

On the other hand, if I used the HTTPS to access the page, AMP renders it correctly :

WPForms Lite settings

You made sure that your site is configured for SSL and serves HTTPS pages by default.

Now is the time to configure WPForms Lite.

Here are my WPForms settings :

I created “Simple Contact Forms” and added :

• reCAPTCHA V3 (only reCAPTCHA compatible with AMP)
• GDPR Agreement
• anti-spam honeypot (bots fill specific hidden fields, the WPForms know they’re not human)
• Notification > Email Subject (I set a pattern easy to recognize and filter in mails)

GoogIe reCAPTCHA Admin Site

In Google reCAPTCHA admin panel :

• Enter your domain name (laurencebichon.com), not your subdomain name (test.laurencebichon.com)
• the owner is defined by a Google address, no other email is accepted. We want to associate the reCAPTCHA with out WordPress site email. This implies that your site email has to be a Google address.
• check “Allow this key to work with AMP pages”

• every modification you make may change your reCATPCHA keys. Beware to update them on the WPForms Settings in WordPress everytime.

At the bottom panel, you’ve got also monitoring data.

This monitoring data is updated with a few days lag. So doing tests is not really easy.

A Simple Contact Page

I created a simple contact form in WPForms and inserted this shortcode in my contact page.

When testing the contact page, I had some erratic problems. This made me uneasy, as a robust contact page is important for my business. I don’t want to miss customer emails.

I sent or tried to send quite a lot of messages. Sometimes, I could send my message. But sometimes, I clicked on the SUBMIT button, the button went from light grey to darker grey, and that was it. Nothing happened.

With the console web developper tools, I could see Google reCAPTCHA returned an error, but it was not displayed.

So forced an error. I changed WPForms > Settings > reCAPTCHA > Score Threshold to 1.0. The maximum score I could do for reCAPTCHA V3 was 0.9 according to the admin score distribution. So I should have WPForms reject my message everytime I submitted a form. I tried to send a mail, got my light grey becomes darker grey effect, no message sent, no error message displayed, but an error reported in the console web.

Here is the errors from the developer’s web console :

[RECAPTCHA] There was an error running execute() on the reCAPTCHA script.
[amp-form] Form submission failed: Error: There was an error running execute() on the reCAPTCHA script.

Problem reproduced.

I then changed my contact page from AMP to non AMP, reran the test, and got the error message displayed on my contact page as shown in the image below.

I opened a topic at WPForms support forum here : reCAPTCHA errors not displayed in an AMP page. I will keep this article updated with this issue.

In the meantime,

I am testing this configuration.

About Google reCAPTCHA V3 Badge

I wondered why Google reCAPTCHA V3 badges appear on non-AMP pages, whereas they are not displayed on AMP pages.

I opened topic at :

• AMP by AMP Project Contributors : reCAPTCHA badge is not displayed on AMP page – AMP. Here is the answer :

“The badge isn’t part of the amp-recaptcha component, which is why it won’t display in your AMP URLs.”

WPForms : Recaptcha V3 badge not displayed in AMP – WPForms. The answer is the same as for the first support request :

“The v3 reCAPTCA badge does not display on AMP by default.”

These support tickets are closed.

In conclusion :

Conclusion

We’ve reached the end of this post.

Thank you for your visit and see you soon.