Forms

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.

Some guidelines in designing forms:

  • Chunk related fields in logical groupings so the user can process the form more easily
  • When the form is long and has a lot of fields for typical information (name, address, etc), be sure to design it to it ifs a vertical list. That way the user has only one way to go.
  • Make sure the labels of the form files stand out bolding or alternate colors can help.
  • If the information you are asking for is atypical, make the labels left-justify so that the user can scan them without being interrupted by form fields.
  • Alternately, you can lay the form labels out so they are flush right, thereby they are right up against the form fields to which they refer.
  • Use background colors and hairlines sparingly: every visual element you add could detract from the page’s main layout, the form.
  • Keep your design clean and simple.

Some articles you may find interesting:

Web Application Form Design

Luke Wroblewski | January 22, 2005

Web Form Design: Modern Solutions and Creative Ideas

Vitaly Friedman | April 17th, 2008

Adding a working email form to your site

Today, we will go over a simple way to add 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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s