Break It Up!
Breaking a long form up into chunks can help make it easier for users to fill out and focus on one block of content at a time. This can also greatly benefit users who may suffer from conditions such as dyslexia or attention/comprehension issues. This approach has the added benefit of making the form less intimidating or daunting and it looks better visually, too.
The two most common ways of approaching this technique are to either break the form up into sections on one page, with clear separation, or to break the form into multiple pages. A really good example of this can be seen on our client’s site Loveisrespect.
Less Is More
Simply looking over your form fields and identifying fields that can be either combined or eliminated can greatly help the user in filling out the form. For example, instead of having a First Name and Last Name field, why not combine these into a single Full Name field? Do you really need both Cell Phone and Home Phone fields? Could you also eliminate the Surname field? These types of questions are great for reducing the form length!
My final tip is to show form fields conditionally. For example, if you have a section of the form asking about children, why not first have a radio button asking, “Do you have children living at home with you?” and if the users select “Yes,” then you conditionally load in the extra fields related to that. Most modern form builders allow you to do this very easily. We use this tactic on almost all of our clients’ Gravity Forms.
These tips are truly simple and applying them to the next form you design and add to your website will go a long way. A well-designed web form will not only enhance your website’s UX and strengthen its accessibility, it will also increase conversions, turning website visitors into customers.
2 thoughts on “3 Tips for Proper Web Form Design”
Hey Aaron, glad you enjoyed the post! So first off, there are 2 cases I’d want you to be aware of where JS might hinder your form: 1.) JS is disabled by the user, as you mentioned (which is less than 2% of users) 2.) JS simply didn’t download because of connection speed or firewall (much more common scenario).
In either of these cases, if the form relies on JS to submit (like an AJAX form) then the user will still see the form but be unable to submit it, unless the form is being added to the page via JS then you’re right; the user would just see the content and nothing more.
Let me know if that helped and if you have any other questions!