ContactForm 7 に確認画面完了画面を追加してステップバーを表示

ContactForm 7 に確認画面完了画面を追加し、ステップバーを表示させる

WEB

掲載日：2020年06月29日

この記事の目次

ContactForm 7 確認画面 をカスタマイズして、入力した値のみを表示し
合わせて、画面上部にステップバーを追加する方法の紹介です。

今回は、「Contact Form 7 add confirm」というプラグインを使います。
公式：https://ja.wordpress.org/plugins/contact-form-7-add-confirm/

ContactForm 7 デザイン

ContactForm 7 完成時のデザインになります。

今回は、「入力画面」「エラー画面」「確認画面」「完了画面」を表示させ
ステップバーを追加しています。

入力画面

エラー画面

確認画面

完了画面

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;
  }
}

ContactForm 7 に確認画面完了画面を追加してステップバーを表示

昨日と今日の間

ContactForm 7 に確認画面完了画面を追加し、ステップバーを表示させる

WEB

ContactForm 7 デザイン

入力画面

エラー画面

確認画面

完了画面

Contact Form 7 add confirm のインストールと設定

Contact Form 7 の設定

ステップバーの追加とデザイン設定

入力画面でのみ有効

確認画面でのみ有効

完了画面でのみ有効

エラー表示について

表示場所の変更

エラー表示で、ページの先頭に戻る

スタイルシートの設定

WEB ワードプレス

ランキング

カテゴリー

新着コラム

Flutter - Rowに余白 / padd ...

Flutter - サイズ・背景・余白・枠線 ...

Flutter - bodyに複数のウェジェッ ...

Flutter - ListView / Li ...

Flutter - Scaffold の基本的 ...

Flutter - 基本的なウィジェットやプロ ...

2021年5月「ンフステ」発注書攻略 ...

ライジングサン 2021 チケット・出演アーテ ...

ContactForm 7 確認画面をカスタ ...

ラブミュージックフェス ( LOVE MUSI ...

ContactForm 7 に 確認画面 完了画面 を追加し、ステップバーを表示させる

ContactForm 7 デザイン

入力画面

エラー画面

確認画面

完了画面

Contact Form 7 add confirm のインストールと設定

Contact Form 7 の設定

ステップバー の追加とデザイン設定

入力画面でのみ有効

確認画面でのみ有効

完了画面でのみ有効

エラー表示について

表示場所の変更

エラー表示で、ページの先頭に戻る

スタイルシートの設定

こちらの記事もオススメです

ランキング

カテゴリー

新着コラム

ContactForm 7 に確認画面完了画面を追加し、ステップバーを表示させる

ステップバーの追加とデザイン設定