Most digital interactions often start with form filling. Whether you are inviting a user to register for your services or simply collecting leads, you need to use forms. Naturally, you need to create forms that offer users the perfect experience while interacting with your brand.

The challenge grows exponentially when you think of designing forms for mobile devices owning to their smaller screen size. Designers have solved some of these challenges creatively by adopting measures that boost interactions, improve conversion rates and increase transactions.

Before we delve further into these best practices let us throw some light into the importance of mobile form design. In a typical mobile world your users are likely to be filling forms while walking on the road, registering on taxi apps while negotiating airport queues or ordering food slouching on a couch.

Filling form on mobile

You must bear in mind that in all these scenarios they don’t enjoy the luxury of a keyboard or a mice. Hence the ease of form filling (or the lack of it) can be the difference between a successful business transaction and terminating the task midway.

Things You Must Bear in Mind

Designing form for large screen desktop/laptop based websites is completely different from mobile devices. There are few challenges/inherent features that you will need to bear in mind before you design a form for mobile devices. They are –

• Small size of the screen
• Touch input
• Use of device while moving
• Unstable network connectivity

As a designer, you will need to factor in all these when you are designing forms for mobile devices. Overlooking any of these can jeopardize the goals you have with the form in terms of user subscriptions, sales, downloads, etc.

Using phone to fill form

10 Best Practices for Mobile Form Designing.

1. Single Column Design – It is a no brainier, mobile forms should be a single column. If you even creatively thought otherwise you should seriously think of changing your creative hat! . If you are using Gravity Forms and want to have multiple column layout in desktop view and single column layout in mobiles then you can use Gravity Forms multi column layout plugin for this.
2. Keep Form Fields To Minimum – The thumb rule of mobile form designing is to keep the number of fields to minimum. The lesser you trouble them, the more they would admire you. Ask them to fill what’s required and not some information you wish to make use of 10 years from now!
3. Break Long Forms – When users have to scroll endlessly on their small screens it can irritate them and lead to the bad user experience. Rather you should try breaking a long form (only if they must be long) into smaller sections. Adding a progress bar also helps as it will tell your user that they are in the right track and shouldn’t think about aborting the task. All the major form plugins like Gravity Forms, WpForms and Ninja Forms provide this functionality in their pro versions.
4. Mark Optional Fields – You might still want to collect as much information from your user as you can and hence increase the number of fields. In such a case you need to clearly mark fields that are optional. This will save many of your users from filling out fields that have little or no relevance to their immediate needs from your form.
5. Field Names on Top – In typical desktop forms, the field names were positioned on the left-hand side of the screen. This made sense due to the horizontal orientation of the screens. Mobile screens are aligned vertically and hence you need to have the field names on the top. This also increases the field real-estate on your screen.
6. Font Size: The font size for field labels, dropdowns, radio buttons, checkboxes and inputs should be readable on small screen. You can make use of Gravity Forms Styler if you are using it. We also have Ninja Forms Styler as welll  as WpForms Styler plugins in case you are using any of those plugins in WordPress.
7. Integrate Auto Fill/Auto-correct – Nobody really enjoys filling forms on mobile devices and you can help them by integrating auto-fill feature. This will expedite the process along with auto-correct as typos are pretty common while typing on the small screen.
8. Make Use of Masks & Limiters – These are a must on mobile forms that ask for phone numbers, credit card details. Masks prevent people from filling in wrong phone numbers or missing out on digits. Limiters on the other hand alert users when they are typing in wrong information in the wrong fields.
9. Explain Specific Information/Tips – You may be requesting for information that isn’t directly linked to user needs or request for information that isn’t easily comprehensible for the users. In such scenarios, you need to highlight the tips using characters such as ‘?’ or ‘i’ and offer additional information when the users select them. If you are using Gravity Forms then you can make use of Gravity Forms Tooltips Addon.
10. Offer Options – Selecting check boxes or radio buttons is much easier than typing in the information. Wherever possible use these on your form. You can also use options to remove irrelevant fields for certain users making form filling easier for them.
11. Action Button – Never forget to add a large and easily distinguishable Action Button such as ‘Submit’, ‘Next’ etc. at the end of the form to separate different sections of the form. Once the user chooses the same you need to acknowledge the action which offers the users a sense of accomplishment.

When you follow these best practices you will be able to create mobile forms that engage your target audience and let you take these interactions to logical conclusions and transactions. Please bear in mind that  you need to design the forms creatively and put yourself into the shoes of a user.