Modern Web Forms in React

While they’re often an afterthought, web forms are an important element of the user’s experience on any website. In many cases, they’re the only opportunity your users have to communicate with your organization.

A well-designed web form impacts customer satisfaction, conversion rates, and even the perceived credibility of your organization as a whole. In fact, according to Stanford’s Web Credibility Research, 75% of users say they judge a company’s credibility based on its website. Even though web forms can seem very simple, there are a number of important considerations to weigh.  Modern frameworks like React have introduced an abundance of new resources and design patterns for developing forms.

Augusto Digital recently worked with a client to develop the profile management flow for their new alumni portal. During this project, we encountered a number of interesting challenges related to web forms.  Below we analyze several tools that we used throughout this project.

Form State Management with Formik & Yup

A classic problem in web development is form state management. In other words, how does a page keep track of which fields have been edited, whether the form is submitting properly, and what to do with a response from the server? What about field validation and error messaging?

Formik is a forms library for React that greatly simplifies these processes. It eliminates many of the repetitive aspects of form development by keeping track of form state and validation. Formik also makes it easy to customize the form submission flow for tasks such as preprocessing user input.

One of my favorite features of Formik is integrated Yup schema support. Input validation is traditionally one of the more challenging aspects of web form development, but Formik and Yup greatly reduce that burden.

Customizing validation rules and behavior can be done through simple templates. For example, our solution for this client enabled users to link multiple email addresses to their account. However, it was important to ensure that each email address wasn’t already associated with that account before allowing it to be submitted. By adding a custom validation step to our form, we were able to check the input against the existing list of email addresses.

A form can be configured to validate inputs on change, on submission, and/or when a  field loses focus. This ensures that errors can be timed to maximize helpfulness and minimize abrasiveness. It also helps reduce the computational load of more intensive validation steps, by tightly controlling how often they run.

Creating Better Select Elements with react-autosuggest and Fuse.js
Our work with this client involved a number of complex select and multi-select elements. For example, alumni were prompted to select the various clubs and organizations they belonged to during their time at the university. Options for these elements were loaded from a server-side table, and could number in the hundreds.

We needed a solution with intelligent type-ahead prediction and great performance, so we opted for a combination of react-autosuggest for the input element. React-autosuggest’s highly-customizable select elements were a great candidate for large lists of options with long names.

These elements also include the ability to provide custom matching functionality, so we used Fuse.js for fuzzy matching. This combination allowed our inputs to be more forgiving with exact phrasing, spelling, and capitalization.

If the element being searched is an object with multiple key/value pairs, it’s possible to supply weights for the various keys. By giving some keys higher values, we can treat them as preferred when searching against multiple values simultaneously. In the example below, we have weighted a state’s abbreviation more highly than its name. This allows us to assume that the string “AK” is more likely to represent “Alaska” than “North Dakota,” even though the two letters do not appear next to each other in the former.

React-phone-number-input and Google’s libphonenumber for international phone numbers

Another common obstacle with web forms is how to handle something like input masking for a phone or credit card number. Input masking fills in the dashes, parentheses, and other special characters as the user types, in order to make the number appear more familiar in its formatting.

When done well, input masking makes it much easier for the user to digest long strings of numbers. But when it’s done poorly, users can experience performance issues, confusing errors, or even corrupted data.

These problems can be amplified when there is uncertainty over what format the number should take. One example of this is a phone number input field. It’s rarely safe to assume that all phone numbers will be of the same nationality, and there are many formats for phone numbers throughout the world. How, then, do we go about determining how to mask and process these numbers?

A great option is react-phone-number-input. Built on top of Google’s libphonenumber library, react-phone-number-input is a highly-customizable input element that allows the user to select the nationality of their phone number, as well as settings for default country and locality-detection. By storing both a phone number and its country of origin, it’s always possible to present phone numbers in their intended format.

Modern webforms offer a level of power and customizability that was only a distant dream in the early days of the web. When the correct tools are leveraged effectively, the result can be a complete transformation in the quality of your users’ experience. Although the nuances of good form design are subtle, studies have shown that providing a good experience for your users is a great investment. In fact, every dollar spent on UX has been shown to return between $2 and $100.

We invite you to contact our team today to see how we can help you produce an outstanding website that your users will love to interact with.

Schedule an intro call today to see how our product centric approach can revolutionize your process.