お問い合わせフォームサンプル

<div class="contact-form">
  <div class="form-header">
    <h2>お問い合わせ</h2>
    <p>ご質問やご要望がございましたら、お気軽にお問い合わせください。</p>
  </div>

  <form id="contactForm">
    <div class="form-group">
      <label for="name" class="form-label">
        お名前 <span class="required">*</span>
      </label>
      <input type="text" class="form-control" id="name" name="name" required maxlength="50">
    </div>

    <div class="form-group">
      <label for="email" class="form-label">
        メールアドレス <span class="required">*</span>
      </label>
      <input type="email" class="form-control" id="email" name="email" required maxlength="100">
    </div>

    <div class="form-group">
      <label for="subject" class="form-label">
        件名 <span class="required">*</span>
      </label>
      <input type="text" class="form-control" id="subject" name="subject" required maxlength="100">
    </div>

    <div class="form-group">
      <label for="category" class="form-label">
        お問い合わせ種別
      </label>
      <select class="form-control" id="category" name="category">
        <option value="">選択してください</option>
        <option value="general">一般的なお問い合わせ</option>
        <option value="technical">技術的な質問</option>
        <option value="business">ビジネスに関するお問い合わせ</option>
        <option value="bug">バグ報告</option>
        <option value="feature">機能要望</option>
        <option value="other">その他</option>
      </select>
    </div>

    <div class="form-group">
      <label for="message" class="form-label">
        メッセージ <span class="required">*</span>
      </label>
      <textarea class="form-control" id="message" name="message" rows="5" required maxlength="1000"></textarea>
    </div>

    <button type="submit" class="btn-submit">
      送信する
    </button>
  </form>
</div>

/* お問い合わせフォームのスタイル */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #333;
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  background-color: #fff;
  box-sizing: border-box;
}

.form-control:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

.btn-submit {
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  border: none;
  padding: 0.875rem 2rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

.btn-submit:hover {
  background: linear-gradient(135deg, #0056b3, #004085);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

.required {
  color: #dc3545;
}

.form-header {
  text-align: center;
  margin-bottom: 2rem;
}

.form-header h2 {
  color: #333;
  margin-bottom: 0.5rem;
}

.form-header p {
  color: #666;
  margin: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .contact-form {
    margin: 1rem;
    padding: 1.5rem;
  }
  
  .form-control {
    padding: 0.625rem 0.875rem;
  }
  
  .btn-submit {
    padding: 0.75rem 1.5rem;
  }
}