Modern Web Forms in React

SEARCH THE BLOG

FILTER BY TOPIC

SUBSCRIBE NOW

Receive tech insights and tips from Augusto

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.

Errors for empty and invalid email addresses

 


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.

A react-autosuggest field with Fuse.js fuzzy matching

 


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.

SPECIAL OFFER:

FREE Custom Software Application Evaluation from Augusto!

If you have a custom software app, you need Augusto’s Application Support Service. Your app’s performance directly impacts your business’s performance. Which is why proper support is so important. But how can you tell if your app is being properly supported or not?

For a limited time, Augusto is offering a FREE custom software application evaluation. This service (regularly $3,000) includes:

  • Review of your application’s business case
  • Assessment of your application’s technology
    An architectural diagram illustrating how your application’s system works
  • Identification of the challenges currently facing your application that are impacting your day to day (i.e. security threats, down time, and bugs).
  • Suggestions for areas of improvement
  • Next steps for proper support so you can ensure your application remains agile and adaptive to your business.

Having a comprehensive understanding of how your custom software application operates and is connected will save your business time and money. Claim your FREE application evaluation today. Terms and conditions apply.

Sign Up For Our Newsletter

Stay up to date on the latest news, insights and offerings from Augusto.

This field is for validation purposes and should be left unchanged.