Recently, I advised a client on the best practices for designing a form on their company’s website. Originally, they were considering using a lightbox form, a JavaScript technique that allows for a window to pop up when a website visitor clicks on the associated link. I quickly advised them away from that because their form was not going to be a short or simple one, which is when lightbox is an appropriate solution. Rather, their proposed form is long with a lot of content. And when a form is a long one, the user experience (UX) within a lightbox will suffer, affecting accessibility, too. When it comes to a web form with a lot of fields and content, there are three things to consider. Use these tips to create a web form design with great UX and accessibility.
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!
Create Conditions
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.
Hey, great post. Just wanted to ask a question regarding using a JavaScript form. “If your application user disables JavaScript then the user will just see the basic page and nothing more.” Is this true?
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!