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.
Contents
hide
1
Create AMP Form in WordPress:
1.1
Install AMP WordPress Plugin
1.2
Install WPForms WordPress Plugin
1.3
Create/Add New Contact Form on WPForms
1.3.1
Customize WPForms
1.4
Publish AMP Contact Form
2
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?