TOP > Movable Type >

MovableTypeにお問い合わせフォームを設置

MovableTypeにお問い合わせフォームを設置できるメールフォームプラグインをご紹介。

インストール

ダウンロードしたMailForm_1_30.zipを解凍すると、MailFormというディレクトリが作成されます。

FTPでMovableTypeをインストールしたサイトにアクセスして、解凍したMailFormディレクトリをpluginsディレクトリにアップロードします。

MailForm内のmt-mail-form.cgiのパーミッションを変更します。(755とか700に)

テンプレートの作成

ヘッダーメニューのデザイン＞テンプレートから「ブログのテンプレート」へ。

『インデックステンプレートを作成』から新規にテンプレートを作成します。

メールフォームを表示したい箇所に以下のような記述を行います。

出力ファイル名(これがお問い合わせフォームのファイル名になります)、テンプレート名は適当なもので大丈夫です。

<form method="post" action="<$MTCGIPath$>plugins/MailForm/mt-mail-form.cgi">
	<dl>
		<dt><label for="mail-author">名前</label></dt>
		<dd><input type="text" size="30" name="mail_author" /></dd>
		<dt><label for="mail-email">メールアドレス</label></dt>
		<dd><input type="text" size="30" name="mail_email" /></dd>
		<dt><label for="mail-url">タイトル</label></dt>
		<dd><input type="text" size="30" name="mail_subject" /></dd>
		<dt><label for="mail-text">本文</label></dt>
		<dd><textarea rows="10" cols="50" name="mail_text"></textarea></dd>
		<dd>
			<input type="submit" name="mail_preview" value="確認" id="mail-preview" />
			<input type="submit" name="mail_post" value="送信" id="mail-post" />
			<input type="hidden" name="mail_blog_id" value="<$MTBlogID$>" />
		</dd>
	</dl>
</form>

次に右メニューのクイックフィルタより『テンプレートモジュール』を選択、『モジュールテンプレートを作成』から以下の３つのモジュールテンプレートを作成します。

モジュールテンプレートに関しては、先ほど作成したテンプレートの「メールフォームを表示したい箇所」を以下のような内容に変更を行ったものです。

mail_preview

確認画面用のテンプレート

<form method="post" action="<$MTCGIPath$>plugins/MailForm/mt-mail-form.cgi">
	<p>以下の内容でよろしければ『送信ボタン』を押してください。</p>
	<dl>
		<dt><label for="mail-author">名前</label></dt>
		<dd><MTMailPreviewAuthor><input type="hidden" name="mail_author" value="<MTMailPreviewAuthor>" /></dd>
		<dt><label for="mail-email">メールアドレス</label></dt>
		<dd><MTMailPreviewEMail><input type="hidden" name="mail_email" value="<MTMailPreviewEMail>" /></dd>
		<dt><label for="mail-url">タイトル</label></dt>
		<dd><MTMailPreviewSubject><input type="hidden" name="mail_subject" value="<MTMailPreviewSubject>" /></dd>
		<dt><label for="mail-text">本文</label></dt>
		<dd><MTMailPreviewBody><input type="hidden" name="mail_text" value="<MTMailPreviewBody>" /></dd>
		<dd>
			<input type="button" name="mail_preview" value="修正する" id="mail-preview" onclick="history.back();" />
			<input type="submit" name="mail_post" value="送信" id="mail-post" />
			<input type="hidden" name="mail_blog_id" value="<$MTBlogID$>" />
		</dd>
	</dl>
</form>

mail_error

項目にエラーがある際のテンプレート

<form method="post" action="<$MTCGIPath$>plugins/MailForm/mt-mail-form.cgi">
	<p>以下の項目を修正してください。</p>
	<p><MTErrorMessage></p>
	<dl>
		<dt><label for="mail-author">名前</label></dt>
		<dd><input type="text" size="30" name="mail_author"  value="<MTMailPreviewAuthor>" /></dd>
		<dt><label for="mail-email">メールアドレス</label></dt>
		<dd><input type="text" size="30" name="mail_email"  value="<MTMailPreviewEMail>"/></dd>
		<dt><label for="mail-url">タイトル</label></dt>
		<dd><input type="text" size="30" name="mail_subject"  value="<MTMailPreviewSubject>"/></dd>
		<dt><label for="mail-text">本文</label></dt>
		<dd><textarea rows="10" cols="50" name="mail_text"><MTMailPreviewBody></textarea></dd>
		<dd>
			<input type="submit" name="mail_preview" value="確認" id="mail-preview" />
			<input type="submit" name="mail_post" value="送信" id="mail-post" />
			<input type="hidden" name="mail_blog_id" value="<$MTBlogID$>" />
		</dd>
	</dl>
</form>

mail_post

送信が終了した際のテンプレート

<p>お問い合わせありがとうございました。</p>

設定

ヘッダーメニューの『設定』から『プラグイン』を選択、Mail Form 1.30.1で以下の項目の設定を行います。

送信先のメールアドレスの規定値
自動返信時の送信元のメールアドレスの規定値
メールの題名の前に付加する文字列

これでお問い合わせフォームの作成は完了です。

メールフォームプラグインは非常に拡張性に優れており、項目の追加なども簡単にできます。

スポンサードリンク

2007年10月 5日 00:29
カテゴリー Movable Type

«独立開業 | メイン | FirefoxでHTTP ヘッダを確認する『Live HTTP Headers』»