Dw How 2 Make Contact Form

7/27/2019 Dw How 2 Make Contact Form

1/17

How to Make a Contact Us PAGE in Dreamweaver

How to Create a Contact Us Page in Dreamweaver Page 1 of17

We found a great website on the net calledhttp://dreamweaverspot.comand 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 Uspage 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.
http://dreamweaverspot.com/http://dreamweaverspot.com/http://dreamweaverspot.com/http://www.passyworld.com/PWorldContactUs/formtoemail.ziphttp://www.passyworld.com/PWorldContactUs/formtoemail.ziphttp://www.passyworld.com/PWorldContactUs/formtoemail.ziphttp://www.passyworld.com/PWorldContactUs/formtoemail.ziphttp://www.passyworld.com/PWorldContactUs/formtoemail.ziphttp://www.passyworld.com/PWorldContactUs/formtoemail.ziphttp://www.passyworld.com/PWorldContactUs/formtoemail.ziphttp://dreamweaverspot.com/


2/17



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] 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:
mailto:[email protected]:[email protected]://www.passyworld.com/passyPDFs/HowtoHotmail.pdfhttp://www.passyworld.com/passyPDFs/HowtoHotmail.pdfhttp://www.passyworld.com/passyPDFs/HowtoHotmail.pdfmailto:[email protected]


3/17



Now we need to make some blank starting HTML code. In Dreamweaver do File > New TheNew Document Dialog Box appears. In the Blank Document list, choose HTML, then clickCreate to create a new HTML document.

In the Title: text field at the top of the Document toolbar, enterContact Form to add this as thetitle in your document.

Choose File > Save, name it ContactForm.htm then save the document into your local sitefolder.

We now need to setup the background image forour 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.


4/17



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:


5/17



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:


6/17



This should add some HTML code to our page as:

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:.


7/17



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.


8/17



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:


9/17



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.


10/17



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 thesubmit 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


11/17



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 andHeight 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.


12/17



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):


13/17



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 [email protected]

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.
mailto:[email protected]:[email protected]:[email protected]:[email protected]


14/17



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:

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


15/17



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 [email protected] cannot get all the fields passed)

and "[email protected]" to [email protected] 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 wassent.

We also have to save this PHP with a name of "feedback.php" and set the Action field onour 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 thisas our final PHP:

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

Contact Form PHP
mailto:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]


16/17



Thank you
Your message has been sent

Click here to continue

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

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)


17/17



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] of [email protected] 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 m aking aContact Uswebpage, is to o bta in a model

PHP scr ipt f rom yo ur web hos t , and not bl ind ly t ry to make one yoursel f . If you are using

a great web host ing company l ikeNamecheap.com, then this sh ould be a breeze.
mailto:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]

Documents

Dw How 2 Make Contact Form