How to Create AMP Form in your WordPress Website?

Do you want to create AMP(Accelerated Mobile Pages) friendly Contact Form in your WordPress Website? Enabling AMP makes the site load faster on mobile devices and increases performance.


Create AMP Form in WordPress:

Install AMP WordPress Plugin

Install WPForms WordPress Plugin

Create/Add New Contact Form on WPForms

Customize WPForms

Publish AMP Contact Form

Wrapping Up

Create AMP Form in WordPress:
AMP is a Google project that offers a fascinating mobile browser experience by disabling many features of the site. One of the disabled features is the Contact Form. The reason is, AMP uses separate templates for loading pages which affects contact forms, javascript functions, and other elements. 
However, this issue can be simply solved by creating AMP-ready Contact Forms by using the WPForms plugin. It is one of the most beginner-friendly plugins. The team has worked with Google to create AMP forms for WordPress
In this tutorial, we will learn to create AMP Forms on the WordPress site. 
Let’s start:
Install AMP WordPress Plugin
To use AMP with WordPress, it is necessary to install and activate the official AMP WordPress plugin. It is a free plugin. Follow our tutorial How to install a WordPress Plugin?
Install WPForms WordPress Plugin
As a second step, you need to install and activate the WPForms plugin. Learn to install a plugin following our tutorial. If you already have the plugin on the site, skip this step. WPForms is the lite version of the WPForms Pro plugin. However, both the free and premium version allows the creation of AMP forms. In this tutorial, we will be using the free version. 
Create/Add New Contact Form on WPForms
Before creating an AMP form, create a simple contact form from WPForms. For this, 
Click on WPForms>>Add New.

Provide a name and select a template for the form. 

Here, in this, I have selected a Simple Contact Form. Users can select the template type as per their preference. 
Next, it will open a form builder page. 
Customize WPForms 
Add/Remove fields and customize your form. 

To add a new field to your form, click on the form field on the left panel. It appears on the right panel. You can customize all the forms in the same way. 

After this, you can configure the filed options. 
Simply click on a field, the field options will appear. 

You can customize all the forms in the same way. 
The General Setting options in the form allows to change form name, submit button text, submit button processing text, enable anti-spam Honeypot, and many more.

Next is the notification tab, here you can set up email notifications. This will notify you when a user completes the form. You can enable or disable it. 

Next is the confirmation tab. Click on it to set up a confirmation message when a user submits the form. 

Save the form. 
Publish AMP Contact Form
After you finish creating a WordPress form, it’s time to now add it to your AMP post/page. 
Create a New page or edit the existing one where you want to add a Contact Form. 

Click on Add New Block and Select WPForms. 

As soon as you click on the block, you will be asked to select the Contact Form.
Select the Contact Form you recently created.

Publish the Changes. 
This is the end. WPForms plugin will provide full support to the form. To view what the form looks like, open your site on a mobile device. 
Wrapping Up
In this tutorial, we learned to Create AMP Form on WordPress Website. AMP provides a better performance of the site on mobile devices. You can simply enable Contact Form on mobile devices following this tutorial guide. 
Also Checkout, 
How to Moderate Comments in WordPress?



Leave a Comment

Your email address will not be published.

Table of Contents

On Key

Related Posts

Best Google Maps Plugins for WordPress

Before we start looking at any plugins, it’s good to review the way Google Maps work. There are several components in the Google Maps API family, all of which can be found on the Google Maps API Family page. When working with WordPress, we are mainly interested in two of these APIs: Static Maps APIMaps

How to Get a Custom Field Value via Shortcode

Sometimes we want to make it easy for site administrators to include the value of a custom field (maybe created as part of a custom meta box) into a post. An ideal solution to this challenge is to use shortcodes. You can either do this through these two plugins: Get Custom Field Values Custom Fields

Best Auto Translation Plugins for WordPress

Having the content of your website available in different languages can mean a much bigger audience for you. A very simple way to do this is to provide automatic translators, they’re not the same as manually translating all your content, but do a pretty good job. It’s better to have an automatic translation plugin than

Best WordPress Multilanguage Plugins

The two main contenders as best multilanguage plugins for WordPress are WPML and QTranslate. If you want a quick answer to which one comes out on top, I would say go for WPML. If you have enough time to give them a test drive, by all means, do so and judge for yourself which one