プラグインやCGIなどでメールフォームを設置した際、この機能もついていればいいのにといったことがある。Wordpressプラグインのコンタクトフォームとして有名な「contactform7」は確認画面がついていない。優しい人が汎用性の高いjsファイルなどを作っていて、これらは数ステップで簡単にできるし、確認のアクションを挟んでくれるのでとてもありがたい。だけど、こうしたい場合は？ここを変更したい！といったとき、コードを読み取るのが一苦労だ。フォームの形式が決まっているならば自分で作ってした方が思い通りの動作になると思う。
この記事は、HTMLとjQueryが少し分かる人向けの記事になり、フォームもまた、HTMLとjQueryを編集できる場合に限ります。私も同じように少しだけ分かる人なので、もっといい方法がある気もしますが、メモ的なことも含めて実際に確認画面を挟む流れを書いていこうと思います。
確認画面の表示方法
Contact Form 7などを利用していると、フォームのHTML部分はいじれるし設置サポートも充実していますが、プラグインが動作する一連の流れを変更する場合はプラグインを理解しなくちゃいけないのかと考えてしまう。
HTMLの追記や編集が出来るなら、同じページ内で入力フォームと確認画面の表示/非表示をCSSプロパティ「display」で変更してしまえばいんでないかという安易な発想をしました。記述としては「form」内に確認画面を隠しておき、「確認ボタン」を押すことで「入力部分のフォーム」のHTMLを非表示→確認HTMLの表示といった感じです。確認HTMLの中には「送信ボタン」、「書き直すボタン」もおきます。
2014/09/17追記
実際のフォームがないと分かりづらいかと思いましたので、でもページを設定させていただきました。
デモページ
HTMLの記述
formタグは編集できず、周りのHTMLだけ編集できる設定です。
ポイントとしては、formタグ内の中に確認HTMLを記述し、その中に送信ボタンをおくことです。
入力部分と確認部分をdiv(#ContactInput,#ContactConfirm)でくくり、各divの表示/非表示をjQueryで切り替えます。
入力したものを確認画面へ反映させるために、各入力の部分にIDを振り分けています。
ここでは各入力フォームの包容タグにクラスやIDをつけていますが、Contact Form 7のようにinputなどに直接クラス/ID指定できる場合は直接指定しても構いません。その場合、後述するjQueryの方も修正する必要がありますが、記述は短くなるはずです。
|
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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<form action="./" method="post"> <!--|||||||||||||||||||||||||||||||||||||||||||||||||||||||| フォームの入力部分 ||||||||||||||||||||||||||||||||||||||||||||||||||||||||--> <div id="ContactInput"> <table id="ContactTable" cellpadding="0" cellspacing="0" border="0" summary=""> <tr id="Cnt1" class="CntItem CntInput Require"> <th>お名前(<span class="Notice">※</span>)</th> <td><input type="text" name="your-name" value="" size="20" /></td> </tr> <tr id="Cnt2" class="CntItem CntInput Require CntMail"> <th>メールアドレス(<span class="Notice">※</span>)</th> <td><input type="email" name="your-email" value="" size="20" /></td> </tr> <tr id="Cnt3" class="CntItem CntRadio"> <th>性別</th> <td><input type="radio" name="sex" value="女性" />女性<br /> <input type="radio" name="sex" value="男性" />男性 </td> </tr> <tr id="Cnt4" class="CntItem CntCheck Require"> <th>お問い合わせ項目(<span class="Notice">※</span>)</th> <td> <input type="checkbox" name="cat01" value="このサイトについて" />このサイトについて<br /> <input type="checkbox" name="cat02" value="著者について" />著者について<br /> <input type="checkbox" name="cat02" value="その他" />その他 </td> </tr> <tr id="Cnt5" class="CntItem CntText Require"> <th>お問い合わせ内容(<span class="Notice">※</span>)</th> <td><textarea name="your-message"></textarea></td> </tr> <tr> <th> </th> <td><a id="BtConfirm">入力内容の確認</a> <input id="BtReset" type="reset" value="入力内容のリセット"></td> </tr> </table> </div> <!--|||||||||||||||||||||||||||||||||||||||||||||||||||||||| 確認画面 ||||||||||||||||||||||||||||||||||||||||||||||||||||||||--> <div id="ContactConfirm"> <table id="ConfirmTable" cellpadding="0" cellspacing="0" border="0" summary=""> <tr> <th>お名前(<span class="Notice">※</span>)</th> <td id="Cfm1" class="CfmItem"><div> </div></td> </tr> <tr> <th>メールアドレス(<span class="Notice">※</span>)</th> <td id="Cfm2" class="CfmItem"><div> </div></td> </tr> <tr> <th>性別</th> <td id="Cfm3" class="CfmItem"><div> </div></td> </tr> <tr> <th>お問い合わせ項目(<span class="Notice">※</span>)</th> <td id="Cfm4" class="CfmItem"><div> </div></td> </tr> <tr> <th>お問い合わせ内容(<span class="Notice">※</span>)</th> <td id="Cfm5" class="CfmItem"><div> </div></td> </tr> <tr> <th> </th> <td><span id="BtConfirm"><input type="submit" value="送信" /></span> <a id="BtCancel">書き直す</a></td> </tr> </table> </div> </form> |
ID/Classなどの説明
jQueryで判別させるため、各入力フォームの包容タグにIDとクラスをつけています。
- #Cnt1,#Cfm1,#Cnt2,#Cfm2…
- 入力内容を確認画面へ反映させるためです。「Cnt」や「Cfm」は任意ですが入力部分・確認部分それぞれで共通である必要があります。また、「1」は連番である必要はありませんが、入力部分・確認部分の同項目で一緒にする必要があります。
例：
123456<!--入力部分--><p id="A1">名前の入力部分</p><p id="A2">アドレスの入力部分</p><!--確認部分--><p id="B1">名前の確認部分</p><p id="B2">アドレスの確認部分</p> - .CntItem
- 入力の部分だと判別するためのものです。(名前は任意)
- .CntInput
- タイプがinputだと判別するためのものです。(名前は任意)
- .CntCheck
- タイプがchecboxだと判別するためのものです。(名前は任意)
- .CntRadio
- タイプがradioだと判別するためのものです。(名前は任意)
- .CntText
- textareaだと判別するためのものです。(名前は任意)
- .Require
- 必須だと認識させるものです。(名前は任意)
- .CntMial
- メールの形式確認のためのものです。（名前は任意)
- .CfmVol
- 確認の部分だと判別するためのものです。（名前は任意)
CSSの記述
CSSの記述によって好きなように装飾できますが、#ContactConfirmを消しておきます。
|
1 2 |
#ContactConfirm{ display:none;} |
jQueryの記述
主に、確認ボタン・書き直すボタンを押したときに表示・非表示を切り替えます。
また、入力したものを確認画面へ反映させるために、関数を作っています。この際、inputのタイプやtextarea毎に取得方法が変わるため、HTMLで付けたクラスによって取得方法を分岐させています。また、必須の場合やEmailの場合には、入力のチェック・形式のチェックを入れています。
|
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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
var Cnt = jQuery('#ContactInput'), //入力部分 Cfm = jQuery('#ContactConfirm'), //確認部分 BtCfm = jQuery('#BtConfirm'), //確認ボタン BtSnd = jQuery('#BtSend input'),//送信ボタン BtCsl = jQuery('#BtCancel'),//キャンセルボタン CntItem = jQuery('#ContactInput .CntItem'),//入力の包容タグ CfmItem = jQuery('#ContactConfirm .CfmItem div');//確認の包容タグ /* 確認ボタン ------------------------------------------------------------------*/ BtCfm.click(function(){//確認ボタンを押したとき、 CfmItem.text(' '); //確認の中身をリセット $Error = ''; //エラーのリセット CntItem.ConfirmInput(); //.CntItemを対象として確認の関数を実行 if($Error != 'error') { //エラーがない場合 Cnt.fadeOut(function(){Cfm.fadeIn();}); //入力部分と確認部分を切り替え } }); /* キャンセルボタン ------------------------------------------------------------------*/ BtCsl.click(function(){ //キャンセルボタンを押したとき、 Cfm.fadeOut(function(){Cnt.fadeIn();}); //入力部分と確認部分を切り替え }); /* 確認画面へ反映させる関数 ------------------------------------------------------------------*/ jQuery.fn.ConfirmInput = function(config){ return this.each(function(i, elem) { //.CntItemを一つずつ実行 /* 入力されたものを変数「CntVal」に代入 ------------------------------------------------------------*/ //<input type="text">の場合 if($(this).hasClass('CntInput')){ TargetForm = $(this).find('input'); CntVal = TargetForm.val(); //<input type="radio">の場合 }else if($(this).hasClass('CntRadio')){ TargetForm = $(this).find('input:checked'); CntVal = TargetForm.val(); //<input type="checkbox">の場合 }else if($(this).hasClass('CntCheck')){ TargetForm = $(this).find('input:checked'); CntCheck = ''; for (var i=0; i<TargetForm.length; i++) { if(i != 0){ CntCheck += '、'; } CntCheck += '「'+TargetForm.eq(i).val()+'」'; } CntVal = CntCheck; //<textarea>の場合 }else if($(this).hasClass('CntText')){ TargetForm = $(this).find('textarea'); CntVal = TargetForm.val(); } /* 入力部分のIDから関連する確認部分のIDへ「CntVal」を挿入 ------------------------------------------------------------*/ CntNum = $(this).attr('id').replace(/Cnt/g,''); //IDを取得後「Cnt」をカット $('#Cfm'+CntNum+' div').text(CntVal); /* メールアドレスの欄の場合(.CntMailの場合)、形式をチェック ------------------------------------------------------------*/ if($(this).hasClass('CntMail') && !CntVal.match(/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/)){ alert('メールアドレスの形式が正しくありません。'); $Error = 'error'; //$Errorに中身を入れる return false; } /* 必須(.Require)に中身が入っていない場合 ------------------------------------------------------------*/ else if($(this).hasClass('Require') && CntVal==''){ alert('必須項目が入力されていません。'); $Error = 'error'; return false; } }); }; |
tetch1987 
ロト君
大変すばらしいサイトありがとうございます。
勉強になりました。
一点修正箇所がありますのでよかったら修正お願いします。
デモページおよび、jqueryの記述に修正項目があります。
現在入力内容の確認画面をクリックすると、お問い合わせ内容欄にお問い合わせ項目の内容が表示されます。
訂正して頂きたい部分は。
//の場合
}else if($(this).hasClass(‘CctText’)){
から
//の場合
}else if($(this).hasClass(‘CntText’)){
CctText→CntTextのようです。
以上ですがご検討お願い致します。