来店予約フォーム

Shopify用の来店予約フォームデモページです。店舗選択はカード形式のUIで視認性が高く、来店目的は複数選択に対応。希望日時は第1・第2希望まで入力でき、時間帯はボタン形式で直感的に選択できます。来店人数の指定、お名前・メールアドレス・電話番号の入力欄、自由記述のご要望欄も完備。実店舗を持つECサイトの予約受付業務を効率化し、顧客とのスムーズなコミュニケーションを実現します。HTML・CSSをコピーしてすぐにご利用いただけます。

<h1>来店予約</h1>
<p class="form-description">ご来店日時をご予約いただけます。<br>スタッフが丁寧にご案内いたします。</p>

<div class="info-box">
  <div class="info-box-title">営業時間</div>
  <div class="info-box-content">
    平日 10:00〜19:00 / 土日祝 10:00〜18:00<br>
    定休日：水曜日
  </div>
</div>

<form action="#" method="POST">
  
  <div class="form-group">
    <label class="required">ご来店店舗</label>
    <div class="store-cards">
      <label class="store-card">
        <input type="radio" name="store" value="shibuya" required>
        <div class="store-name">渋谷店</div>
        <div class="store-address">東京都渋谷区〇〇1-2-3</div>
      </label>
      <label class="store-card">
        <input type="radio" name="store" value="shinjuku">
        <div class="store-name">新宿店</div>
        <div class="store-address">東京都新宿区〇〇4-5-6</div>
      </label>
    </div>
  </div>

  <div class="form-group">
    <label class="required">ご来店目的</label>
    <div class="checkbox-group">
      <label class="checkbox-item">
        <input type="checkbox" name="purpose[]" value="purchase">
        <span>購入相談</span>
      </label>
      <label class="checkbox-item">
        <input type="checkbox" name="purpose[]" value="try">
        <span>試着・試用</span>
      </label>
      <label class="checkbox-item">
        <input type="checkbox" name="purpose[]" value="repair">
        <span>修理・メンテナンス</span>
      </label>
      <label class="checkbox-item">
        <input type="checkbox" name="purpose[]" value="pickup">
        <span>商品受け取り</span>
      </label>
      <label class="checkbox-item">
        <input type="checkbox" name="purpose[]" value="other">
        <span>その他</span>
      </label>
    </div>
  </div>

  <div class="form-row">
    <div class="form-group">
      <label for="date1" class="required">第1希望日</label>
      <input type="date" id="date1" name="date1" required>
    </div>
    <div class="form-group">
      <label class="required">第1希望時間</label>
      <div class="time-slots">
        <div class="time-slot">
          <input type="radio" name="time1" value="10:00" id="time1-1" required>
          <label for="time1-1">10:00</label>
        </div>
        <div class="time-slot">
          <input type="radio" name="time1" value="11:00" id="time1-2">
          <label for="time1-2">11:00</label>
        </div>
        <div class="time-slot">
          <input type="radio" name="time1" value="12:00" id="time1-3">
          <label for="time1-3">12:00</label>
        </div>
        <div class="time-slot">
          <input type="radio" name="time1" value="13:00" id="time1-4">
          <label for="time1-4">13:00</label>
        </div>
        <div class="time-slot">
          <input type="radio" name="time1" value="14:00" id="time1-5">
          <label for="time1-5">14:00</label>
        </div>
        <div class="time-slot">
          <input type="radio" name="time1" value="15:00" id="time1-6">
          <label for="time1-6">15:00</label>
        </div>
        <div class="time-slot">
          <input type="radio" name="time1" value="16:00" id="time1-7">
          <label for="time1-7">16:00</label>
        </div>
        <div class="time-slot">
          <input type="radio" name="time1" value="17:00" id="time1-8">
          <label for="time1-8">17:00</label>
        </div>
      </div>
    </div>
  </div>

  <div class="form-row">
    <div class="form-group">
      <label for="date2">第2希望日</label>
      <input type="date" id="date2" name="date2">
    </div>
    <div class="form-group">
      <label>第2希望時間</label>
      <div class="time-slots">
        <div class="time-slot">
          <input type="radio" name="time2" value="10:00" id="time2-1">
          <label for="time2-1">10:00</label>
        </div>
        <div class="time-slot">
          <input type="radio" name="time2" value="11:00" id="time2-2">
          <label for="time2-2">11:00</label>
        </div>
        <div class="time-slot">
          <input type="radio" name="time2" value="12:00" id="time2-3">
          <label for="time2-3">12:00</label>
        </div>
        <div class="time-slot">
          <input type="radio" name="time2" value="13:00" id="time2-4">
          <label for="time2-4">13:00</label>
        </div>
        <div class="time-slot">
          <input type="radio" name="time2" value="14:00" id="time2-5">
          <label for="time2-5">14:00</label>
        </div>
        <div class="time-slot">
          <input type="radio" name="time2" value="15:00" id="time2-6">
          <label for="time2-6">15:00</label>
        </div>
        <div class="time-slot">
          <input type="radio" name="time2" value="16:00" id="time2-7">
          <label for="time2-7">16:00</label>
        </div>
        <div class="time-slot">
          <input type="radio" name="time2" value="17:00" id="time2-8">
          <label for="time2-8">17:00</label>
        </div>
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="guests" class="required">ご来店人数</label>
    <select id="guests" name="guests" required style="max-width: 200px;">
      <option value="">選択</option>
      <option value="1">1名</option>
      <option value="2">2名</option>
      <option value="3">3名</option>
      <option value="4">4名以上</option>
    </select>
  </div>

  <div class="form-row">
    <div class="form-group">
      <label for="name" class="required">お名前</label>
      <input type="text" id="name" name="name" required autocomplete="name">
    </div>
    <div class="form-group">
      <label for="kana">フリガナ</label>
      <input type="text" id="kana" name="kana" placeholder="ヤマダ タロウ">
    </div>
  </div>

  <div class="form-row">
    <div class="form-group">
      <label for="email" class="required">メールアドレス</label>
      <input type="email" id="email" name="email" required autocomplete="email">
    </div>
    <div class="form-group">
      <label for="phone" class="required">電話番号</label>
      <input type="tel" id="phone" name="phone" required autocomplete="tel">
    </div>
  </div>

  <div class="form-group">
    <label for="message">ご要望・ご質問</label>
    <textarea id="message" name="message" placeholder="事前にお伝えしたいことがあればご記入ください"></textarea>
  </div>

  <button type="submit" class="btn-submit">予約する</button>
</form>

.form-description {
  color: #666;
  margin-bottom: 32px;
  font-size: 14px;
}

.form-group {
  margin-bottom: 24px;
}

label {
  display: block;
  font-weight: 500;
  margin-bottom: 8px;
  font-size: 14px;
}

.required::after {
  content: "*";
  color: #e53935;
  margin-left: 4px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
box-sizing: border-box;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

textarea {
  min-height: 100px;
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 540px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* チェックボックスグループ（カード型） */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 10px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  transition: border-color 0.2s, background 0.2s;
}

.checkbox-item:hover {
  border-color: #2563eb;
}

.checkbox-item:has(input:checked) {
  border-color: #2563eb;
  background: #eff6ff;
}

.checkbox-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #2563eb;
}

/* 店舗選択カード */
.store-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 540px) {
  .store-cards {
    grid-template-columns: 1fr;
  }
}

.store-card {
  position: relative;
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.store-card:hover {
  border-color: #2563eb;
}

.store-card:has(input:checked) {
  border-color: #2563eb;
  background: #eff6ff;
}

.store-card input[type="radio"] {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 18px;
  height: 18px;
  accent-color: #2563eb;
}

.store-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.store-address {
  font-size: 13px;
  color: #666;
}

/* 時間選択スロット */
.time-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

@media (max-width: 540px) {
  .time-slots {
    grid-template-columns: repeat(3, 1fr);
  }
}

.time-slot {
  position: relative;
}

.time-slot input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.time-slot label {
  display: block;
  text-align: center;
  padding: 10px 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 0;
}

.time-slot:hover label {
  border-color: #2563eb;
}

.time-slot input:checked + label {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}

/* 送信ボタン */
.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.btn-submit:hover {
  background: #1d4ed8;
}

.btn-submit:active {
  transform: translateY(1px);
}

/* インフォボックス */
.info-box {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}

.info-box-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  color: #0369a1;
}

.info-box-content {
  font-size: 13px;
  color: #0c4a6e;
}