HTML Forms, Part V – Putting it all together

You’ve read about forms with regard to:HTMLFormCodex

  • HTML (Hypertext Mark-up Language)
  • Different Elements
  • Method and Action
  • Coding Input and Fields
  • Submit/Reset Buttons

Now we are putting it all together to see how a complete form might look when it is coded in HTML, seen by the sender and received as an email by the creator.

The HTML code, layout and presentation used for our sample is very simple and basic.  (This code is available on the HTML page in the left sidebar.)

 This form could be made more appealing and user-friendly by:


1.  Using your branded logo at the top of the page in the form of an image

2.  Placing the elements in a table format for more uniformity

3.  Using a colored background for ease in reading

4.  Assigning fonts and font colors to separate the form’s element names from the directions

One might also consider adding reCapcha to prevent unwanted submittals by both people and spambots. This program is an easy test requiring humans to input a simple code before being able to ‘submit’ a form or request. For more information visit Captcha.

HTMLFormRequestxOnce the form has been submitted, it is sent in email form to the designated recipient. All of the information the visitor input will be seen in the email relative to the field name it was assigned. Once received the information can be used in the method for which it was intended. If a response to a form being submitted is expected by the sender, it is recommended to do so as quickly as possible. The longer the delay the more apt the sender will be to forget their request and look for another source.

Forms can be as simple or as complicated as you want to make them. In every case the result is the same. . . a collection of submitted information that will be processed based on the recipient’s desires and needs.

The CGI script to process the form will be addressed in the next post along with where to find it and how to configure it.

Comments are closed.