A Contact Form for Your Website | HCDE532 | Students of Premium Design Works

HCDE532 » A Contact Form for Your Website

Now that we have gone thru the process of making a multiple page website, let’s add a contact form to our contact page, shall we?

A Contact Form for Your Website

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

Code: https://github.com/msinkula/HCDE598/blob/master/a-contact-form-for-your-website/contact.php

Step One: Open & Prepare Your Contact Page

Go ahead and open your contact.php page to get started:

Open Your Contact Page

Right now, our contact page has some default text in it that we are going to get rid of:

Get rid of the default text.

This will make space for the form that we will place.

Step Two: Create the Form Element

Let’s insert a form using Insert > Form > Form:

Insert Your Form

… and fill out the fields accordingly:

Fill out the fields.

Here we are going to set the form action to contact.php and set the method to post.

See Also:

We will also name our contact form.

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

<!-- Begin Contact Form -->
<form action="contact.php" method="post" name="contact">

</form>
<!-- End Contact Form -->

I also like to put comments in to keep me organized.

Step Three: Create Your Form Elements

Let’s now create the actual form itself with all of its elements.

1. The Name Text Field

First and foremost we need to provide a field for the name of the person trying to contact us.

Let’s do this by Insert > Form > Text Field:

Insert the Name Text Field

… and fill out the fields accordingly:

Fill out the fields accordingly.

This will give us the form field for the person’s name:

<!-- Begin Contact Form -->
<form action="contact.php" method="post" name="contact">
<input name="name" type="text">
</form>
<!-- End Contact Form -->

See Also: HTML Input Tag | W3 Schools

Now we need to create a <label> for out <input>.

Let’s do this right above the <input> by choosing Insert > Form > Label:

Insert the Label

When we do this, we should see our <label> tag:

<!-- Begin Contact Form -->
<form action="contact.php" method="post" name="contact">
<label></label>
<input name="name" type="text">
</form>
<!-- End Contact Form -->

See Also: HTML Label Tag | W3 Schools

But, unfortunately it is blank.

Let’s add a couple of things like the text that the user will see and a for attribute with the value of name:

<!-- Begin Contact Form -->
<form action="contact.php" method="post" name="contact">
<label for="name">Name:</label>
<input name="name" type="text">
</form>
<!-- End Contact Form -->

If we take a look now, we should see the start of our contact form:

The start of our contact form.

2. The Email Text Field

For this one, you can either follow the steps above or just type it out:

<!-- Begin Contact Form -->
<form action="contact.php" method="post" name="contact">
<label for="name">Name:</label>
<input name="name" type="text">
<label for="email">Email:</label>
<input name="email" type="email">
</form>
<!-- End Contact Form -->

Note: we need to change the type to email on this one for validation purposes.

3. The Subject Select Menu

Let’s go ahead and create a multi-option select menu for our subject field by first choosing Insert > Form > Select (List/Menu):

Insert Your Select Menu

Once our initial menu is there we will need to create the options for the subjects.

The Properties Inspector

See Also: HTML Select Tag | W3 Schools

Create your option values:

Create Your Option Values

Choose the option that should be initially selected:

Initially Selected Option

Create the <label> for the select menu:

<!-- Begin Contact Form -->
<form action="contact.php" method="post" name="contact">
<label for="name">Name:</label>
<input name="name" type="text">
<label for="email">Email:</label>
<input name="email" type="email">
<label for="subject">Subject:</label>
<select name="subject">
<option value="General Inquiry" selected="selected">General Inquiry</option>
<option value="Specific Inquiry">Specific Inquiry</option>
<option value="Stoopid Inquiry">Stoopid Inquiry</option>
</select>
</form>
<!-- End Contact Form -->

See Also: HTML Option Tag | W3 Schools

If we preview again, we will see our menu in play:

Our Select Menu

So, far our form is starting to take shape. However, we will need to style the form in a little bit.

For now, let’s just continue on.

4. The Message Text Field

Since the whole point of a contact form is to send a message to a recipient, we need to create a message field below our <select> by going to Insert > Form > Text Area:

Insert Your Message Text Area

… give it the appropriate attributes:

Text Area Attributes

… and lastly, give it a <label>:

<!-- Begin Contact Form -->
<form action="contact.php" method="post" name="contact">
<label for="name">Name:</label>
<input name="name" type="text">
<label for="email">Email:</label>
<input name="email" type="email">
<label for="subject">Subject:</label>
<select name="subject">
<option value="General Inquiry" selected="selected">General Inquiry</option>
<option value="Specific Inquiry">Specific Inquiry</option>
<option value="Stoopid Inquiry">Stoopid Inquiry</option>
</select>
<label for="message">Message:</label>
<textarea name="message" cols="40" rows="5"></textarea>
</form>
<!-- End Contact Form -->

See Also: HTML Textarea Tag | W3 Schools

5. The Submit Button

Almost done with our form elements.We now need to create a submit button that will control the form and send off the email.

Let’s place the submit button after our <textarea> by going to Insert > Form > Button:

Insert the Submit Button

… and create the appropriate attributes:

Create the appropriate attributes.

We don’t need a label for this element:

<!-- Begin Contact Form -->
<form action="contact.php" method="post" name="contact">
<label for="name">Name:</label>
<input name="name" type="text">
<label for="email">Email:</label>
<input name="email" type="email">
<label for="subject">Subject:</label>
<select name="subject">
<option value="General Inquiry" selected="selected">General Inquiry</option>
<option value="Specific Inquiry">Specific Inquiry</option>
<option value="Stoopid Inquiry">Stoopid Inquiry</option>
</select>
<label for="message">Message:</label>
<textarea name="message" cols="40" rows="5"></textarea>
<input name="submit" type="submit" value="Submit Message">
</form>
<!-- End Contact Form -->

If we preview now, we can see all of our form elements in place. But they could definitely use some style.

Step Four: Style Your Form Elements

This step is going to be easy. The thing that is throwing our form all out of whack is that all of our elements in the form are inline elements.

Let’s change them to being block level elements in our style sheet and make them look a little better:

#text label {
display: block;
color: #39275B;
margin-bottom: 4px;
font-weight: bold;
}

#text input, #text select, #text textarea {
display: block;
margin-bottom: 10px;
}

That looks much better:

Style for Our Contact Form

Notice that I also stuck in a <p> just above my form.

Step Five: Form Validation with HTML 5

This step is going to be wicked complicated.

We are going to need to mark some of our elements as required:

<!-- Begin Contact Form -->
<form action="contact.php" method="post" name="contact">
<label for="name">Name:</label>
<input name="name" type="text" required="required">
<label for="email">Email:</label>
<input name="email" type="email" required="required">
<label for="subject">Subject:</label>
<select name="subject">
<option value="General Inquiry" selected="selected">General Inquiry</option>
<option value="Specific Inquiry">Specific Inquiry</option>
<option value="Stoopid Inquiry">Stoopid Inquiry</option>
</select>
<label for="message">Message:</label>
<textarea name="message" cols="40" rows="5" required="required"></textarea>
<input name="submit" type="submit" value="Submit Message">
</form>
<!-- End Contact Form -->

See Also: HTML Button Tag | W3 Schools

Yup. That’s it. As long as we have specified a type attribute in our <input> tags, all we need to do is place in the required attribute to validate the form.

Let’s take a look:

HTML5 From Validation

Now that our form validates when we click on the submit button, it’s time to make the form actually send an email to us.

Step Six: The Form Handler Script

Here’s where we will put everything we’ve done so far to some good use.

In order to make this form work we will need to use a PHP script that will send us the email:

<?php // begin form handling script

if ( isset ($_POST['submit']) ) {  // if the submit button has been clicked

$mailRecipient = 'sinkum@uw.edu';  // send to this email address

$mailSubject = $_POST['subject'];  // use the subject from the select menu

$mailMessage = $_POST['message'];  // use the message from the message field

$mailSender = 'From:'.$_POST['email'];  // use the email from the email field

mail($mailRecipient, $mailSubject, $mailMessage, $mailSender);  // send the mail

print '<p>Your email has been sent, <strong>'.$_POST['name'].'</strong>!</p>'; // let the user know their email has been sent

}

?>