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 maximum 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 an HTML Embed for standalone and static (CDN) sites or a WordPress Short Code for WordPress integrations.

How the Embed Code Controls the Form

The search form on your page is built from the attributes of its embed code, so copy the code exactly as it is generated. The most important attribute is data-field-order: the form shows only the fields listed in it, in that order. If data-field-order is missing or empty, the form shows just the Search button and no search fields.

<div class="peakidxSimpleSearchForm" data-name="search" data-callback-function-name=""
     data-field-order="city,type,bedrooms,bathrooms,price" data-hide-labels="false"
     data-layout="vertical" data-range-search="false" data-range-side-by-side="false"></div>

Attribute	Description
data-field-order	A comma-separated list of the field names to show, in the order to show them. Use the names in the table below.
data-hide-labels	true hides the text label above each field.
data-layout	vertical or horizontal.
data-range-search	true lets visitors enter a minimum and maximum for numeric fields.
data-range-side-by-side	true shows the minimum and maximum fields next to each other when range search is on.
data-callback-function-name	Optional. The name of a JavaScript function to call when a search is made (see below).

The fields you can list depend on your data feed: a field is only offered when your listings have values for it. The names are:

Name	Label on this page
city	City
type	Type
bedrooms	Bedrooms
bathrooms	Bathrooms
price	Price
frontage	Frontage
view	View
subType	Sub Type
style	Style
sqft	Square Feet
acreage	Acreage
yearBuilt	Year Built
parking	Parking
listStatus	List Status
status	Status
condition	Condition
county	County

The labels shown on your page can be shorter (for example Beds and Baths). The easiest way to build a valid list is to tick the fields above and copy the generated code, instead of writing data-field-order by hand.

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
}