5 Best Practices for Designing a Helpful Web Form
This is a guest contribution by Andrian from Designmodo.
Are you designing a website for your business? If so, then you’ll want to put together a web form that is helpful and easy to navigate. Your visitors and customers will usually have a lot of questions to ask.
Aside from questions, some will have comments about your products or service. And you’ll have those who will complain about it and want a solution to the problem. Regardless, a simple web form to have them submit their questions in a standard format is often a great option.
We’ll be taking a look at the five best practices that you’ll want to put to good use while designing a helpful web form. These will come in handy whenever you are a web designer for clients or if you are a business owner building the site for yourself.
The end goal here is for a visitor to contact you in the simplest way possible. Not to mention, the easier it is to navigate the faster they’ll be able to send you a message. Let’s get started with the first thing you need to do on the list:
1
Do a sketch
Every great design starts with a blueprint. An architect will draw up a design for a house before it’s even built. The same can be said about a web form.
As the architect of this web form, you’ll want to figure out what should be included. One simple example is the usual name, email, subject, message, and send button. Seems simple enough, right?
However, not every web form is the same. Not only will you have these basic fields like the ones listed above, but you may also have a plan to provide more options. For example, you can put together a pull-down menu regarding what the message may be about, or what department the message may be for.
For example, you might be running a web hosting business and your customers can choose what the message or question is regarding. You have options like domains, hosting, and so on.
Another reason for a pulldown menu would be to direct the message to a certain department in your business like accounting, customer relations, marketing, etc. That way, it won’t get sent to the wrong person or the wrong department of a business.
Do some sketches of what your contact form will look like. What should it look like? What other options should you include (pull-down menus, radio buttons for options, etc.)?
You have plenty of options at your disposal ranging from menu options to even payment gateways (which is useful whenever someone wants to schedule an appointment with you). Even with a lot of options, don’t throw them together in one form and see what sticks.
Keep it organized and easy to navigate as much as possible. A complicated form can scare away even the most eager customer.
2
Set some required fields
You’ll want to tie a name or an email address to a message. Oftentimes, people either leave a lot of fields blank. You want to be able to get in contact with them. So it’s important to set some fields to where it’s required for them to fill it out.
The three fields that we highly recommend that you consider as required are as follows: name, email, and message. Any additional fields such as the reason that they are contacting you might be required as well. But the ball is in your court here.
Some contact form plugins (WordPress) or programs will allow you to choose whether or not each field can be required or optional to fill out.
3
Make the “send” button stand out
After you’ve filled out the necessary information and write a message, then you’ll need to press the “send” button. Uh oh...can’t find it? Ah, it’s got to be around there somewhere.
Simply put, you want the send button to stand out. That way, it will be easy to find and well...send that message to whoever it’s going to. Pretty simple, right?
One of the things that you want to consider is making the “send” button a certain color. Use a shade of green or blue as they have been the most effective colors for “send” buttons. You can even split test between the two colors to see which one will work out better in your favor.
Also, one trick to have up your sleeve is changing up the CTA or the call to action. Instead of “send here” or “submit”, choose a different CTA like “Go” or “Click Here”. The less generic it looks, the better.
4
Make it as user friendly as possible
If there is one thing you don’t want to skip on when creating a contact list is the user experience. Always follow email design principles to send a confirmation email. There are plenty of ways to make it as easy and simple as possible. Here are a few ideas to consider:
- If asking questions, keep them short: If you are planning on asking questions that may require a detailed answer, this should be simple, short, and to the point. Nothing too long-winded. Also, make sure that the answer section provides them enough space to give you an answer. Some will explain it in detail while others will keep it short
- Use autocomplete: If there is one thing that will make the contact form a lot easier to use, the inclusion of autocomplete can come in handy here. You could have preset options that can be included in the form like the reason for your message. The autocomplete should also be used in the name and email fields so the user doesn’t have to fill it out entirely
- Use checkboxes when necessary: Are you providing multiple options for anyone who may be contacting you? If so, this is where checkboxes will come in handy. Remember not to provide too many options. Simplicity is still the goal here
- Allow for users to correct mistakes: There are some contact forms that clear out whenever someone makes a mistake. This will frustrate some people since they may not remember the information they were trying to put in. Make sure that your contact form doesn’t clear in the fields that need correction (i.e -- email addresses)
- Always have a confirmation message: Finally, you want users to make sure that the message was sent. From there, you can explain to them what happens next. You can tell them that they can expect a response in 24 hours or less. Alternately, you can provide them with some kind of special instructions that they need to follow after they have initiated contact with you. As a wrap-up, you can redirect them to a “thank you” page.
5
Don’t ask for too much personal information
While there are some contact forms that ask for a telephone number or address, this might work to an extent. However, you should probably refrain from collecting such information. That’s because there will be users who might not be trusting you enough to give you their phone number and address.
Initially, it’s best to stick to the name and email in terms of personal information. Once you and your customers are farther into the relationship, you can ask whether or not they are comfortable with giving you their phone number and address.
6
Say no to the CAPTCHA
This is quite a shocking thing for us to say. While the CAPTCHA serves its purpose in deterring spam, odds are that it might not work to your advantage. That’s because it can be a bit complicated (if not frustrating) for a user.
For that reason, it can hurt conversion rates big time. Nine times out of ten, the people who send messages are human. CAPTCHA doesn’t make your contact form any more user friendly.
So how do you stop spam in its tracks? You can use alternatives like Google reCAPTCHA. It’s far less complicated than CAPTCHA. And it’s less intrusive as well.
You’ll also have other options like a double opt-in feature. You can fire off a quick email confirming that they sent a message to their contact form. Once the user confirms, then the message will go straight to who it's being sent to.
This is often the choice that many designers choose since it not only guards against spam but also serves to verify the email address that was submitted, reducing dropped contacts.
7
Provide more contact options
Last but not least, you’ll want to leave more contact options in case they need to reach you in the future. A contact form shouldn’t be the only line of communication. Offering website chat is a great choice, for example. And it will actually up the conversion rates a bit.
Final Thoughts
Creating a helpful web form is easier than ever. But you want to keep it simple no matter what. These five best practices listed above should be followed to a T. Especially when you want to make it as user friendly and easy to navigate as possible. If you want to include some graphics in your form, you could use free illustrations or photos.
No one wants to fill out the information on a contact form that is complicated to go through. The more complicated it is, the less likely it will convert. People have questions to answer, concerns to address, and want to get in touch with you, but you need to make it intuitive and functional
They don’t have time to answer a lot of questions or choose an image where they see a fire hydrant. The more organized and easy to understand your contact form is, the better.
