ContactForm7確認画面と送信完了ページの設置
2020-06-22
ContactForm7では、簡単にメールフォームを作成できますが、入力された項目の確認画面や、送信画面といったものは、少し手を加えないといけませんので、今回は、その方法を記載していきます。
確認画面の追加
確認画面については、「Contact Form 7 add confirm」というプラグインを追加インストールして、活用していく方法が簡単かと思います。
プラグインはこちら
インストールすると、コンタクトフォーム編集画面の｢フォーム｣タブに[確認ボタン]or[戻って編集ボタン」タグが追加されているので、それらをクリックして、項目を追加していきます。
|
1 |
[submit "送信"][confirm "確認する"][back "内容を修正する"] |
実際の表示では、「送信」/「内容を修正する」のボタンは表示されず、「確認する」のボタンのみが表示され、確認画面に遷移すると、「送信」/「内容を修正する」のボタンが表示されます。
また、入力項目の確認画面は、ページが遷移しているわけではないので、ご注意ください。
ステップごとのメッセージ表示
フォームの画面にステップ毎にメッセージを表示したい場合などは、下記のようなクラスを利用して、メッセージを追記することもできます。
入力画面のみで表示： wpcf7c-elm-step1
確認画面のみで表示： wpcf7c-elm-step2
完了画面のみで表示： wpcf7c-elm-step3
|
1 2 3 |
<p class="wpcf7c-elm-step1">お問い合わせはこちらから</p> <p class="wpcf7c-elm-step2">入力内容を確認して「送信」ボタンをクリックしてください。</p> <p class="wpcf7c-elm-step3">お問い合わせありがとうございました。</p> |
という具合に、コンタクトフォーム編集画面にて、入力しておくと、それぞれのステップでメッセージが表示されます。
送信完了画面を作成した場合は、wpcf7c-elm-step3の不要かもしれませんが、一応、残しておいても良いかと思います。
送信完了画面の作成
ContactForm7では、入力ページで完結しているので、送信完了画面は、別途固定ページなどで作成しておいて、リダイレクトさせる方法になります。
|
1 2 3 4 5 |
<script> document.addEventListener( 'wpcf7mailsent', function( event ) { location = 'https://送信完了ページのURL/'; }, false ); </script> |
上記の内容を、header.phpまたはfooter.phpに記述しておきます。
そうすると、送信ボタンが押された時に、ページ遷移の処理が実行されます。
備考
上記のソースを、そのまま記載しておくと、Wordpressで構築されている全ページに表示されてしまうので、is_page()などで、表示させるページを指定しておくのが、ベストかと思います。
また、function.phpに記述する方法もありますが、内容としては同じでので、参考程度に。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
add_action( 'wp_footer', 'add_thanks_page' ); function add_thanks_page() { if( get_the_ID() == '1234' ) { echo <<< EOD <script> document.addEventListener( 'wpcf7mailsent', function( event ) { location = 'https://送信完了ページのURL/'; }, false ); </script> EOD; } } |
get_the_ID()の部分で、処理を実行するページのIDを指定しておきます。