Skip to main content

Customize Search Form

This page lets you choose which fields to display, their order, and other layout options. As you make changes, the corresponding embed code is automatically updated below the form.

Configuration Options​

Field Options​

This section provides a table to customize the search fields.

  • Field: The name of the search field (e.g., City, Bedrooms, Price).
  • Visible?: A radio button to determine if the field should be shown on the search form.
  • Sort: A handle that allows you to click and drag to reorder the fields. This feature uses an AJAX call to update the field order without a full page reload.

Layout Options​

These options control the overall appearance of the search form.

  • Layout: Choose between a Vertical or Horizontal layout for the form.
  • Hide Labels: Select whether to hide the text labels for the form fields.
  • Range Search: Enable or disable the range search functionality, which allows users to specify a minimum and maximum value for numerical fields like price or square footage.
  • Range Side By Side: If range search is enabled, this option controls whether the minimum and m;aximum input fields are displayed next to each other.

Embed Code​

After configuring the form, the updated embed code is displayed in a text area at the bottom of the page. This code is what you will copy and paste into your website's HTML. The type of code generated depends on your site's platform, either HTML Embed for standalone sites or a WordPress Short Code for WordPress integrations.

Callback Function Name Option​

For advanced users, there's an option to specify a JavaScript callback function as a string in the callback-function-name attribute. This function will be called whenever a search is performed, allowing for custom handling of search results or additional actions based on user input. The format of the callback function should be:

function callbackFunctionName(callbackData) {
    let city=callbackData.formData.get("city");
    if(city && city === "New York") {
        // Custom logic for New York searches
        callbackData.resultsLink="https://www.example.com/new-york-listings/";
        return false; // Prevent default behavior
    }
    return true; // Proceed with default behavior
}