【WordPress】無料で確認画面をカスタムデザインで作成する方法（Contact Form 7）

Contact Form 7には確認画面の機能が標準搭載されていませんが、実はHTML・CSS・JavaScriptを少し追加するだけで、プラグインなし・無料で確認画面を自作できます。この記事では次の3つを、コピペできるコード付きで解説します。

• 入力画面→確認画面→完了画面の3段階切り替えの作り方
• そのままコピペして使えるHTML・CSS・JavaScriptコード
• スマホ対応や動作確認、うまく動かないときの対処法

ラッコサーバーでサイトを管理すると売却時の価値を高く保てます！
サイト/ドメインの売却をシームレスに実現します。

ラッコサーバー詳細

オンライン事業売買

WordPressサイト売買

ドメイン売買

データを読み込み中...

もっと見る

データを読み込み中...

もっと見る

データを読み込み中...

もっと見る

Contact Form 7の確認画面を自作するのに必要なもの

Contact Form 7の確認画面を自作するには、CF7本体に加えてHTML・CSS・JavaScriptを少し追記できる環境があれば十分です。有料プラグインは必要ありません。

ここではまず「なぜ自作が必要なのか」と「用意するもの」を整理し、この記事で作る3画面の完成イメージを共有します。

Contact Form 7には確認画面機能が標準搭載されていない

Contact Form 7には、送信前に入力内容を見返せる確認画面の機能が標準では用意されていません。公式プラグインページを確認しても、確認画面（確認ステップ）に関する機能の記載はありません。

そのため「入力 → 確認 → 完了」の3段階フォームを実現するには、有料アドオンを導入するか、自分でコードを追加するかのどちらかになります。この記事では後者、つまりプラグインなし・無料で自作する方法を解説します。

用意するもの

確認画面の自作に必要なものは、次の3つだけです。

すでにお問い合わせフォームを設置している方は、そのフォームをそのまま使えます。まだCF7自体を導入していない場合は、先にお問い合わせフォームの設置方法を参考にフォームを用意してください。

この記事で作る3段階（入力画面→確認画面→完了画面）の完成イメージ

この記事で作るのは、1つのフォーム内で3つの画面を切り替える仕組みです。ページ遷移せず、同じページ内で表示だけを入れ替えます。

具体的な流れは次のとおりです。

この3画面を、HTML（画面の中身）・CSS（表示/非表示）・JavaScript（切り替え動作）の3つで作っていきます。次のSTEP1から順番に進めましょう。

STEP1：CF7フォームに確認画面用のHTML要素を仕込む

WordPress管理画面から「お問い合わせ → コンタクトフォーム」を開き、対象のフォームの「フォーム」タブにコードを記述します。ここでは入力・確認・完了の3つのエリアを、3つのdivに分けて作ります。

入力エリア・確認エリア・完了エリアを3つのdivで分ける

ポイントは、3つの画面をそれぞれ別のdivで囲むことです。あとからCSSとJavaScriptで、このdiv単位で表示/非表示を切り替えます。

それぞれの役割は次のとおりです。

確認エリアでは、入力された値を表示するための空のspan（confirm-your-nameなど）を用意しておきます。ここにJavaScriptで入力内容を流し込みます。

「確認する」「修正する」「送信する」ボタンを配置する

3画面の切り替えには、3種類のボタンを使います。それぞれの役割と種類を理解しておくと、あとのJavaScriptの動きが分かりやすくなります。

「確認する」ボタンをtype="button"にしているのが重要なポイントです。type="submit"にしてしまうと、ボタンを押した瞬間にフォームが送信されてしまい、確認画面を挟めません。あくまで「表示を切り替えるだけ」のボタンにするために、type="button"を指定します。

コピペ用フォームタグ全文（コード例）

CF7の「フォーム」タブに、次のコードをそのまま貼り付けてください。既存のフォーム内容を置き換える形で貼り付けるとスムーズです。

<div class="cf7-step cf7-step-input">
  <p>お名前（必須）<br />
  ［text* your-name］</p>

  <p>メールアドレス（必須）<br />
  ［email* your-email］</p>

  <p>お問い合わせ内容（必須）<br />
  ［textarea* your-message］</p>

  <p><button type="button" id="cf7-confirm-btn" class="cf7-btn">確認する</button></p>
</div>

<div class="cf7-step cf7-step-confirm">
  <table class="cf7-confirm-table">
    <tr><th>お名前</th><td><span id="confirm-your-name"></span></td></tr>
    <tr><th>メールアドレス</th><td><span id="confirm-your-email"></span></td></tr>
    <tr><th>お問い合わせ内容</th><td><span id="confirm-your-message"></span></td></tr>
  </table>
  <p>
    <button type="button" id="cf7-back-btn" class="cf7-btn">修正する</button>
    ［submit "送信する"］
  </p>
</div>

<div class="cf7-step cf7-step-thanks">
  <p>お問い合わせいただきありがとうございました。内容を確認のうえ、担当者よりご連絡いたします。</p>
</div>

コードを貼り付けたら、フォームの「フォーム」タブは次のような状態になります。

貼り付けたら、画面右上の「保存」ボタンをクリックして保存します。

STEP2：CSSで確認画面・完了画面を初期非表示にする

STEP1のHTMLを貼っただけだと、入力エリア・確認エリア・完了エリアが縦に3つ並んで表示されます。そこでCSSを使い、確認エリアと完了エリアを最初は隠しておきます。

displayで表示/非表示を切り替える仕組み

画面の切り替えには、CSSのdisplayプロパティを使います。display: noneを指定した要素は、画面から見えなくなります。

この記事では、次のように制御します。

ここで知っておきたいのが、display: noneで隠した入力欄の値も、送信時にはきちんと送られるという点です。disabled属性を付けない限り、非表示にした入力エリアの値は消えません。だからこそ、入力画面を隠して確認画面を表示しても、送信すれば入力内容が正しく届きます。

コピペ用CSS

次のCSSを「外観 → カスタマイズ → 追加CSS」に貼り付けるか、子テーマのstyle.cssに追記してください。

.cf7-step-confirm,
.cf7-step-thanks {
  display: none;
}
.cf7-confirm-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
.cf7-confirm-table th,
.cf7-confirm-table td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}
.cf7-confirm-table th {
  width: 30%;
  background: #f5f5f5;
}
.cf7-btn {
  display: inline-block;
  padding: 10px 32px;
  margin-right: 12px;
  margin-bottom: 12px;
  border: none;
  border-radius: 4px;
  background: #2271b1;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}
.cf7-btn:hover {
  background: #135e96;
}
#cf7-back-btn {
  background: #f0f0f1;
  color: #3c434a;
  border: 1px solid #c3c4c7;
}
#cf7-back-btn:hover {
  background: #dcdcde;
}
.cf7-step-confirm .wpcf7-submit {
  display: inline-block;
  width: auto;
  padding: 10px 32px;
  margin-bottom: 12px;
  border: none;
  border-radius: 4px;
  background: #2271b1;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}
.cf7-step-confirm .wpcf7-submit:hover {
  background: #135e96;
}
@media (max-width: 600px) {
  .cf7-confirm-table th,
  .cf7-confirm-table td {
    display: block;
    width: 100%;
  }
  .cf7-confirm-table th {
    background: none;
    padding-bottom: 0;
  }
  .cf7-btn,
  .cf7-step-confirm .wpcf7-submit {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-bottom: 12px;
  }
}

「外観 → カスタマイズ → 追加CSS」を開き、上記のコードを貼り付けます。

貼り付けたら、左上の「公開」ボタンをクリックして変更を反映させます。

前半で確認エリア・完了エリアを非表示にし、後半で確認画面の一覧表（table）とボタンの見た目を整えています。色や余白は好みに合わせて調整してかまいません。

スマホでも崩れないようにするポイント

確認画面の一覧表は、PCでは「項目名｜内容」の2列で表示されます。ただしスマホの狭い画面では、この2列レイアウトのままだと文字が窮屈になりがちです。

そこで上のCSSでは、画面幅600px以下のときにthとtdをdisplay: blockにして縦積みにしています。これで、スマホでは「項目名」の下に「内容」が並ぶ読みやすいレイアウトになります。

STEP3：JavaScriptで入力→確認→完了の画面切り替えを実装する

HTMLとCSSで3画面の準備ができたら、JavaScriptで実際の切り替え動作を組み込みます。やることは大きく3つ、「確認画面への反映」「入力画面への復帰」「完了画面への切り替え」です。

「確認する」ボタンで入力内容を確認画面へ反映させる

「確認する」ボタンを押したときの動きは、次の2ステップです。

form.checkValidity()は、ブラウザ標準の入力チェック機能です。必須項目が未入力だったりメールアドレスの形式が不正だったりすると、確認画面に進む前にform.reportValidity()でエラーメッセージが表示されます。これにより、空欄のまま確認画面へ進んでしまうのを防げます。

「修正する」ボタンで入力画面へ戻す

確認画面で内容を見直して修正したくなったときのために、「修正する」ボタンを用意しています。

このボタンを押すと、確認エリアを隠して入力エリアを再表示します。入力欄の値はそのまま残っているので、修正したい箇所だけ直して、もう一度「確認する」を押せます。

送信完了後に完了画面へ切り替える（wpcf7mailsentイベントを使う）

送信が完了したかどうかは、Contact Form 7が発火するwpcf7mailsentという公式のイベントで検知します。

このwpcf7mailsentは、CF7がメール送信に成功したときに発火するDOMイベントです。Contact Form 7の公式サイト自身も、送信完了時の処理にこのイベントを利用しています。実際に検証したところ、送信が成功したタイミングで確実に発火し、このイベントをきっかけに完了画面へ切り替えられました。

このイベントが発火したら、確認エリアを隠して完了エリアを表示します。これで「ありがとうございました」のメッセージに切り替わり、3画面の切り替えが完成します。

コピペ用JavaScript全文（コード例）

次のJavaScriptを、子テーマのfooter.phpの末尾（</body>の直前）に記述するか、「Insert Headers and Footers」などのプラグインで</body>直前に読み込ませてください。フォームより後に読み込ませるのがポイントです。

<script>
document.addEventListener('DOMContentLoaded', function () {
  var form = document.querySelector('.wpcf7-form');
  if (!form) return;

  var inputArea = form.querySelector('.cf7-step-input');
  var confirmArea = form.querySelector('.cf7-step-confirm');
  var thanksArea = form.querySelector('.cf7-step-thanks');
  var confirmBtn = form.querySelector('#cf7-confirm-btn');
  var backBtn = form.querySelector('#cf7-back-btn');

  confirmBtn.addEventListener('click', function () {
    if (!form.checkValidity()) {
      form.reportValidity();
      return;
    }
    document.getElementById('confirm-your-name').textContent = form.querySelector('[name="your-name"]').value;
    document.getElementById('confirm-your-email').textContent = form.querySelector('[name="your-email"]').value;
    document.getElementById('confirm-your-message').textContent = form.querySelector('[name="your-message"]').value;

    inputArea.style.display = 'none';
    confirmArea.style.display = 'block';
  });

  backBtn.addEventListener('click', function () {
    confirmArea.style.display = 'none';
    inputArea.style.display = 'block';
  });

  document.addEventListener('wpcf7mailsent', function (event) {
    if (event.target !== form) return;
    confirmArea.style.display = 'none';
    thanksArea.style.display = 'block';
  }, false);
});
</script>

子テーマのfooter.phpを開き、</body>の直前に上記のコードを貼り付けます。

貼り付けたら、「ファイルを更新」ボタンをクリックして保存します。

入力項目を増やした場合は、confirmBtnのクリック処理の中に、追加した項目のgetElementById(...).textContent = ...の行を同じ書き方で足してください。your-nameなどのname属性と、confirm-your-nameなどのidを必ず対応させるのがコツです。

STEP4：実際に動作を確認する

HTML・CSS・JavaScriptの3つを貼り終えたら、フォームを設置したページを開いて、実際の動きをテストします。

入力→確認→送信→完了の流れをテストする

次の順番で、一連の動作を確認してください。

まずお名前・メールアドレス・お問い合わせ内容を入力し、「確認する」ボタンをクリックします。

「確認する」をクリックすると、入力した内容がそのまま確認画面のテーブルに反映されます。

内容に問題がなければ、「送信する」ボタンをクリックします。

送信が完了すると、完了画面のメッセージに切り替わります。

入力エリアを非表示にしても値は送られるため、確認画面から「送信する」を押せば、入力した内容がそのままメールで届きます。実際にメールが届くところまで確認できれば、確認画面の自作は完了です。

うまく動かないときのチェックポイント

もし途中で動かない場合は、次のポイントを順番に確認してください。多くはIDやクラス名の指定ミス、JavaScriptの読み込み場所が原因です。

よくある質問

Q1. 問い合わせフォームに確認画面は必要ですか？

必須ではありませんが、あると入力ミスや誤送信を防げるためおすすめです。特に問い合わせ内容が重要なビジネスサイトでは、送信前に内容を見返せる確認画面が、ユーザーの安心感とコンバージョン率の向上につながります。

Q2. 問い合わせフォームの確認画面には、どんな役割がありますか？

確認画面には「入力ミスの防止」「誤送信の防止」「ユーザーの安心感向上」という3つの役割があります。送信前に入力内容を見返せることで、誤った情報のまま送信してしまうトラブルを防ぎ、フォームからの問い合わせ品質を高められます。

Q3. Contact Form 7で確認画面は表示できますか？

標準機能では表示できませんが、この記事のようにHTML・CSS・JavaScriptを追加すれば自作できます。「STEP1」から順に進めれば、プラグインなしで確認画面を追加できます。まだCF7自体を導入していない場合は、先にお問い合わせフォームの設置方法を参考にフォームを設置してください。

Q4. プラグインを使わずに確認画面を作るメリットは何ですか？

無料で導入できる点と、有料アドオン（Multi-Step Forms Pro等）の不具合や文字数制限などに縛られない点です。デザインも自由にカスタマイズでき、テーマ更新やプラグイン競合のリスクも抑えられます。

Q5. コードを書くのにどれくらい時間がかかりますか？

本記事のコードをコピペするだけであれば、5〜10分程度で実装できます。ボタンの文言やデザインを調整する場合でも、CSSを数行書き換えるだけなので大きな手間はかかりません。

Q6. スマホでも確認画面はきちんと表示されますか？

はい、CSSで表示/非表示を制御しているため、スマホでも問題なく動作します。ただしボタンや文字サイズはPC基準になりがちなので、「STEP2」のスマホ対応ポイントを参考にレスポンシブ調整をしておくと安心です。

Q7. この方法のデメリット（弱点）はありますか？

JavaScriptに依存するため、ごく一部のJavaScriptを無効化した環境では確認画面が動作しない点が弱点です。また、コードを直接編集するため、記述場所やIDの指定を間違えると動かないことがあります。「STEP4」のチェックポイントで確認しましょう。

Q8. Contact Form 7でメールが届かない・送信できないのですが、確認画面と関係がありますか？

確認画面の自作とは別の問題です。多くはメールの送信先設定やサーバー側の送信制限が原因のため、確認画面のコードを見直す前に、フォームの送信先メールアドレスやメール設定を確認しましょう。

まとめ

Contact Form 7には確認画面の機能が標準搭載されていませんが、HTML・CSS・JavaScriptを少し追加するだけで、プラグインなし・無料で自作できます。

この記事で解説した手順を、あらためて整理します。

「確認する」ボタンをtype="button"にすること、display: noneでも値は送信されること、送信完了はwpcf7mailsentで検知すること。この3点を押さえれば、コピペでも仕組みを理解しながら実装できます。ぜひ自分のフォームに確認画面を追加して、問い合わせの品質と安心感を高めてください。

サイト YouTube Amazon EC Instagram アプリ

案件一覧を見る