How to Create an AMP Form in WordPress (Step by Step)

Do you want to create an AMP-friendly (Accelerated Mobile Pages) contact form on your WordPress website?

That’s where the WPForms plugin comes in handy. WPForms is one of the most user-friendly form builder plugins that lets you create beautiful AMP-friendly contact forms for your website in a few quick and easy steps.

In this article we will show you how to use the WPForms plugin to create a brilliant APM-friendly contact form on your WordPress website. But before that let’s quickly understand the importance of AMP.

Why Create AMP Pages and AMP Forms

According to a study, nearly 60% of search queries on Google come from mobile devices. By making your website AMP-friendly, you can ensure that your site loads faster on mobile devices.

Google Accelerated Mobile Project is an open source initiative by Google that geared towards speeding up the mobile browsing experience to a great extent on the open web. AMP puts mobile browsing experience a step forward. The basic idea is to dramatically boost the page speed of your website by using an additional light-weight template that is optimized for speed.

Faster loading web pages offer improved user-experience and encourage visitors to stay longer on your site. That way you can reduce the bounce rate and increase the likelihood of improving your rankings.

However, since AMP uses a separate lightweight template for loading your pages, it may affect the contact forms, javascript functions, and other elements.

To display contact forms on your AMP pages, you can use WPForms, the best form plugin for WordPress.

Let’s now have a look at how to use WPForms to create contact forms on your AMP pages.

Step 1: Installing the Google AMP Plugin

Before we dive in and create a form, let’s take a look at how to create AMP pages on your website. The AMP plugin is the official Google AMP plugin on WordPress.

To find this plugin, search AMP in the search box by navigating to Plugins » Add New.

Now click on the Install Now button followed by the Activate button to let it start working.

Step 2: Installing WPForms on WordPress

Next, let’s install the WPForms plugin on your website. For that, just log in to your WordPress dashboard and go to Plugins » Add New. Now type WPForms on the search bar at the top right corner of your screen.

Once the plugin is located, click on the Install Now button and then the Activate for the plugin to start working.

Step 3: Creating Your First Form With WPForms

To create your first form with WPForms, go to your WordPress dashboard and navigate to WPForms » Add New

You will now have the following window on your screen.

You will see 4 different options here. Depending on your requirement you can select the template that will best fit your needs.

For the sake of this tutorial, let us select the Simple Contact Form option. You will now be redirected to a drag and drop form builder where you can add or remove fields to and from the pre-built template that you have just selected.

All available fields are shown on the left-hand side. The fancy fields can be used only if you upgrade your plugin to the premium version. However, the standard fields are also good to go.

To add a field to your form, simply drag it from the left and drop it on the form section to your right.

If you want to remove a field from the form, just hover your cursor over that particular field. You will see a delete icon on the top right corner of the field.

Just click on that option and your field will be deleted. Using this method, you can remove any field from the form that you think is not needed.

You also have the choice to change your field options. You can change the format of the fields, the size of the fonts, hide or show labels and sub-labels and so on.

Once done, click on the Save button on the top right corner of your form, so you do not lose your changes.

Now if you look to the left side of your panel, you will see an option called Settings. When you click on it, you will see several options. For the lite version, you will be able to use the first three options only.

Under the General option, you can change your form name, add a description, change the submit button text, change the submit button processing text and so on. It also lets you enable anti-spam honeypot and Ajax form submission option.

Now go to Notification. This option will have several options for you to fill in. The main field in this part is the From Email field. Here you can add your website or brand email address. You should also ensure that your website has been configured to an authorized service provider for sending out the emails.

Step 4: Displaying Your First Form

To display your first form, go to the page where you want your form to appear. If you want to create a new page, click Page » Add New. Add a title to your page.

Click the + icon to add a block to the Gutenberg editor. Then type in WPForms and once it appears, click on it.

Next you’ll be asked to choose the right contact form, so select the form.

You can now click on the Publish button on the right side of your WordPress dashboard to publish your post. Your WordPress AMP form is now live.

You can also use the Newsletter Letter SignUp Form and the Suggestion form templates that are available to you in the beginning of the process. Depending on your requirement, choose the template you want for your website. The Blank form option lets you create the form from scratch. If you want a brand new form, try out that option

That’s pretty much it. Your website should now have the AMP-friendly contact form that you wanted to create.

We hope this article was helpful to you. If you liked this post, you might also want to read our step by step guide on how to create a Multi-page Form on WordPress.