#9: Create a Contact Form

The previous section on updating content will take care of most of your pages since most of your pages are just text and images right? For the contact page though, you might want a contact form so that people can email you directly from your site. This is an optional section, since you could just list out your email address and other contact information and call it good but it adds a nice touch of professionalism to actually have a contact form. I'll cover 2 different types here.

Email Form (Easy Method)

This method relies on whatever email client is set up for your site visitors - this is the easier method but is completely dependent on your site visitors having Outlook, MSN, Thunderbird or some other email application installed on their computer. I've already done all the work for you on this. Just copy and paste the following code into your page. Place it within the body of your page where it makes sense.

<form method="post" action="mailto:test@test.com?subject=Comments From Your Site!" enctype="text/plain">
<fieldset>
<legend>Enter Your Contact Information and Message:</legend>
<p>
<label for="your_name">Your Name:</label>
<input name="your_name" id="your_name" type="text" size="20" />
</p>
<p>
<label for="your_email">Your Email:</label>
<input name="your_email" id="your_email" type="text" size="20" />
</p>
<p>
<label for="your_comments">Your Comments:</label>
<textarea id="your_comments" name="your_comments" size="15" rows="5"></textarea>
</p>
<p>
<input type="submit" value="Submit Your Comments">
</p>
</fieldset>
</form>

More Details

You'll need to replace "test@test.com" with your own email. Some other things you may want to change are the subject and the different field names. You can delete input fields, add more, or change as needed but if you change the name and id, you'll need to also change the associated label.

Web Server Email Form (Elegant Method)

The more elegant solution is to have an email form that send the information through your web server's mail services. Although you'll have to spend a little more time setting this up, it will be well worth it since visitors to your site can send you an email directly from your website! Sending server mail requires 3 different pages: the contact form page, a page that processes the email, and a thank you page.

The Contact Form

This is almost identical to the previous form but with different form properties. Just copy and paste the following code into your page. Place it within the body of your page where it makes sense.

<form method="post" action="sendmail.php">
<fieldset>
<legend>Enter Your Contact Information and Message:</legend>
<p>
<label for="your_name">Your Name:</label>
<input name="your_name" id="your_name" type="text" size="20" />
</p>
<p>
<label for="your_email">Your Email:</label>
<input name="your_email" id="your_email" type="text" size="20" />
</p>
<p>
<label for="your_comments">Your Comments:</label>
<textarea id="your_comments" name="your_comments" size="15" rows="5"></textarea>
</p>
<p>
<input type="submit" value="Submit Your Comments">
</p>
</fieldset>
</form>

Email Processing Page

In the contact form, you'll notice that one of the things we've changed is the action="sendmail.php"--this denotes that the form contents will be sent to a new page, "sendmail.php". You'll be creating that page in this step. This will work for the 1and1 hosting account that you created (If you have a different Linux-based hosting plan, this should work too).>

1. Within the local folder that you set up in HTML-Kit, right click on it and select New, and then Create File.
2. Select Blank HTML Page and name it "sendmail.php".
3. Open the file.
4. Delete everything in the file.
5. Copy & paste the following code into the blank file.
   

   <?php
   $to = 'your@email.com';
   $subject = 'Comments From Your Site!';
   $message = 'Name:' . $_POST["your_name"] . "\n";
   $message .= 'Email:' . $_POST["your_email"] . "\n";
   $message .= 'Comments:' . $_POST["your_comments"] . "\n";
   $headers = 'From: ' . $_POST['email'] . "\r\n" .
   'Reply-To: ' . $_POST['email'] . "\r\n" .
   'X-Mailer: PHP/' . phpversion();
   
   mail ($to, $subject, $message, $headers);
   header("Location: thanks.html");
   ?>
   

6. Change the email address to your own. If you want to change the subject, you can do that as well.
7. Save the file and close it

Thank You Page

You'll notice in the PHP code above, the reference to "thanks.html". After the page processes (ie sends your email), it'll redirect to thanks.html. So you'll need to create a Thank You page as well.

This is easy though. Just create a thank you page from your content start page. Enter a title and appropriate thank you message. That's it! You can see this in action at 2Days Demo Contact Form