How to Create AMP Forms in WordPress

July 7. 2020

In order to make websites load faster on mobile devices, Google has made a project called Accelerated Mobile Pages, or AMP. And, while it does offer a great mobile browsing experience by making your webpages load faster, it also disables many useful features on your website. One of those features that can be considered a great loss is contact forms. Since AMP uses a limited set of HTML and JavaScript, it unable to load your WordPress forms properly on AMP pages. Luckily, there is an easy solution available. WPForms is a rather beginner-friendly WordPress form plugin that helps you create AMP-ready WordPress forms. So, in the following article, we will explain in great detail how to create AMP forms in WordPress using WPForms.

Learn how to create AMP Forms in WordPress

So, AMP is rather useful for making your website mobile-friendly. And, installing and activating the official AMP plugin for WordPress is a prerequisite for using AMP with WordPress. Once you have activated it, the plugin will automatically add Google AMP support for your WordPress site. However, you are able to change AMP settings for your website by going to AMP > General from your dashboard. When you are on the AMP settings page, you can enable or disable AMP on your website, but also choose a website mode for AMP, and choose supported templates. After configuring AMP, you will have to create an AMP-compatible contact form on your WordPress site.

Creating a WordPress form with WPForms

To initiate the process, you will have to install and activate the WPForms Lite plugin on your site. This is the lite version of the WPForms Pro plugin. Both the pro and the lite versions of WPForms allow you to create a basic AMP ready contact form. Here, we will talk about the free version. After you’ve installed and activated the plugin, you will have to head over to WPForms > Add New page to create a new WordPress form. When on the form setup screen, you will be able to choose a form template to get started quickly.

If you want to start from scratch, we suggest that you go for the Blank Form. It will then open the form builder page. From here, you are able to add or remove form fields. To add a new field to your form, simply click on a form field from the left panel, and it will appear in the form builder panel on your right. After you are finished, you can configure the field options. To do so, click on a field, and then Field Options will appear. In a similar fashion, you can customize all the other fields.

After that, click on the Settings tab to configure your form settings. Through General Settings, you can change your form name, submit button text, submit button processing text, enable anti-spam Honeypot, and more. Go to the Notifications tab to set up email notifications that will let you know when a user completes the form. The Confirmations tab will help you set up a confirmation message to be shown when a user submits the form. After the configuration is complete, make sure to save your form.

Adding AMP Form to a Page

Having that your WordPress form is ready, you can add it to a page. You will, first, need to create a new page or open an existing one where you want to add the form. Open your page edit screen, click on the Add New Block icon, and proceed with selecting the WPForms block. Upon doing so, you will be able to see the WPForms widget added to your page edit screen. You just need to select the form you created earlier, and the widget will immediately load it in the page editor. You can also publish or update your page. And that is all to it. You don’t have to configure anything else. The WPForms Lite plugin will now add full AMP support to your form. In case you are interested in how it looks, you can open the page on your mobile phone.

How to add google reCAPTCHA to your AMP form

WPForms includes anti-spam honeypot to catch and block spam by default. In addition, you can use Google reCAPTCHA to reduce spam submissions. In order to use Google reCAPTCHA with your AMP forms, you are going to have to register your site for Google reCAPTCHA v3 and get the Google API keys. To do so, go to the Google reCAPTCHA website and click on the ‘Admin Console’ button at the top right corner of the page. You will then have to sign in with your Google account. Upon doing so, you will see the ‘Register new site’ page. Start filling it out by entering your website name in the Label field. Google AMP only supports reCAPTCHA v3, so you will have to choose it from the reCAPTCHA type options.

After you are finished, enter your domain name under the Domains section. The Owners section will show your email address by default. Know that you can also add another email if you wish to do so. Next, you will have to accept the reCAPTCHA Terms of Service in order to continue. Also, don’t forget to select the ‘Send alters to owners’ checkbox. This will allow Google to notify you about the problems like misconfiguration and suspicious traffic on your site. After you are done, click on the Submit button. You will then see a success message along with the site key and the secret key to add reCAPTCHA on your site. This key allows you to add reCAPTCHA to your forms.

Additional adjustments

However, there is one more adjustment you need to take care of. It will ensure AMP compatibility with the reCAPTCHA. To access it, click on the ‘Go to Settings’ link there. This will lead you to reCAPTCHA settings again with ‘Allow this key to work with AMP pages’ checkbox. Just check the box and click on the Save button below.

Now that you have Google API keys to add reCAPTCHA on AMP forms, go to WPForms > Settings > reCAPTCHA page in your WordPress dashboard. Then choose the reCAPTCHA v3 option and paste the site key and secret key. Click on the Save Settings button. Now that Google reCAPTCHA is added to WPForms, you are free to enable it in your forms where needed. Go to WPForms > All Forms and select the form where you want the reCAPTCHA enabled. When the form setup screen appears, click on the Settings tab and select the General Settings section. You will see ‘Enable Google v3 reCAPTCHA’ checkbox. Check that box and save your form. After that, revisit your contact page and see the AMP form with reCAPTCHA in action.

Not that much to it

As you can see, in order to create AMP forms in WordPress, you needn’t go through much trouble. Especially when you have this guide by your side. We hope we’ve helped you out and that you will see all the benefits of AMP Forms after following these few simple steps.