How to Create AMP Form in your WordPress Website?

0
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:

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 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 creating 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.
How to Create AMP Form in your WordPress Website
  • 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
  • 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. 
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 recently created.
How to Create Contact Form
  • 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, 

Elegant WordPress Themes

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.