What we need…

1. An HTML Form with Input Elements for data we would like to collect
   1. Name
   2. Email Address
   3. Subject
   4. Comments
2. An ASP Script to collect, format, and send the information to an email recipient
3. A page informing the user their message has been sent

Creating the HTML Form

1. Open Dreamweaver and create a new HTML Page
2. Select from the Insert Menu – Insert Form
3. Select from the Insert Menu – Insert Fieldset
4. Select from the Insert Menu – Insert Label
5. Place your cursor inside the Filedset and select Insert>Form>Text Field
   1. Create a Label
   2. Select Attach label using “for” Element
   3. This will place the label and the input box into the same table cell. You’ll need to drag or cut and past the input field to the right column. (see screen shot below for the desired result)
6. Repeat Step 5 creating a field for the email address and subject
7. Place your cursor in the Forth row of the table and select Insert > Form> Text Area
   1. Create a Label
   2. Select Attach label using “for” Element
8. Place your cursor in the third row of the table and select Insert>Form>Button
9. Paste the following two elements into the code somewhere between the <form> Tags. These are hidden elements that tell the script where to send the visitor after they have submitted the form.

[crayon]


[/crayon]

Naming the Form Elements

1. Select the Name Input Field
2. In the Properties Inspector name the field txtName
   • the txt prefix tells the ASP script to harvest the information from the field
3. Repeat steps 1 and 2 for the Email, Subject, and Comments Field
   • txtSendToEmailAddress – Email Field Name
   • txtEmailSubject – Subject Field Name
   • txtComments

Trimming the Form Elements

In order to properly submit the information in the form we need a JavaScript to make sure the content is appropriate for submission.

1. Copy the following Script and paste it in the head of your document.

Customizing the Script

1. Download the ASP script
2. Save the file into the root directory of your web site as mail.asp
3. Open the mail.asp file in Dreamweaver and switch to code view
4. Set the Parameters for the following Elements

[crayon]

Const strHeader = “Email Header ”
Const strFooter = “Email Footer”
Const strTo = “youremail@domain.com”

[/crayon]

5. Save the mail.asp file

Integrating the Script with the Form

1. On the HTML page with the form add the following to the <form> tag

[crayon]

[/crayon]

You can change name and id if you wish.

Creating the Landing Page

1. Create a new page html page in Dreamweaver and name it success.html.
2. Type whatever message you would like the user to see once they have submitted the form.

Publish

1. Place all files on the web server and you are good to go.