ContactForm 7 確認画面 をカスタマイズして、入力した値のみを表示し
合わせて、画面上部にステップバーを追加する方法の紹介です。
今回は、「Contact Form 7 add confirm」というプラグインを使います。
公式:https://ja.wordpress.org/plugins/contact-form-7-add-confirm/
この記事の目次
デザイン
完成時のデザインになります。
今回は、「入力画面」「エラー画面」「確認画面」「完了画面」を表示させ
ステップバーを追加しています。
入力画面

エラー画面

確認画面

完了画面

Contact Form 7 add confirm のインストールと設定
プラグインをインストールして有効化してください。
プラグイン → 新規追加 → キーワード「Contact Form 7 add confirm」 → 今すぐインストール → 有効化
の手順でプラグインをインストールして有効化します。

Contact Form 7 の設定
プラグインを導入し、有効化ができたら「Contact Form 7」の設定画面に戻ります。
「確認ボタン」「戻って編集ボタン」の2つボタンが追加されていることが分かります。

このボタンを追加すると、確認画面が追加されます。
[back “戻る”] [submit “送信する”] [confirm “確認する”]が追加されると思います。
ステップバー の追加とデザイン設定
ここからは、ステップバーを追加しつつ、デザインの設定をしていきます。
「Contact Form 7」の設定画面にて、下記のコードを追加します。
ステップバーも、確認画面の設定も含まれていますので、そのままコピペして使うことができます。
<div id="wrap_contact"> <ol class="stepBar step3 wpcf7c-elm-step1"> <li class="step current">情報の<br>ご入力</li> <li class="step">入力内容の<br>確認</li> <li class="step">送信完了</li> </ol> <ol class="stepBar step3 wpcf7c-elm-step2"> <li class="step">情報の<br>ご入力</li> <li class="step current">入力内容の<br>確認</li> <li class="step">送信完了</li> </ol> <ol class="stepBar step3 wpcf7c-elm-step3"> <li class="step">情報の<br>ご入力</li> <li class="step">入力内容の<br>確認</li> <li class="step current">送信完了</li> </ol> <h3 class="wpcf7c-elm-step1">お問い合わせの内容によっては、回答をお電話でさせていただく場合や、回答をさしあげるのにお時間をいただくこともございます。 あらかじめご了承くださいますようお願いいたします。</h3> <h3 class="wpcf7c-elm-step2">ご入力内容をご確認後、「送信する」ボタンを押してください。</h3> [response] <div class="wpcf7c-elm-step3"> <p class="member_txt_sent">ご入力いただいたメールアドレスへ受付確認メールを自動送信いたしました。 ウイルス対策ソフトやセキュリティソフトをご利用の場合、 迷惑メールフォルダや削除済みアイテム等にメールが届いていないかご確認を御願いいたします。</p> <p class="member_txt_sent">お問い合わせの内容によっては、回答をお電話でさせていただく場合や、 回答をさしあげるのにお時間をいただくこともございますので、ご了承ください。</p> <h4 class="member_txt_sent">○○○○○株式会社</h4> <p class="member_txt_sent"><a href="../">トップページへ戻る</a></p> </div> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <th>お名前<span>必須</span></th> <td> <p class="member_txt wpcf7c-elm-step1">漢字</p> [text* name01] <p class="member_txt wpcf7c-elm-step1">ふりがな</p> [text name02] </td> </tr> <tr> <th>住所<span>必須</span></th> <td> <p class="member_txt wpcf7c-elm-step1">郵便番号(ハイフンなし)</p> [text* Postalcode id:zip post class:p-postal-code] <p class="member_txt wpcf7c-elm-step1">住所</p> [text* add01 id:addr] </td> </tr> <tr> <th>メールアドレス<span>必須</span></th> <td> [email* email] </td> </tr> <tr> <th>電話番号<span>必須</span></th> <td> [tel* tel] </td> </tr> <tr> <th>要望・質問など</th> <td> [textarea request] </td> </tr> </tbody> </table> <p class="wpcf7c-elm-step1">当サイトは、個人情報保護のため、SSL(SecureSocketsLayer)暗号化通信を採用しております。 <a href="../pp/" target="_blank">プライバシーポリシー</a>にご了承いただき、送信してよろしければ下の「確認画面へ」ボタンを押して下さい。</p> <div class="form_btn">[back "戻る"][submit "送信する"]</div> <div class="form_btn">[confirm "確認する"]</div> </div>
CSSの設定で、クラスを追加して各画面で表示、非表示をコントロールしています。
入力画面でのみ有効
クラス名:wpcf7c-elm-step1
確認画面でのみ有効
クラス名:wpcf7c-elm-step2
完了画面でのみ有効
クラス名:wpcf7c-elm-step3
エラー表示について
表示場所の変更
[response]を追加した場所にエラーが表示されます。
エラー表示で、ページの先頭に戻る
エラー表示の場所に自動スクロールしてくれたり、くれなかったりするので、ページの先頭へ戻るように設定します。
/contact-form-7/includes/js/scripts.js の247行目 wpcf7.triggerEvent( data.into, ‘invalid’, detail ); の後ろに下記記述を挿入します。
var speed = 1000; jQuery("html, body").animate({scrollTop:0}, speed, "swing");
スタイルシートの設定
少し長いですが、下記をコピペすると、上記のようなデザインに仕上がります。
#wrap_contact { width: 100%; margin: 0 auto; } @media screen and (max-width: 1100px) { #wrap_contact { width: 100%; } } #wrap_contact table { width: 100%; border-collapse: collapse; border: solid #ccc; border-width: 1px 0; margin: 50px auto; } @media screen and (max-width: 768px) { #wrap_contact table { width: 100%; border-width: 0 0 1px 0; } } #wrap_contact table tr th, #wrap_contact table tr td { text-align: left; vertical-align: middle; border: solid #ccc; border-width: 1px 0; } #wrap_contact table tr th { width: 35%; background: #eee; padding: 0 2em; } @media screen and (max-width: 1100px) { #wrap_contact table tr th { padding: 0 1em; } } @media screen and (max-width: 768px) { #wrap_contact table tr th { width: auto; padding: 1em 5%; border-width: 0; } } #wrap_contact table tr td { padding: 2em 2em 1em 2em; } @media screen and (max-width: 1100px) { #wrap_contact table tr td { padding: 1em 1em 0em 1em; } } @media screen and (max-width: 768px) { #wrap_contact table tr td { border-width: 0; width: auto; padding: 1em 5%; } } @media screen and (max-width: 768px) { #wrap_contact table, #wrap_contact table tbody, #wrap_contact table tr, #wrap_contact table tr th, #wrap_contact table tr td { display: block; } } #wrap_contact form.sent table { display: none; } @media screen and (max-width: 768px) { #wrap_contact form.sent table { display: none; } } div.wpcf7-response-output { margin: 2em 0 0 0; padding: 0; border: none; color: #dc0003; font-weight: bold; } div.wpcf7-mail-sent-ok { border: none; color: #000; font-weight: bold; font-size: 1.3em; margin-bottom: 2em; } h4.member_txt_sent { margin: 2em 0; } div.wpcf7-mail-sent-ng, div.wpcf7-aborted { border: none; color: #dc0003; font-weight: bold; } div.wpcf7-spam-blocked { border: none; color: #dc0003; font-weight: bold; } div.wpcf7-validation-errors, div.wpcf7-acceptance-missing { border: none; color: #dc0003; font-weight: bold; } span.wpcf7-not-valid-tip { color: #dc0003; font-size: 0.8em; font-weight: bold; display: block; margin: -0.8em 0 1em 0; } .wpcf7-not-valid { background: #ffd0d1; } #wrap_contact table .post { margin: 0; padding: 0; } .member_txt { padding: 0 0 5px 0; } h3.wpcf7c-elm-step1, h3.wpcf7c-elm-step2, h3.wpcf7c-elm-step3 { margin: 3em 0 0 0; font-weight: normal; font-size: 1em; line-height: 1.7em; } #wrap_contact input[type="text"], #wrap_contact input[type="tel"], #wrap_contact input[type="email"], #wrap_contact input[type="number"], #wrap_contact textarea { padding: 0.7em; width: 90%; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 1em; } @media screen and (max-width: 768px) { } #wrap_contact input[type="text"].wpcf7c-conf, #wrap_contact input[type="tel"].wpcf7c-conf, #wrap_contact input[type="email"].wpcf7c-conf, #wrap_contact input[type="number"].wpcf7c-conf, #wrap_contact textarea.wpcf7c-conf { background-color: #fff; color: black; border: 1px solid #fff; outline: none; } #wrap_contact .form_btn { display: flex; justify-content: center; } @media screen and (max-width: 768px) { #wrap_contact .form_btn { display: block; text-align: center; width: 250px; margin: 0 auto; } } .sent table { display: none; } #wrap_contact input[type="button"].wpcf7-confirm, #wrap_contact input[type="button"].wpcf7-back, #wrap_contact input[type="submit"] { -webkit-appearance: none; background: #ee5656; height: 60px; font-size: 20px; letter-spacing: 0.1em; width: 250px; font-weight: bold; cursor: pointer; color: #fff; border: 0; border-radius: 5px; outline: none; margin: 0.5em 1em; } @media screen and (max-width: 768px) { #wrap_contact input[type="button"].wpcf7-confirm, #wrap_contact input[type="button"].wpcf7-back, #wrap_contact input[type="submit"] { margin: 0.5em 0; } } #wrap_contact input[type="button"].wpcf7-back { background: #666; } #wrap_contact table th span { color: #fff; background: #dc0003; padding: 3px 3px 4px 5px; font-size: 12px; margin-left: 10px; border-radius: 3px; letter-spacing: 0.2em; } div.wpcf7 .ajax-loader { background-image: none; vertical-align: baseline; } div.wpcf7 .ajax-loader::after { content: "\f110"; font-family: "Font Awesome 5 Free", sans-serif; font-weight: 900; animation: rotation 1s linear infinite; display: inline-block; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .stepBar { position: relative; list-style: none; margin: 0 0 1em; padding: 0; text-align: center; width: 100%; overflow: hidden; *zoom: 1; } .stepBar .step { position: relative; float: left; display: inline-block; line-height: 40px; padding: 0 40px 0 20px; background-color: #eee; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .stepBar .step:before, .stepBar .step:after { position: absolute; left: -15px; display: block; content: ''; background-color: #eee; border-left: 4px solid #fff; width: 20px; height: 20px; } .stepBar .step:after { top: 0; -moz-transform: skew(30deg); -ms-transform: skew(30deg); -webkit-transform: skew(30deg); transform: skew(30deg); } .stepBar .step:before { bottom: 0; -moz-transform: skew(-30deg); -ms-transform: skew(-30deg); -webkit-transform: skew(-30deg); transform: skew(-30deg); box-shadow: none; top: initial; border-radius: initial; } .stepBar .step:first-child { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } .stepBar .step:first-child:before, .stepBar .step:first-child:after { content: none; } .stepBar .step:last-child { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } .stepBar .step.current { color: #fff; background-color: #25ade0; } .stepBar .step.current:before, .stepBar .step.current:after { background-color: #25ade0; } .stepBar.step3 .step { width: 33.333%; } .stepBar.step3 .step br { display: none; } @media screen and (max-width: 1100px) { .stepBar.step3 .step br { display: block; } .stepBar .step { height: 50px; font-size: 13px; position: relative; float: left; display: inline-block; line-height: 18px; padding: 7px 30px 5px 10px; background-color: #eee; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .stepBar .step:before, .stepBar .step:after { height: 25px; } .stepBar .step:nth-of-type(3) { padding-top: 17px; } }