How To Create Mobile-Friendly, Responsive Forms for Easier Engagement

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.

create mobile-friendly, responsive forms with wpforms

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.

google amp landing page

For a page to be completely AMP-compatible, however, strict requirements must be met, limiting what can run on the backend of your site. Namely, AMP doesn’t allow extra JavaScript to load (which creators often use to enhance functionality).

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.

But remember, since AMP is using a lightweight template for page loads, it’s probably going to affect JavaScript functions and forms, among other things.

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.

search for amp in the plugin search box

Next click on Install Now, then the Activate button to get the plugin activated on your site.

install then activate the amp plugin

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.

search for wpforms plugin

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.

add a new form

Enter a name for your form and select the Simple Contact Form template.

create a simple form

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.

best wordpress forms plugin

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.

form field options

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.

general contact form settings

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.

add wpforms form to a new wordpress post

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!

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.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.