How to Build Web Forms: Top 10 Best Practices

The primary aim of web forms is to be filled out. People who view or start completing a form do not necessarily submit it. Form owners therefore need to encourage users to carry out the entire process. Here are ten best practices that will make your forms more appealing to users and will raise the number of submissions you receive.

1. Documentation

Gather knowledge on the tools you are going to use. Assuming that you are using an online form builder that requires no coding skills, you still need to play a bit with the platform and get familiar to its capabilities.

2. Content structure

Especially when you build a longer form, content should be grouped in sections. Signal these sections either graphically or by textual headings that indicate what type of information is requested in the following fields. Users comprehend well-structured forms faster and are more willing to fill them out.

3. Label positioning

Field labels can be positioned in three ways. With top-aligned labels, users are able to scan the form quickly, but the form takes up more space. Left-aligned labels are sometimes too distanced from the input area, but save space. Right-aligned labels save space, are close to input areas, but take their toll on the overall form appearance and readability.

4. Typing stress

Make sure that users have to type as little as possible. Use choice fields when appropriate (radio buttons, dropdown lists, checkboxes) and take advantage of predefined fields – their structure shows precisely what needs to be typed where.

5. Interactivity

A closer form/user relationship can be created using advanced form features. Set up field rules to show or hide form fields based on user input. This way, you won’t be asking for superfluous information. Users will be impressed by both form interactivity and content relevance.

Best Designed WordPress and Bootstrap Themes

Designmodo Shop

6. Required fields

Keep forms short and simple. Users can always navigate away from your page, so don’t claim too much of their time. From this perspective, most form fields should be required ones. Go straight to the point. if you want more information besides that point, create another form. Optional fields are not forbidden, but try to keep them to a minimum.

7. Design and layout

Form appearance influences users’ decision to stay on or leave your page. It takes users 8 to 10 second to make this decision. Use few and carefully chosen colors (those that represent your brand, if that is the case), avoid graphic clutter and go for one-column forms when possible.

8. Security

The most common way to protect web forms is by using CAPTCHA images. These are verification codes that can only be read by humans, hence preventing forms from being abused by robots. You can use smart CAPTCHAs, which show up when the web form seems to be abused and do not interfere with user activity otherwise.

9. Guidance

Assist users in filling out your form. This can be done in several ways: use predefined fields, which are very easy to understand; add field instructions to provide clarification on what information is requested; show highlighted error messages and indications on how to solve errors.

10. Confirmation

Don’t give up on users once they press submit. Show a Thank You message to let them know that you value form submissions. This message can redirect users to your website. There is also the option of sending a confirmation message to form users via email.

How to Build Web Form

Among web tools for creating forms, 123ContactForm.com is one of the most practical sites, suiting everyone’s needs, from professional web designers and developers down to any user without programming knowledge. Once you defined what types of forms you need and where you want to display them, things go easy as a pie. The site offers a real-time form builder in 3 easy steps.

3 steps

You can create: contact forms, polls or questionnaires, mailing list, registration forms, order forms.

form types

The process of form building is efortless. You just drag and drop the fields you need and then customize them. Your form can the dress up in fancy colours, with a variety of themes to choose from. Submissions are sent to you via e-mail (you may speciffy even more than one recipient) and can be stored on the site’s server on request. You can run queries, look over statistics and export submissions in CSV.

reports

In which concerns security, you have the option to include CAPTCHAs in the form, and even smart CAPTCHAs, to show up only when there are signs of abusive usage. Also, some user packages include password protected forms and SSL data encryption, for increased level of security.

Vendors are able to receive payments from any order form they create. 123ContactForm.com offers payment integration with several merchants such as PayPal, Google CheckOut and Authorize.Net credit cards. Of course, first you can assign prices to products and go through a wide range of options for notification and confirmation.

Afte having set up a form, there comes the step of publishing it on your website, disseminating it via e-mail or social media.

publish form

123ContactForm.com provides very handy integration the most popular mediums. A main feature of which 123ContactForm developers are proud of is the WordPress plugin. Bloggers can easily embed their forms on their WordPress platforms through this application, which very short after its release has been accepted and added to the WordPress Plugin Directory. You need to just install the application in your WordPress plugin list and feel free to integrate any form on your blog from then on.

Other ways of form publishing are embed codes (JavaScript, IFrame), Lightbox, links. You can also integrate forms in Facebook pages, Blogger posts and Google Sites or tweet them! Usability is the main idea in form building and publishing, so go searching for it in the right places.

Florin Cornianu

Florin Cornianu is the CEO of 123ContactForm, a free web form and survey builder. While working as a developer for Alcatel-Lucent, Florin decided in 2009 to leave the company and co-found 123ContactForm. This best practice article is based on 3 years of form building experience.

Newsletter

1 Comment
  1. Susan Nov 17, 1:03 am

    Gravity forms is a sweet premium plugin. Jotform is pretty cool too (web based). I think it integrates with paypal and also has a facebook option for FB page code. I’ll have to check out 123 contact form though, looks cool!! May be good for a couple of projects I’m working on.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters