Example Form

2min
Please be aware that this is just an exampled. It is not supposed to be used in a production environment. You may use and extend this example at your own risk. We do not provide any support for the sample code. It's only intended to help you get a better understanding of how it is used.
Below find an example form (use at own risk, no warranty or whatsoever):
HTML
CSS
<script>
  var HOTEL_ID = 'YOUR_HOTEL_ID';
  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);
    }
  });
  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>
<script>
  var HOTEL_ID = 'YOUR_HOTEL_ID';
  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);
    }
  });
  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>
﻿
If you should decide to re-use this example, please make sure to at least adjust the following:
Hotel ID
Business Terms URL
Privacy Policy URL
Room Type Options (replace with a list of your room types)
Child Inputs (remove if you do not accommodate children)
In addition, you might also want to adjust the following:
redirect to a different page instead of just showing a success alert dialog
add custom tracking codes (like Google Analytics conversion tracking)
translate labels for multi-language websites
adjust required fields (in the hotel software, at least a name and an email address are required)
﻿
Inquiry Import
Availability Calendar