【コピペOK】初心者でもできる！多機能＆おしゃれな予約フォームのデザインカスタマイズ

<div class="form-reserve">
  <div class="form-item">
    <label><span class="required-tag">必須</span> ご希望のサービス内容</label>
    [select* your-service include_blank "カウンセリング""予約相談"
    "ワークショップ" "イベント参加申し込み" "体験レッスン""その他"]
  </div>

  <div class="form-item">
    <label><span class="required-tag">必須</span> お名前</label>
    [text* your-name placeholder "例：山田 太郎"]
  </div>

  <div class="form-item">
    <label><span class="required-tag">必須</span> ふりがな</label>
    [text* your-kana placeholder "例：やまだ たろう"]
  </div>

  <div class="form-item">
    <label><span class="required-tag">必須</span> 電話番号</label>
    [tel* your-tel placeholder "例：09012345678"]
  </div>

  <div class="form-item">
    <label><span class="required-tag">必須</span> メールアドレス</label>
    [email* your-email placeholder "例：sample@example.com"]
  </div>

  <div class="form-item">
    <label><span class="required-tag">必須</span> ご希望の連絡方法</label>
    [radio your-contact-method use_label_element "電話" "メール" "どちらでも"]
  </div>

  <div class="form-item">
    <label><span class="optional-tag">任意</span> 第1希望日</label>
    <div class="date-wrapper">
      [text your-first-date class:datepicker-field placeholder "例：2025-04-01"]
      <span class="calendar-icon icon1" aria-hidden="true"></span>
    </div>
  </div>

  <div class="form-item">
    <label><span class="optional-tag">任意</span> 第2希望日</label>
    <div class="date-wrapper">
      [text your-second-date class:datepicker-field placeholder
      "例：2025-04-05"]
      <span class="calendar-icon icon2" aria-hidden="true"></span>
    </div>
  </div>

  <div class="form-item">
    <label><span class="optional-tag">任意</span> スタイル</label>
    [checkbox your-style use_label_element "対面希望"
    "オンライン希望（Zoomなど）" "どちらでもよい"]
  </div>

  <div class="form-item">
    <label><span class="optional-tag">任意</span> ご質問・備考</label>
    [textarea your-message placeholder "ご質問や特記事項があればご記入ください"]
  </div>

  <div class="form-submit">
    [submit "入力内容を確認する"]
　　 [multistep multistep-656 first_step"/reserve-confirm"]
  </div>

</div>

<div class="thanks-message">
  <p>このたびは、お申し込みいただきありがとうございます。</p>
  <p>内容を確認のうえ、48時間以内にご連絡差し上げますので、今しばらくお待ちくださいませ。</p>
  <p>24時間以内にメールが届かない場合は、迷惑メールフォルダをご確認いただくか、<br>
  以下より再度ご連絡ください。</p>
  <div style="margin-top: 1.5em;">
    <a href="/" class="btn-home">ホームに戻る</a>
  </div>
</div>

/* --- フォーム全体の囲みと見た目（白背景＋影＋角丸） --- */
.form-reserve {
  background-color: #fff;
  padding: 2em;
  border-radius: 50px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  max-width: 860px;
  margin: 0 auto;
}

/* --- セレクトボックスの矢印カスタマイズ（ライラックの矢印） --- */
.form-reserve select {
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg viewBox='0 0 35 35' fill='%231e3a5f' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.8em center;
  background-position: right 0em top 85%;
  background-size: 35px 35px;
  padding-right: 2.5em;
}

/* --- フォーム項目（ラベルと入力欄のセット）のレイアウト --- */
.form-item {
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  margin-bottom: 1.8em;
}

.form-item label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.6em;
  color: #4a4a4a;
}

/* --- 必須／任意バッジのデザイン --- */
.required-tag,
.optional-tag {
  display: inline-block;
  font-size: 0.75em;
  padding: 0.4em 1.2em;
  border-radius: 999px;
  font-weight: 600;
  margin-right: 0.4em;
}

.required-tag {
  background: #1e3a5f;
  color: #fff;
}
.optional-tag {
  background: #ccc;
  color: #fff;
}

/* --- 入力欄全体のデザイン（テキスト／メール／電話／セレクト） --- */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  width: 100%;
  padding: 0.75em 1em;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1em;
  transition: border 0.3s;
}

/* --- フォーカス時の強調（ボーダーカラー変更） --- */
input:focus,
textarea:focus,
select:focus {
  border-color: #1e3a5f;
  outline: none;
}

textarea {
  min-height: 160px;
}

/* ========= チェック・ラジオ（カスタム） ========= */
.wpcf7-form-control.wpcf7-radio,
.wpcf7-form-control.wpcf7-checkbox {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.wpcf7-list-item {
  position: relative;
  padding-left: 2em;
  font-size: 1em;
}

/* --- チェックボックス／ラジオボタンのスタイル（カスタムデザイン） --- */
.wpcf7-list-item input[type="radio"],
.wpcf7-list-item input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 1.2em;
  height: 1.2em;
  appearance: none;
  border: 2px solid #1e3a5f;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.wpcf7-list-item input[type="radio"] {
  border-radius: 50%;
}

.wpcf7-list-item input[type="checkbox"]:checked,
.wpcf7-list-item input[type="radio"]:checked {
  background-color: #1e3a5f;
  background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23ffffff' stroke-width='2.5' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

/* --- カレンダーアイコンと位置調整 --- */
.date-wrapper {
  position: relative;
}

.calendar-icon {
　display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%231e3a5f" viewBox="0 0 24 24"%3E%3Cpath d="M7 10h2v2H7zM11 10h2v2h-2zM15 10h2v2h-2zM7 14h2v2H7zM11 14h2v2h-2zM15 14h2v2h-2z"/%3E%3Cpath d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  right: 1em;
  top: 0.7em;
  pointer-events: auto;
  cursor: pointer;
}

/* ▼入力欄に余白を追加してアイコンとかぶらないように */
input.datepicker-field {
  width: 100%;
  font-size: 16px;
  box-sizing: border-box;
  color: #333;
}


/* --- 送信ボタンのスタイルとホバー時の変化 --- */
/* ▼ ボタンの位置を中央寄せに */
.form-submit > p {
  text-align: center;
}

/* ▼ 送信ボタン */
.form-submit input[type="submit"] {
  background-color: #1e3a5f;
  color: #fff;
  font-weight: bold;
  padding: 0.8em 2em;
  border: none;
  border-radius: 999px;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.3s;
  display: inline-block;
  min-width: 240px;
  text-align: center;
}

/* ▼ ホバー */
.form-submit input[type="submit"]:hover {
  background-color: #345c91;
}

/* ▼ スピナー */
.form-submit .wpcf7-spinner {
  position: absolute;
  margin: 0;
  transform: none;
}

.form-note {
  font-size: 8px;
  color: #666;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  text-align: left;
  line-height: 1.6;
}

/* ========= PC表示：ラベル＋入力欄の横並び ========= */
@media screen and (min-width: 768px) {
  .form-reserve {
    padding-top: 3em;
  }
  .form-reserve p {
    display: flex;
    align-items: flex-start;
    gap: 1.5em;
  }

  .form-item {
    flex-direction: row;
    gap: 2.8em;
  }

  .form-reserve p label {
    width: 330px;
    flex-shrink: 0;
    margin-bottom: 0;
    padding-top: 0.4em;
    font-weight: 600;
  }

  .form-submit > p {
    display: block;
    text-align: center;
  }

  .wpcf7-form-control-wrap,
  .form-reserve p input,
  .form-reserve p select,
  .form-reserve p textarea {
    flex: 1;
    min-width: 0;
  }

  /* チェック・ラジオ（カスタム） */
  .wpcf7-list-item input[type="radio"],
  .wpcf7-list-item input[type="checkbox"] {
    top: 0.6em;
    left: -5px;
    width: 1.5em;
    height: 1.5em;
  }


  /* カレンダーアイコン */
  .calendar-icon {
    right: 2em;
  }
  .form-note {
    margin-top: 2.5em;
    font-size: 12px;
    line-height: 1.8;
  }
}

/* --- エラー時の表示（赤文字／枠の色など） --- */
.wpcf7-not-valid-tip {
  color: #d35d6e;
  font-size: 0.85em;
  margin-top: 0.4em;
  display: block;
  font-weight: 500;
}

/* ▼ エラーがあるinput要素に赤枠を追加 */
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid {
  border-color: #d35d6e;
  background-color: #fff8f8;
}

/* ▼ エラーメッセージの枠 */
.wpcf7-response-output {
  background-color: #f8f1ff;
  border: 2px solid #1e3a5f !important;  /* ← ここポイント */
  color: #4a4a4a;
  border-radius: 12px;
  padding: 1em 1.5em;
  text-align: center;
  font-size: 1em;
}

/**
 * フォーム flatpickr カレンダー
 */
function add_flatpickr_assets() {
  // Flatpickr本体・日本語ロケール・CSSを読み込む
  wp_enqueue_script('flatpickr', 'https://cdn.jsdelivr.net/npm/flatpickr', [], null, true);
  wp_enqueue_script('flatpickr-ja', 'https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js', ['flatpickr'], null, true);
  wp_enqueue_style('flatpickr-style', 'https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css');

  // JSの初期化処理（アイコンクリックも対応）
  wp_add_inline_script('flatpickr-ja', "
    document.addEventListener('DOMContentLoaded', function () {
      const fp1 = flatpickr(\"input[name='your-first-date']\", {
        locale: 'ja',
        dateFormat: 'Y-m-d'
      });

      const fp2 = flatpickr(\"input[name='your-second-date']\", {
        locale: 'ja',
        dateFormat: 'Y-m-d'
      });

      const icon1 = document.querySelector('.calendar-icon.icon1');
      const icon2 = document.querySelector('.calendar-icon.icon2');

      if (icon1) icon1.addEventListener('click', () => fp1.open());
      if (icon2) icon2.addEventListener('click', () => fp2.open());
    });
  ");
}
add_action('wp_enqueue_scripts', 'add_flatpickr_assets');