When designing your real estate website, having areas where a user can initiate a search of MLS listings quickly can be essential for a good end-user experience of searching for homes online. The SimplyRETS IDX plugin has a built-in short-code, [sr_search_form], you can use to add a search form to any page, post, or widget.
By default, the [sr_search_form] output has several options for users to configure their search. There is a drop-down for property type, minimum and maximum inputs for price, bedrooms, and bathroom, and a “keyword” input. This main “keyword” input accepts a wide variety of possible values and searches over multiple fields to find listings that match the users search.
From a user experience perspective, on some parts of a site, like in a sidebar or header, it can make sense to show a more compact search form that only includes the keyword input and a submit button. This can be easily accomplished with a couple lines of CSS (psst here’s how we recommend adding custom CSS):
/** Hide all options except keyword input */
.sr-minmax-filters + .sr-minmax-filters, #sr-search-ptype,.sr-sort-wrapper {
display: none;
}
/** Make keyword input full length */
#sr-search-keywords {
width: 100%;
}Using the CSS above will output a search form that looks like this:
This can be added to more places on your website to allow your users to search your MLS listings quickly and easily.