Form Design

We will be making a simple form tonight in class.

How Forms Work

Forms collect the data your user enters and sends it to another page on your server. That page is called the processing page. That page then returns to the sender, usually with some sort of thank you or confirmation message. The form itself does no work. Good forms make sure that the data entered is formatted correctly so you can go through it easily later.

Forms start and end with the <form> tag, like so:

<form id="form1" name="form1" method="post" action=""> </form>

As you can see, there is an attribute called “method.” This refers to the way the form will send the data to the server if it is able to do so. Then there is an attribute called “action.” This is where you enter the name of the processing page, a page that usually includes a server-side script in the form of php or some other scripting language. I will provide you with one later in class.

It is important that you make sure to put all of your form elements inside the form tags.

Some Tips

  • Remember to keep it simple. The fewer the form fields your user needs to fill out, the better.
  • Use context and field assistance to make the form more usable.
  • Give your form visual prominence on the page, and make sure the rest of the page supports that prominence
  • Consider putting your form on as clean a page as possible. It may be better for the user if you pull off any sidebar or footer elements that may compete
  • Make your forms accessible. Label everything clearly.

Making your form work

So you’ve made a form, you have some server space for your site—how do you add the processing page to the form? Without that, the form can do nothing with the data it has collected for you. We will go over a simple way to add the needed functionality using the tutorial over at Dreamweaver Spot.

Here is the code you need

This method uses php,a server-side scripting language that is embedded in html to perform all sorts of functions. We will simply use the script provided in the tutorial.

  1. Download the tutorial files.
  2. Drop the FormToEmail.php file in the same folder as your contact page.
  3. Create your form in Dreamweaver–we will go step by step in class.
  4. Edit the php file as instructed in the tutorial. (Please note: you cannot test the form until it is up on your server.)
  5. Add any styling you want to add.
  6. Publish your files to your site and test them by sending yourself an email

This email form is great, but it does not have any security measures against spam. Those of you who will keep your sites running after the semester is over may want to investigate email forms with a CAPTCHA security function.

Here is one that is pretty popular and simple.

Articles used to write this lesson:

How To Design The Perfect Form
02. Feb, 2009

Prettier Accessible Forms
Nick Rigby  |  June 20, 2006

Creating an Attractive, Useful Form in Dreamweaver CS4
David Karlins  |  Date: Apr 14, 2009.

How to style a simple form with CSS in Adobe Dreamweaver CS4 (video)

Labtime: Make a form with spry widgets