Open up Dreamweaver and start with a new blank html page.
We want to create a form that looks like this:
This will allow us to capture the name of the person who is sending you the email, their email address, and a message.
So go ahead, click on ‘Insert > Form’. This will give you a red dotted line showing where your form is.
We now need to start placing the various form components into the web page. But first of all, to get the labels and the text boxes to align correctly we will need to create a table. Click on ‘Insert > Table’. And make a table with four rows and two columns.
Type the labels into the left hand column and resize the columns accordingly.
We can now start putting in some text boxes. Click in the top right cell and then click ‘Insert > Form > Text Field’. We have already created the labels for our text boxes so click on the ‘No label’ option and then click ‘OK’.
Do the same again in the next row down to capture the email address. Text boxes are useful for capturing short messages such as peoples names. However, for the body of the message, the visitors to your page might want to write something lengthy. So fot his you need to give them a text area instead of a text field. To do this click in the third row down and then click on ‘Insert > Form > Text Area’.
The default text area is a little small so we will need to make it bigger. To do this click on the text area to select it. Then in the property inspector (At the bottom of the screen) change the ‘Num Lines’ value to 5.
Just above the Num Lines value, type in 47 for the Char Width value. This will make the text area wider. Change the Char Width of the two text boxes above to 50.
Merge the two cells in the bottom row by highlighting them both and then clicking on ‘Modify > Tables > Merge Cells’.
Next is to include a submit button. Click in your bottom cell and then go to ‘Insert > Form > Button’.
Save the page and test it in a browser.
Hang on a moment, you haven’t told the form where to send email to yet. =D To do this click anywhere inside the red dotted line and then click on <form#form1> just above the property inspector at the bottom of your screen.
The properties for the form will be displayed in the property inspector. Change the enctype to "application/x-www-form-urlencoded”. Then in the action field type in mailto:yourname@yoursite.com. Replace yourname@yoursite.com with your own email address.
That’s it, all done. Try it out in a browser such as Mozilla Firefox or Microsoft Internet Explorer and then in a few moments check your email inbox.
|
