The introduction of Accelerated Mobile Pages, or AMP, in 2015 has to lead to big changes in the way that online content is designed for and delivered to hand-held devices.
Why Contact Forms Should be Responsive
A responsive form is one that adapts to the size of the browser or screen that the web page is being viewed on. Without ensuring the responsiveness of your contact forms, you’ll end up with input fields that do not scale down and are therefore hanging off the page, as in the example below from Formidableforms.com.
There are several reasons why making forms that scale down is important, most notably:
Ease of use
They encourage conversions
This could demonstrate the need for responsive design
A good impression
What is Google AMP, and What are the Benefits?
The official AMP site defines the project as ‘an open-source initiative aiming to make the web better for all. The project enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms.’
Announced on October 7, 2015, the project is backed by Google, along with a range of other market-leading companies including Twitter, WordPress, LinkedIn and Pinterest to name just a few. It allows publishers to have their pages load much faster on mobile devices, and so far, so good; indeed, Gizmodo reports that AMP pages load three times faster than their non-AMP counterparts.
Often compared to the likes of Facebook Instant Articles and Apples News, AMP achieves its top speeds by allowing developers only the bare bones of HTML, and serving pages from its own servers in the majority of cases. In order to set up AMP you’ll need to create a separate version of your site, which will then have a separate address, as is shown in the image below from the AMP project site.
So, what are the benefits of AMP?
Higher performance and engagement
Flexibility and content performance
The biggest names
How to use AMP for Contact Forms
After the introduction of the amp-form extension, users can now add contact forms to sites with AMP HTML. There are two options when it comes to creating forms for AMP pages; HTTP and XHR. For website owners using WordPress, there is an AMP plugin to make the process much simpler.
The first step is to put the script in the header of the AMP version of your site.
You will then be able to customise the success/error messages as is shown in the image below taken from the AMP By Example page; this is the official guide created by AMP and features lots of helpful code examples and demos.
For more detailed instructions, or for those not currently using WordPress, there is a fantastic guide at Search Wilderness, put together by search marketer Paul Shapiro.
Ultimately, there may be some trial and error involved in setting up your contact forms in AMP, but doing so correctly is extremely important in ensuring that your mobile site is completely responsive and visitors can engage effectively with your business. At Global Database we have a final few tips to bear in mind while creating your forms:
Functionality is key
Keep it snappy
Limit the number of fields in your contact forms; research suggests that 3-5 is the optimum number, and this becomes particularly important when visitors view your site from a mobile device with a touch-screen. Basically, if you can get away with just having one or two fields, for example, email address and full name, the more likely you are to see less frustrated users and therefore a higher number of conversions.