How to Make a Contact Us PAGE in Dreamweaver

We found a great website on the net called http://dreamweaverspot.com and we have basically followed their tutorial for creating Contact Forms. We also checked out a few other tutorials we found by Googling, but the dreamweaverspot one seemed to be the simplest one for beginners. When a Contact Form is made, there are two key parts: a PHP script and a Webpage Form. A PHP script is a set of instructions that needs to be downloaded from the following location: http://www.passyworld.com/PWorldContactUs/formtoemail.zip and then extracted. If our web host does not allow scripts to run, then later on we will find that our new contact us page does not work. If this happens we will have to forget about PHP and forms. Instead of using PHP we can easily make and put an image onto the Contact Us page like this one:

People can then create their own email to us. (So we can get by without PHP if we need to). The second part of the Contact Form is to create the Contact Us webpage with a Form on it using Dreamweaver. Lets first look at how we modify and set up the PHP script.

Setting Up the PHP Script

As noted previously, there is a start file of script that we need to download and unzip onto our PC from: http://www.passyworld.com/PWorldContactUs/formtoemail.zip Next we need to setup a subfolder in our site using Dreamweaver, called something like PWorldContactUs and into this folder we copy the FormToEmail.php file that we unzipped.

How to Create a Contact Us Page in Dreamweaver

Page 1 of 17

How to Make a Contact Us PAGE in Dreamweaver

We now need to modify the PHP file by editing it in Dreamweaver. Change the title to be Contact Form PHP The other step is to change the $my email value line in the PHP from the generic [email protected] to be the email address where we want the form to be sent to, which for our site is: [email protected]. (Do not use this address in your PHP, use your won one.) If you need to set up a free hotmail account to use for this exercise, then go to the following link for a full set of step by step instructions: http://www.passyworld.com/passyPDFs/HowtoHotmail.pdf

The only other thing is to now save this file into our Dreamweaver site folder, and make sure the file type is set to the PHP group, and the filename (which is case sensitive) is exactly FormToEmail .

Create Contact Us Webpage

We used Adobe Fireworks to make a 1024x768 pixels sized background image for our page:

How to Create a Contact Us Page in Dreamweaver

Page 2 of 17

How to Make a Contact Us PAGE in Dreamweaver

Now we need to make some blank starting HTML code. In Dreamweaver do File > New The New Document Dialog Box appears. In the Blank Document list, choose HTML, then click Create to create a new HTML document. In the Title: text field at the top of the Document toolbar, enter Contact Form to add this as the title in your document.

Choose File > Save, name it ContactForm.htm then save the document into your local site folder. We now need to setup the background image for our ContactForm.htm HTML code. To do this, we do from the top of page menu: Modify > Page Properties and then click on browse next to Background image, and navigate to where our image is, and then click OK.

How to Create a Contact Us Page in Dreamweaver

Page 3 of 17

How to Make a Contact Us PAGE in Dreamweaver

Note that we need to make sure that our HTML and the background image PWContactBkgrnd1024x768.jpg are both in the same folder on our website. This makes our page appear with the Background design on it. We now need to put a Div onto our page, where we can enter some text instructions. First we insert an AP Div box container that we will be able to move around the page to adjust the location of our text. We do Insert > Layout Objects > AP Div and then drag the Div into position. We can then click into the Div box, (to get a big flashing vertical line cursor), and start typing some text into the Div Box. We can set the font, the color and the size of this text using the bottom of screen Properties Inspector:

We can also use our mouse to click onto the Div Box and stretch its size and shape, and move it around the page. We can thus make something like this:

How to Create a Contact Us Page in Dreamweaver

Page 4 of 17

How to Make a Contact Us PAGE in Dreamweaver

We are now ready to add the Contact Us data entry Form onto the page. We found that we needed to make another AP Div to put the form into. When we did not do this, DW put the form at the top of the page over our background and other items. There was then now way to click and drag the form to any other position. This Div box was dragged out to occupy most of the remaining space on our web page:

We next need to click our mouse inside this Div Box, to get a big vertical flashing cursor. Now do Insert > Form then select Form from the Flyout Menu. Now in the Properties Inspector at the bottom of the DW screen: In the Action text box type in FormToEmail.php (this is the file we set up on our site earlier). Change the Method to POST and then in the NAME text box type in ContactForm. This is all shown below on the next page: How to Create a Contact Us Page in Dreamweaver Page 5 of 17

How to Make a Contact Us PAGE in Dreamweaver

This should add some HTML code to our page as:

<form action="FormToEmail.php" method="post" name="ContactForm"></form>

Next step is to place the form objects onto the page (the information we would like to collect). We need text boxes for Name and Email Address, and also a Text Area for Comments. To do this click inside our form object (which is defined by a dotted red rectangle in DW:

and then from the top menu select Insert > Form > Label. From the Code Window click in between the LABEL Tags and type in Name:.

How to Create a Contact Us Page in Dreamweaver

Page 6 of 17

How to Make a Contact Us PAGE in Dreamweaver

Move your cursor in the code window to the end of the >/label> tag, and then from the top menu select Insert > Form > Text Field. Name the Text field name, with a max length of 50 characters in the pop up window that appears:

Click the OK button. Test your Form to see how it is going, by Saving and then clicking the planet earth icon (or F12 key) to check how it is working.

How to Create a Contact Us Page in Dreamweaver

Page 7 of 17

How to Make a Contact Us PAGE in Dreamweaver

Back in Dreamweaver, click so that the cursor is inside the red from area, and past the white text box, and repeat the above process to make a Label and text box where a person can enter their email address. Name the text field email and give it a maximum length of 80 characters. We then have an interesting problem, because the text entry boxes do not display at max width, and we have tem next to each other, and would like them underneath each other. To get them one under each other, we need to place our cursor in between them here:

And then hold down the shift key, and press the Enter key a couple of times: We can make the white text boxes display at maximum width, by clicking on them, and in the Properties inspector at the bottom of DW, set them to have Char Width values of 80 to display them on screen as 80 characters wide. We can also click in the code view onto the label names, and then in the Properties at the bottom of DW, change Font, size, and color, like this:

How to Create a Contact Us Page in Dreamweaver

Page 8 of 17

How to Make a Contact Us PAGE in Dreamweaver

Now we need to set up a box where people can type in their comments (which will become the email content). To do this we add another Label and call it Comments. Position our cursor at the end of the email white text box, and then do Insert > Form > Label (just like before). Do the Shift key held down with Enter key at same time, to move down one or two lines inside the red form box, and move the comments box so it is underneath the Comments label. Then add a Text Area multiline box where people can enter their comments. Do to Insert > Form > Text Area in the top menu. For the Input Tag Accessibility Attributes box that pops up, just click on Cancel or on OK to get rid of it. A default text area of 5 rows that are 45 characters wide is inserted. We can alter this in either the code view, or the bottom of screen Properties inspector in DW: 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. Also type into the Init Value box : Type comments here and click the submit button when finished.

Save the page and use the Planet Earth icon of F12 to test it in the browser and confirm it is working ok.

How to Create a Contact Us Page in Dreamweaver

Page 9 of 17

How to Make a Contact Us PAGE in Dreamweaver

We now need to create the submit button. From the top menu Insert > Form > Button and click Cancel on the Input Tag Accessibility Attributes box that pops up. We do not have to name the button, because DW does this for us. Test the finished form and it should look like the one shown below. Fill in the form, and click the submit button in local mode on the PC and see what happens:

Note that FormToEmail.php is displayed in the bottom left hand corner of the web screen. Well in Local mode we just get a pop up window that asks us if we would like to Open or Save the FormToEmail.php file. If we click open, it just opens the PHP file in Dreamweaver and does not send an email. Hopefully it will work when we ship all the components to our web host server. However, before we do that we need to add a Rollover Link button to our page so that we can click it to go back to our sites Home page when we are done with the email submit. We can use the Home button images we already have setup for our Homepage, from back

How to Create a Contact Us Page in Dreamweaver

Page 10 of 17

How to Make a Contact Us PAGE in Dreamweaver

when we built the Under Construction Page. These images are 94x101 pixels in size, and look like this:

They are already stored on our site in the Folder PWorldImages and so we should just be able to point to them. We need to add an AP Div to place the Rollover link into, which we do by the top of page : Insert > Layout Objects > AP Div and then move it into position, and set its Width to 94 and Height to 101 in the bottom of screen Properties Inspector. Now Click inside the Div box, and on the top of screen menu do Insert > Image Objects > Rollover Image and then set the pop up box to have the two images linked to and set the link to be to Index.html like this:

Click ok and then test the webpage using F12 to see that the link works ok locally. We also need to modify our Index.HTML homepage so that it now links to this Contact Us page instead of its current link to an under construction page.

How to Create a Contact Us Page in Dreamweaver

Page 11 of 17

How to Make a Contact Us PAGE in Dreamweaver

We updated our Index page to point to the ContactForm.htm as the link but had an awful time in Dreamweaver trying to F12 make it work locally. For some reason DW updated the link to look ok in DW, and also looked ok when tested in Internet Explorer, but whenever we clicked it it would just stay on the home page. The Contact Us page would work ok if linked to from some other brand new test HTML we made, and it also ran ok on its own. In the end we gave up, and decided to migrate it all up to the web host anyway. On the actual web host everything links and loads and works fine.

and when we click the Submit button, it appears to run the PHP and give us a successful end message (that we know is coded into the PHP script):

How to Create a Contact Us Page in Dreamweaver

Page 12 of 17

How to Make a Contact Us PAGE in Dreamweaver

And when we click on the Click here to continue message, it takes us nicely back to the Passy World homepage.

However, when we go to check our destination email inbox at [email protected] there are no emails in there. We will have to raise a help request with our Web Hosting Company and see if they can figure out why the script runs ok, but produces no resulting email to our inbox. Maybe our host will output the test emails to us in the next day or so. Anyway, we have seen how to make a form inside a webpage in Dreamweaver, and combine it with a PHP script, just like business sites do in the real world. So it has not been a total waste of time. If we cannot get the page working, we will have to go back to the simple display of an image** of our email address, for people to use their own email program to contact us. We display the email address in an image, rather than as text on our web page to prevent spiders and spammers from capturing our email address by reading our pages source code.

How to Create a Contact Us Page in Dreamweaver

Page 13 of 17

How to Make a Contact Us PAGE in Dreamweaver Getting the PHP Script Working
We raised a help request with our web hosting company Namecheap.com (who may I say are always sensational at supplying support answers within 24 hours and highy recommended). The showstopper is because of Spammer problems, our host does not let the From field on an email be the sender's email address. The from field must be something that cannot be replied to, that is on our Host's server such as: [email protected] Namecheap.com also kindly supplied us the following sample PHP: -------------------------------------------------------------------<?php $mail_to_send_to = "[email protected]"; $your_feedbackmail = "[email protected]"; $sendflag = $_REQUEST['sendflag']; if ( $sendflag == "send" ) { $email = $_REQUEST['email'] ; $message = $_REQUEST['message'] ; $headers = "From: $your_feedbackmail" . "\r\n" . "Reply-To: $email" . "\r\n" ; $a = mail( $mail_to_send_to, "Feedback Form Results", $message, $headers ); if ($a) { print("Message was sent, you can send another one"); } else { print("Message wasn't sent, please check that you have changed emails in the bottom"); } } ?> <form method="post" action="feedback.php"> <input type="hidden" name='sendflag' value="send"> Your Email: <input name="email" type="text" /><br /> Message:<br /> <textarea name="message" rows="15" cols="40"> </textarea><br /> <input type="submit" /> </form>

--------------------------------------------------------------------

How to Create a Contact Us Page in Dreamweaver

Page 14 of 17

How to Make a Contact Us PAGE in Dreamweaver

We had to make some substantial changes to this PHP as follows: We need to set [email protected] to be [email protected] (or we can use [email protected] but cannot get all the fields passed) and "[email protected]" to be [email protected] in the PHP script.

We also need to change the variable names in the Namecheap PHP to match our form which has: Person's Name = name (we will need to add this variable to the Namecheap script) Person's email address = email (this matches our form HTML ok already) Persons comment text is 50 chars by 10 lines, not 40x15 and = "comments" (not "message") The bottom part of the PHP builds a form on the screen, which we do not need, and so we will delete it. We will replace it with some HTM code form our old PHP that says thankyou, it was sent. We also have to save this PHP with a name of "feedback.php" and set the Action field on our form in Dreamweaver to be "feedback.php" . We also needed to remove the If statement, and make a few other changes to end up with this as our final PHP: -------------------------------------------------------------------<?php $mail_to_send_to = "[email protected]"; $your_feedbackmail = "[email protected]"; { $email = $_REQUEST['email'] ; $name = $_REQUEST['name'] ; $message = $_REQUEST['comments'] ; $headers = "From: $your_feedbackmail" . "\r\n" . "Reply-To: $email" . "\r\n" . "Name: $name" . "\r\n" ; $a = mail( $mail_to_send_to, "PW Contact Us Message", $message, $headers ); } ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Contact Form PHP</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#ffffff" text="#000000">

How to Create a Contact Us Page in Dreamweaver

Page 15 of 17

How to Make a Contact Us PAGE in Dreamweaver

<div> <center> <b>Thank you <?php print stripslashes($_REQUEST['name']); ?></b> <br>Your message has been sent <p><a href="../index.html">Click here to continue</a></p> </center> </div> </body> </html>

-------------------------------------------------------------------So when we enter a message like this:

And receive the PHP confirm message ok:

and the click here takes us back to the home page (we set this link up using Dreamweaver) How to Create a Contact Us Page in Dreamweaver Page 16 of 17

How to Make a Contact Us PAGE in Dreamweaver

The resulting email we get to the hotmail inbox is as follows:

The problem with this email is that it does not give us the persons email address or their name which they entered onto our original form. This is the main drawback to using hotmail. If we use the email service provided by our web host, by sending our email to [email protected] instead of to [email protected] then we get an email with headers where we can see the senders email in the Reply-To: header like this:

So the Best advice we can give on making a Contact Us webpage, is to obtain a model PHP script from your web host, and not blindly try to make one yourself. If you are using a great web hosting company like Namecheap.com, then this should be a breeze.

How to Create a Contact Us Page in Dreamweaver

Page 17 of 17