free hosting   image hosting   hosting reseller   online album   e-shop   famous people 
Free Website Templates
Free Installer

E-mail Order Form


This script allows you to create a simple email order form for your site.

It uses a lot of the formatting techniques from Custom E-mail Form.

Refer to that script for those details.

NOTE:
This does not allow for credit card validation or payment processing.
For that, you need a secure server with payment collection facilities, such as Secpay.

However, if you need a simple order form that uses e-mail and not CGI, this may well do the job.


Paste all of the code below into the head section of your page:
Now paste this code in the body of your page:

How It Works


The form called dataForm contains all the user input data.

Another form, called mailForm , uses the post method to mail the form to the desired email address.

The encoding type is text/plain for universal readability.

HTML encoding could be used, but certain email clients won't recognise this.

Each input box has its own name - recipient, subject, name, address,etc.

These parameters are passed to the script when the form is submitted.

The function mailIt() does the formatting.

This is called when the Submit button is clicked.

Refer to Custom E-mail Form for a full explanation.


The main difference with this script is the addition of radio button selectors.

The form items Product and Colour each have an associated text box.

Whenever a radio button is clicked, the following parameters are passed to the function check:
  • the value of the radio button - myvalue
  • the index of the associated text box - whichbox
    • The Product, Colour and Quantity boxes all have the name box, and are accessed by their index.


    As an example, let's look at the Belt radio button.

    Its associated text box is the first one called box in the form, so its index is 0.

    When the button is clicked, its value and box index number are passed to the function check:
    <input type="radio" name="item"
    onclick="check(this.value,0)" value="Belt">
    The function then simply writes the value of the radio button to its associated text box:
    document.dataForm.box[whichbox].value=myvalue
    where:
  • document is the page itself
  • dataForm is the order form
  • box[whichbox] is the associated text box and its index
  • value is the contents of the text box
  • myvalue is the value to be written
    • Similarly, if the Green radio button is clicked, its value is written to the second text box called "box", whose index is 1:
    <input type="radio" name="colour"
    onclick="check(this.value,1)" value="Green">
    This illustrates the importance of naming each form element.

    By doing so, there's no confusion about where to write the required data.

    It also simplifies scripting, since the check function is used for both the colour and product data.


    Try It Out

    Send an email to yourself to see how the formatting looks.


    Recipient:
    Subject:

    Product:
    Belt Scarf Hat    
    Colour: Red Green Blue    
    Quantity:


    Your Name:

    Address:
    City:
    Zip/Postcode:
    Email:
    Comments:


    © 2001 CyberSchool