A Contact Form for Your Website | HCDE537

Let’s create a contact form for your website that contains:

Spry Forms: to create the structure, or shell that consists of the labels, form fields and buttons
PHP Script: the script behind the scenes that will allow our form data to be processed

View: http://students.washington.edu/sinkum/a-contact-form-for-your-website/contact.php

Download: http://www.sccc.premiumdw.com/examples/a-contact-form-for-your-website.zip

Step One: Open Your Contact Page

We will be using the contact page that you set up last week to create our contact form:

Open Your Contact Page

Step Two: Insert a Form Using Dreamweaver

We will need to insert a form where we had our basic contact information.

Make sure you delete the old information in your content <div> tag so we can insert the form there:

Delete The Old Information

Let’s now insert the basic form element using Insert > Form > Form:

Insert Contact Form

Once you have done this, you should have a basic form element with the following information:

<form action="contact.html" method="post" name="contact-form">
</form>

Step Three: Insert a Table Using Dreamweaver

We are then going to us a table to format our contact form a bit using Insert > Table:

Insert a Table

Once you have done this, you should have a basic table with the following information:

<table width="500" border="0" cellspacing="10">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Step Four: Insert Form Elements

We now need to add in the form elements using Dreamweaver Spry Forms to allow for form validation.

1. Spry Validation (Name) Text Field

Lets start out with the sender’s name by using Insert > Spry > Spry Validation Text Field:

Insert Spry Validation Text Field

Notice that I have inserted this text field into the second <td> within the first <tr>.

Now let’s move the <label> into the first <td> within the first <tr>:

Move the into the first within the first .

Your first <tr> should now look like this:

<tr>
<td>
<label for="name">Name</label>
</td>
<td>
<span id="sprytextfield1">
<input type="text" name="name" id="name" />
<span>A value is required.</span>
</span>
</td>
</tr>

Since we used Dreamweaver Sprys, we should also notice that Dreamweaver attached a link to new style sheet and a new JavaScript to our <head> of our document:

Dreamweaver attached a link to new style sheet and a new JavaScript.

Dreamweaver also added a bit of JavaScript at the end of our document:

JavaScript for the Text Field

2. Spry Validation (Email) Text Field

Let’s now create an email address box by using Insert > Spry > Spry Validation Text Field:

<p>Spry Validation Email Address Box</p>

Notice that I have inserted this text field into the second <td> within the second <tr>.

Same as befrore, move the <label> into the first <td> within the second <tr>:

Move the <label> into the first <td> within the second <tr>.

Using the design pane, lets set this to check for an email address by selecting the spry and changing the type of spry to ‘Email Address’ using the property inspector:

Change the type of spry to 'Email Address' using the property inspector.

Your second <tr> should now look like this:

<tr>
<td>
<label for="email">Email:</label>
</td>
<td>
<span id="sprytextfield2">
<input type="text" name="email" id="email" />
<span>A value is required.</span>
<span>Invalid format.</span>
</span>
</td>
</tr>

You should also see a new bit of JavaScript at the end of your document:

JavaScript for the Email Text Field

3. Select Menu (Subject)

Now we can make a select menu for our user to choose a subject of their email using Insert > Form > Spry Validation Select:

Insert Spry Validation Select Menu

Notice that I have inserted this menu into the second <td> within the third <tr>.

Again, move the <label> into the first <td> within the third <tr>:

Move the into the first within the third .

Once the menu is inserted, we need to add options using the design pane and property inspector:

Add options using the design pane and property inspector.

Your third <tr> should now look like this:

<tr>
<td>
<label for="subject">Subject:</label>
</td>
<td>
<span id="spryselect1">
<select name="subject" id="subject">
<option value="General Inquiry">General Inquiry</option>
<option value="Specific Inquiry">Specific Inquiry</option>
<option value="Other Inquiry">Other Inquiry</option>
</select>
<span>Please select an item.</span>
</span>
</td>
</tr>

You should also see a new bit of JavaScript at the end of your document:

JavaScript for the Select Menu

4. Spry Validation (Message) Text Area

You can’t have an email for with the message area, so let’s create one using Insert > Form > Spry Text Area:

Create the Spry Text Area

Notice that I have inserted this menu into the second <td> within the fourth <tr>.

Again, move the <label> into the first <td> within the fourth <tr>:

Move the <label> into the first <td> within the fourth <tr>.

Your fourth <tr> should now look like this:

<tr>
<td>
<label for="message">Message</label>
</td>
<td>
<span id="sprytextarea1">
<textarea name="message" id="message" cols="45" rows="5"></textarea>
<span>A value is required.</span>
</span>
</td>
</tr>

You should also see a new bit of JavaScript at the end of your document:

JavaScript for the Text Area

5. Submit & Reset Form Buttons

In order for the form to work, we need to add a submit button via Insert > Form > Button:

Insert Submit Form Button

We can also add a reset button via Insert > Form > Button:

Insert Reset Form Button

Our fifth <tr> should now look like this:

<tr>
<td>&nbsp;</td>
<td>
<input name="submit-form" type="submit" value="Submit Form" />
<input name="reset-form" type="reset" value="Reset Form" />
</td>
</tr>

Step Five: Using PHP to Send an Email to the User

I have created a PHP Email Form Handler Script that you can copy and paste into your contact page:

PHP Email Form Handler Script

You can copy and paste the following code into your page:

<?php

if ( isset ($_POST['submit-form']) ) {  // Check for each form value when the form is submitted:

$problem = FALSE; // no problems!


if (!$problem) { // if there are no problems:

$mailMesage =  ("{$_POST['name']} {$_POST['email']} wrote: \n\n{$_POST['message']}"); // message of the email.

$mailSubject = "{$_POST['subject']}"; // subject of the email.

$mailRecipient = "sinkum@u.washington.edu"; // destination email address.

mail ($mailRecipient, $mailSubject , $mailMesage); // Function to send the email.

print ("<p>Thank You for contacting Me, <b>{$_POST['name']}</b>!</p>\n"); // Notice that thanks the user.

}
}
?>

See Also: A Simple PHP Contact Form | WEB200 | Premium Design Works

In order to get this script to work, we will need to rename our contact page with a .php extension:

Rename our contact page with a .php extension.

Remember to change the destination email to yours:

Change the destination email to yours!

We will also need to change the action in our form to ‘contact.php’ so the page will load correctly:

<form action="contact.php" method="post" name="contact-form">

Lastly, we will need to change all of the menus on our pages:

<!-- Begin Navigation -->
<div id="navigation">
<ul id="navigation-items">
<li><a href="statement.html">Statement</a></li>
<li><a href="resume.html">Resumé</a></li>
<li><a href="skills.html">Skills</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
<!-- End Navigation -->