While fiddling around with Vue.js, the single best Javascript Framework, I wanted to use vuetify to – well just because I wanted to. Vuetify can be compared to bootstrap enhanced with the google material design. It is made specifically for Vue.js which makes it very easy to use.
I wanted to build a form. A part of a website, that usually feels clunky. Especially bigger forms overstrain users just by looking at them. To battle this, I made some tweaks:
Keep it simple
By dividing the form into multiple steps, you can guide the user through the process step by step. He doesn’t need to know that he has to fill out x more fields. The Top image shows that.
Ask important things first
I’ve seen so many contact forms where you have to fill out your contact info before writing your message. That whole time the user has his request on the tip of his tongue. Do him a favor and let him write it down.
Furthermore: Ask a single question to break the users barrier “Do I really want to fill out an entire form?” – Make it easy for him
Hide optional inputs
Your form is not on paper. If you have inputs depending on a previous asked yes/no question, show them if they’re needed. Why should the user see a “fill out only if xy is yes”?
Correct errorhandling
Tell your user where he missed an input. You also can disable the submit button as long as the form is not filled correctly but keep in mind that he doesn’t know if the button is disabled or just a grey button. You still have to catch a click to show errors.
The cherry on my cake
Use vue. I made this to see how easy it is to build a usable form and make it interchangeable for future projects. Now I’ve got a component where I just have to attach an object of inputs to. Take a look at the object, it couldn’t be easier to use. Did I mention that I am in love with vue? I am 🙂
