How to Make a Contact Us PAGE in Dreamweaver

Transcription

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. Let’s 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
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:
Page 2 of 17
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.
Page 3 of 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:
Page 4 of 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:
Page 5 of 17
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:.
Page 6 of 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.
Page 7 of 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:
Page 8 of 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.
Page 9 of 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 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 site’s 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
Page 10 of 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 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.
Page 11 of 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):
Page 12 of 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 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 page’s source code.
Page 13 of 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:
-------------------------------------------------------------------<?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>
--------------------------------------------------------------------
Page 14 of 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 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">
Page 15 of 17
<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)
Page 16 of 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 person’s 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 sender’s 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. 
Page 17 of 17

How to Make a Contact Us PAGE in Dreamweaver

Transcription

Similar documents

Tutorial: Create online polls with PHP and MySQL

studio unit Avida Tower Makati west - Phil

Introduction to Dreamweaver - Buttons with Javascript and Flash

PDF Basic tutorial for Dreamweaver CS5

Dreamweaver® CC For Dummies

2nd PHILIPPINE MARINE MAMMAL

Rita Victor and Michael Davis Coldwell Banker Honig

Macromedia Dreamweaver Tutorial

Almond Olive and Citrus Committees Website

File Processing Using PHP on IBM i

Learning the Basics of Dreamweaver MX - Training

Adobe Dreamweaver CC 2017 (Beta 3)

Dreamweaver CS4 Tutorial: How to Create a Website with Dreamweaver CS4