All Forms posts

  • Display Warning for Unsaved Form Data on Page Exit

    Display Warning for Unsaved Form Data on Page Exit

    Updated on · 4 min read

    Few things are more frustrating than losing all the unsaved work when accidentally leaving the page with a form. Therefore, adding a confirmation dialog asking a user to confirm a redirect when they have unsaved form changes is a good UX practice. By displaying this prompt, the user is made aware that they have unsaved changes and allowed to save their work or discard it before proceeding with the redirect.


  • Advanced Multistep Forms with React Hook Form

    Advanced Multistep Forms with React Hook Form

    Updated on · 6 min read

    Previously we have built a simple registration multistep form with React and React Hook Form. This post builds up on that and brings some improvements to the form, namely enabling data saving on step navigation and highlighting the state of each step.


  • Build a Multistep Form With React Hook Form

    Build a Multistep Form With React Hook Form

    Updated on · 7 min read

    Multistep forms a.k.a. wizard or funnel forms have a wide range of uses. They are most common when collecting different types of information into one data structure but are also useful to break down very large forms into the less user-intimidating multistep process. In this post, we'll build a basic multistep registration form, which collects the user's info and then presents it in a confirmation view, which can be reviewed and edited before the submission.


Back to all posts