Adding Search Bar to WordPress / Elementor With ChatGPT's Help

A common request is to add a search bar / widget to a user's website, which allows guests to enter dates and see available rooms. Normally this is straightforward - just copy the code we provide and paste it into your website. Here, it was a bit tricker since Elementor and WordPress blocked custom Javascript from being directly embedded into the HTML widget. So we had to break our code into three sections.

‍

Watch our video or continue reading to learn how to do this.

‍

Create a HTML widget where you want the search box to appear on the webpage.

1. HTML - add this code directly to the HTML field

<div class="sb">
  
  <input type="text" placeholder="Check In" name="checkin" id="checkin" maxlength="20">
  
  
  <input type="text" placeholder="Check Out" name="checkout" id="checkout" maxlength="20">
  
  Guests
  <select name="numguests" id="numguests" style="width:50px !important;min-width:50px;">
    <option value="1">1</option>
    <option value="2" selected>2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>

  <button id="rk-search-button">Check Availability!</button>
</div>

2. ADVANCED - add Custom CSS

‍

1  td {
2    line-height: 15px;
3  }
4  .sb {
5    font-size: 14px;
6    line-height:50px;
7    width:100%;
8    max-width:570px;
9    margin:auto;
10  }
11  .sb select {
12    margin-right: 10px;
13    height: 36px !important;
14    padding: 5px 9px !important;
15    border: 1px solid #c2c2c2 !important;
16    background-color: #fff !important;
17    font-size: 14px !important;
18  }
19  .sb input[type="text"] {
20    margin-right: 10px;
21    cursor: pointer !important;
22    width: 130px !important;
23    padding-left: 30px !important;
24    background-image: url(https://v2.reservationkey.com/i/cal.gif) !important;
25    background-repeat: no-repeat !important;
26    background-position: 7px !important;
27    box-sizing: border-box !important;
28    height: 36px !important;
29    border: 1px solid #c2c2c2 !important;
30    background-color: #fff !important;
31    outline: 0 !important;
32    font-size: 14px !important;
33  }
34  .sb button {
35    background-color: #ff0000 !important;
36    color: #fff !important;
37    border: 0 none !important;
38    width: 160px !important;
39    padding: 9px 15px !important;
40    line-height: 18px !important;
41    font-weight: 700 !important;
42    cursor: pointer !important;
43    border-radius: 4px;
44  }
45  
46  /* -------- date picker calendars -------- */
47.dpTable {
48  background-color: #cddad1 !important;
49  font-size: 1.1em !important;
50  border: 6px solid #cddad1 !important;
51  padding: 0px !important;
52  border-radius: 10px !important;
53}
54
55.dpTable td {padding:10px !important;text-align: center !important;}
56
57.dpTitleTR {
58  background-color: #cddad1 !important;
59  color: black !important;
60}
61
62.dpTitleText {
63  color: black !important;
64  font-weight: bold !important;
65  font-size: 1.1em !important;
66}
67
68.dpDayTD {
69  color: black !important;
70  background-color: #cddad1 !important;
71  border: 0px !important;
72  padding: 3px !important;
73}
74
75.dpTR {
76  background-color: #fff !important;
77}
78
79.dpTD {
80  padding: 10px !important;
81  font-size: 14px !important;
82  font-weight: bold !important;
83  border: 4px solid #fff !important;
84}
85
86.dpTDHover {
87  color: yellow !important;
88}
89
90.dpButton {
91  padding: 4px 8px !important;
92  background-color: #e6f4ea !important;
93  font-size: 0.96em !important;
94  color: black !important;
95  border: 1px solid black !important;
96  margin: 4px !important;
97  border-radius: 8px !important;
98  width: 50px !important;
99  cursor: pointer !important;
100}
101
102.dpButton:hover {
103  background-color: black !important;
104  color: white !important;
105}
106
107.dp td {
108  line-height: 15px !important;
109}
110
111.dpTodayButtonTR {
112  display: none !important;
113}
114
115.dpDayHighlightTD {
116  background-color: #cddad1 !important;
117}

‍

3. In WordPress create custom code in the HEADER - change the URL to point to your reservation page

‍

<script src="https://v2.reservationkey.com/inc/dpicker.js"></script>
<script src="https://v2.reservationkey.com/inc/jsdate.js"></script>
<link rel="stylesheet" href="https://v2.reservationkey.com/inc/dpicker.css" type="text/css" />
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Attach date pickers
    const checkinInput = document.getElementById('checkin');
    const checkoutInput = document.getElementById('checkout');
    const guestsSelect = document.getElementById('numguests');
    const searchButton = document.getElementById('rk-search-button');

    if (checkinInput) {
      checkinInput.addEventListener('click', function () {
        displayDatePicker('checkin', false, 'mdy', '/');
      });
    }

    if (checkoutInput) {
      checkoutInput.addEventListener('click', function () {
        displayDatePicker('checkout', false, 'mdy', '/');
      });
    }

    if (searchButton) {
      searchButton.addEventListener('click', function () {
        const checkin = checkinInput.value.replace(/\//g, '.');
        const checkout = checkoutInput.value.replace(/\//g, '.');
        const guests = guestsSelect.value;
        const url = `https://v2.reservationkey.com/ArrowheadManor/ResCCpmt/s|${checkin}|${checkout}|${guests}`;
        window.location.href = url;
      });
    }
  });
	</script>

‍

Be sure to change the URL to your own ReservationKey URL.

‍

‍