1. Home
  2. Knowledge Base
  3. Widgets and Plugin
  4. Widget Reference
  5. Quick Search Widget
Searching...

Quick Search Widget

Contents

The Quick Search displays a simpler, smaller search panel compared to the the standard Search Widget.

The Quick Search widget is mobile responsive and will expand to fill any container / space made available in your website page design.

The Quick Search widget only supports SOME criteria and search fields. These are listed in this article. If you wish to pre-set a search form with multiple MLS search criteria that are not supported by the Quick Search widget, you should use the Search Widget instead.

Size

  • Minimum width: Designed for mobile
  • Maximum width: Unlimited

Background

  • A background color / transparency can be applied with the filter option below.

Highlights

  • Multiple versions provide choices for layout and fields
  • Manage background and transparency
  • Other customization options

NOTE
With the Quick Search widget - the Area search field will only allow ONE value to be selected.

Use It Now

Use the code samples below to add the Quick Search widget to your web page.
If you want to make further customizations, the scroll down to see the available options!

NOTE!

  • Colors will come from your website's Widget Theme.
  • The 'Search nearby' option is only shown if your site is HTTPS

1. Good for Sidebar

This version has a lot of fields and so works well when added to a vertical space such as a sidebar.

Vertically stacked - great for a sidebar.

Copy the following code to your website side bar.

<div id="MBBv3_QuickSearch" filter="advancedSearch:display"></div>
[mbb_widget id="MBBv3_QuickSearch" filter="advancedSearch:display"]

2. Good for a Home Page or Landing Page

This version is designed to be a single row of fields on a desktop, but also works well on a mobile device.

Simple quick search form good for a home page.

Copy the following code to your website home page or landing page:

<div id="MBBv3_QuickSearch" filter="formType:simple1"></div>
[mbb_widget id="MBBv3_QuickSearch" filter="formType:simple1"]

3. Single field - Good for a Home Page or Landing Page

This version is designed to be a single fields on a desktop, but also works well on a mobile device.

Single field search form - good for a home page.

Copy the following code to your website home page or landing page:

<div id="MBBv3_QuickSearch" filter="formType:simple2"></div>
[mbb_widget id="MBBv3_QuickSearch" filter="formType:simple2"]

Parameters

  • id="MBBv3_QuickSearch"
  • formType: {type} (optional)
  • + other options (see Advanced Options below)

How to Use

Choose the form type, copy the widget code (shown below) and paste into your web page.

Form Types

See the 3 types on this Quick Search Widget Example page:

1. default (vertical orientation)

The default Quick Search form has a vertical layout as shown below, which makes it suitable for web page "sidebars". If you embed the the widget code with no additional filter options then this will be displayed.

Vertically stacked - great for a sidebar.

Widget Code
The default Quick Search Widget can be displayed using the following widget code:

<div id="MBBv3_QuickSearch"></div>
[mbb_widget id="MBBv3_QuickSearch"]

Customization Options

There are currently no additional options provided for this version.

2. simple1 (multiple-fields search form)

This mobile responsive search form will fit into any space on your website and will stretch up to 1200px wide. As the form width reduces, the form fields will break into multiple rows.
The image below shows how the form appears at around 900px wide.

Simple quick search form good for a home page.

The following search fields are provided:

  • area combination
  • price picker
  • beds
  • baths
  • property type (hidden or can be shown)

Widget Code
Use the following code to display the "simple1" quick search form.

<div id="MBBv3_QuickSearch" filter="formType:simple1"></div>
[mbb_widget id="MBBv3_QuickSearch" filter="formType:simple1"]
Customization Options
  • Change the background and border color and transparency
  • Preset the property_type (or display the property_type selection field)
  • Join all the form fields together , i.e. no spacing between fields
  • Show the 'Advanced Search Form' link

3. simple2 (single field search form)

This mobile responsive search form will fit into any space on your website and will stretch up to 1200px wide.
The image below shows how the form appears at around 900px wide.

Single field search form - good for a home page.

The following search fields are provided:

  • area combination
  • property type (hidden or can be shown)

Widget Code
Use the following code to display the "simple2" quick search form.

<div id="MBBv3_QuickSearch" filter="formType:simple2"></div>
[mbb_widget id="MBBv3_QuickSearch" filter="formType:simple2"]
Customization Options
  • Change the background and border color and transparency
  • Preset the property_type (the property_type selection field cannot be displayed)
  • Add spacing between fields (default is no spacing)
  • Show the 'Advanced Search Form' link

4. multimls (has a MLS switcher)

This mobile responsive search form will fit into any space on your website and will stretch up to 1200px wide.
The image below shows how the form appears at around 900px wide.

This form is designed for accounts that have multiple MLS feeds as it shows a selector to allow the user to change the MLS search area.

The following search fields are provided:

  • city or area combination 
  • price picker
  • beds
  • baths
  • property type (hidden or can be shown)

Widget Code
Use the following code to display the "multimls" quick search form.

<div id="MBBv3_QuickSearch" filter="formType:multimls"></div>
[mbb_widget id="MBBv3_QuickSearch" filter="formType:multimls"]
Customization Options
  • Change the background and border color and transparency
  • Search from a city list or the area combination field (city, neighborhood, zip)

Examples

Example-1: To make simple1 only search residential AND the background and border completely transparent, we would add these filter options:
**IMPORTANT!! Make sure you get the correct value for property_type from the Widget Wizard as these can vary by MLS**
propertyType:residential+formBackground:0,0,0,0+formBorder:0,0,0,0

<div id="MBBv3_QuickSearch" filter="formType:simple1+property_type:residential+formBackground:0,0,0,0+formBorder:0,0,0,0"></div>
[mbb_widget id="MBBv3_QuickSearch" filter="formType:simple1+property_type:residential+formBackground:0,0,0,0+formBorder:0,0,0,0"]

Example-2: To show the 'Advanced Search' link on the simple2 form, we would add this filter option: +advancedSearch:display

<div id="MBBv3_QuickSearch" filter="formType:simple2+advancedSearch:display"></div>
[mbb_widget id="MBBv3_QuickSearch" filter="formType:simple2+advancedSearch:display"]

Advanced Options

  • If you want to modify the background and border colors and transparency - then use the various styling filter options
  • If you want to include the option to allow choice of property type then use the 'property_type:display' filter described below
  • If your form is only to be used to search one type of property (e.g. residential) then set this value using the 'property_type:{value}' filter described below.
  • Any of the fields in the Quick Search widget may be set as filters
  • The following MLS fields are supported as additional filter options:
    • county (e.g. +county:jefferson)
    • state (e.g. +state:va)

Form name (OPTIONAL)

  • formType:{ XX } (If not specified, will show the default quick search form)
    Must be a valid form type name available from our library
    e.g. 'formType:XX'

Filter options for Search (OPTIONAL)

  • mls_id:{ value }
    To override the website default mls_id if your account has multiple MLS feeds,
    e.g. 'mls_id:tx492'
  • property_type:{ display | nodisplay | {value} }
    Default action: Field is not displayed and will search all types.
    • 'display' will show the option field on the form,
      e.g. 'property_type:display'
    • {value} will set the property type as a hidden value, i.e. to just search rentals, or residential etc,
      e.g. 'property_type:residential'
      **IMPORTANT!! Make sure you get the correct value for property_type from the Widget Wizard as these can vary by MLS**
  • help:{ display | nodisplay }
    Default action: Not displayed.
    Will display instructions and the array of filter values when the widget loads.
    e.g. 'help:display'
  • advancedSearch:{ display | nodisplay }
    Default action: Not displayed.
    Will display a link to display the 'Advanced Search' form
    e.g. 'advancedSearch:display'

Filter options for Styling

  • formFontSize:{ value }
    Default action: Size will be 18px.
    Can be any valid font size value,
    e.g. 'formFontSize:1.5em'
  • formBackground:{ rgba value }
    Default action: Set background to be: '204,204,204,0.3' (pale translucent grey)
    Form background as 'rgba',
    e.g. 'formBackground:204,204,204,0.2'
  • formBorder:{ rgba value }
    Default action: Set border to be: '204,204,204,0.35' (pale grey)
    Form border as 'rgba',
    e.g. 'formBorder:204,204,204,0.25'
  • formFieldSpacing:{ value }
    Value must be specified as {integer+px}, e.g 0px, 2px, 16px, 20px etc.
    A value of just "10" is invalid.
    Default action: Set padding to be '8px' - spacing between fields.
    NOTE: Setting to '0' will remove all inter-field spacing and join the fields up.
    e.g. 'formFieldSpacing:0px'
    (Previously this filter was called "formFieldPadding")
Updated on January 4, 2024
Tagged:

Was this article helpful?

Yes No

Related Articles

Need Support?
Can't find the answer you're looking for?
Contact Support
Buying Buddy Support