Contact Form 7 確認画面をjQuery(モーダルウィンドウ/ポップアップ)で開く

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

Contact Form 7 に確認画面を実装するには追加のプラグインが要りますが、Confirm Plus Contact Form 7 は表示がテーブルレイアウトのみでフォームページのデザインを引き継げないため、企業サイトなどではContact Form 7 Multi-Step Forms のプロ版を利用することが多いのですが、Contact Form 7 Multi-Step Forms 無料版は送信容量に制限があります。

そこで、プラグイン無しで確認画面をモーダルウィンドウ/ポップアップで開く方法はないかと考えてみました。

入力した内容をjQuery でインライン要素の中に入れる。
jQuery でインライン要素を開く。
ボタンクリック時の挙動を細く設定。
送信後は完了ページに遷移。

実装サンプル:送信はできませんが、確認画面の動作は確認していただけます。
Contact Form 7 ポップアップ確認画面実装
Contact Form 7 ポップアップ確認画面実装サンプル2

ワードプレスのカスタマイズや構築、困りごとなど、お問い合わせはこちらから