How to Create an Order Form in HTML

Save

An online order form is a convenient way to allow your customers to make purchases from you. Not only can a buyer access this form at the time and day that works best for him, but the user may also submit orders to you directly through your website. This way, you bypass the need for a phone, fax or mail service to receive business. Using HyperText Markup Language (HTML), create an order form for your website, as you require.

Things You'll Need

  • Web host
  • Text editor program
  • Obtain a form script from your web host provider or from a free, online resource like Hot Scripts or Stadtaus.com (see Resources). Place this script on your host account (if needed) in the same directory where you keep your other website files and make a note of this URL location. A script processes the data submitted from the order form and delivers it back to you.

  • Launch your text editor program and create a new document or open an existing file. Place your cursor anywhere underneath the "<body>" tag where you want your order form to appear.

  • Type in the beginning "<form>" element and set the "method" to "post." Further, enter an "action" and assign it to the URL address of the script you saved in your account. For example:

    <form method="post" action="http://www.domain.com/cgi-bin/form.cgi">

  • Enter a title, such as "Buyer Name," that prompts the customer for the information you need.

  • Type an "<input>" tag after the title and enter "type=text" to build a text field for the visitor to enter his data. Continue by naming a word of your preference that distinguishes this prompt, such as "buyer," and assign it to the "name" descriptor. Finally, provide a "value" like "Enter the buyer name" to provide a visual hint inside the text box. Enter your code as follows:

    Buyer Name <input type="text" name="buyer" value="Enter the buyer name" />

  • Enter another "<input>" tag to build a circular (radio) button, which gives visitors the ability to choose between two items. Repeat the previous two steps, but this time type in a new title, enter "type=radio" and provide a new "value." For instance, ask the user what color she prefers, as in the following example:

    Red <input type="radio" name="red" value="Red" />
    Blue <input type="radio" name="blue" value="Blue" />

    In this case, the "value" supports the "name" attribute to let your form script know what this prompt is.

  • Type another "<input>" tag and set the "type" to "checkbox" to create boxes that a user may check to select more than one choice. Again, create a relevant title, "name" and "value," as you prefer. To illustrate:

    Add me to your mailing list <input type="checkbox" name="mailing" value="Mailing" />
    Sign me up for your newsletter <input type="checkbox" name="newsletter" value="Newsletter" />

  • Type in the code needed to create "Submit" and "Reset" buttons:

    <input type="Submit" value="Submit" />
    <input type="Reset" value="Reset" />

  • Enter an ending "</form>" tag at the end of the form code. Save your file with an ".html" ending (extension) when finished.

References

  • Photo Credit email address buy image by Stasys Eidiejus from Fotolia.com
Promoted By Zergnet

Comments

Resources

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!