jQuery + HTMLでフォームの簡易確認を挟む

WordpressプラグインのContact Form 7などで設置したメールフォームに、jQueryで簡易的な確認画面を挟む方法。inputなどのタグはいじれなくても、HTMLやjQueryを自由に設定できる場合を想定しています。動作は同ページ内に確認画面を隠しておき、ボタンを押すことで入力部分/確認画面の表示/非表示を入れ替えます。

jQuery + HTMLでフォームの簡易確認を挟む

作成日
2014/02/24
更新日
2016年8月16日

プラグインや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の方も修正する必要がありますが、記述は短くなるはずです。

ID/Classなどの説明

jQueryで判別させるため、各入力フォームの包容タグにIDとクラスをつけています。

#Cnt1,#Cfm1,#Cnt2,#Cfm2…
入力内容を確認画面へ反映させるためです。「Cnt」や「Cfm」は任意ですが入力部分・確認部分それぞれで共通である必要があります。また、「1」は連番である必要はありませんが、入力部分・確認部分の同項目で一緒にする必要があります。
例:
.CntItem
入力の部分だと判別するためのものです。(名前は任意)
.CntInput
タイプがinputだと判別するためのものです。(名前は任意)
.CntCheck
タイプがchecboxだと判別するためのものです。(名前は任意)
.CntRadio
タイプがradioだと判別するためのものです。(名前は任意)
.CntText
textareaだと判別するためのものです。(名前は任意)
.Require
必須だと認識させるものです。(名前は任意)
.CntMial
メールの形式確認のためのものです。(名前は任意)
.CfmVol
確認の部分だと判別するためのものです。(名前は任意)

CSSの記述

CSSの記述によって好きなように装飾できますが、#ContactConfirmを消しておきます。

jQueryの記述

主に、確認ボタン・書き直すボタンを押したときに表示・非表示を切り替えます。
また、入力したものを確認画面へ反映させるために、関数を作っています。この際、inputのタイプやtextarea毎に取得方法が変わるため、HTMLで付けたクラスによって取得方法を分岐させています。また、必須の場合やEmailの場合には、入力のチェック・形式のチェックを入れています。

  • harop より:

    大変すばらしいサイトありがとうございます。
    勉強になりました。
    一点修正箇所がありますのでよかったら修正お願いします。
    デモページおよび、jqueryの記述に修正項目があります。
    現在入力内容の確認画面をクリックすると、お問い合わせ内容欄にお問い合わせ項目の内容が表示されます。

    訂正して頂きたい部分は。
    //の場合
      }else if($(this).hasClass(‘CctText’)){
    から
    //の場合
    }else if($(this).hasClass(‘CntText’)){

    CctText→CntTextのようです。

    以上ですがご検討お願い致します。

  • tetch1987 より:

    コメントありがとうございます。
    とても励みになりますし、とっても嬉しいです!

    ご指摘ありがとうございます。
    早速修正させていただきました。

  • ロト君 より:

    フォームの確認画面が作りたかった時に素晴らしいサイトに出会えてよかったです!
    デモを参考に確認画面を作りたいと思います!!

    有難う御座います!!!

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Category

Archive