Contact Form7で確認画面ありのフォームをつくる ※ソースコピペでOK

こんなフォームが完成します。

まずは完成イメージを見てみましょう。

1.フォームにHTMLを記述

-実装箇所（contact form7>「フォーム」）

Contact Form7のフォーム編集画面

-HTMLコード

—下記コードでの入力項目：お名前｜メールアドレス｜電話番号｜ご担当者名｜お問い合わせ内容｜プライバイシーポリシー同意チェック

<div class="contact-form">
  <label for="name">お名前<span class="required">*</span></label>
  [text* your-name id:name placeholder "例：山田 太郎"]

  <label for="email">メールアドレス<span class="required">*</span></label>
  [email* your-email id:email placeholder "例：example@example.com"]

  <label for="phone">電話番号<span class="required">*</span></label>
  [tel* your-phone id:phone placeholder "例：090-1234-5678"]

  <label for="contact-person">ご担当者名<span class="required">*</span></label>
  [text* your-contact-person id:contact-person placeholder "例：田中 花子"]

  <label for="message">お問い合わせ内容<span class="required">*</span></label>
  [textarea* your-message id:message placeholder "例：お問い合わせ内容を入力してください"]

  <div class="privacy-policy">
    [acceptance acceptance-1 class:privacy-policy] プライバシーポリシーに同意する [/acceptance]
  </div>

  <div class="form-buttons">
    <button id="confirm-button" type="button">確認</button>
  </div>
</div>

<!-- 確認画面 -->
<div id="confirmation-screen" style="display: none;">
  <h3>入力内容の確認</h3>
  <p><strong>お名前:</strong> <span id="confirm-name"></span></p>
  <p><strong>メールアドレス:</strong> <span id="confirm-email"></span></p>
  <p><strong>電話番号:</strong> <span id="confirm-phone"></span></p>
  <p><strong>ご担当者名:</strong> <span id="confirm-contact-person"></span></p>
  <p><strong>お問い合わせ内容:</strong> <span id="confirm-message"></span></p>
  <div class="form-buttons">
    <button id="back-button" type="button">戻る</button>
    <button id="submit-button" type="button">送信</button>
  </div>
</div>

2.フォームを表示する固定ページにJavascriptを実装

-実装箇所（※テーマ「Swell」の場合）

固定ページ編集画面>下部の「JS用コード」

テーマ「swell」の場合

-コード（Javascript）

最初に、実装時に書き換えるべき箇所を記載しておきます。（下記）

※注：コード内最下部のリダイレクト先は任意のものに書き換えてください

下記がJavascriptのコードになります ※CSSもJsのあとに記載しています。