Series introduction
This series assumes the reader has an intermediate understanding of React JS and Tailwind CSS.
Web forms are arguably one of the most important tools in web development and design. They drive conversions and bridge the communication gap between you and your audience. When implemented poorly, they can serve to frustrate and alienate your audience. Good designers always seek to make forms as easy to use as possible. Reducing friction for one's audience increases conversion potential and makes web sites/apps more pleasant to use.
Historically, web forms have been one of the more clunky parts of the audience experience. For example, server side validation requires submitting the form to the mercy of a request-response cycle before the audience can recieve feedback. I'm sure most of us have had the experience of our web form state being cleared, having to start over entirely 😩.
On the development side, implementing web forms well has been a lot of work. Fortunately as the front end has become more capable, development has followed suit and shifted toward the front end. This has allowed for innovative approaches that make both the audience experience and the developer experience happier. The audience gets more real-time feedback on thier progress with less friction and the developer can implement the improved experience with less work.
In this two part series, we will take a look at the following tools that are leading the drive to make web forms a more pleasant experience for everyone:
- We will start by ensuring our form is accessible and pleasant to look at using @tailwindcss/forms. @tailwindcss/forms is "a [Tailwind CSS] plugin that provides a basic reset for form styles that makes form elements easy to override with [Tailwind CSS] utilities."
- We will then look at how to implement real-time form validation using React Hook Form; a super light, performant, and easy-to-use form validation library.
- Along the way, we will see how to handle form submissions using Netlify Forms. On the Jamstack we seek to reduce technical debt by elmininating unnecessary complexity. Often, the answer lies in elegant 3rd party solutions. We will see that in most cases, one no longer needs their own dedicated server for form handling, among other things. Freeing up our time and effort for building better products, rather than building infrastructure.
Ready to dive in?