Categories


HTML Forms Part III – INPUT

formHTMLInputting the code for managing the information you collect is next. The code below will be placed directly below the line of code for ‘ACTION and METHOD’ (see Part II).   Using the following code allows you to:

  • Define the fields of information to be collected
  • Designate a recipient’s email address
  • Assign a ‘Subject’ for the email
  • Designate input that is ‘Required’
  • ‘Redirect’ the visitor once the form has been submitted

The  HTML code we will be discussing is:

 

The explanations for the HTML code is below.  The coded HTML is in blue and the descriptions are in italics.

 

This defines the information you are requesting in your form. In this case we are wanting the name, address, city, zip, email and phone number of the person. Each piece of information requested will have a CGI element associated with it. The name used to identify the VALUE must be the same as the one used for the element. The names are case sensitive.

This defines where the information is sent. In this case the information will be sent to the email address ‘info@yourdomain.com’. The ‘TYPE=hidden’ hides this information from the visitor. The email address must be part of the domain where the form is located. In other words, you could not use an email address with Google or Yahoo for a form hosted on www.yourdomain.com. For ease in monitoring form emails, you can have the info@yourdomain.com form emails forwarded to another email address that could be with either Google or Yahoo.

This defines the Subject line of the email to be “REQUEST INFORMATION!!!”. Making the subject in all capital letters makes it stand out and easy to find when scanning incoming emails. Again, the ‘TYPE=hidden’ hides this information from the visitor.

This defines the fields where the information must be provided. If not, the visitor will get a message to complete required information before the form can be submitted. The name used to identify the VALUE must be the same name as used in the ‘field_names VALUE’ – they are case sensitive. In this sample, we require the visitor to provide their name, address, city, state, zip – but did not necessarily care if the provided their email or phone number.

This line of code will take the visitor to another page once they have submitted the form. In our sample, they will be redirected to a ‘Thank You’ page. Although, you can also have them redirected back to the main page of the website once they have completed the form, it is a good idea to have a separate page that lets them know their information has been received and what action will follow, i.e. you’ll mail them the requested information, you will be calling them in the next 24 hours, etc. Not providing some sort of confirmation on submitting the form can result in the visitor thinking either their form did not go through or they did something wrong.

Next step is to submit information. This will be covered in HTML Forms Part IV

Want more information on writing HTML forms?  Get one of the HTML Quickstart Guides by Elizabeth Castro . . . and, if you want to learn how to write your own scripts The Quickstart Guide by Elizabeth Castro for Perl and CGI is an excellent reference.


Comments are closed.