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.
<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>
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}
<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.