Learning Movable Type: "Email Me" Contact Forms


Providing contact information on your weblog can be useful to your site visitors who may want to email you directly rather than submit a comment to one of your entries. You can choose to write out your email address, provide a mailto link (see MailTo Syntax for how to write out a mailto hyperlink), or you can provide a contact form. Contact forms are often preferred because they can easily hide your email address information from the spammers who regularly scour the web looking for email addresses to harvest.

I have researched and tested two free PHP-based contact form scripts - TheSiteWizard Feedback form and DodosMail - either of which you can easily implement to add a contact form to your site.

TheSiteWizard.com Feedback Form Wizard

The easiest form to implement is the SiteWizard feedback form; the php script is available at thesitewizard.com. SiteWizard also offers a Perl-based CGI script if your server does not support PHP.

Follow the directions listed to customize the feedback.php script so that it uses your email address and load the script onto your server. Set the permissions of the script to 644. You will need to create 3 html pages (or php pages if you plan to use a php include for the form) on your website to support this script: a Feedback Form page, a Thank You page, and an Error Page. An easy way to do this is to create 4 new index templates in your weblog, one each for the script, the form, the thank you, and the error page. (Make sure to uncheck the "rebuild this template automatically" checkbox if you use this method. No need to add unnecessary rebuilds.) You can also separate out the form into a .inc template module and use a PHP include (see Using PHP and MT Includes) to pull it into the form's page. This way, if you have multiple weblogs, you can use the same form, but pulled into different pages.

Here are samples of these pages that I have used. For a demo of the scripts in action, see Feedback Form Script Demo.

Feedback Form Page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Contact Me</title>
<link rel="stylesheet" href="/styles-site.css" type="text/css" />
</head>
<body>
<div id="container">
<div class="content">
<div id="center">
<h3>contact me</h3>
<ul>
<form action="feedback.php" method="post">
<table border="0" cellpadding="8" cellspacing="8" summary="feedback form">
<tr><td>Your name:</td><td><input type="text" name="name" size="29" /></td></tr>
<tr><td>Your email address:</td><td><input type="text" name="email" size="29" /></td></tr>
<tr>
<td colspan="2">
Message<br />
<textarea rows="15" cols="50" name="comments">
</textarea>
</td>
</tr>
<tr>
<td align="left" colspan="2">
<input type="submit" value="Send" />&nbsp;&nbsp;<input type="reset" value="Clear" />
<br /><br />
All fields required.<br />
</td>
</tr>
</table>
</form>
</ul>
</div>
</div>
</div>
</body>
</html>

Thank You Page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Contact Me</title>

<link rel="stylesheet" href="/styles-site.css" type="text/css" />
<script language=javascript>
function closeWin()
{
 window.close();
}
</script>

</head>

<body>
<div id="container">
<div class="content">
<div id="center">

<h3>contact me</h3>

<ul>
Thank you for your message.<br /><br />

<input type="button" onClick="javascript: window.close();" value="Close" />
</ul>

</div>

</div>
</div>
</body>
</html>

Error Message Page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Contact Me</title>

<link rel="stylesheet" href="/styles-site.css" type="text/css" />
</head>

<body>
<div id="container">
<div class="content">
<div id="center">

<h3>contact me</h3>

<ul>
Error. You must fill out every field. <br /><br />

<input type="button" onClick="parent.location='contact.php'" value="Return to Contact Form" />

</ul>

</div>
</div>

</div>
</body>
</html>

DodosMail

A more flexible but just a little bit trickier to implement script is DodosMail from Dodo's Scripts Collection. DodosMail features include checking the sender's email address for validity, adding customized fields, and sending you the sender's info such as IP address and page referrer. The script generates its own error message and can redirect to a thankyou page that you've created.

Using DodosMail, I've created a template module with the form and used a PHP include to pull the form into the page on which the form is placed. For an example of the DodosMail script in action, see DodosMail Test.

DodosMail Form: dodos_contact.inc

<form action="dodosmail.php" method="POST">
<table border="0" cellpadding="8" cellspacing="8" summary="feedback form">

<!-- these variables require customization -->
<input type="hidden" name="required_fields" value="subject,name,email,message">
<input type="hidden" name="check_email_address" value="yes">

<!-- these variables are for the auto response email sent to your sender, feel free to disable by putting a "no" in the first line -->
<input type="hidden" name="autoresponse" value="no">
<input type="hidden" name="owner_name" value="me">
<input type="hidden" name="response_subject" value="Thank you for your mail!">
<input type="hidden" name="response_mail" value="This is an auto response to let you know that I've successfully received your email sent through my email form. Thanks!">
<input type="hidden" name="font_name" value="Verdana">

<!-- if you want dodosmail to show the send info without redirection, get rid of the following -->
<input type="hidden" name="after_url" value="http://www.yourwebsite.com/thankyou.php">
<input type="hidden" name="css_file" value="http://www.yourwebsite.com/styles-site.css">

<tr><td>Your name: </td><td><input type="text" name="name" size="29"></td><br />

<tr><td>Your email address: </td><td><input type="text" name="email" size="29"></td><br />

<tr><td>Subject:</td><td><input type="text" name="subject" size="29" /></td></tr>

<tr>
<td colspan="2">Message: <br />
<textarea rows="15" cols="50" name="message">
</textarea><br /><br />
</td>
</tr>

<tr>
<td align="left" colspan="2">
<input type="submit" value="Send" />&nbsp;&nbsp;<input type="reset" value="Clear" />
<br /><br />

All fields required. A valid email address is required.<br />

</td>
</tr>
</table>
</form>

DodosMail Pag: dodos_contact.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Contact Me</title>

<link rel="stylesheet" href="/styles-site.css" type="text/css" />
</head>

<body>
<div id="container">
<div class="content">
<div id="center">

<h3>contact me</h3>

<?
include "/home/yourserver/path/to/your/weblog/files/dodos_contact.inc";
?>

<div>

</div>
</div>
</body>
</html>

Creating a Pop-up Contact Form

Once you have created your contact form, you can easily make it into a pop-up form. Follow the directions at How to Make a Pop-up Window for using the "onclick=attribute" method. You may find you need to adjust the width and height dimensions.

Putting the Contact Form into Your Weblog Template

Alternatively to creating a popup contact form, you can place the contact form directly on a page on your weblog, that include your weblog's banner and sidebar (see http://www.learningmovabletype.com/contact.php for an example.) To do this you will need to create at least two new index templates: a contact page and a thank you page and additionally an error page if you are using the sitewizard script. The steps to doing this are similar to Creating an About Page. Use a PHP include to include the form onto the contact page. You will also need to place a copy of the script into your weblog directory (as previously mentioned one way to do this is to create a new index template containing only the script.)

Links:


Posted by Elise Bauer on October 20, 2004 5:21 PM to Learning Movable Type http://www.learningmovabletype.com/