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.
Update: You don’t need to edit reCaptcha.pl if you’re using the version that shipped with Movable Type 4.01. Follow the instructions in the readme in the plugin folder and it will install properly.
- Copy the reCaptcha folder from extras/examples/plugins to your plugins directory.
- Edit the reCaptcha.pl file: change
system_config_templatetoconfig_templateat line 20. - 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' }],
You need to create a new blog. I called mine Contact.
Tutorial cross posted on Learning Movable Type.
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?
A little more information? Perhaps you could send a link to your site so I can see what's going on there.