Creating Good and Functional Contact Forms

The primary purpose of Contact forms on websites is to establish communication with clients/users/customers hence its’ importance. It is necessary for every website to have contact forms through which prospective clients can interact and communicate with businesses.

A good contact form in a right positioned place goes a long way to provide engagement and conversions for business. It is crucial to maintain an easy to read and understand form which is not ambiguous. User should be able to relate with the form and provide the required inputs as required. It is also important to note that a contact form is the entry point to a website

A good form UI is key to having an interactive form for user to communicate with. Most developers would think that having a complex form with all forms of animations and widgets floating everywhere, but the reverse is the case. Create all forms with simplicity in mind. Keeping it simple and stupid is the basic principle of design.

Leonardo da Vinci – “Simplicity is the ultimate sophistication.”

Best practice for forms

1. Excellent UI/UX

It is advisable to have a contact form fade away from view, the smooth fade effect creates a soothing feeling for the user. Users relate better to simply created forms with cleanly placed labels providing substantial information. Many new developer make the mistake of checking and building forms with the most outrageous concepts. Form validation is important but it should not interfere with the user experience. Responsiveness is a very important attribute of web-forms, and forms working without obstruction in whatever device is a bonus to the website owner.

2. Fewer input fields

The information required may be much, but it would be best to kept form fields at its minimal. I often advise to provide only prominent inputs for clients to fill out.

Statistics show that people respond to forms with fewer fields than those with a whole bunch of fields. This goes to all form types; in situations where the need for so much data is required, the form should be broken down into sections, this gives the user the feel of accomplishment while filling out such forms. It is also important to provide a progress report for the user as he progresses.

3. Placeholders should not replace labels

It looks cool having labels within the input field, it makes for simplicity and compactness. However, placeholder as form labels should be avoided; users could forget what a form input requires and would have to erase their typed inputs in order to view labels

4. Secure and spam free Form

Forms could be created by practically any web developer but building a secure and spam free takes expertise. I remember creating my first contact form on this website, it was functional but secure? Nah!!! I had so many spam contacts, filling up my mail inbox with all sorts of junk. I made my research and found a couple of solution which worked for a while then didn’t. Yes, using Capcha works but tends to be annoying to users.

When building a secure form, one needs to check out for;

  • Both client-side and server-side form validation
  • Automatic bots submission prevention
  • Cross-Site Request Forgery (CSRF) attacks

Use both client and server side validations so as to protect your forms from intrusions from browser which lack support for Javascript. Server-side validation is done to prevent hackers from accessing files and resources on your server. Note: do not settle for the default function for validations because hackers have discovered means to bypass such validations. Hence its usually a best practice to create ones own validation.

In order to prevent bots form filling and submission, a simple means I discovered here to create a dormant hidden form field and check for it when the form is submitted. As bots would always see this field and fill it out.

These are a few tips and tricks on how to create a good contact form. Feel free to leave a comment below to add your suggestions on other means and tricks to creating great and functional forms

Don't miss out!
Subscribe To Newsletter
Invalid email address
Give it a try. You can unsubscribe at any time.

One thought on “Creating Good and Functional Contact Forms”

Leave a Reply