確認画面付きメールフォームプラグインinquiry-form-creator : WordPress

Tweet

Pocket

WordPressで確認画面を表示する機能を持つメールフォームプラグインinquiry-form-creatorを使ってフォームを設置したページを識別する方法。

WordPressは有名なメールフォーム用のプラグインがいくつかある。その多くは確認画面を表示しないで直接送信を完了する^[1],[2]。
inquiry-form-creatorは確認画面を表示するメールフォームプラグイン。特に良いと思う点。

• 設定が簡便
• ショートコードを使ってフォームを使いまわすことができる。
• 自動返信メールの設定が柔軟かつ簡単に設定できる。
  »WordPress確認画面付きお問い合わせフォームプラグイン | Webコンサルティング

案件でどのページに設置したフォームから送信されたものかを知る必要が生じたのでその方法をメモする。

» WordPressお問い合わせプラグイン「inquiry-form-creator」のご紹介

追記 2011.05.20 jQuery Easing Plugin (version 1.3)と併用するとエラーが発生した。
追記 2011.05.21 wp_head()を先頭付近へ移動したら解消(?)

目標とする処理

1. 確認画面を表示する。
2. プラグインの設定画面で雛型を作成し各ページで使いまわす。
3. どのページに設置したフォームからのメールなのかを識別する。

1,2はプラグインの機能で実現する。プラグインの機能は配布サイトにくわしい説明がある。本記事では3の方法をまとめる。

設置したページを特定する

大きな流れは次の様な処理をする。
見出し^[3]をJavaScriptで取得しフォームに作成した専用のテキストフィールドに取得した値を設定する

$(function(){
    if ($("#inquiryform-●").length > 0) {
        $('#iqfm-input-text-●').val($('#hoge').text());
	// スタイルで変更不可であることを知らせる
        //$('#iqfm-input-text-●).attr('disabled','disabled')では確認画面に情報を渡すことができなかった。
        $('#iqfm-input-text-●').css({color: "#666666", background: "#DDDDDD"});
    }
});

• hogeはページを識別するための要素に付けたid属性（例<h2 id="hoge">テストページ1</h2>)。
• #inquiryform-●はフォームのid属性値。
• iqfm-input-text-●は識別用に作成したテキストフィールドのid属性値。

inquiry-form-creatorのデフォルトのスタイルシート

inquiry-form-creatorのスタイルはwp-content/plugins/inquiry-form-creator/css/inquiry-form.cssで定義されている。
inquiry-fom.cssはwp_head関数で読み込まれる。初期のスタイルを変更する場合はwp_head()の後で上書きすれば良い。
初期のスタイルは下記の通り定義されている。

.iqfm-table {
    margin-bottom:15px;
}

.iqfm-table th, .iqfm-table td {
    border: 1px solid #DCDCDC;
    padding: 8px 36px 8px 14px;
}

.iqfm-table th {
    white-space: nowrap;
    background-color: #E7E7E7;
    text-align: left;
    vertical-align: top;
}

確認画面の送信・戻るボタンのスタイル

確認画面の送信・戻るボタンのスタイルはJavaScriptで設定した[4]。

if ($(':button').length >0) {
    $(':button').css({display: "block", margin: "15px", float: "right", width: "100px"});
    $(':submit').css({display: "block", margin: "15px", float: "left", width: "100px"});
}

完全なJavaScriptコード

$(function(){
    if ($("#inquiryform-●").length > 0) {
        $('#iqfm-input-text-●').val($('#hoge').text());
	// スタイルで変更不可であることを知らせる
        //$('#iqfm-input-text-●).attr('disabled','disabled')では確認画面に情報を渡すことができなかった。
        $('#iqfm-input-text-●').css({color: "#666666", background: "#DDDDDD"});
        // 確認画面の送信・戻るボタンのスタイル
        if ($(':button').length >0) {
            $(':button').css({display: "block", margin: "15px", float: "right", width: "100px"});
            $(':submit').css({display: "block", margin: "15px", float: "left", width: "100px"});
        }
    }
});

[1] 確認画面の機能を持たないプラグインの多くはメールフォームで確認画面を表示する必要はないという考えのもと開発されている。
そのためバージョンアップ等で機能が追加される可能性は少ないと思う。
[2] WordPressのメールフォーム用プラグインについては下記の記事でもまとめている。
» メールフォーム : WordPress
[3] 特に見出しでなくても設置ページを識別できればよい。
[4]送信ボタンは1nquiryformSubmit-●というidが付くがCSSが反映されなかった(名前が数字で始まっているためか?)、戻るボタンは識別子がなかった。