Example Form

<script>
  var HOTEL_ID = 'YOUR_HOTEL_ID';
  var RECAPTCHA_V3_WEBSITE_KEY = 'YOUR_RECAPTCHA_V3_WEBSITE_KEY';
  var SUCCESS_MESSAGE = 'Vielen Dank für Ihre Anfrage!';
  var ERROR_MESSAGE = 'Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es etwas später erneut.'
</script>

<script src="https://js.hotelreservation.expert/hm.js"></script>
<form id="hm-booking-request-form">
  <!-- Persönliche Daten -->
  <div class="section">
    <h2>Persönliche Daten</h2>
    <div class="input-group">
      <label for="first_name">Vorname</label>
      <input type="text" id="first_name" name="first_name" data-hotelsoftware="guest.firstName">
    </div>
    <div class="input-group">
      <label for="last_name">Nachname <span class="required">*</span></label>
      <input type="text" id="last_name" name="last_name" data-hotelsoftware="guest.lastName" required>
    </div>
    <div class="input-group">
      <label for="email">E-Mail-Adresse <span class="required">*</span></label>
      <input type="email" id="email" name="email" data-hotelsoftware="guest.eMailAddress" required>
    </div>
    <div class="input-group">
      <label for="phone">Telefon</label>
      <input type="tel" id="phone" name="phone" data-hotelsoftware="guest.phoneNumber">
    </div>
  </div>
  <!-- Unterkunftsdaten -->
  <div class="section">
    <h2>Unterkunftsdaten</h2>
    <div class="input-group">
      <label for="num_rooms">Anzahl der Zimmer <span class="required">*</span></label>
      <input type="number" id="num_rooms" name="num_rooms" min="1" max="4" value="1" data-hotelsoftware="inquiry[0].roomCount" required>
    </div>
    <div class="input-group">
      <label for="room_type">Zimmertyp <span class="required">*</span></label>
      <select id="room_type" name="room_type" data-hotelsoftware="inquiry[0].roomTypeName" required>
        <option value="Einzelzimmer">Einzelzimmer</option>
        <option value="Doppelzimmer" selected>Doppelzimmer</option>
      </select>
    </div>
    <div class="input-group">
      <label for="arrival_date">Ankunftsdatum <span class="required">*</span></label>
      <input type="text" id="arrival_date" name="arrival_date" data-hotelsoftware="arrivalDate" required>
    </div>
    <div class="input-group">
      <label for="departure_date">Abreisedatum <span class="required">*</span></label>
      <input type="text" id="departure_date" name="departure_date" data-hotelsoftware="departureDate" required>
    </div>
    <div class="input-group">
      <label for="num_adults">Anzahl der Erwachsenen <span class="required">*</span></label>
      <input type="number" id="num_adults" name="num_adults" min="0" value="2" data-hotelsoftware="inquiry[0].numAdults" required>
    </div>
    <div class="input-group">
      <label for="num_children">Anzahl der Kinder</label>
      <input type="number" id="num_children" name="num_children" data-hotelsoftware="inquiry[0].numChildren" min="0" value="0">
    </div>
    <div class="input-group">
      <label for="child_ages">Alter der Kinder</label>
      <input type="text" id="child_ages" name="child_ages" data-hotelsoftware="inquiry[0].childAges">
    </div>
  </div>
  <!-- Zusätzliche Informationen -->
  <div class="section">
    <h2>Zusätzliche Informationen</h2>
    <div class="input-group">
      <label for="additional_requests">Kommentare/Wünsche</label>
      <textarea id="additional_requests" name="additional_requests" data-hotelsoftware="message"></textarea>
    </div>
  </div>
  <!-- Zustimmungskästchen -->
  <div class="section checkboxes">
    <input type="checkbox" id="terms_conditions" name="terms_conditions" required>
    <label for="terms_conditions">Ich habe die <a href="#" target="_blank">Allgemeinen Geschäftsbedingungen</a>
      gelesen und verstanden.</label>
    <input type="checkbox" id="data_protection" name="data_protection" required>
    <label for="data_protection">Ich stimme den <a href="#" target="_blank">Datenschutzbestimmungen</a> zu.</label>
  </div>
  <button type="submit">Anfrage senden</button>
</form>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>
  Hotelsoftware.Inquiry.init({
    autoBindSubmitEvent: false,
    hotelId: HOTEL_ID,
    dateFormat: "dd.MM.yyyy",
    onSuccess: function() {
      alert(SUCCESS_MESSAGE);
      document.getElementById("hm-booking-request-form").reset();
    },
    onError: function() {
      alert(ERROR_MESSAGE);
    },
    reCaptcha: {
      enabled: true,
      siteKey: RECAPTCHA_V3_WEBSITE_KEY,
    }
  });
  document
    .getElementById("hm-booking-request-form")
    .addEventListener("submit", function(event) {
      event.preventDefault();
      if (this.checkValidity()) {
        Hotelsoftware.Inquiry.processSubmit(event);
      }
    });
  var arrivalPicker = flatpickr("#arrival_date", {
    dateFormat: "d.m.Y",
    minDate: "today",
    onChange: function(selectedDates, dateStr, instance) {
      let minDate = new Date(selectedDates[0]);
      minDate.setDate(minDate.getDate() + 1);
      departurePicker.set("minDate", minDate);
      departurePicker.setDate(minDate);
    }
  });
  let minDepartureDate = new Date();
  minDepartureDate.setDate(minDepartureDate.getDate() + 1);
  var departurePicker = flatpickr("#departure_date", {
    dateFormat: "d.m.Y",
    minDate: minDepartureDate
  });
</script>