Seven Tips for Instantly Better Webforms

If you don't want to lose potential users from the get-go, you'd better better your webforms. Listen to these tips and avoid driving users away with annoying, intrusive forms.

Jean-Baptiste Jung

May. 26, 16 · Web Dev Zone · Opinion

Like (3)

Save

3.32K Views

Webforms are a crucial part of every website. After all, this is how a visitor interacts with the site. Unfortunately, webforms are most of the time annoying or even painful for users. I’ve compiled some super useful tips in this article in order to create better webforms and make your visitors happier.

Keep It Short

However cool you think your form is, the fact is your users don’t like to fill them out. As an avid web user myself, I have to battle through dozens of forms every week, getting in touch with people, registering new accounts, and so on.

And let me tell you... at least once or twice a week, I don’t submit a form I initially intended to, just because the form is too long and/or asking for info I don’t want to submit. So, if you want people to submit your form, keep it short and simple.

Here are my recommendations on the matter:

Just ask what you really need to know
Use default choices (if you own a business in the US, most people who’ll get in touch will be from the US as well. So, if you’re asking for their country, make sure that “USA” is the default!)
Don’t overuse mandatory fields. If someone tries to reach you by email, there’s really no point in requesting a phone number!
On registration forms, offer the possibility to register with Facebook and Twitter.

Use Ajax Validation

There’s nothing more annoying than filling a long form, submitting it and… having to correct it and submit it over and over again, just because the username you’ve chosen has already been taken (for example). I personally remember giving up registering on a few websites because of this.

I already talked on CatsWhoCode about a very useful jQuery plugin named jQuery Form. It makes Ajax validation very easy, so make use of it to provide a better experience to your users.

Further reading: Super useful tools to simplify forms development

Make Sure It’s Mobile Friendly

Nowadays, most people are accessing the Internet with a mobile device such as a smartphone or a tablet. This is why you must always make sure that your forms are responsive and mobile-friendly. It’s really annoying when a form isn’t adapted to mobile browsing, and it might prevent many people from actually using your form.

Further reading: Making a website responsive in 3 easy steps

Give People Other Ways to Reach You

Are you on Twitter? Do you have a Facebook page for your site? Then, make use of social networks and provide links to your social media profiles and pages. Emails are great for in-depth, private conversation, but for a first contact, many people nowadays will prefer to use Twitter or Facebook.

Take It Easy With Captchas

Spam is a nuisance, we all know that. The favorite way of website owners to protect themselves from receiving countless spam emails a day is to use a CAPTCHA. CAPTCHAs aren’t bad by nature, but if you don’t want your users to give up sending your form, please, don’t use those unreadable, brown on black CAPTCHAs. Spam is your problem, not that of your users!

Use the Correct HTML5 Input Types

All modern browsers support HTML5 and its numerous additions to forms input types. Regardless, an incredibly huge amount of websites still use forms that were coded ten years ago.

HTML5 makes it easier for your users to complete forms and is widely supported, so there’s absolutely no reason not to use it. Check the article below for a reminder of the input types introduced by the HTML5 spec.

Further reading: Enhance your web forms with HTML5 features

Answer!

That may sound simple, but actually, all of the above tips are meaningless if you fail to answer on time to your visitors’ requests. Things are fast on the internet, and the competition is tough. So if somebody contacts you through your website and hasn’t heard back from you in 24 hours, you can be sure that this person is going to contact your competitor. Take pride in providing top-notch service!

Topics:

profiles, tools, jquery, form, user, user experience, web dev

Published at DZone with permission of Jean-Baptiste Jung, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Comments