Examples of forms

Some of the forms shown here are almost ready for use, with minor customisation; others should be regarded as elements that can be assembled to provide the form with its required functionality.

Examples 1a and 1b are complete forms, requiring only the removal of the demo wording and links and appropriate customisation, such as the addition of the appropriate email address to which the form is to be sent.
They produce an output to email (although this has been disabled for this demo). Example 1a also adds the information to a database; this function has not been disabled, and on successful submission of the form, the contents of the database is displayed (for the purposes of this demo).
The two forms differ in their appearance; example 1a shows the more-traditional approach.

Example 1c is also a complete form, but produces the completed table as a pdf document. The demonstration here is based on example 1a, but could easily use the layout shown in example 1b. The customisation options for example 1c are:
-display on screen (as a pdf document);
-send by email;
-save to server;
-save to user's computer.

Example 2 is a booking form that was created for an organisation that periodically arranges dinners. A 'confirm email' input box has not been included here, but could easily be added (as in Example 1).

This form is supported by an admin control panel in which admin can set the venue and menu details.

Form validation is performed by Javascript. If an error is found, the error is highlighted in red, an alert is presented, and (in the background) an error log is created and emailed to the webmaster (this is optional and is set in the admin control panel).

Example 3 shows how a complex set of data can be tabulated ready for printing, rather than being emailed. The data could be emailed, too, of course. The form contains most of the data-input types - text boxes, drop-down lists, checkboxes and radio buttons.

Example 4 shows how drop-down menus can be made date-sensitive, so that only those dates that are within a (pre-set) range will be shown; this range can be made to change automatically so that, for instances, only future dates are shown. This page also has a time-sensitive demonstration - the position and colour of a message box depends on when the page was loaded.

Example 5 shows an example of radio buttons and checkboxes as elements to be added to a form.

Example 6 shows how to add a pop-up or some other message specific to a particular selection.

Example 7 shows the use of databases. It uses the real estate theme from example 3, but allows the user to add entries to the database, search for properties, and produce a hard-copy print of selected results. This example is also in the Database section (example 1).

Example 8 shows two examples of slide-out forms and two pop-up. Of course, these boxes could be used for any purpose, eg FAQs, legal notices, etc. All the examples use JavaScript. A delayed pop-box appears a few seconds after opening the page.

Example 9 is a suite of forms covering sign-up and log-in using a database.

Example 10 consists of a user-driven entry page plus, for admin, a set of analysis and control pages. The example here is a lecture evaluation form. The information is added to a database from which admin can extract a summary of the opinions and present them in a PDF summary report.

Example 11 demonstrates the use of a form to manage a membership list. The details of each member are stored in a database and can be extracted according to the member's status (eg current, paid-up, lapsed, to be confirmed etc); the display order of the results can be selected for a range of columns. Individual details can be edited directly on the page and then saved to the database.

Example 12 is part of the membership suite - form example 11 is another part. This example is a simple form for sending Newsletters or other documents to members, using the email address from the membership database.


The embedded 'KamPages' logo font is Artifika, from Font Squirrel.