A form is any element in your online store that lets a customer submit information. For example, your contact forms, payment pages and sign-ups all require details from your customers. Forms matter for two BIG reasons:
This article applies psychology, UX principles and marketing tools to help you streamline your Shopify forms. But, before we give you our 6 top tips for user-friendly forms, you need to know how to edit your Shopify store and what makes a form either nasty or nice.
There are four ways to edit your Shopify forms:
Your Shopify Theme is the template that decides how your online store and looks and feels. Working within this template is quite simple. You can customize your theme settings directly from your Shopify admin, using the theme editor.
Form builders are, if anything, even more straightforward. The best thing about using a form builder is the level of flexibility it affords you. Want to create a simple form in minutes? You can fully customize a pre-existing template and embed it on your store in minutes. Prefer to create something with advanced functions? You can do that too - just use features like conditional logic, answer piping, webhooks, integrations and custom HTML/CSS to create exactly the form you need.
The most difficult solution is to edit your Liquid code. Shopify runs on its own programming language, designed to make sectioned editing easier. For developers, learning to edit Liquid code is reasonably straight-forward. However, first-time coders might struggle with the format. To access your Theme's code, you just select the option in your Shopify admin.
When a customer enters your website, they don't know if it's a safe-haven or a haunted house. So, you should think about your forms as though they are a mysterious creature blocking the hallway...
To avoid spooking your customer, there are some things you need to do straight away (and some things to avoid at all costs).
Firstly, you need to show them they can trust you. It's simple enough to do; just tell them exactly why you need their information, and what you plan to do with it. In the form above, each section is annotated with an explanation saying what will be done with the customer's information.
Secondly, try not to ask for more information than is required. You've already explained what you need and why; asking for more detail can cause unnecessary "friction". It is important to take all the fear and uncertainty out of the experience.
Thirdly, there should be some kind of reward at the end. Rewards are usually implicit, but you should remind your customers that there is a reason they're giving up their time, effort and information.
Turning your form into a "treat" can make the difference between a full sign-up list and an empty database. These are our 6 top tips for making your Shopify forms more user-friendly.
Users will only be willing to part with their personal information (not to mention their time and energy) if they feel they are getting something in return. It's your job to show them that they are...
This sign-up form for a Staples "Advantage" account lists the potential benefits in a separate block. Each one is associated with an icon, to help the user visualise it. With so much to gain, typing in a name and email address seems worth it...
Excessive demands and detail create a serious hurdle for users. To make things easier, you should reduce the complexity and the amount of information you request. Keep the number of fields to a strict minimum, and pre-fill forms fields wherever possible.
For complex forms you can't eliminate, break them down into organised, manageable sections (like "Billing Information"). This structures the form AND tells the user why it's necessary.
While splitting your forms with a Shopify theme can often require custom code and technical work, using a form builder allows you to separate your forms into pages and sections with the click of a button.
Customers want to know what they are getting into before they begin. Holding back the full details, to encourage users to start the process, will only lead to abandoned forms.
An easy way to outline the full process, without scaring customers away, is to use a progress bar. There's another advantage to this strategy; it produces what is known as the Zeigarnik Effect.
The Zeigarnik Effect occurs when a task is partially completed. Not only do we feel a strong urge to complete a task, we also remember incomplete ones more strongly than those we have finished. Amazon uses a progress bar to encourage users to complete their purchases. The cart icon is playful, and the use of colour reinforces the impact of complete/incomplete sections.
Gamification involves using game mechanics and rewards to make everyday experiences more fun. Every time a user visits your website, they receive silent feedback telling them what sort of behaviours are rewarded. If you don't manage these effects, you could be sending the wrong signals.
Soft gamification incorporates tacit rewards within everyday website features. Rather than presenting users with a literal game, the soft approach applies isolated elements of play. This could include congratulating your visitor with a "great job" when they complete a section of your form.
Hard gamification transforms an everyday activity into a game. Apps like Swell and Smile allow you to create a point system to reward your users. Similarly, apps like Duolingo test their users and reward them with positive feedback. This system engages the visitor by appealing to competition and the pursuit of success.
The process needs to be clear to customers. If they feel like are left to fend for themselves, with no clear instructions and no end-goal, they will simply abandon the page.
Friction will dissuade your visitors from completing their journey through the conversion tunnel, let alone filling out your form. It is important to eliminate this friction by making the process of filling out a form as easy as possible.
Some plug-ins, such as website notifications, allow you to engage customers during their session. That means you can guide them through your forms and make sure they stay on your page. Accompanying your customers through their online journey will allow you to increase sign-ups without paying to acquire more traffic.
Bear in mind that, within the Shopify universe, plug-ins and apps cannot be used on payment pages.
An easy way to reduce friction at the payment stage is by creating an interactive form that displays certain text or elements based on the respondent's selections. This is easy to do using a form builder like Paperform that offers conditional display and logic.
The importance of testing your forms is a step that is often overlooked and undervalued by site owners. Customers will be very sensitive to even the slightest inconvenience, so testing is vital. Some responses might cause glitches, for instance, and these need to be found before you go live.
Asking a third party to test it is worth considering. This is because every developer experiences a cognitive effect known as the Curse of Knowledge. You understand your form and your intentions perfectly, so it’s hard to see them from an outsider's point of view. Analysing your product from an uninformed perspective is one of the trickiest aspects of development, but a third party can more objectively assess your form to see if it really is as user friendly as you think it is.
The customer will always perform a simple cost-benefit analysis. The problem is, this won't be rational. Risks often seem much larger than they are and costs (like time and effort) seem more significant. Customers need to feel safe and rewarded, even if they are not fully aware of this when they land on your site and find your forms.
Working with this inherent psychological feature will go along way in increasing conversion rates. By lowering hurdles, validating them through gamification and building trust through transparency you are redressing the balance. If you want your Shopify forms to be user-friendly, you need to design them for human brains.
Create the perfect form for your Shopify store in minutes using Paperform. Try it free for 14 days with no CC details required.
Looking to boost your social media engagement, grow your following and increase brand awareness? This guide will show you how.
Looking for an alternative to PayPal? We've got you covered with our comprehensive guide to the best eCommerce platforms for all your payment needs.
Want to be a good interviewer? In this handy guide we outline 10 simple tips to help take your interviews to the next level.
The right payment gateway is crucial to the running of your ecommerce business. In this guide we compare three of the best: PayPal, Stripe and Braintr...