WordPressで非常によく利用させて頂いているプラグインにContact Form 7というものがあります。(いつも本当にお世話になっています)

お問い合わせフォームを設置してくれるプラグインなのですが、入力画面の後、すぐに送信されてしまい、確認画面がありません。株式会社オルタ様のライブラリが便利でよく利用させていましたが、もっと簡単に確認画面を付けたいと思い、プラグインを作成してみました。

contact-form-7-confirm

contact-form-7-confirm.1.3.8.1

contact-form-7-confirm.1.3.8.2

最新版は公式ディレクトリから取得して下さい。
http://wordpress.org/plugins/contact-form-7-add-confirm/

こちらから、ZIPファイルをダウンロードして頂き、解凍してできる「contact-form-7-confirm」と言うフォルダをwp-content/pluginsフォルダの中にコピーして、管理画面からプラグインを有効にして下さい。

有効にすると、「お問い合せ」メニューからフォームを作成する画面の「タグの作成」の選択肢の中に「確認ボタン」「戻って編集ボタン」の2つが追加されます。

wpcf7c1

それぞれのボタンを設置すると、フォームを表示した直後は「送信ボタン」「戻って編集ボタン」は非表示となり、「確認ボタン」だけが表示されます。

フォームに必要な情報を入力して「確認ボタン」をクリックすると、フォーム内の各要素がreadonly、disabledとなり、ボタンも「送信ボタン」「戻って編集ボタン」に切り替わります。

「戻って編集ボタン」を押すと編集画面にもどり、「送信ボタン」をクリックするとフォームからメールが送信されます。

基本的にはこれだけで確認画面が追加されます。

 

また、入力画面、確認画面、完了画面で表示する文言やタイトルを変えたい場合はそれぞれの要素に以下のクラスをセットすると対象の画面のみで表示されるようになります。

入力画面のみで表示する要素: 「wpcf7c-elm-step1」

確認画面のみで表示する要素: 「wpcf7c-elm-step2」

完了画面のみで表示する要素: 「wpcf7c-elm-step3」

また、http://crossinthenight.com/wordpress/925/
などで紹介されている「on_sent_ok」オプションで完了画面を別画面にすることも可能です。

2014.05.23
オプションに「on_confirm」を設定できるようにしました。これにより確認画面表示の際に独自のJavascriptを実行できるようになりました。

まだ、いろいろ試行錯誤していて、バグ等が残っている可能性もありますので何か不具合がありましたらコメント下さい。

先日LTした資料があるので共有します。

変更履歴

変更履歴は、公式に記載してあるのでそちらを参照下さい。
http://wordpress.org/plugins/contact-form-7-add-confirm/changelog/