Creating a Contact Form using MT
The problem with most "Email me" contact forms is that they aren't very secure. I've been using one of these forms for a few years and recently started getting a lot more spam messages coming through to my email inbox. MT developer Jay Allen suggested using his Comment Challenge plugin and the commenting capability of MT to create a more secure contact form. I've implemented this approach on elise.com and it seems to work great. Here are the steps. You will need to create a new blog for this purpose if you have enabled comments on your existing blog (the comment system templates will conflict otherwise).
1. Create a new blog. Delete all index templates except for the stylesheet. Delete all archive templates except for the Individual Entry Archive. Change the name of the Individual Entry Archive template to "Contact Form". Save and rebuild the template.
2. In the blog Settings > Feedback, select "Accept comments from Anyone" and "Immediately publish comments from No one". Select "Require E-mail Address". Select E-mail Notification as "On".
3. In the blog Settings > Publishing, under "Archive Mapping", change the "Archive File Path" of the Contact Form to "Custom". Fill in %f in the field. Save changes.
4. In the Individual Archive Template, strip out the code related to the entry and pings. Strip out the MTIfCommentsActive section (you do not want to publish everyone's emails to you on the contact form.) Basically, strip from the template everything that you do not want to appear on the page. Hold on to the MTEntryIfCommentsOpen section.
5. Change the label for Comments to "Message" and Post to "Send". Strip out any other code in the comments section that is unnecessary, such as anything that refers to Typekey, Remember personal info, MTIfCommentsModerated, or HTML tags for style. Here is some example code for a very simple contact form template (you will need to add appropriate div tags for style):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=<$MTPublishCharset$>">
<title><$MTBlogName encode_html="1"$>: Contact Form</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
</head>
<body>
<MTIfCommentsActive>
<MTEntryIfCommentsOpen>
<h2>Please use this form to send an email</h2>
<p><form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" /></p>
<p> <label for="comment-author">Your Name:</label>
<input id="comment-author" name="author" size="30" /></p>
<p> <label for="comment-email">Your Email Address:</label>
<input id="comment-email" name="email" size="30" /></p>
<p><label for="comment-text">Message: </label><br />
<textarea id="comment-text" name="text" rows="14" cols="60"></textarea></p>
<p><input type="submit" accesskey="v" name="send" id="comment-post" value="Send" /></p>
<p>All fields required.</p>
</form>
</MTEntryIfCommentsOpen>
</MTIfCommentsActive>
</body>
</html>
6. Save and rebuild the template. Create an entry, with the title "Contact" and nothing in the entry body or extended entry. Publish the entry. (Note that based on your archive mapping preferences, this will create a page with the URL - http://www.yoursite.com/contact.html). Click on "View Entry" to see the Contact Form page. Test the form by sending yourself a test message.
7. Edit the Comment Pending Template. Strip out all unnecessary code and put in the message, "Thank you for your message."
If your Contact Form is going to be a pop-up, you can add a little Javascript button to the page to close the popup window. In the header section of the template, put the following code:
<script language=javascript>
function closeWin()
{
window.close();
}
</script>
After the Thank You message on the template, place the following code to create a button that will close the popup:
<input type="button" onClick="javascript: window.close();" value="Close" />8. Install Jay Allen's Comment Challenge plugin. Follow Jay's install guide carefully, and place the <$MTCommentChallenge$> code right after the comment form text area in the Comment Form template. Save and rebuild the template. Test the form again by sending yourself a test message.
9. Edit the Comment Error Template. Strip out all unnecessary code.
10. If you are planning to let people preview their emails to you before they get sent, edit the Comment Preview Template, and make sure to include a Preview button on the Contact Form.
11. Test all forms extensively to make sure they are working properly.
12. Provide a link to your contact form from your website. If you want your contact form to be a pop-up, you can use this code to create a link (swap out http://www.yoursite.com/contact.html for the URL of your contact form):
<a href="http://www.yoursite.com/contact.html" onclick="window.open('http://www.yoursite.com/contact.html','popup','width=550,height=650,scrollbars=yes,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=50,top=0'); return false" rel="nofollow">Contact</a>
Comments (6)
Excellent instructions Elise!
I've used this approach some time ago for a customer
This strategy could be used as an individual weblog inside an MT Installation for contact purposes
The great advantage is that the form submissions will remain also stored inside the blog for archive / double checking purposes
Posted on May 5, 2007
Nice hack, Elise!
Another good alternative is using a form from response-o-matic (AKA Wondermill). I've been using their form for nearly a year and get virtually no spam. I posted instructions on TypePad Hacks for adding it to a TypePad blog. Should be about the same for MT.
http://www.typepadhacks.org/2006/09/a_new_spamfree_.html
Posted on May 5, 2007
Elise, thanks for the great tutorial. I have a couple of MT sites for social organizations, and this would be perfect for them.
Posted on May 5, 2007
Very timely article, as I was just looking for a secure mail form. It took me quite a while to get everything working, but it's a very elegant solution. Thanks.
Posted on May 5, 2007
Thanks Elise, I've often wondered how to use Movable Type's comment features on a contact form, especially Comment Challenge. I've managed to include the contact link on five blogs, glossed it up with a style using StyleCatcher, and it's working great.
Posted on May 6, 2007
Thanks very much!
Posted on May 6, 2007