HTML Website Forms Tutorial For Beginners
Forms are a very powerful way of gathering information and interacting with your web site's visitors.
Almost every site has an email contact form, and many sites have newsletter forms, survey forms etc.
A web form consists of two main components:
- A Visible component - This is created using HTML tags and contains the input boxes/fields and descriptions.
- An invisible component - A form handler that is responsible for processing the form data. This is some form of script (php,asp,cgi).
In addition a form has form logic. Because a script is used to process the form the script can be used to make decisions based on the form content. Although complex form handling mechanisms are possible the most commonly used are:
- Present a thank you page on completion
- Acknowledge form input via an email.
Form Process
To successfully use forms you should be aware of the form process which is generally as follows:
- Visitor fills out form fields
- Form is submitted.
- JavaScript code is used to check some fields like email for validity if in error the form is represented -- Optional
- Form is checked for required fields if in error the form is represented.
- The visitor is sent to a thank you page-- normal but optional
- Form data is processed and usually sent to the website owner/webmaster via email and/or stored in a database.
Additionally it has become common to use a form Captcha is used to combat spam. If it is used it is checked by the script on the web server and if invalid the form is represented.
Location of Components.
The form and form handler can be located in several locations. Either on your website, a remote website or a combination of the two. The diagram below show the 3 possible scenarios.
- Scenario 1- The form and form handler are located on the same server as the web page (your host).
- Scenario 2- The form is on the same server as the web page (your host) but the form handler is located on a remote host.
- Scenario 3- The web page is located on your host and contains a link to the form which is located on a remote host along with the form handler.
The Form handler
This is some form of script (PHP,ASP) or program (CGI) whose job is to validate and extract the user data from the form and either email it to you or store the data in a database for later use.
The host must however provide support for scripts (many do) if you are going to implement them yourself.
For those whose hosts either do not support scripts, or the scripts are inadequate then you can also use remote hosted form handlers.
Web Form Data
The data entered into the form is extracted from the form by the form handler and is either emailed to you or placed into a database on the web server.
Web Forms - Building Options
There are five ways you can create a web form
- Use a Web Page editor plus manual coding
- Use a special program that has been designed to create forms.
- Use a Web based service
- Have them made by a form designer.
Use a Web Page Editor Plus Manual Coding
This requires that you have a knowledge of both HTML and PHP/ASP scripting and is suitable for more experienced website owners and for simple forms. You can usually get pre-made forms and make minor changes if necessary.
I provide a basic PHP email contact form that you are free to use and modify.
Use a Special Form Program
These can be provided as part of the web editing software or
stand alone applications like the
Coffee Cup Form
design software.
Web Based Service
Originally web based service were used primarily because the host didn't provide script support and so the form was processed by a form handler on a third party server.
Now most hosts allow scripts and free scripts are available for basic contact forms and so third party service now concentrate more on being able to offer professional complex forms and drag and drop form design capabilities.
Most offer a free service which is usually only good for testing purposes as it either has advertising or is very limited. After that they charge a monthly rate which I find in most cases to be expensive.
Use a Form Designer
If you find it all too much or just don't have the time then this is usually the best option. Many web designer will do this for you and some of the web based service providers offer form design services.
Even though today it is usually unnecessary to create your own forms using HTML it is still useful to be familiar with the form structure and form elements in case you need to tweak a form or manually edit one.
Therefore we will look at Creating HTML Web Forms.
Related Articles:
- Creating Website Forms
- Processing Website Forms
- Creating a Contact form
- Free form creation tool and wide selection of ready made secure forms (timesheet, Pizza order, loan application).
www.formhosts.com.