メールフォーム

メールフォームをCGIではなくプラグインで行なっています。

詳しくは、The blog of H.FujimotoのメールフォームプラグインV1.20（その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>

とします。