確認画面付きフォーム

2022年3月1日2022年3月3日

確認画面付きフォーム

このフォームの概要

WPForms を利用したフォームです
確認画面を表示し、確認後に送信されます
確認画面を表示するには、有料版が必要になります

Loco Translate を利用し、未入力時の表示を「空」から「（未入力）」に変更

郵便番号を入力するとzipaddr-jpにより住所が自動入力されます
Google reCAPTCHAを利用し「私はロボットではありません」のスパム対策を実施
必須項目は「*」ではなく「※必須」に書き換えています
スマートフォンでは縦一列に並びます
完了を知らせる別画面はありません
完了メッセージとエントリプレビューが表示されます
確認画面を表示するには、有料版が必要になります

WPForms関連の参考記事

実際のお問い合わせフォーム

お客さまからのご質問をお問い合わせフォームにて受け付けております。
必要事項をご記入の上、「送信する」を押してください。

表示調整用SCSS

.wpforms-container-full {
  form {
    &.wpforms-form {
      // 確認画面付きフォーム用の設定
      // 以下、変更箇所
      &#wpforms-form-369 {
        // 下線を入れることで遷移後の視認性を上げたつもり（ヘッダーメニューが被ったりするのを避けた）
        .wpforms-page-indicator-page {
          border-bottom: 2px solid #DDD;
          padding-bottom: 1rem;
        }
        .wpforms-page-indicator-page.active {
          background-color: #F4F7F1;
          border-bottom: #C2DBAD 2px solid;
          padding-bottom: 1rem;
        }

        // 入力部分
        // 少しだけ縦の感覚を広く
        .wpforms-field {
          padding-top: 1.2rem;

          @media screen and (max-width: 600px) {
            padding-top: 0.6rem;
          }
          // 入力画面のラベルに背景を追加（確認画面のテーブルヘッダーに少し寄せたつもり）
          .wpforms-field-label {
            background-color: #EAEBEA;
            padding: 0.8rem 0 0.7rem 0.8rem;
          }
        }

        // ボタン
        .wpforms-page-button {
          // 確認
          &.wpforms-page-next {
            background-color: #33998F;
            color: white;
          }
          // 戻る
          &.wpforms-page-prev {
            background-color: #918A8A;
            color: white;
          }
        }

        // 確認画面
        // 上部注意書き、デフォルトの黄色だと少しきついので緑に
        .wpforms-entry-preview-notice {
          background: #F4F7F1;
          border: 2px solid #C7DFC8;
        }
        // 確認画面、左のヘッダー
        .wpforms-entry-preview-label {
          background-color: #F6F7F6;
          font-size: 1rem;
        }
        // 確認画面、右の値
        .wpforms-entry-preview-value {
          font-size: 1rem;
          // Emptyをitalicからnormalに
          em {
            color: #999;
            font-style: normal;
          }
        }
        //reCAPTCHA をボタン同様に右へ
        .wpforms-recaptcha-container {
          &.wpforms-is-recaptcha {
            .g-recaptcha {
              & > div {
                margin-left: auto;
                margin-right: 0;
              }
            }
          }
        }
        // reCAPTCHAエラー表示を右に
        #g-recaptcha-hidden-error {
          display: block;
          float: right;
          text-align: left;
          width: 300px;
        }
        // 送信ボタンは右に
        .wpforms-submit-container {
          text-align: right;
          .wpforms-submit {
            background-color: #33998F;
            color: white;
            margin-left: auto;
            margin-right: 0;
            width: 306px;
          }
        }
      }
    }
  }
}

editor-style用SCSS

.wpforms-container-full {
  form {
    &.wpforms-form {
      // 確認画面付きフォーム用の設定
      // 管理画面側は戻るボタンや確認画面の設定は不要
      &#wpforms-form-<Number> { // 必ず<Number>をwpforms idに変更すること
        // 下線を入れることで遷移後の視認性を上げたつもり（ヘッダーメニューが被ったりするのを避けた）
        .wpforms-page-indicator-page {
          border-bottom: 2px solid #DDD;
          padding-bottom: 1rem;
        }
        .wpforms-page-indicator-page.active {
          background-color: #F4F7F1;
          border-bottom: #C2DBAD 2px solid;
          padding-bottom: 1rem;
        }

        // 入力部分
        // 少しだけ縦の感覚を広く
        .wpforms-field {
          padding-top: 1.2rem;

          @media screen and (max-width: 600px) {
            padding-top: 0.6rem;
          }

          // 入力画面のラベルに背景を追加（確認画面のテーブルヘッダーに少し寄せたつもり）
          .wpforms-field-label {
            background-color: #EAEBEA;
            padding: 0.8rem 0 0.7rem 0.8rem;
          }
        }

        // ボタン
        .wpforms-page-button {
          // 確認
          &.wpforms-page-next {
            background-color: #33998F;
            color: white;
          }
        }
      }
    }
  }
}