If you’re using Google AMP on your site to speed up mobile views, you may have noticed that it can also keep some of your site’s functionality from working properly.
Ain’t it always the way?
But we’re here to tell you that you really can have it all. If, by “all” you mean that what you want is to create mobile-friendly, responsive forms.
In this article, we’re going to show you how to make responsive forms for WordPress that will play nice with Google AMP.
Dreamy, right? What’s not to love about speedy, AMP-compatible, responsive forms that work the way you want them to?
What is Google AMP (Accelerated Mobile Project)?
Google AMP is an open-source initiative by Google with the noble goal of making web content load faster for mobile users. Google’s hope is that AMP will help creators build web pages that are faster, smooth-loading, and make the user experience a priority, above everything else.
Why Create AMP Pages and AMP Forms
Roughly 60% of search queries on Google come from mobile devices. Making your website AMP-friendly ensures that your site loads faster on mobile devices, practically guaranteeing a better user experience for more than half of users.
Plus, when your pages load faster, visitors stick around longer. This reduces your bounce rate, increases pageviews, and can go a long way toward improving your search rankings.
The good news is that WPForms makes it easy to add responsive forms to your pages with their AMP feature.
How to Create Responsive Forms on Your AMP Pages With WPForms Lite
Since you’re going to be creating AMP pages on your WordPress site, you’re going to want the official Google AMP plugin.
From your WordPress dashboard, go to Plugins » Add New and search for AMP in the search box.
Next click on Install Now, then the Activate button to get the plugin activated on your site.
When setting up your AMP plugin, make sure you’re using the Standard or Transitional mode. In either of these modes, the AMP plugin will use templates and stylesheets from your active theme for AMP responses instead of the lightweight template (Reader mode).
Step 1. Install WPForms
Once you have the Google AMP plugin active, you’ll need to install the WPForms plugin.
To do that, go to Plugins » Add New and search for WPForms in the search bar at the top right corner of your screen.
Once you’ve located the plugin, click on the Install Now button, then click Activate, just as you did to install and activate the AMP plugin above.
Step 2: Create Your First Form
Now that you’ve installed and activated both the Google AMP and WPForms plugins, you’re ready to create your new form.
Go to WPForms » Add New from your WordPress dashboard to create a new form.
Enter a name for your form and select the Simple Contact Form template.
This form already includes a few fields by default, but you can add fields to your form by dragging them from the left-hand panel to the right-hand panel.
If you want to make changes to an existing field, click on the field in the right-hand panel to open the form field options for that field.
You can even click and drag form fields to rearrange the order on your contact form.
When you’re happy with the way your form looks, click Save in the upper right corner of your screen.
General Form Settings
Now, you’ll configure the form settings. To do this, go to Settings » General.
From here, you can edit a number of things about your form, including its name, description, submit button copy, and more.
When you’re done editing the general form settings, click Save.
Form Notification Settings
Next up, set up your notifications.
You can do that by going to Settings » Notifications.
Receiving notifications on form submission is the default setup, so unless you want to disable it or change it, you don’t have to do anything here.
If you’ve made changes to your notifications, be sure to save your form!
Step 3: Publish Your Form
After you create a simple contact form, it’s time to publish it on your WordPress site.
Create a new post or page in WordPress (or choose an existing post or page you want to add your form to) and click on the Add Form button. Next, pick your contact form in the modal popup and click Add Form.
After that, just publish your post or page and your contact form will show up on your website.
That’s it! You’ve just learned how to create an AMP-compatible responsive form for your WordPress site using WPForms Lite.
Now that you know how to add responsive forms to your site, why not check out our tips to boost your mobile conversions?
And don’t forget that WPForms + OptinMonster = phenomenal engagement and growth! Click here to get started with OptinMonster today!
Published by Jacinda Santora
Jacinda Santora is a writer specializing in ecommerce and growth marketing. She prides herself on her ability to make complicated things easier. When she isn’t writing you can find her daydreaming about campervans, drinking coffee, and listening to podcasts.