［WP/CGI覚書］WordPressにMailformproを設置

2013年5月24日

WordPressのフォームプラグインもいくつか試してみたのですが、どうもしっくりこないので、結局Mailformproにしちゃいました。WPでも問題なく動きます。
尚ここで使用しているバージョンは2ですが、3以降も同様の方法で設置できるとは思います。参考程度でお願いします。

CGIを動くようにしておく（爆）


WPが動いてると、CGIも動く気分になってしまうんですよねorz

Mailformproを入れるディレクトリの名称は、フォームページのスラッグ名とは別にする。

最初は、問合せページのスラッグが「contact」なので「contact」というディレクトリを作って、その中にmailformproのファイルをぶっこめばいいかなぁと思ってたのですが、Wordpressはスラッグと同じ名前のディレクトリを使うことができません！バーミッションエラーが出ます。
なので、フォームページのスラッグ名とは違う名前のディレクトリを作って、そこにMailformproのファイルを全て入れます。

自分は直下にディレクトリを作りました。
これだと本環境に上げた時やページ名などの変更があったときも変えなくてよさそうなので。

書き換えが必要なMailformproファイル

外部のディレクトリを読みに行く感じなので、いつもの書き換え作業にプラスして、imgファイルやcssファイルのパスの書き換えなどが必要でした。

  • config.cgi（当然なので説明は省きます～）
  • commons/mailform.js

commons/mailform.jsのimgファイルパスなどの書き換え

これを書き換えないと、確認画面で画像が出てこなくなっちゃうんで。
7～9行目あたりです。

?
1
2
3
var imagetag_confirm = '<img src="/mailform/images/mfp_confirm.gif" width="300" height="40" alt="よくご確認ください" />';
var imagepath_send = '/mailform/images/mfp_send.gif';
var imagepath_cancel = '/mailform/images/mfp_cancel.gif';

1217行目あたりのローディングバーのimgファイルパスも忘れずに。

?
1
var loading_image = '<img src="/mailform/images/mfp_loading.gif" id="loading_proccess_image" width="40" height="40" />';

ちなみに一度記述ミスで画像リンク切れを起こした場合は、キャッシュ削除をしつこくしないと、画像が表示されない場合があるので注意（ーー；

mailformproのheadタグを条件付きでヘッダーに挿入。

自分はヘッダーに書き込んだので、条件分岐タグで挟んで、フォームのあるページだけ表示させました。
例えば問合せフォームのページをcontactというスラッグにしてる場合は以下でOK！

?
1
2
3
4
5
6
7
8
<?php if(is_page(contact)): ?>
<!--[メールフォームプロ・参照ファイルここから]-->
<link rel="stylesheet" href="/mailform/commons/mailform.css" type="text/css" />
<script type="text/javascript" src="/mailform/commons/jquery.js" charset="UTF-8"></script>
<script type="text/javascript" src="/mailform/commons/mailform.js" charset="UTF-8"></script>
<script type="text/javascript" src="/mailform/postcodes/get.cgi?js" charset="UTF-8"></script>
<!--[メールフォームプロ・参照ファイルここまで]-->
<?php endif; ?>

送信完了ページ（Thanksページ）の作成

色々な作り方があると思いますが、自分はコンタクトページの子ページとして作成しました。
config.cgiのURL記述で、URLの直リンクじゃないと404エラーになりました。

?
1
2
##サンクスページのURL
$config{"thanks_url"} = 'http://hogehoge.com/wp/contact/thanks/';

本体ソースの導入

今回は投稿部分にそのまま貼ってしまったが、本当は個別のテンプレートを作った方がいいのかもしれない。
こちらも他ファイルやimgファイルの読み出しパス記述に注意する。
特に最下部のロールオーバー設定のところの書換を忘れない。
置換で抜けてたとか結構あります（＞＜）
以下は例です。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!--[ここからメールフォームプロ・本体]-->
<p>お問合せ内容を明記して、こちらからお問い合わせ下さい。</p>
<!--[ここからメールフォームプロ・本体]-->
<form id="mailform" method="post" action="/mailform/mailformpro/send.cgi" onsubmit="return falsesubmit(this)">
<script type="text/javascript" src="/mailform/mailformpro/include.cgi" charset="UTF-8"></script>
<noscript>
<p><input type="hidden" name="javascript_flag" value="0" /></p>
</noscript>
<div id="mailfrom_hidden_object">
<input type="submit" value="submit" />
<input type="hidden" name="must_id" value="(必須)" />
<input type="hidden" name="input_time" value="0" />
<input type="hidden" name="sitein_referrer" value="" />
<input type="hidden" name="mailform_confirm_mode" value="1" />
</div>
<table width="462" border="0" cellpadding="0" cellspacing="0" class="mailform" summary="mailform main">
<tr class="mfptr">
<th><img src="/mailform/images/mfp_must.gif" width="30" height="16" alt="必須" class="must" />メールアドレス<span>mail address</span></th>
<td><input type="text" name="email(必須)" size="40" class="mfp" />
<div id="errormsg_email" class="mfp_err"></div></td>
</tr>
<tr class="mfptr">
<th><img src="/mailform/images/mfp_must.gif" width="30" height="16" alt="必須" class="must" />確認のためもう一度<span>confirm mail address</span></th>
<td><input type="text" name="confirm_email(必須)" size="40" class="mfp" />
<div id="errormsg_confirm_email" class="mfp_err"></div></td>
</tr>
<tr class="mfptr">
<th><img src="/mailform/images/mfp_must.gif" width="30" height="16" alt="必須" class="must" />お名前<span>your name</span></th>
<td><input type="text" name="お名前(必須)" size="20" class="mfp" onkeyup="inputTyping(this.form.id,'フリガナ',event.keyCode,this)" />
<div id="errormsg_お名前" class="mfp_err"></div></td>
</tr>
<tr class="mfptr">
<th>フリガナ<span>assumed name</span></th>
<td><input type="text" name="フリガナ" size="20" class="mfp" /></td>
</tr>
<tr class="mfptr">
<th><img src="/mailform/images/mfp_must.gif" width="30" height="16" alt="必須" class="must" />ご用件<span>inquiry body</span></th>
<td><textarea name="ご用件(必須)" id="mfp_el10" rows="10" cols="45" class="mfp"></textarea>
<div id="errormsg_ご用件" class="mfp_err"></div></td>
</tr>
<tr class="mfptr">
<th><img src="/mailform/images/mfp_must.gif" width="30" height="16" alt="必須" class="must" />送信確認<span>sending confirm</span></th>
<td><label for="send_confirm" id="send_confirm_label" class="mfp">
<input type="checkbox" id="send_confirm" name="送信確認(必須)" value="送信チェック済み" class="mfp" />上記送信内容を確認したらチェックを入れてください</label>
<div id="errormsg_送信確認" class="mfp_err"></div></td>
</tr>
</table>
<div id="mfp_buttons">
<ul>
<li><input name="button" type="button" id="button_mfp_reset" onclick="mfp_reset(this.form)" onmouseover="this.style.background='url(/mailform/images/mfp_reset_over.gif)'" onmouseout="this.style.background='url(/mailform/images/mfp_reset.gif)'" onkeypress="mfp_reset(this.form)" value="" />
</li>
<li><input name="button" type="button" id="button_mfp_goconfirm" onclick="sendMail(this.form)" onmouseover="this.style.background='url(/mailform/images/mfp_goconfirm_over.gif)'" onmouseout="this.style.background='url(/mailform/images/mfp_goconfirm.gif)'" onkeypress="sendMail(this.form)" value="" /></li>
</ul>
</div>
</form>
<!--[ここまでメールフォームプロ・本体]-->

wp-vicnaを利用している場合の追加設定　201231029追記

vicunaのcore.cssの「th」「form」「table」の設定をざっくり削除

これはカスタマイズの初期段階でやっておくべきことですが、この設定が入ってると、マウスオーバーした項目の色が変更される設定が出てこなかったり、全体的に表の形が崩れてたりします。

/*～*/で挟み込んで設定を読み込ませないようにするか、

form#mailformpro
table.mailformpro
table.mailformpro th

で、設定を上書きするかです。以下、削除分です。

?
1
2
3
4
5
6
7
8
9
/* form
---------------*/
/*
form {
    margin: 1em 0;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background-color: #f5f5f5;
}*/
?
1
2
3
4
5
6
7
8
/*
table {
    padding: 3px;
    border-style: solid;
    border-width: 1px;
    border-color: #ccc #fff #fff #ccc;
    background-color: #e5e5e5;
}*/
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*th,
td {
    padding: 3px;
    border-collapse: separate;
    border-spacing: 1px;
}
 
th {
    border-color: #fff #ddd #ccc #f5f5f5;
    background-color: #eee;
}
 
td {
    border-color: #e5e5e5 #d5d5d5 #d5d5d5 #e5e5e5;
    background-color: #fff;
}*/

確認・リセットボタンのスタイルの修正

そのままのスタイルだと左端揃えになってしまうので、真ん中揃えにするのに以下のスタイルが必要です。
以下をカスタムファイルに追記しました。

?
1
2
3
4
5
6
7
8
9
10
div#mfp_buttons {
   position:relative;
   overflow:hidden;
}
 
div#mfp_buttons ul {
   position:relative;
   left:25%;
   float:left; 
}

WordPress側の設定分　20121115追記

送信完了ページ（Thanksページ）のメニュー関連プラグイン等の除外設定

送信完了ページをフォームページの子ページとした場合で、固定ページを何らかの機能を使ってメインナビ等にしている場合は、このページを表示除外設定する必要があります。
自分の場合は以下の3つで除外設定をしました。

  • ウィジェットの固定ページ
  • PS Auto Sitemap
  • Google XML Sitemaps

どれも記事IDでの除外設定なので番号をコピペして一気にやってしまうといいですね。手入力する場合は番号を間違えないように～

画像リンク切れメモ　20121115追記

作業途中にミスって起こった現象を書き留めておきます（＾＾；

ヘッダー部分の呼び出し

?
1
<script type="text/javascript" src="/mailform/commons/mailform.js" charset="UTF-8"></script>

と
フォーム部分の呼び出し

?
1
<script type="text/javascript" src="/mailform/mailformpro/include.cgi" charset="UTF-8"></script>

の指定ディレクトリ先が同じでないと、確認画面のタイトルボタン画像のリンク切れが起こるようです。

WordPressMailformpro

Posted by ponnao