WPのContact form 7がつかえない場合は、Mail form proを使いようにしている。いろいろ高機能だし。
ただ、同梱のマニュアルはちょいと舌足らずなところがあり、そのまま設定したら動かないので、テンプレートのようにしてまとめておく。ファイルへのリンク、細かい入力欄は任意で。
<link rel="stylesheet" href="js/mailformpro/mfp.statics/mailformpro.css" type="text/css">
・
・
・
<form id="mailformpro" action="js/mailformpro/mailformpro/mailformpro.cgi" method="POST">
お名前 : <input type="text" name="お名前" required="required"/>
フリガナ : <input type="text" name="フリガナ"/>
性別 : <input type="radio" name="性別" value="男性" required="required">男性<input type="radio" name="性別" value="女性" required="required">女性
メールアドレス：<input type="email" data-type="email" name="email" data-charcheck="digit_and_alphabet" required="required" />
メールアドレス(確認用)：<input type="email" data-type="email" name="confirm_email" data-charcheck="digit_and_alphabet" required="required" />
<button type="submit">送信する</button>
</form>
<script type="text/javascript" id="mfpjs" src="js/mailformpro/mailformpro/mailformpro.cgi" charset="UTF-8"></script> 必須項目は上記サンプルにも付いているが以下の物を付ける。
required="required"
チェックボックスの必須で、「一つは必ずチェックさせる」というものになると以下の内容をつける
data-min="1" required="required"名前の入力で「姓」「名」を別々にテキストボックスを作ると、確認画面・送信メールにも別々で出てくるのだが、姓名の入力欄の前に下記を入れると確認画面・送信メールでは2つ合体した形で表示されるようになる。もちろん電話や郵便番号などのテキストボックスでも活用できる。
<input type="hidden" name="お名前" data-unjoin="姓+ +名" value="">エラーの文章を任意の場所に出す場合は以下のソースを書くとその場所に出る。
<div id="errormsg_お名前" class="mfp_err"></div>
文字書式チェック機能もあり。
#push @AddOns,'charactercheck.js'; ## 文字校正 のコメントアウトを外した上で、
data-charcheck="digit" 数字のみ
data-charcheck="alphabet" 英語のみ
data-charcheck="digit_and_alphabet" 英語と数字のみ(記号含まず)
data-charcheck="kana" 全角カタカナのみ導入時は一応「mailformpro/check.cgi」にアクセスして、設定に間違いがないか確認することをお勧めする。
また、導入当初、画面に出ているモジュール確認画面と確認画面などの遷移確認の画像を消すには、config.cgiの以下の部分をコメントアウトする
#push @AddOns,'OperationCheck.js'; ## 動作チェック
#push @Modules,'check'; ## CGI動作環境チェック
#push @AddOns,'phase.js'; ## 段階的入力機能
送信メールアドレスは複数個設置可能。一番最初にセットされたメールアドレスがフォームの差出人として設定される、との事。
push @mailto,'aaa@test.com';
push @mailto,'bbb@test.com';
push @mailto,'ccc@test.com';WPなどで記事ごとについているお問い合わせフォームとして使う際、記事タイトルのvalueに記事タイトルを入れようとすると反応しない。どうも手入力されたものではないとデフォルト値として扱われ、データ入力されてないとみなされる模様。その時は下記のように書けばOK。
<input type="text" name="記事タイトル" data-value="CMSの記事タイトルタイトル" readonly>