In this tutorial you will learn how to create your all important Dreamweaver Contact Form and have the details of the form emailed straight to your INBOX. Capturing Contact Information of potential customers in extremely important in the business world. Don't let those potential customers or clients disappear just because you didn't have a Contact Form on your website. By following this Dreamweaver Tutorial you will have a WORKING Contact Form up and running in a few easy steps.
NOTE: Before we start you will need to download this PHP Form to Email Script and unzip it to the root directory of your website. Dowload the file from dreamweaverspot.com
Now you are ready to begin inserting the form and the fields you would like onto the page. In this example I am going to create anew page, but you can easily add this to an existing page if you already have one in mind for the form to be placed on.
1. In Dreamweaver, choose File > New The New Document Dialog Box appears.
2. In the Blank Document list, choose HTML, then click Create to create a new HTML document.
3. In the Title text field in the Document toolbar, enter Contact Form to add a title to your document.
4. Choose File > Save, then save the document in your local site folder. Name it ContactForm.htm.
5. Next we are going to Insert a Form onto the page, Choose Insert > Form then Form from the Flyout Menu. A Form dialog box will then open. In the Action text box type in FormtoEmail.php (this is the file you extracted to the root of your website earlier). Change the Method to POST and then in the NAME text box type in ContactForm.
6. Next step is to place the form objects onto the page (the information we would like to collect). In this example I have placed a text box for Name and Email Address, and also a Text Area for Comments. To do this click inside your form object and then from the top menu select Insert > Form > Label. From the Code Window click in between the LABEL Tags and type in Name:. Next from the top menu again select Insert > Form > Text Field. Name the Text field name from the properties box at the bottom.
Repeat those steps and add another Label and Text Field and name it email.
7. Add another Label and type in Comments. Then add a Text Area, go to Inset > Form > Text Area in the top menu. Name the Text Area comments from the Properties box at the bottom and give the Character Width a value of 50 and the Number of Lines a value of 10.
8. Add a Button. Again from the top menu Insert > Form > Button. Your Form should now look like this: (note I have put each element on a different line to help with the usability).
9. Now we need to edit a couple of lines in the FormtoEmail.php file. Open the file in Dreamweaver. The first line you need to edit is the line that starts with $my_email.
Change the email address to the address you want the emails to be sent to. The other line that you may wish to change is this one:
This is where the visitor will be directed after they have pressed the SUBMIT button. If you have a page that you like to direct them to then place the location of the file in there, or simply leave it blank and they will get a thank you message on the same page.
10. Upload both files to your web server and bingo all done. You should know have a working contact form.
Written by Daniel - http://www.Dreamweaverspot.com
Find all the best website design tips and tutorials on using Dreamweaver and CSS.
0 Responses to “Dreamweaver Tutorial - Create A Contact Form In Dreamweaver”
Leave a Reply