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 it load faster on mobile devices and increases the performance of the site

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 being, 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 on ‘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 the jump to the next step. WPForms is the lite version of the WPForms Pro plugin. However, both the free and premium version allows creating AMP forms. In this tutorial, we will use 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. 
Create Contact Form in your WordPress Website

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. 
How to Create AMP Form in WordPress Website

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. 

Create Contact Form WordPress Website

After this, you can configure the filed options. 

  • Simply click on a field, the field options will appear. 
How to Create AMP Form in your WordPress Site

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.

Create Contact Form in your WordPress Site

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. 

How to Create AMP Form in WordPress Site

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

Create Contact Form in WordPress Site

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. 
How to Create AMP Form in WordPress
  • Click on Add New Block and Select WPForms
Create Contact Form in WordPress

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

  • Select the Contact Form you just created before. 
How to Create Contact Form

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 the tutorial guide. 

Also Checkout, 

Elegant WordPress Themes

L-arginine is an amino acid. One study found that oral L-arginine was no better than a placebo in treating ED, but another study found some evidence that high doses of L-arginine can improve blood flow and help ED. revatio 20 mg Potential side effects of use include nausea, cramps, and diarrhea.

Leave a Comment