確認画面付きフォーム

目次

確認画面付きフォーム

このフォームの概要

  • WPForms を利用したフォームです
  • 確認画面を表示し、確認後に送信されます
  • 確認画面を表示するには、有料版が必要になります
あわせて読みたい
WPFormsをアップグレードしよう! 春までには書く...ょ... https://wpforms.com/
  • Loco Translate を利用し、未入力時の表示を「空」から「(未入力)」に変更
あわせて読みたい
LocoTranslateでWPFormsの翻訳を変更する https://wpforms.com/docs/how-to-translate-wpforms-into-a-different-language/ https://ja.wordpress.org/plugins/loco-translate/

WPForms関連の参考記事


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

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

1お問い合わせ内容の入力
2入力内容の確認

表示調整用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;
          }
        }
      }
    }
  }
}

funtion.php

インポートして使えるWPForms用 JSONファイル

よかったらシェアしてね!

この記事を書いた人

作業ログです
WPFormsの紹介がひととおり終わったら、360度撮影やワードプレステーマ(Snow Monkey やSWELL)とかWoocommerceのことも残していく予定

目次
閉じる