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

Adding a Reservation Search Bar to a WordPress (Elementor) Website

This guide explains how to embed the ReservationKey search bar into a WordPress website built with Elementor. Because of how Elementor handles code, the process requires splitting the HTML, CSS, and JavaScript into separate parts. Once set up, the search bar allows guests to select check-in and check-out dates, enter the number of guests, and go directly to your ReservationKey booking page with the fields pre-filled.

Overview

The ReservationKey search widget normally works by copying a single block of HTML that includes both the layout and JavaScript functionality. However, in WordPress with Elementor, the built-in code widgets sometimes block inline JavaScript (such as onclick events). To make it work, we need to separate the code into three pieces:

HTML – for the visible search form.
CSS – for layout and colors (placed in Elementor’s “Custom CSS” section).
JavaScript – for handling the date picker and button clicks (added through a header/footer plugin).

Step 1: Get the Search Widget Code from ReservationKey

In ReservationKey, go to Website ? Reservation Pages.
Click into the reservation page you want to use.
Scroll down to the “Linking to This Page” section.
Locate the Search Box section. You’ll see a preview and the full code block.
Copy the code provided there. It includes HTML, CSS, and JavaScript all in one block.

Normally, you can paste this code directly into an HTML block on a website. But for Elementor, we’ll need to separate it into different parts.

Step 2: Add the HTML to an Elementor Page

Edit your page with Elementor.
Drag an HTML widget to where you want the search bar to appear (e.g., the top of your homepage or sidebar).
Paste in only the HTML portion of the ReservationKey code.

If the original code includes onclick attributes (like onclick="searchDates()"), remove those and replace them with a simple structure for the buttons and inputs. These interactions will be handled later by JavaScript.

Example HTML Snippet:

<div id="rk-search">
  <label>Check-in</label>
  <input type="text" id="checkin">
  <label>Check-out</label>
  <input type="text" id="checkout">
  <label>Guests</label>
  <select id="numguests">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <button id="rk-search-btn">Search</button>
</div>

Step 3: Add Custom CSS in Elementor

While editing the HTML widget, click the Advanced tab.
Open the Custom CSS section.
Paste the CSS that controls the layout, date picker, and colors.

The example below shows common CSS adjustments used for spacing and responsiveness:

/* ReservationKey Search Bar Styling */
#rk-search {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
#rk-search input,
#rk-search select {
  padding: 6px 10px;
  font-size: 14px;
}
#rk-search button {
  background-color: #4a8bb5;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
#rk-search button:hover {
  background-color: #355f85;
}

If the guest dropdown looks too wide or misaligned, you can adjust its width in the CSS (for example, width: 80px;).

Step 4: Add JavaScript Using a Header/Footer Plugin

Since Elementor doesn’t allow inline JavaScript inside HTML widgets, you’ll need to use a plugin such as “Header, Footer & Blocks for Elementor” or “Insert Headers and Footers”.

In your WordPress dashboard, go to Plugins ? Add New.
Search for and install a plugin that lets you add custom JavaScript to the site header or footer.
Open the plugin’s settings and create a new script block (for example, “ReservationKey Search JS”).
Paste your custom JavaScript there and save.

Example JavaScript:

<script>
document.addEventListener('DOMContentLoaded', function() {
  const searchBtn = document.getElementById('rk-search-btn');
  if (searchBtn) {
    searchBtn.addEventListener('click', function() {
      const checkin = document.getElementById('checkin').value;
      const checkout = document.getElementById('checkout').value;
      const guests = document.getElementById('numguests').value;
      const baseUrl = 'https://youraccount.reservationkey.com/availability.asp';
      const url = baseUrl + '?startdate=' + checkin + '&enddate=' + checkout + '&numguests=' + guests;
      window.location.href = url;
    });
  }
});
</script>

This code listens for clicks on the search button, gathers the date and guest values, and redirects users to your ReservationKey booking page with all details pre-filled.

Date Picker Integration

If your widget includes a date picker, make sure to also include the JavaScript and CSS for it. Add them in the same header/footer section:

<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script>
  $(function() {
    $("#checkin, #checkout").datepicker({ dateFormat: "yy-mm-dd" });
  });
</script>

Step 5: Test and Publish

Click Publish in Elementor to save the HTML and CSS.
Save your header/footer JavaScript changes in the plugin.
Refresh your website and test the form:
- Select check-in and check-out dates.
- Enter the number of guests.
- Click Search — it should redirect you to your ReservationKey booking page with the selected data pre-filled.

Notes and Tips

You can only use one ReservationKey search bar per page without additional customization.
The JavaScript can be applied sitewide — no need to duplicate it for each page.
Use browser developer tools (F12) to inspect styles and fix alignment or color issues.
All code sections (HTML, CSS, JS) can be reused for other pages — just update the ReservationKey URL if needed.

Summary

To embed the ReservationKey search widget in a WordPress + Elementor site:

Copy the code from the ReservationKey Website ? Reservation Pages section.
Paste the HTML portion into an Elementor HTML widget.
Add the CSS under the Advanced ? Custom CSS section.
Insert the JavaScript separately using a header/footer plugin.

By splitting these three components, you can achieve a fully functional and styled search bar that integrates smoothly with Elementor’s system while maintaining ReservationKey’s booking functionality.

Tip: You can reuse the same JavaScript across all pages. Just copy the HTML widget to any section where you want a search bar to appear.

Video Library