来店予約フォーム

This is a demo page for a Shopify appointment booking form. The store selection uses a card-based UI for high visibility, and multiple visit purposes can be selected. You can enter a first and second preferred date and time, and the time slots can be intuitively selected using buttons. It also includes fields for the number of visitors, name, email address, phone number, and a free-text request field. This streamlines the appointment booking process for e-commerce sites with physical stores and facilitates smooth communication with customers. You can use it immediately by copying the HTML and 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;
}