« Date Based Category Archives in Movable Type | Main | 10 Reasons MT 4 Will Rock Your Blog »

Creating a Contact Form using MT

There is a new LMT tutorial for Creating a contact form using MT4, written by Toni Hambilton. Please see it if you are using MT4. The following tutorial will not work for MT4 but is appropriate for MT3.

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 (11)

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

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

Elise, thanks for the great tutorial. I have a couple of MT sites for social organizations, and this would be perfect for them.

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.

Toni:

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.

Thanks very much!

hi Elise! not related to the post -

but I needed something that displayed the authors name in a new blog we have, and I knew I was going to find information here. As I always do! You do a terrific job, which helped our blog collective to grow in the past years. We've been working hard and this is the place where I run to when SixApart releases an upgrade or when our authors need a new feature or plugin. I don't know if ever told you how much we really learn from your work, so I though would be fair to share it with you :-)

really your fan. hope I can repay you sometime! if you ever need anything in portuguese (we have a digital NGO), or if you want to know the most beautiful places to visit in Brazil, just write :-D

best wishes!

Very nice. I did some mods to fit into my site, including adding TypeKey authentication for those that use it. But this requires a modification to the mt-site.js to deal with the CommentChallenge, since I use a challenge question.

Some questions:
* How can I make the email that comes from this form look better? It has the MT Comment email look, and I don't know how to customize the tmpl/email/new-comment.tmpl to be specific to a blog.
* How can I use the "URL" field as a "Subject"? When I just relabel it, MT still checks whether the field is a URL and redacts anything that isn't a URL when it sends me the message.

Toni:

This was a challenge creating a contact form using MT4 with the changes in the new templates, but after much perseverance I managed to do it. I've used recaptcha instead of comment challenge and had to tweak 4 of the templates. You can't delete unused templates in MT4 or the entry won't rebuild (found out the hard way) and if I get time I might document what I've done. It can be done, though.

Toni:

I've posted instructions for creating the content form in MT4 on Babble On. If you have any problems, email me.

Faramarz:

Hello,

I just went through this process and successfully installed the form. My question now is, where do i designate the email the result are being sent to.

is it the system email? or is it the user specific email? where do i designate the email i want results sent to

Thanks!

Post a comment

(If you haven't left a comment here before, your comment may need to be approved before will appear on the entry. Thanks for waiting.)