メールフォームをCGIではなくプラグインで行なっています。
詳しくは、The blog of H.FujimotoのメールフォームプラグインV1.30（その1・概要）をご覧ください。
エントリーは1から12までありますが、基本は1から10まで、ajax化する場合は11も、さらにサイドバーへ表示する方法は12で書かれています。
メールフォームプラグインと、補助的に使用するGetQueryParamプラグインは、以下からダウンロードすることができます。ajax化する場合はprototype.jsもダウンロードします。また、ajaxのロード中に表示する画像はajaxload.infoというサイトで作成したものを使用しています
なお、XHTML 1.0 Transitionalの場合はそのままでかまいませんが、Strictの場合は、テンプレートとスクリプトに若干の変更を加えます。
form要素にはname属性が使えませんからid属性に置き換えます。具体には、
<form method="post" action="<$MTCGIPath$>plugins/MailForm/mt-mail-form.cgi" name="mail_form">
を、
<form method="post" action="<$MTCGIPath$>plugins/MailForm/mt-mail-form.cgi" id="mail_form">
と書き換えます。
次に、「document.mail_form」では、form要素のname属性の値を得ることになり、id属性の値が得られないためスクリプトエラーになります。そのため、「document.name属性の値」ではなく、「document.forms['id属性の値']」としてやる必要があります。オリジナルのコードは、
<script type="text/javascript"> <!-- function mail_ajax(mode) { $("send_status").style.display = 'block'; document.mail_form.mail_preview.disabled = true; document.mail_form.mail_post.disabled = true; var params = Form.serialize("mail_form"); if (mode == "post") { params += "&mail_post=1"; } else if (mode == "preview") { params += "&mail_preview=1"; }new Ajax.Request("<$MTCGIPath$>plugins/MailForm/mt-mail-form.cgi",
{ method : "post",
parameters : params,
onComplete : displayMailResult,
onFailure : failureMailResult });
return false;
}function displayMailResult(obj)
{
document.mail_form.mail_preview.disabled = false;
document.mail_form.mail_post.disabled = false;
$("send_status").style.display = 'none';
$("ajax_mail").innerHTML = obj.responseText;
}function failureMailResult(obj)
{
alert('メールの処理が失敗しました。');
document.mail_form.mail_preview.disabled = false;
document.mail_form.mail_post.disabled = false;
$("send_status").style.display = 'none';
}
//-->
</script>
ですが、次のコードに書き換えます。
<script type="text/javascript"> <!-- function mail_ajax(mode) { $("send_status").style.display = 'block'; document.forms['mail_form'].mail_preview.disabled = true; document.forms['mail_form'].mail_post.disabled = true; var params = Form.serialize("mail_form"); if (mode == "post") { params += "&mail_post=1"; } else if (mode == "preview") { params += "&mail_preview=1"; }new Ajax.Request("<$MTCGIPath$>plugins/MailForm/mt-mail-form.cgi",
{ method : "post",
parameters : params,
onComplete : displayMailResult,
onFailure : failureMailResult });
return false;
}function displayMailResult(obj)
{
document.forms['mail_form'].mail_preview.disabled = false;
document.forms['mail_form'].mail_post.disabled = false;
$("send_status").style.display = 'none';
$("ajax_mail").innerHTML = obj.responseText;
}function failureMailResult(obj)
{
alert('メールの処理が失敗しました。');
document.forms['mail_form'].mail_preview.disabled = false;
document.forms['mail_form'].mail_post.disabled = false;
$("send_status").style.display = 'none';
}
//-->
</script>
とします。
コメントする