Contact Form 7 ポップアップ確認画面実装

情報を追記している場合はありますが、古い情報を訂正はしていませんので、公開年月日を参照してください。プラグイン・タグ、いずれもワードプレス・PHPのバージョン等によって動作しない場合もあります。

「Contact Form 7 確認画面をモーダルウィンドウで開く」を実装してみました。

必須項目を入力すると「確認」ボタンを表示します。
入力内容はインライン要素の中に記録され、確認ボタンをクリックすると、モーダルウィンドウで表示します。

扱いやすいcolorbox を利用していますが、スマホでの挙動が少し怪しいので、別のものにしたほうがいいかもしれません。

*追記
別のスクリプトに変更しました。

下記サンプルは確認画面の表示までで、送信はできません。




    ラジオボタン

    セレクトボックス

    チェックボックス

    確認する