« Working with Movable Type 4.0 Templates: Sidebar | Main | Putting MT:MultiBlog to Work »

Create a Contact Form using MT4

I have used the contact form on previous versions of Movable Type following the instructions from Learning Movable Type and it’s always worked well. Trying to implement it in MT4 has proved more difficult because of the way the templates are set up using modules. Several templates need to be modified to get this to work.

Before you begin, install the ReCaptcha plugin provided by Movable Type.

  1. Copy the reCaptcha folder from extras/examples/plugins to your plugins directory.
  2. Edit the reCaptcha.pl file: change system_config_template to config_template at line 20.
  3. Also in reCaptcha.pl at line 29, add your keys like so:
['recaptcha_publickey', { Default => 'YOUR-PUBLIC-KEY-HERE' }],
['recaptcha_privatekey', { Default => 'YOUR-PRIVATE-KEY-HERE' }],

Update: Editing recaptcha.pl is not necessary since the release of Movable Type 4.01. Install as per the readme in the plugin folder and it should work properly. (A good reason to update!)

You need to create a new blog. I called mine Contact.

Now go to the Movable Type dashboard in your browser, Preferences > Blog Settings > Comments. Choose “Immediately approve comments from Anyone”. Select E-mail Notification as “On”. Near the bottom is a chooser called “CAPTCHA provider.” Select reCAPTCHA and click Save Changes.

Go the Registration. De-select Require Registration. Choose Anonymous Comments and Require E-mail Address for Anonymous Comments. De-select the rest of the options.

Rebuild your site to create the index pages.

Now go to Design > Templates > Archive Templates. Click on the Entry template.

<MTSetVar name="body_class" value="mt-archive-listing mt-entry-archive">
<MTSetVar name="sidebar" value="0">
<MTSetVar name="module_about_context" value="0">
<MTSetVar name="body_onload" value="individualArchivesOnLoad(commenter_name)">
<MTSetVarBlock name="page_title"><$MTEntryTitle remove_html="1"$></MTSetVarBlock>

<$MTInclude module="Header"$>

<$MTInclude module="Comments"$>

<$MTInclude module="Footer"$>

Change <$MTInclude module ="Comments"$> to <$MTInclude module ="Comment Form"$>. Under “Archive Mapping” at the bottom of the page change the “Path” to “Custom”. Fill in %f in the field. Save changes.

From the sidebar, under Includes and Widgets, click on Comment Form. Change the label for Comments to “Message”, and the heading “<__trans phrase="Leave a comment">” to “Please use this form to send an email” or something similar.

In System Templates, choose the Comment Response template. Change responses to match your contact form. Here is an example template. I have included a link back to the contact page in case of submission errors, and a button to close the window.


<MTSetVar name="page_layout" value="layout-one-column">
<MTSetVar name="system_template" value="1">
<MTSetVar name="feedback_template" value="1">

<MTIf name="body_class" eq="mt-comment-pending">
<MTSetVarBlock name="page_title">Thank You</MTSetVarBlock>

<MTSetVar name="heading" value="Thank you for e-mail.">

<MTSetVarBlock name="message">
<p>Thank you for contacting me. </p>
</MTSetVarBlock>

</MTIf>

<MTIf name="body_class" eq="mt-comment-error">
<MTSetVarBlock name="page_title">Contact Submission Error</MTSetVarBlock>

<MTSetVar name="heading" value="$page_title">

<MTSetVarBlock name="message">
<p>Your contact submission failed for the following reasons:</p>
<blockquote>
<$MTErrorMessage$>
</blockquote>
</MTSetVarBlock>

</MTIf>

<MTIf name="body_class" eq="mt-comment-confirmation">
<MTSetVarBlock name="page_title">Email Posted</MTSetVarBlock>

<MTSetVar name="heading" value="Confirmation...">

<MTSetVarBlock name="message">
<p>Your email has been sent.</p>
</MTSetVarBlock>

</MTIf>

<!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" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<meta name="generator" content="<$MTProductName version="1"$>" />
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<title>
<$MTBlogName encode_html="1"$>: <$MTGetVar name="page_title"$>
</title>
<script type="text/javascript" src="<$MTBlogURL$>mt-site.js"></script>
</head>
<body class="layout-one-column comment-preview" onload="individualArchivesOnLoad(commenter_name)">
<div id="container">
<div id="container-inner" class="pkg">
<div id="banner">
<div id="banner-inner" class="pkg">
<h1 id="banner-header"><a href="http://mt4.juneeonline.com/contact/contact_me.html">Contact</a></h1>
<h2 id="banner-description"><$MTBlogDescription$></h2>
</div>
</div>
<div id="pagebody">
<div id="pagebody-inner" class="pkg">
<div id="alpha">
<div id="alpha-inner" class="pkg">

<h1><$MTGetVar name="heading"$></h1>

<$MTGetVar name="message"$>
<p>Return to the <a href="http://mt4.juneeonline.com/contact/contact_me.html">contact form</a>.</p>
<input type="button" onClick="javascript: window.close();" value="Close" />

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

Save the changes.

Open the Comment Preview template and change the heading “<__trans phrase="Previewing your Comment">” to “Previewing your submission”.

Save the changes and rebuild your site.

Create an new entry, with the title “Contact” and nothing in the entry body or extended entry. Publish the entry. View your site and open the entry by clicking on permalink. Note the URL of the contact form.

You can follow Elise’s instructions on Learning Movable Type for creating a popup window for the contact form if that’s what you want.

Click on “Preview” to see the Contact Form page. Test the form by sending yourself a test message.

The last step is to create a link on the websites for visitors to contact you.

<a href="http://www.yoursite.com/contact/contact.html" 
target="_blank" rel="nofollow">Contact</a>

Why not send me an email using the Contact Form I created if you’re having problems?

Comments (9)

thank you for your help

http://www.kurutma.net

Hello -

Thank you for you tutorial. It is really informative and clear. I am having trouble however, and I can't figure what the problem is...

The form does not show - at all on the "contact" page (created as instructed.

Could the reason possibly be due to the fact that "No Capycha provider is available.."


"No CAPTCHA provider is available in this system. Please check to see if Image::Magick is installed, and CaptchaImageSourceBase directive points to captcha-source directory under mt-static/images."

I find this in my comment setting.

Any help would be appreciated. Thanks

Hi Kyle,

Image Magick needs to be installed for the Captcha to work. You could try setting the format for your captcha to Movable Type's default, which is a number-based captcha. You'll find the settings under Preferences, Blog Settings, Comment. Down the bottom of the page is Captcha provider, where you can change the preferences. I'm not 100% sure whether Image Magick is needed for the default captcha but you could give it a go. Good luck.

This link http://www.movabletype.org/2007/08/reports_from_the_upgradeathon.html provides a few helpful tips for getting captchas to work, perhaps one of them will help.

vbdietz:

Kyle and Toni,

I found this solution at blackbeagle.com which has partially solved my problem.

Basically, if mt-check.cgi shows that Image::Magick is installed then you need to add a line to your mt-config.cgi file.

On the system information page verify it shows your server has Image::Magick installed. If it is installed then you need to modify your mt-config.cgi file. The value of this configuration directive should be set to the absolute path on the filesystem to the images/catcha-source directory in mt-static.

Example

CaptchaSourceImageBase /path/to/mt/mt-static/images/captcha-source

It worked for me. At least the "No CAPTCHA provider is available" message went away.

Now a CAPTCHA provider selection box is available. Unfortunately the only choices are none and Movable Type default. Recaptcha does not appear.

I checked under system overview and Recaptcha is listed as an installed plugin on the Plugins list.

Toni, any thoughts?

Getting ReCaptcha to work plagued me for months.

I assume that you have the keys for ReCaptcha and you've entered them either on the perl script itself or into the plugins section. You might look at the source code on your contact form page to see what is printed there for the recaptcha image. Sometimes it doesn't show up at all. What version of MT are you using? There's so many variables for this and so many different server configurations that one solution doesn't fit all. Send me a link to the contact page and I'll have a look if you like.

You might also look at your server errors. This sometimes shows what the problem is.

Toni and Vbdietz:

I agree with the "plague" comment. There are so many variables. If I were a serious programmer... who knows.

Thank you though Toni. The good news is I WAS able to get ReCaptcha to show up in the Comment Preferences. I am following you instructions, and I have a nice contact form shaping up. My challenge now is to get the css and structure of my site to fit around the form. But it is up and running! So thank you.

One strange thing though-

It took my 2 weeks to install (i think) and configure ImageMagick on my server. After the install I'd run mt-check.cgi to find that ImageMagick was not detected. I'm not sure if this is going to cause me problems later.

I use 1and1. Their FAQ's are outdated, and they have sent me numerous e-mails to say that they are working on it. This is part of the issue as well.

Anyway, just wanted to say Thanks again. Keep sharing!

kyle:

I was half sleep when I wrote that. The ReCaptcha image is actually not showing. Back to the drawing board...

I'm trying to use this contact form as a "Report Abuse" form for several different blogs.

Is it possible to pass the comment link, entry title and blogname to this "Report Abuse" blog so we know which comment they're reporting?

I'm thinking of setting it up with multiblog to accept this variable from other blogs, but multiblog only works on an index template -- could I make this "entry" and its comment form the entire content of the main index?

Here's what I'm looking to pass (brackets changed to get past filter):

[mt:SetVarBlock name="perma"]
[mt:CommentEntry]
[a href="[$MTEntryPermalink$]#comment-[$MTCommentID$]"] by [$MTCommentAuthor$] on [a href="[$MTEntryPermalink$]"][$MTEntryTitle$][/a] in [mt:BlogName]
[/mt:CommentEntry]
[/mt:SetVarBlock]

Think it's doable?

Thanks in advance for any suggestions.

It's a great idea Sheila and I'll try and get an answer for you from our MT community. I've posted your question on my Babble On site, which is getting picked up by the Movable Type Community News Aggregator so with a bit of luck someone with more knowledge than me can provide an answer.

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.)