Posted in Forms Automation

Responsive Forms: The Tactical Guide for Modern, Growing Organizations

The modern workforce is picking up their mobile devices and not putting them down. The BYOD (Bring Your Own Device) trend has skyrocketed in the last decade with nearly 90% of employees connecting to company networks via their mobile devices 

As this trend continues, your customers and employees expect to leverage portability and access forms and business services from anywhere and from any device. This gives customers the flexibility to interact with you anywhere and from any device. It also gives employees the freedom to keep projects moving without being chained to their desktop computers.

The end result? Your organization also saves time and resources as projects get done faster and more efficiently — and provides a better customer experience.  

There is a caveat, though.

Increased efficiency is only possible if people use your mobile apps. Poorly-designed, non-responsive forms keep them from fully enjoying and embracing the mobile experience. And for growing organizations, a frustrating mobile experience creates an unproductive work environment and employee disdain for difficult mobile applications. 

The good news is that virtually any form or workflow can be optimized for mobile. Employee onboarding, contracts and quotes, proposals, expense forms, and more—all from any device, and from any location. 

Let’s go over the characteristics of mobile-optimized forms, what they are and how to implement them into your employee’s workflow. 

What Are Responsive Forms?

Your forms should work on all mobile devices to create a seamless experience for all employees. This means optimizing for Apple, Android and all sized devices, from tablets to smartphones.

Responsive forms get the job done because they automatically adjust for all devices, screen sizes and orientations. 

web form

For example, here’s a typical request form on a desktop website:

If you make the window size smaller or view the form on a smartphone, it looks like this:

responsive web form

Because the form is responsive, it automatically re-orients its fields and adjusts to the screen size. Notice how the hero image is gone and text titles were moved above the input entry fields. If this form weren’t responsive, the text titles would remain to the left of the entry fields.

Filling this form out on mobile would then require users to scroll and pinch to view all of the information. In fact, had the form not been optimized, it may not have been visible without scrolling since the large image would have crowded it out. 

Why is Mobile Design so Important for the Modern Workforce? 

Mobile applications and forms have become an important component of the modern workforce. A 2016 CITO Research study found that 91% of corporate employees are using at least one mobile app and 45% of companies employing more than 10,000 people provide apps to at least half of their workforce. 

If you’ve ever tried to fill out a form on a mobile device that isn’t optimized for the mobile experience, you will know how frustrating the process can be. After pinching and scrolling for a while, you may have abandoned the task completely and put it off until you can access a desktop computer. 

Your customers and employees feel the same. Without optimization, they’ll abandon the experience and put it off until they can access their desktops. The greater the user effort and/or confusion, the worse the user experience, which wastes time and lowers productivity.

6 Characteristics of Streamlined Mobile-Optimized and Responsive Forms

The key to success with mobile design is simplicity. When users see your forms on mobile devices, their first impression should be one of ease, not complexity. If they start pinching and scrolling, frustration will quickly set in. The quicker they feel they can get to form completion, the greater the chance they will use the form. Here are some must-haves when it comes to form optimization on mobile.

1. Optimized Layout and Minimal Whitespace

When optimizing your forms for mobile, keep text labels above entry fields so the instructions are easy to follow. Here is a frevvo form re-oriented for a smartphone.

Optimized Layout and Minimal Whitespace

If you are numbering your fields, ensure the input fields are in order so it doesn’t confuse users. 

Take advantage of your screen’s real estate as well. For example, on a smartphone your form’s fields may be laid out from top to bottom. But, as the user increases screen size, change to a side-by-side layout to optimize the space. 

As an example, here is the same form as above but optimized for a larger screen, a tablet. Notice how the fields expand in width to take up the screen’s real estate and minimize whitespace. 

Optimized Layout and Minimal Whitespace

2. Bigger is Better

Your form’s font is not as easy to read on a smartphone screen compared to a desktop computer. Smaller screen size calls for larger fonts, at least 16px in size. 

Consider enlarging the size of your tap targets (buttons, links, etc) as well. Navigating a screen with a mouse is more precise than using fingers. If there isn’t enough space around your tap targets, the user will inadvertently tap the wrong target, resulting in a poor user experience.

Recommended tap target sizes depend on the device. Apple recommends a minimum size of 44 px x 44 px in its Human Interface Guidelines. Android recommends a minimum of 48 x 48 dp which is around 9 mm, the average size of a finger’s pad area. According to Google, “Touch targets should also be spaced about 8 pixels apart, both horizontally and vertically, so that a user’s finger pressing on one tap target does not inadvertently touch another tap target.”

3. Designed for Vertical Scrolling

Mobile users naturally scroll down their phones, not across, so the path to form completion should start from top to bottom, not left to right. Linear (single-column forms) contribute to a positive mobile user experience by setting a clear path to form completion for the user and encouraging downward scrolling. 

As mentioned earlier, user perception of form complexity determines usage level. To the user, a one-column form appears easy to complete as it doesn’t involve left to right scrolling. Multiple columns cause the eyes to go back and forth and can cause confusion on where the form begins and ends. 

Designed for Vertical Scrolling

The user will be able to complete single-column forms faster as well. A CXL Institute study found that participants completed a single-column form 15.4 seconds faster than a multi-column form.  

Note that you can use multiple columns and place more than one field in the same row as long as they are shorter and related (city, state). The key is to ensure the user can see all of the form fields on the screen without the need to scroll horizontally.

Designed for Vertical Scrolling

4. Speed it Up With Automation

Filling out a form on a mobile phone, regardless of how intuitive it is, is still frustrating if the forms houses multiple input entries. 

One way to improve the user experience is to automate some of the user actions. For example, if the user makes an error, let them know instantly rather than validating the error later. It’s much easier to correct a mistake right there than to reload the form after it’s been submitted.

Eliminate unnecessary data entry. For example, when a user has to fill out a set of employee onboarding forms that require inputting their address multiple times, ask for the address once and automatically populate it on the other forms.

You can also automatically pre-fill fields where possible, such as first and last name from the logged in user’s information, or part numbers from a connected SQL database.

Lastly, you might consider performing calculations automatically so the user never has to manually enter any discounts, subtotals, and other computed fields.

6. State of Progress and Completion Steps

Long, multi-step forms are more user-friendly on desktop computers where screen real estate is abundant. Yet, filling out these longer forms on smaller screens can interrupt the mobile user experience. 

One way to improve the user experience for longer form completion on mobile devices is to break up the form into several pages and provide progress steps or pagination so users can easily follow their journey to completion without confusion. 

Here are some tips:

  • Add Next and Previous (Back) buttons to show the user the recommended form flow
  • Add numbered pages
  • Include a “Success” message once the user completes the form

Below is an example of a multi-step form in frevvo. We added page breaks to make the form easier to digest. Notice how on a smartphone, the form includes Next and Back buttons. This will make form completion easier for the user.

State of Progress and Completion Steps

7. Hidden Fields

To keep your mobile forms simple and uncluttered, only include necessary fields for the user, and hide unnecessary fields unless they are required. 

For example, on an Employee Application form, some questions may only be applicable to past employees of the company. Hide the related questions (i.e. how long did you work for the company?) until the user chooses “yes” to being a past employee.

Create Professional, Mobile-Optimized and Responsive Forms with frevvo (No Coding Required)

As we discussed, optimizing your employee forms will improve productivity and allow your employees to become more portable and efficient. 

Implementing these mobile-friendly features and creating easy-to-use responsive forms can become challenging, however. Typical company solutions may involve using various specialized applications depending on the medium (HR-based app for HR forms, financial provider for related forms, etc.). But this can get expensive and confusing to deal with multiple vendors. Mobile applications and optimization may also require complex coding and developer help. But, not with frevvo.

frevvo is an all-on-one mobile forms creator that enables you to easily create online forms and workflows that integrate with your current systems. 

Built-In Mobile Features with frevvo 

With frevvo, mobile-friendly features are already embedded into the forms. So once you create a form on your desktop computer, it will automatically be mobile-friendly and responsive, accessible on any mobile device. 

Built-In Mobile Features with frevvo

Here is a sample purchase order request form created on a desktop computer with frevvo’s easy drag-and-drop form creator.

frevvo  example

Once you deploy your frevvo form on your desktop computer, you don’t have to do anything else to optimize it for mobile. Here is the same form on a smartphone. 

frevvo phone example

Notice how the form automatically adjusted to the smartphone screen size.

The input fields are also oriented perfectly for vertical scrolling, a key feature for a positive mobile user experience. We didn’t change the code or fix the fields. frevvo automatically optimizes the forms for the screen size.

To take advantage of frevvo’s responsive forms, simply create a form on your desktop computer. The forms are responsive and mobile-optimized so all you have to do is deploy the forms. If you want to check out an easy 4-step process on creating accounting forms, visit this article.

Beyond responsive forms, if you want to optimize your user’s mobile experience further and take advantage of some of the best practices we discussed, this is also easy with frevvo. 

Drag-and-drop to Add Pagination

With frevvo, adding pagination to longer forms to break up the length is as easy as a two-second drag and drop of your mouse. No complex coding or lengthy instruction needed. For example, if we wanted to add a page break in our purchase request form above, we would drag and drop the page break control from the palette at left to the form as shown here:

When the user views the form on mobile, the first page of the form will end after your page break and the Next and Back buttons automatically appear in the form.

Drag-and-drop to Add Pagination

Point-and-click to Hide Unnecessary Fields

As discussed, mobile-optimized forms should exclude unnecessary fields unless required by the user. This reduces clutter and streamlines the forms. This would typically require custom coding, but with frevvo, it only requires a few steps during the form creation process.

For example, if in your employee leave approval form, you wanted to show specific fields only when a user selects a particular option (a certification checkbox appears when the employee selects “sick leave”), you could easily add rules to your forms to create this logic. Or in another example, your loan application form could include inputs for a co-borrower that only appear if the box is checked indicating that a co-borrower will be included on the application.
If you wanted to add a certification checkbox that only appears if the user selects “Sick Leave.” you would create the Certification text field and check “Hide Label.”

Point-and-click to Hide Unnecessary Fields

Then, set up a visual business rule for this hide feature. frevvo business rules allow for form customization without the need to hire a developer or create custom code. 

Setting up this certification logic when users click on “sick leave” would look like this:

Mobile Form Optimization Without Expensive Applications, Coding or Hassle  

To recap, frevvo’s mobile form builder utilizes built-in mobile features so every form you create will naturally work on mobile without any extra effort or HTML/CSS coding fixes. If you have a developer and you want to customize the forms, frevvo is still flexible enough to customize, but anyone can use it regardless of their technical skill.

Before you invest money into expensive applications and custom coding, consider using frevvo to optimize your form’s mobile workflow. frevvo has an easy-to-use drag-and-drop form builder along with world-class support that is available to answer any questions/concerns. Focus on how your employees use your forms and let us do the rest. 
Want to see your mobile-optimized company forms in action? Try frevvo free for 30 days or request a free demonstration so we can show you how frevvo can help your organization easily adopt modern, mobile-optimized forms for your workforce.

Create your own responsive, mobile forms in just minutes. Sign up for a free 30-day trial now.