Evolving your form

prasanth — Sat, 03 Oct 2009 11:23:09 +0000

Some of the recent support requests made me think of this: how to make building complex forms easier? If you have used Simfatic Forms, you will immediately realize that Simfatic Forms makes it pretty quick to build a large form. Taken by this, users build a large form and get overwhelmed by the large set of input fields that they have to deal with in the later steps.

Here is how to develop your (big or small) form iteratively. The iterative approach is guaranteed to take half the complexity away.

Start from a simple form

Add the minimum number of fields to the form. Simfatic Forms provides you the flexibility of updating the form at any later point. So don’t worry about having the perfect form design in the first step itself.

Designing calculation fields or validations without uploading the form

The client side validations and calculation fields can be tested before installing the form on the webserver. One option is to use the preview feature.

Yet another option is to start with a ‘client side only’ form first and add the server side options later. Here is how to do it:
In the ‘Form General’ page, in the ‘Form Processing’ tab, choose the ‘Other’ option for ‘Server side processing’. Leave the ‘action’ field empty.

Now you can preview the form in your browser (locally) as you develop the form ( Proceed to the ‘Generate Code’ page and press the ‘Open the form’ button.)

This ‘Client side first’ method is best for forms with complex calculation fields or those with complex validations. You can build and test the form without installing the form on the web server each time.

Once the form design is ready, choose the ‘Simfatic Forms’ form processor’ option ( in the ‘Form processing options’ tab) and proceed with designing the server side options.

Choose the minimum options, install it and get the form running

In the ‘form processing options’ page choose one of the options ( like ‘send form submission by email’ or ‘confirmation page’ ) , install the form and see the form working.

Iterate; add more fields and test again

Now add more fields and more server side options. Make sure that the auto-generated templates (like the email template) are generated again. Re-install the form. Test the form again.

During the further iterations you can add more complexity: like adding a calculation field, changing the style of the form (the ‘look and feel page’) , saving to database and more.

Keeping backups of your form design

The form design you make using Simfatic Forms can be saved to an .fwz file (choose the file->Save menu item). It can often happen that after making some design changes you originally liked an earlier one. It is always good to keep intermittent backups of work in progress. This way if you want to roll back to an older design quickly.
(This is true for any work in progress – like a document in progress or even a web page design in progress)

Before putting CAPTCHA on your next web form

prasanth — Tue, 04 Aug 2009 11:33:45 +0000

CAPTCHA has become common part in almost any web form now-a-days. It has become increasingly difficult to decipher the code even for extra-ordinary humans !

There are several discussions on the usability issues of CAPTCHA (here are some more). A bad CAPTCHA can bring down the number of form submissions considerably. You may lose leads, business, or contacts just because of an inappropriate CAPTCHA.

Let’s see when to use CAPTCHA (importantly, when not to use) and if at all required, how to make it easier for your visitors.

Why CAPTCHA at all?

CAPTCHA is for preventing bots from automatically submitting your form. These web bots are programs that leech through the web pages. When it finds a form, it fills the form with a spam message and submits.

Why would someone send a web-bot to submit your form? What is their gain?

If the form submission appears immediately on a web page, the spammer can get back links to his website

The examples include blog comment forms and guest books. It is important that no form submission appears immediately on a web page. It will be an open invitation to spammers. Put a monitoring system in place.

If you are providing a free service (free email, free blogs) the spammer can create several thousand accounts
The spammer expects you to read his spam message

Rest of the forms fall in the third category. This category is the least attractive to the spammer since only you see the spam message! The chances of spam submissions to this category is the least. So why bother about CAPTCHA itself?

Does your form really need a CAPTCHA?

There is no reason to attach a CAPTCHA with every form that you get online.

Design the form without CAPTCHA. Get it online!
You start getting form submissions. Take a note of the number of form submissions. (the conversion rate)
If you start getting spam submissions, attach a CAPTCHA.
Observe the drop in the number of genuine form submissions. Decide whether to keep the CAPTCHA

If you have decided to keep the CAPTCHA, try the tips below to keep it easier for your visitors.

Making a better CAPTCHA

A good CAPTCHA will keep the form submission rate high while keeping the bots away.

1. Avoid similar symbols in the CAPTCHA

There are several characters that look similar. CAPTCHA, by nature is distorted. The similarity can cause confusion.

Examples:
1(one) l(lowercase L) and I (uppercase i)
0(zero) and O and o (lowercase O)
4 and A
8 and B
6 and b

2. Password field for Captcha?

I don’t understand why some web forms have *Password field* for filling in the captcha code!

Password field, supposedly, is to prevent someone seeing the entered text ‘over your shoulder’; right?

3. Fill the form again? Oh No!

Though this is very basic, I have seen this happening at least in a couple of forms.
You fill the form, and manage to fill the CAPTCHA and submit. Bang! The form appears again and says the CAPTCHA code is wrong. That’s fine; but the entire form is cleared too!
Use Ajax to validate CAPTCHA; never make the visitor fill the form again.

4. Make it bigger

Bigger text is easier to decipher. The size of the characters doesn’t matter for the bots anyway. So make it larger.

5. No Fancy fonts please!

It is easier to decipher the code if the font is a familiar one. Use a common, non-fancy font in the CAPTCHA

6. Link to refresh the CAPTCHA.

Always give an option to refresh the CAPTCHA. In case one code is difficult, your visitors can try another one.

7. Keep it short

A 6 character CAPTCHA code is reasonable while anything more than 10 is too much!

Use CAPTCHA only when necessary. Even if you decided to have CAPTCHA, make it easier for your visitors.

Simfatic Solutions Blog » form design