Custom Search form

Background

If you want to build a custom search form.

Implementation

It’s very easy to build a custom search form and make it submit to booking search, below are two examples of HTML forms with possible options.

  <form action="https://your-staylists-url/" method="get">
    <label for="start_date">Start Date:</label>
    <input type="text" name="start_date">

    <label for="departure_date">Departure Date:</label>
    <input type="text" name="departure_date">

    <label for="occupancies_attributes[adults]">Number of adults:</label>
    <!-- Or you can just name it guests -->
    <select name="occupancies_attributes[adults]">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>

    <label for="occupancies_attributes[children]">Number of children:</label>
    <select name="occupancies_attributes[children]">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>

    <label for="occupancies_attributes[infants]">Number of infants:</label>
    <select name="occupancies_attributes[infants]">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>

    <label for="occupancies_attributes[dogs]">Number of dogs:</label>
    <select name="occupancies_attributes[dogs]">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>

    <input type="submit" value="Search Availability">
  </form>

  <form action="https://your-staylists-url/" method="get">
    <label for="start_date">Start Date:</label>
    <input type="text" name="start_date">

    <label for="departure_date">Departure Date:</label>
    <input type="text" name="departure_date">

    <label for="adults">Number of adults:</label>
    <!-- Or you can just name it guests -->
    <select name="adults">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>

    <label for="children">Number of children:</label>
    <select name="children">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>

    <label for="infants">Number of infants:</label>
    <select name="infants">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>

    <label for="dogs">Number of dogs:</label>
    <select name="dogs">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>

    <input type="submit" value="Search Availability">
  </form>