A Sample Web Form

The sample HTML code
Quick tip: How to use the sample form
Detailed explanation: How to use the sample form
How it works

Sample form

Here is how the sample form will appear in a Web browser:

Add your name to our mailing list

The HTML code

Following is the HTML code that creates the sample form:

<html>
<head>
<title>Mailing List form</title>
</head>
<body>
<h1>Add Your Name to our Mailing List</h1>
<form action="mailto:youruserid@udel.edu?subject=mailing list" method=post enctype="text/plain">
Last name: <input type="text" name="Last Name" size=40 value="">
<br>
E-mail Address: <input type="text" name="E-mail Address" size=12 value="">
<br>
<input type="submit" value="Send Request" onClick="alert('Thank you. Your name has been added to our mailing list.')">
<input type="reset" value="Reset">
</form>
</body>
</html>

When someone fills out this form, its contents will be mailed to "youruserid@udel.edu," and the subject line of the message will be "mailing list." For example, if Bob Smith, whose e-mail address is bobsmith@udel.edu filled out this form, the user named youruserid@udel.edu would receive a mail message like the following:

To: youruserid@udel.edu
Subject: mailing list

Last Name=Smith
E-Mail Address=bobsmith@udel.edu

Quick tip: How to use the sample form

Open your text editor (e.g., Notepad or SimpleText).

Copy and paste the sample form code into your text editor.

Still in your text editor, change any of the information that's in bold or italics in the sample form, adding new fields as desired.

Save the new form; be sure to name it with .html as the extension, e.g., "myform.html".

Upload your form to your Web directory (using Composer's publish function, ftp, or Fetch).

Detailed explanation: How to use the sample form

Open your text editor (e.g., Notepad or SimpleText).

Copy and paste the sample form code into your text editor.

Replace the text between the <title> </title> tags; this text appears at the top of the browser window as the title of the page.

Replace the text between the <h1> </h1> tags; this is the title that appears on the page itself.

Change the mailto:youruserid@udel.edu in the <form> tag; replace youruserid@udel.edu with your own e-mail address.

Next, replace the ?subject=mailing list" with the wording you'd like in the subject line of the message you will receive. Be sure to include the quote at the end. If you don't want a pre-assigned subject line, delete ?subject=mailing list, but leave the closing quotation mark.

In the <input> tags, change name=Last Name to reflect what you'd like to appear as the name of that item when its contents are sent to you by e-mail. For example, if you want the e-mail message to say "Full Name," change the name=Last Name in the <input> tag to name=Full Name.

Add one new <input> tag for each new piece of information you would like to collect in your form. For example, to add an address, type:

One new <input> tag in which name=street address

One new <input> tag in which name=city

One new <input> tag in which name=state

Add the descriptive text that will appear on the page for each <input> tag. Usually, you put that text to the left of the <input> tag, but you may place it above, below, or to the right.

To change the label users will see on the button they use for submitting the form, in the <input type="submit"> tag, replace "Send Request" with the text you'd like on the button.

To change the text users will see after clicking the "Submit (or "Send Request") button, change 'Thank you. Your name has been added to our mailing list.' Be sure to include the single quotation marks (').

Save the new form; be sure to name it with .html as the extension (e.g., myform.html).

Upload your form to your Web directory (using Composer's publish function, ftp, or Fetch).

How it works

The <form> tag below instructs the browser that a form is being used, that the information gathered from the form should be sent by e-mail to the user named in the tag, that the subject line for the message is "mailing list," and that the message should be sent in plain text so it's readable. Every form must begin with a form tag.

<form action="mailto:youruserid@udel.edu?subject=mailing list" method=post enctype="text/plain">

The <input type> tag below instructs the browser to display a box in which the user can type text; to call the contents of the box "Last Name;" to make the box 40 characters wide; and to have no pre-set value, that is, the user will provide the contents of the box by typing it in. Be sure to add text to tell the user in what box they're entering information. The first line below will create a form with an unlabelled blank text box. The second line below will create a form with a properly labelled text box.

<input type="text" name="Last Name" size=40 value="">

Last Name <input type="text" name="Last Name" size=40 value="">

The <input type> tag below instructs the browser to display a box in which the user can type text; to call the contents of the box "Phone;" to make the box 14 characters wide; and to have no pre-set value, that is, the user will provide the contents of the box by typing it in.

<input type="text" name="Phone" size=14 value="">

<input type="text" name="Last Name" size=40 value="">

The <input type> tag below instructs the browser to display a button labelled "Send Request" and to open a window with the text "Thank you. Your name has been added to our mailing list."

<input type="submit" value="Send Request" onClick="alert(' Thank you. Your name has been added to our mailing list.')">

The <input type> tag below instructs the browser to display a button labelled "Reset." Clicking on this button clears the contents of anything that's been typed in the text boxes.

<input type="reset" value="Reset">

The </form> tag below instructs the browser that there is no further information in this form; it is complete.

</form>