---
title: Example Form
slug: example-form
createdAt: 2023-07-19T11:26:47.037Z
---

:::hint{type="warning"}
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):

:::CodeblockTabs
HTML

```html
<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>
```

CSS

```css
#hm-booking-request-form {
  padding: 20px;
  font-size: 12px;
}
#hm-booking-request-form .section {
  margin-bottom: 20px;
}
#hm-booking-request-form input,
#hm-booking-request-form select,
#hm-booking-request-form textarea {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
}
#hm-booking-request-form button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}
#hm-booking-request-form button:hover {
  background-color: #0056b3;
}
#hm-booking-request-form .input-group {
  position: relative;
  margin-bottom: 20px;
}
#hm-booking-request-form .input-group label {
  display: block;
  margin-bottom: 5px;
  color: #888;
}
#hm-booking-request-form .input-group span.required {
  color: red;
}
#hm-booking-request-form .section.checkboxes {
  display: grid;
  grid-template-columns: min-content auto;
  grid-gap: 10px;
}
```
:::

:::hint{type="warning"}
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&#x20;**(replace with a list of your room types)
- **Child Inputs&#x20;**(remove if you do not accommodate children)
:::

:::hint{type="info"}
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)
:::