Beautiful web forms: 10 ways to use them to increase conversion rates

How do people sign up to your service? Through an online form. This little thing can either boost conversion rates or have no effect, depending on its design and capabilities. Online forms (of different types) are wonderful means of communicating with the public. They should therefore be given considerable importance while designing your site to success.

Also, check out a great contest at the end of the article!

Here are 10 tips for clever use of web forms that will help you catch all the butterflies in your net.

1. Research – First make it clear if you need a web form to gather information or whether it will be just a hook for audience. What attitude do you expect as a response, which are the best form fields to reach this objective and what capabilities should the form have? These are key questions. Think of a friendly approach – the sense of humour can have a place in online forms too.

2. SSS – keep it Short, Simple and Standard. Use a form design that is not average, but recognizable for users who already fill in dozens of web forms daily. Break the overall picture into smaller sections, so that users can easily scan through fields. Labels over fields should be clear and relevant for the content and positioned in the appropriate place (in the proximity of the input: top-, right- or left-aligned).

3. Personalization – Form layout should match your overall page design. Avoid graphic clutter. Use form templates with carefully chosen colours (the ones that best represent you) and display your logo somewhere visible. This tip applies even to the simplest contact form.

4. Reduce 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. Interaction – In complex web forms, rules over fields are a necessity, so that the questions show up based on the answers provided for the previous ones. If a user answered No at the question ‘Do you live in the countryside’, there’s no point in further asking him questions about the countryside; rather go on the other branch, designed for city inhabitants. The form builder you use should allow branching.

6. Required fields – These should be marked by a graphic sign. Whatsoever, better stick to the essence and use less of the unnecessary fields, because most users leave those fields unfilled anyway and there is a greater chance they abandon the form before finishing it, if there are too many of them.

7. Provide guidance – Forms should have instructions beside the fields, stating why it is necessary to provide that information, how will the owner use it or other appropriate guidelines. These messages help develop an owner-user relationship that builds up user’s trust in the service you offer.

8. Field validation – Choose what type of input should be typed into fields (e-mail address, phone number, ZIP code), in order to avoid the occurence of invalid submissions. It’s best to specify these conditions in the instructions attached to fields, even if you perceive these indications as being obvious.

9. Error handling – Once you have established the field validation requirements, your form builder has to be technically capable of highlighting the fields that contain errors, in order for form users to notice where corrections are needed.

10. Confirmation messages – Submitters feel relief when finishing a form and these messages should reinforce that. The message should be friendly and it should express your thankfulness as clearly as possible.

Contest giveaway

If you like to have create web forms for your own service, 10steps is partnering 123contact form to offer a really cool giveaway.

Prizes: 3 lucky winners will go away with a one year Platinum licensee (worth $300 value).

How to participate: All you need to do is to leave a comment on what you find the most useful about 123contactform.com after having a tour on their website. The 3 most relevant comment will be picked as winners of this contest.

Contest end: This contest will end on 15 Dec 2011. Winners will be announced within 2 weeks after the contest ends.

About 123ContactForm
123ContactForm is a software as a service that automatises the frequently pains taking programming process of web forms building. The free form builder, with its various form templates, can be used for creating any type of HTML or PHP form in 3 steps.

The GUI on www.123contactform.com is aimed at maximizing functionality/usability and at boosting visual impact. Ajax based, coherently structured and intuitive, the interface dispenses users from all technical concerns or unwanted clutter and allows assigning full focus to the real task.

Data security is a point of major interest for 123ContactForm. Alongside with a wide range of anti-spam options (CAPTCHA and Smart CAPTCHA, password protection, country filter), the 123ContactForm service provides a high level of security in storage of submissions, due to SSL data encryption.

MOST POPULAR USES OF OUR FORMS 123ContactForm builder covers the entire typical range of demands in which concerns web forms. Here are the most popular types of forms provided by our platform:

  • Online feedback surveys
  • Contact forms
  • Sales leads collecting forms
  • Secure order forms
  • Event registration forms
  • Business demographics surveys
  • Job application forms
  • Corporate surveys for evaluating team synergy, employee satisfaction,
  • Management efficiency
  • All types of polls

Other Design Articles You May Find Interesting

2 Comments | Write a Comment

  1. Vojkan says:

    Tips for forms are great. One that IMNO is the most important is 4. Reduce typing stress.
    People don’t want to think too much about what they should type. Examples and list box are very useful for reducing typing stress.

  2. Cean says:

    I find the 3rd Party Apps integration the most useful of all! It’s a “One click integration” and I get to record my form submissions. Easy as hell 😀

17-09-2014 | Comments Off on Top 50 sport wordPress themes
18-06-2013 | Comments Off on 20 sets of free grunge photoshop brushes
21-01-2013 | Comments Off on Free futuristic fonts from urbanfonts.com
06-01-2013 | (2) Comments
24-11-2012 | Comments Off on Make your own business card for free
08-02-2012 | (1) Comment
  • Free Brushes
  • FudgeGraphics
  • CrazyLeaf Design Blog
  • Fuel Your Creativity
  • Photoshop Tutorials and Design Resources
  • touch up photo retouching services
  • Small House Design
  • http://www.webbuildersguide.com/
Follow My Twitter Subcribe Full RSS