4 Steps to Implementing a Web Form

Oh, forms.  Nearly every website has at least one and there are copious do’s and don’ts about form design.  I handle 5-10 forms a week.  They come to me from the designer and it is my job to make the form validate its information and send that information to at least one other person (usually the website owner) with a confirmation to the person who filled out the form.  While I’m at it, I minimize spambot submissions of the form.  Here are the steps I go through on every form:

Clean Up the HTML

Working in the HTML view I look at each input field and make sure it has:

  • a descriptive, unique name, and
  • a default or option value, if necessary.

The name is going to be used to retrieve the information, so calling the input field collecting the phone number “input5″ is unnecessarily confusing.  Just call it “phone”.  Default values occur in text fields when you want information submitted in a  certain way, for example mm/dd/yyyy for a date field.  In radio fields and checkboxes, the value is the information that is submitted.  So the values of the checkboxes to the right should be set at “motorcycle”, “boat”, “RV”, etc rather than “checkbox1″, “checkbox2″, “checkbox3″.

Validate the Information

I prefer front-end validation that occurs while the user is completing the form.  Why force someone to fill out a complete form and then find out something is wrong?  I’m currently enthusiastic about IdealForm, which I use in the following example:

Validating on the front end means using Javascript, however, and a very few people (and all spambots) don’t use Javascript.  For those users I prefer to prevent form submission altogether and give them a message that they need Javascript to continue.

I also do some validation on the server side, after the form is submitted.  This is just to ensure that the information coming from the form isn’t malicious code and is coming from the form page.

Captcha

Captchas are those little boxes just before the submit button that ask you to type in numbers or words matching an image.  I only use a Captcha if a client is having problems with a lot of spam.  In my experience it isn’t worth installing one until there is a problem.  The code I use against the spambots (by not allowing users without Javascript)  handles a large percentage of problems.

Format the Emails and Send

The email to the client containing the form information is generally formatted like the form itself and the person who filled out the form gets a standard “Thank you, someone will be in touch” message.  Sending the message requires a little detective work.  Your webhost must have sendmail enabled – not a problem for all the large hosting companies, but if you use a small company or your own servers you may be out of luck.  In that case we need to send via SMTP relay, which means you need an email account through which emails can be sent….and some email providers don’t allow you to do this because of the risk of spam.  I generally run a few tests and have several scripts that work for most situations.

 

 

Follow me

Submit a Comment