10 Tips to Boost Your HTML Forms Performance

Posted in Tips, Tools, Web Design3 years ago • Written by 22 Comments

Sometimes we get so used to doing things one way that we forget a little and important thing: to improve. We get so involved with all this CTA stuff that we forget other important things, like the contact form that comes after the pretty button.

Our task today is to improve our form, to get better conversion rates, and maybe learn something from it.

We will be talking about conversion, code, and design, in an easy and practical way.

So, let’s stop talking and rock some forms.

1. Test and track everything

Before changing anything, you need to learn how to do split tests so you can measure your improvement. Since there is no magic formula, some techniques that work for other people just don’t work for you and vice-versa. It’s kind of a trial and error process.

We have a lot of tools for this tracking job, including tracking goals and funnels with Google analytics or recording users interactions with Clicktale.

2. Increase conversion by 25%~40% with “Mad Libs”

According to Wikipedia:

Mad Libs consist of a book that has a short story on each page with many key words replaced with blanks.[...] One player asks the other players, in turn, to contribute some word for the specified type for each blank, but without revealing the context for that word. Finally, the completed story is read aloud.

It sounds funny, isn’t it? Well, it is also really good for business. LukeW wrote an article about how 2 guys (each one in his own site) have increased dramatically the conversion rates, with this technique.

We have a lot of examples that when you turn your software more friendly, you get much better results. So when you do not have a simple form, but a dialogue the user seems more open to fill it.

3. Captchas are bad guys

Unless you are a nice guy and want to help in the book digitizing business, I recommend you to remove your captchas.

I say this because we have some alternatives that are almost as efficient as captchas are, but without the downside of reducing our conversion rates.

We have two good examples, one guy who increased his conversion by 33% and other that lost 3.2% of his conversion while captcha was active, because some people couldn’t complete the process.

Both replaced captcha with honey pot fields and just kept spam at a low level.

4. Don’t put optional fields

This one is really simple. If this information will be used, you need an obligatory field. If it isn’t you don’t need this field.

If you really want to get more information about your users, I recommend you to ask for it after they have finished their current activity (buying, registering…) so you don’t waste their time with not-so-important things and keep your forms as short as possible (you know, long forms are bad, bad guys).

5. Use steps in checkout pages (avoid one page checkout)

Actually I’ve done this one wrong many times. When users see long forms they just don’t want to spend their time filling it out. But the funny part is that if you break a long form in 3 little forms, they are much more open to complete the process.

Proimpact 7 gives us 5 reasons why not to use one page checkout. Basically, it is because they can reduce your conversion rate by 60%.

6. Remove that reset button

All reset buttons should have the label “you’ve been rick rolled”. Really, 99,999% of the cases you just don’t need them, and it can make the user lose all his data. Jakob Nielsen is pretty extremist about it, he says “Reset: Don’t use“.

7. Don’t mask passwords

This is a pretty controversial thing. Sometimes it is better to mask sometimes not.

What you have to keep in mind is that sometimes it’s good to give the users the options to “unmask” the password field.

Jakob Nielsen again has a pretty extremist opinion that you must stop password masking. I don’t think it really works  this way, but you can try this alternative and measure your results. :D

8. Validate fields

Sure, you must be clear about how users must fill some form fields, but it is impossible to prevent all errors. So it is good to have some client-side form validation, like Vanadium, so users can see what is wrong while they are still typing.

9. Label above the field is better

Above is an eye tracking study that shows how users find it much easier to relate the labels to the fields while they are above them.

It is a really good study of UXMatters about label placement in forms. The only downside of labels above fields is that they need more space so the form can look bigger while it has the same number of inputs than others.

Another good alternative is sliding labels, but I think that has potential to save space and be easy to understand.

10. Auto complete is your friend

Don’t know why aren’t you using it yet.

Don’t be afraid to use some custom elements

Sometimes we need calendars, multiple selects, sliders and others elements that aren’t available in HTML or they are really bad by default.

When you have this, don’t be afraid to use jQuery enhancements to your form (non-obtrusive way, of course). We have a lot of plugins and resources to help us in this task.

One really good example is Uniform, that creates sexy forms with jQuery. It’s really worth 5 minutes of your attention.

Are you hungry yet?

I’m sure you have read something about it too. Why don’t you join this conversation and put you thoughts in comments?

43 Written ArticlesWebsiteGoogle+

I'm a web designer and entrepreneur from Itajubá (MG), Brasil. I love writing about obscure topics and doing some cool stuff. And also I do some FREE stuff, check it out: http://www.roch.com.br/

22 Comments Best Comments First
  • ramin froughiasl

    Tuesday, June 21st, 2011 15:57

    12

    thanks

    0
  • Arlene

    Friday, June 17th, 2011 04:27

    10

    So very useful! Thanks! I’m looking forward to further iterations and elucidations of best practices.

    0
    • Rochester Oliveira

      Friday, June 17th, 2011 14:24

      11

      Hey Arlene, thank you!

      I’m thinking about writing a tutorial on how to implement all this awesome techniques.. If you want something in special, just let me know!

      []‘s

      0
  • Abhinav Sood

    Monday, June 13th, 2011 14:24

    1

    Don’t mask password fields? :-O I think that makes users feel insecure about the way their passwords will be stored. And it can also become difficult to sign up when you’ve got company.

    0
    • Rochester Oliveira

      Monday, June 13th, 2011 18:30

      3

      Hey Abhinav,

      As I said Jakob Nielsen is pretty extremist on this point, but I must to to agree with him (masking may cause unnecessary errors) and with you (non-masking could leave the user unsure about typing his password).

      I think we have 2 really good options:
      1st – Make password fields like iOS does: when you type, the last character is still visible for a couple of seconds.

      2nd – What mailchimp does: You have a checkbox to select if you want your password masked or not.

      Maybe I would write a tutorial about making this 2 options, I think it would be nice!

      Thank you
      []‘s

      -1
  • Jason

    Thursday, June 16th, 2011 09:33

    8

    Wow, the Mad Libs is a great idea! I’ve never seen that before. I have to use it on my site.

    I also like the idea of sliding labels, though it may be a bit distracting for users as labels are moving on the page. On the other hand, it might draw some interest to the form and reduce any hesitation they have for filling it out.

    Thanks!

    0
    • Rochester Oliveira

      Thursday, June 16th, 2011 14:24

      9

      Hey Jason,

      Mad Libs is a great idea indeed. I think it really worth trying :D

      About sliding labels, it is a good idea to save space and give a more interactive look to you form, but what I really use (and works) is the label above the field :D

      []‘s

      0
  • Rochester Oliveira

    Monday, June 13th, 2011 22:06

    2

    Thank you, creative.

    I’m glad you liked it!

    []‘s

    0
  • Nanang Gunawan

    Tuesday, June 14th, 2011 02:21

    4

    good tips…

    thanks.. keep share…. :D

    0
  • tyropel

    Wednesday, June 15th, 2011 14:55

    6

    Really nice one… I can go for the label positioning above the fields, and i do always love that procedure. Thanks a lot.

    0
    • Rochester Oliveira

      Wednesday, June 15th, 2011 16:53

      7

      Hey tyropel, thank you!

      Yeah, label above the fields is much better :D

      []‘s

      0
  • Júlio César

    Tuesday, June 21st, 2011 20:13

    13

    Very helpful and professional. Nice article.

    0
  • Sb

    Wednesday, August 17th, 2011 12:11

    20

    Nice blog and nice tips too. Though some of them has downfall…

    Bookmark your site!
    More power…keep on providing sir…

    0
  • Rochester Oliveira

    Thursday, September 22nd, 2011 05:29

    22

    Hey Chico, these tips work pretty well for me.. They are good indeed ;)

    Thanks!

    0
  • Snarky

    Friday, July 8th, 2011 03:42

    18

    I really like the advice about not masking your password and moving the labels above the fields. Some really interesting ideas on this page that I’ll take with me to my next project.

    0
    • Rochester Oliveira

      Friday, July 8th, 2011 15:48

      19

      Hey Snarky, Don’t know if I can tell you this, but I’m writing at this very moment a tutorial about how to implement this techniques :)

      []‘s

      0
  • sovit

    Sunday, June 26th, 2011 05:13

    16

    very very thanks for this website to provide this free useful tips and tutorial.

    0
    • Rochester Oliveira

      Sunday, June 26th, 2011 16:24

      17

      Hey sovit, I’m glad you liked it!

      Thank you!
      []‘s

      0
  • Rochester Oliveira

    Thursday, September 22nd, 2011 05:29

    22

    Hey Chico, these tips work pretty well for me.. They are good indeed ;)

    Thanks!

    0
  • Sb

    Wednesday, August 17th, 2011 12:11

    20

    Nice blog and nice tips too. Though some of them has downfall…

    Bookmark your site!
    More power…keep on providing sir…

    0
  • Snarky

    Friday, July 8th, 2011 03:42

    18

    I really like the advice about not masking your password and moving the labels above the fields. Some really interesting ideas on this page that I’ll take with me to my next project.

    0
    • Rochester Oliveira

      Friday, July 8th, 2011 15:48

      19

      Hey Snarky, Don’t know if I can tell you this, but I’m writing at this very moment a tutorial about how to implement this techniques :)

      []‘s

      0
  • sovit

    Sunday, June 26th, 2011 05:13

    16

    very very thanks for this website to provide this free useful tips and tutorial.

    0
    • Rochester Oliveira

      Sunday, June 26th, 2011 16:24

      17

      Hey sovit, I’m glad you liked it!

      Thank you!
      []‘s

      0
  • Júlio César

    Tuesday, June 21st, 2011 20:13

    13

    Very helpful and professional. Nice article.

    0
  • ramin froughiasl

    Tuesday, June 21st, 2011 15:57

    12

    thanks

    0
  • Arlene

    Friday, June 17th, 2011 04:27

    10

    So very useful! Thanks! I’m looking forward to further iterations and elucidations of best practices.

    0
    • Rochester Oliveira

      Friday, June 17th, 2011 14:24

      11

      Hey Arlene, thank you!

      I’m thinking about writing a tutorial on how to implement all this awesome techniques.. If you want something in special, just let me know!

      []‘s

      0
  • Jason

    Thursday, June 16th, 2011 09:33

    8

    Wow, the Mad Libs is a great idea! I’ve never seen that before. I have to use it on my site.

    I also like the idea of sliding labels, though it may be a bit distracting for users as labels are moving on the page. On the other hand, it might draw some interest to the form and reduce any hesitation they have for filling it out.

    Thanks!

    0
    • Rochester Oliveira

      Thursday, June 16th, 2011 14:24

      9

      Hey Jason,

      Mad Libs is a great idea indeed. I think it really worth trying :D

      About sliding labels, it is a good idea to save space and give a more interactive look to you form, but what I really use (and works) is the label above the field :D

      []‘s

      0
  • tyropel

    Wednesday, June 15th, 2011 14:55

    6

    Really nice one… I can go for the label positioning above the fields, and i do always love that procedure. Thanks a lot.

    0
    • Rochester Oliveira

      Wednesday, June 15th, 2011 16:53

      7

      Hey tyropel, thank you!

      Yeah, label above the fields is much better :D

      []‘s

      0
  • Nanang Gunawan

    Tuesday, June 14th, 2011 02:21

    4

    good tips…

    thanks.. keep share…. :D

    0
  • Rochester Oliveira

    Monday, June 13th, 2011 22:06

    2

    Thank you, creative.

    I’m glad you liked it!

    []‘s

    0
  • Abhinav Sood

    Monday, June 13th, 2011 14:24

    1

    Don’t mask password fields? :-O I think that makes users feel insecure about the way their passwords will be stored. And it can also become difficult to sign up when you’ve got company.

    0
    • Rochester Oliveira

      Monday, June 13th, 2011 18:30

      3

      Hey Abhinav,

      As I said Jakob Nielsen is pretty extremist on this point, but I must to to agree with him (masking may cause unnecessary errors) and with you (non-masking could leave the user unsure about typing his password).

      I think we have 2 really good options:
      1st – Make password fields like iOS does: when you type, the last character is still visible for a couple of seconds.

      2nd – What mailchimp does: You have a checkbox to select if you want your password masked or not.

      Maybe I would write a tutorial about making this 2 options, I think it would be nice!

      Thank you
      []‘s

      -1

Comments are closed.

54.90.176.79 - unknown - unknown - US