Do you know what AMP is? AMP or Accelerated Mobile Page is a project from Google that actually helps your website to load a lot quicker.
But there is a slight problem with this facility. Although AMP truly improves your loading time, it tends to disable a lot of features that may have been incorporated on your website.
This is the reason why you might face some issues in loading WordPress forms on AMP pages.
Is there any feasible solution?
Although there was a time when creating AMP friendly forms on WordPress was a serious issue, but now a days with the help of WPForms plugin, you can easily by pass the issues with loading a contact form on AMP page
There are 2 different ways to do so.
The first method is pretty much simple. You need to design a non-AMP friendly version of contact form using WPForms and it will do the rest.
Whenever you try to open the contact form, it will detect whether it’s running on an AMP page or not.
In case it’s running on an AMP page, it will create a link to the original form and put it on the contact form page.
This method can obviously work fine but if you wish to add an AMP friendly form, you will need to follow the second method.
Once activated, it will add AMP support for your WordPress website. You can also change the AMP settings from the dashboard as well.
Once you are done with the AMP settings, you can then get started with creating AMP-friendly contact forms.
To create contact form using WPForms, you will have to install it first. If you search for WPForms in the plugin finder, you will see that there are two versions of this plugin available.
The Lite version and Pro version both supports and allows you to create AMP-friendly forms and the Lite version being free for use, many prefers to go with it.
Once installed, you will have to activate it. Now you can go to your dashboard, find WPForms plugin from the list, and click on “Add New Page”.
The form setup page will open and you will have some templates to choose from.
Either you can decide to choose one of the templates available or you can easily choose a blank form and build it from scratch.
Once the Form Builder is loaded, you can get started with the customization.
It’s basically a drag and drop facility that allows you to build a form of your choice and there should not be any problem for anyone to get going.
You can easily delete or add new fields to the form. In case you wish to add a new field, all you need to do is click on the form field you wish to add from the left panel and it will be added to the form review.
To configure each and every field added to the form, you need to click on it and avail the Field Options.
Once done, you will have to configure your form settings. From the settings tab you will be able to change the name of your form, the text shown on button, processing text, and a lot more.
To set up email notification, you have to specify it on the email notification tab. This will ensure that whenever someone submits the form, all the information will be mailed to your desired email id.
You can even configure the message shown upon successful submission of the form.
Once you are done with the configuration part, you can save your form. The next step will be to add the AMP- friendly form to your Contact Us page.
Since your contact form is ready with you, it should be easy to add it to any WordPress page you want. The first thing you need is to create a page.
For that you will have to go to your dashboard and click on “Add New Page”. Once you have created a page, click on “Edit”. Now click on “Add New Block” option.
From the list of options, select “WPForms block”. Once you are done, you will be able to see WPForms widget on your page.
Now you can select the form that you have created in the earlier step. The widget will help you load the form on your page instantly.
Now you can publish your newly created page or in case you are adding the
form to an existing page, you have to update it. That is all you need to do.
You won’t have to go through any other critical configuration; instead the WPForms will take care of the AMP support for your contact form.
Testing the page
Testing your Contact Us page is fairly easy. In case you have followed the method 1, the contact page will show a link to your original contact us page which does not support AMP.
In case you are going for the method 2, you will be able to check with either your mobile phone or your PC.
In case you are using a mobile phone, you can directly open your Contact Us page and it should show fine and should be functional as well.
To check the page from desktop PC, you will have to change the URL a bit. For example, if your contact us page URL is: www.yourdomain.com/contact, then for desktop browser the URL will be www.yourdomain.com/contact/AMP.
So, now that you know how you can create AMP-friendly contact form for your WordPress page, its upto you which of the two methods you wish to use.
No matter which method you choose, you can rest assured that it will meet your purpose without any doubt.