Collecting information from prospective clients is the bread and butter of any online business. That being said, facilitating the ease and fluidity of collecting that information from the user perspective is imperative.
During my many many years of web development, I’ve developed a set of rules I used when it comes to designing web forms. And I’ve so graciously decided to share those rules with you here today!
Rule 1: Take the Guess-Work Out of Input Formatting
As I indicated previously with the phone number example, you’re going to want to use some form of input formatting for the data fields you intend to collect. This not only makes the user experience more fluid, but also allows you to standardize the format of the data you want to collect.
There are a handful of input masking libraries available. The one I use most is jquery.mask, which depends on the jquery library. There are also vanilla JS libraries available as well, such as imask.js.
Example: Masking Phone Number Input via Jquery.Mask
Rule #2: Use Google Maps Autocomplete for Address Input
Address standardization is a common practice, especially by eCommerce companies. Ensuring that you’ve received a deliverable address from your client is key to providing the best user experience.
There are a number of address correction services out there. There is, of course PostalPro, by the USPS. But that costs a lot of money. I prefer to use the Google Places Autocomplete API to achieve both address standardization, as well as the autocomplete features, which further streamlines the user’s form entry experience. The Google Cloud API is mostly free. The non-premium quota is up to 6,000 requests per minute and unlimited requests per day, so unless you’re Amazon, the free version will most likely do!
You’ll need to create a Google Cloud account and generate an API key to use the Places Autocomplete API.
Example: Google Places Autocomplete API
Rule #3: Use the Appropriate HTML Type Attributes for Input Fields
Choosing the proper input type is particularly useful on mobile devices. For example, if you specify input type email, a mobile keyboard will pop up with functions conducive to entering an email address.
Mobile Email Example:
As you can see, a customized soft keyboard appears on this iPhone. Note the @ symbol next to the spacebar. Had you used input type text, the user would have had to take additional steps to enter the @ symbol.
Mobile Phone Example:
Again, a custom keyboard appears with only digits. A modifier key also appears that allows entering other symbols such as — + # etc.
You can use the tel input type for other types of input as well, such as zip codes or other numerical entries.
Rule #4: Handle the Operation of the Enter Key
As a computer programmer, I am a keyboard-oriented user, which means I keep my hands off my mouse as much as humanly possible. When I’m in an input field, I expect the enter key to either advance to the next field or submit the information I entered.
I wrote a jQuery plugin called jQuery.onEnter.js. You can include it in your project using the following CDN:
<a href="https://cdn.jsdelivr.net/npm/@email@example.com/jquery.onEnter.min.js" target="_blank">https://cdn.jsdelivr.net/npm/@firstname.lastname@example.org/jquery.onEnter.min.js</a>
Enter Key Input Example:
Rule #5: Don’t Use Overly-Complicated CAPTCHA Challenges
It’s necessary these days to use a CAPTCHA challenge to keep the bots at bay. CAPTCHA stands for Completely Automated Public Turing Test To Tell Computers and Humans Apart. Alan Turing was a turn-of-the-century genius who is responsible for modern day computer science.
Although we must use these types of checks to stop bots from flooding our inboxes and filling up our databases with garbage, your CAPTCHA test needn’t be overly complex.
Here is an example of what not to do:
The above text is indecipherable by both computer and humans alike! Having such an insurmountable hurdle on your website would be essentially UI/UX suicide.
There are some really good CAPTCHA services out there that can help you balance between convenience and security. Google reCaptcha is one, but I stopped using it long ago due to Google’s awful privacy practices. Instead, I now use hCaptcha, which is super easy to set up and completely free.
hCaptcha Challenge Example:
This particular hCaptcha challenge is set to easy mode. Higher-level challenges may have the user click on several series of images before approving the test. Unless you’re a major site like Amazon or Google, this type of complexity is simply not required. And of course, if you start experiencing bot attacks, you can always log into hCaptcha and change your difficulty setting.
Rule #6: Test, Test, Test and Test Again!
Once you’ve designed your form, it’s imperative that you test it on a variety of platforms and browsers. Both Google Chrome and Firefox have some nice web developer tools for testing your site on mobile devices. But it’s also important you test your site on actual mobile devices as well, both Android and iOS.
If you follow these rules when designing your web forms, you can be sure that your potential customers will be able to connect with you in a comfortable and user-friendly manner. After all, that’s the whole point: getting new customer leads!
Thank you for reading. For more great website development information, please visit our Blog!