The Importance of Having Responsive Contact Forms in Google AMP – and How to Create Them
sarikazdubey
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.
According to an announcement from Google in May of this year, there are now over 2 billion AMP pages across 900,000 domains, and the numbers continue to rise. As a result, SEO practices have evolved, and with more and more companies prioritizing building an AMP version of their website, brands that have yet to do so are in danger of falling behind.
One element of AMP design that has recently become easier to implement is the contact form. Originally not supported in AMP, web designers now have no excuse not to include responsive forms, and doing so has some very important advantages.
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:
They’re SEO-friendly
In April 2015, Google brought into place a penalty for sites that are non-responsive, making them rank lower in mobile search results. Therefore, in order to get your site seen by as many people as possible, it is vital to ensure it is responsive.
Ease of use
Sites that are responsive are by definition easier for visitors to navigate; important for encouraging new leads to engage with your site; after all, if they are unable to input their details into a form that is too big for the page they may abandon the process altogether.
They encourage conversions
More and more people are using mobile devices to browse the web; in fact, in the US their use has now overtaken desktop computers. However, as is shown in the chart below from Smart Insights, smartphone conversion rates remain comparatively low.
This could demonstrate the need for responsive design
It is certainly working for many brands that have implemented it. For example, clothing brand O’Neill has seen conversions increase by 65% since introducing responsive e-commerce versions of their site.
A good impression
Be honest, if you visited a badly-designed mobile site that had forms hanging off the page wouldn’t that affect the way you viewed that brand? Having a slick and well-functioning site across all devices is essential in order to give a professional image in this digital age.
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
The lightning speeds associated with AMP means that more potential leads are likely to engage with your brand. As the chart by Kissmetrics below shows, a large proportion of visitors will abandon a site that takes 4 or more seconds to load. If your business implements AMP it is, therefore, likely to drive a higher number of conversions.
SEO Compatibility
Given that AMP pages are SEO friendly and preferred by Google across SERP rankings, you are likely to see more organic traffic being brought to your website, as well as lower bounce rates and a higher number of clicks and impressions.
Flexibility and content performance
When using AMP, publishers and advertisers are able to choose how to present their content, as well as which technology vendors to use. This means that your business holds a greater level of power when it comes to leveraging the platform of the vendor that is the best fit for your brand, and you are able to test out several in the process, all while maintaining and improving key performance indicators.
The biggest names
AMP content is supported and presented by many of the most well-known market-leading companies, including Twitter, LinkedIn, Reddit, Pinterest, BBC, New York Times, WordPress, Washington Post, Weibo, and lots more. Having access to such reputable and broad-reaching brands is undoubtedly one of the greatest advantages of using AMP.
Customer retention
Encouraging visitors to keep returning to your website is not only an important factor in driving sales, it is also much easier than attracting new leads. The speeds and ease-of-use associated with AMP mean that a potentially high percentage of visitors will feel comfortable in using your site regularly. In fact, according to research by the Washington Post, AMP pages see an increase of 23% of mobile users who return within seven days. This is clearly a great chance to build a relationship with potential customers.
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
Different screen sizes will have different sets of challenges when it comes to input fields and CTA buttons; use range sliders where suitable and make sure checkboxes aren’t too small to tap easily with fingers.
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.
Test, test, test!
Finally, don’t forget to test your AMP pages across all devices. It may seem obvious, but ensuring that your site loads perfectly on all different sized screens is vital to making sure that all of your hard work isn’t undone.
