Quick Search Widget

The Quick Search widget displays a search form with a smaller set of options compared to the standard Search Widget.

Customization options include showing extra fields, presetting hidden values and setting a background style.

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

NOTES
With the Quick Search widget - the Area search field will only allow ONE value to be selected.
The 'Search nearby' option is only shown if your site is HTTPS

Layout and Size

• Uses container queries for dynamic adaptation to any placement context
• More versatile than standard "mobile responsive" approaches (adapts to container, not just screen size)
• Ensures consistent user experience across all digital environments
• Minimum width: Designed for mobile
• Maximum width: 1200px

Variations

There are multiple versions of the Quick Search widget. Use the Wizard to select and customize each.

• Standard
• Simple
• Area Only
• Multiple MLS
• Open House

Parameters

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

Dark Background Options

Quick search forms are often displayed on top of a photo or dark background.
In such cases, the color of labels and other text may not contrast very well with the darker background.
Use the following options that you will find in the Wizard, to help make the text more visible:

• Add a background to the Quick Search form.
• Set the "Label and text color" to contrast with the background.

Standard Quick Search

The standard Quick Search form has a layout as shown.
If you embed the the widget code with no additional filter options then this will be displayed.

The following search fields are displayed:

• Area selector
• Price picker
• Beds
• Baths
• MLS Number
• Options for: Photos, Recently Added, Reduced Price

Widget Code

Use the Wizard to set options and add widgets.

<div id="MBBv3_QuickSearch"></div>

[mbb_widget id="MBBv3_QuickSearch"]

Simple Quick Search

• formType:simple1

This form is very similar to the default form except that the check boxes are not displayed.

The following search fields are displayed:

• Area selector
• Price picker
• Beds
• Baths

Widget Code

Use the Wizard to set options and add widgets.

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

[mbb_widget id="MBBv3_QuickSearch" filter="formType:simple1"]

Area Only Quick Search

• formType:simple2

This form displays a single area selection field.
Do not use any other hidden fields for area on this form.

The following search field is displayed:

• Area selector

Widget Code

Use the Wizard to set options and add widgets.

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

[mbb_widget id="MBBv3_QuickSearch" filter="formType:simple2"]

Multi MLS Quick Search

• formType:multimls

This form includes an option allowing the selected MLS to be changed.

This form is based on the simple version. It 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:

• MLS selector
• Area selector
• Price picker
• Beds
• Baths

Widget Code

Use the Wizard to set options and add widgets.

<div id="MBBv3_QuickSearch" filter="formType:multimls"></div>

[mbb_widget id="MBBv3_QuickSearch" filter="formType:multimls"]

Open House Quick Search

• formType:openhouse

Search for Open House with this search form.

The following search fields are provided:

• Range for Open House
• Area selector
• Price picker
• Beds
• Baths

Widget Code

Use the Wizard to set options and add widgets.

<div id="MBBv3_QuickSearch" filter="formType:openhouse></div>

[mbb_widget id="MBBv3_QuickSearch" filter="formType:openhouse"]

Customization Options

We recommend using the Wizard to set these options.

Additional Hidden Fields

Add additional preset hidden fields to a quick search form using filters.
The following options can be selected when you use the Wizard, but any fields can be preset.

• property_type
• county
• state

Filter Options:
All options are hidden fields.

• property_type:{ value } (multiple allowed)
  Default action: Field is not displayed and will search all types.
  • {value} will set the property type as a hidden value, i.e. to just search rentals, or residential etc,
    e.g. 'property_type:residential'
• state:{ value} (multiple allowed)
  • {value} will set the state as a hidden value
• county:{value} (multiple allowed)
  • {value} will set the county as a hidden value

Advanced Search Link

This option displays a link that shows the 'Advanced Search' form.

• advancedSearch:{ display }

Design and Layout Options

• Change the background and border color and transparency
• Adjust label colors
• Adjust the font size on the form
• Adjust field spacing between fields

Filter Options:

• 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 color to be: '204,204,204,0.3' (pale translucent grey)
  Form background color as 'rgba',
  e.g. 'formBackground:204,204,204,0.2'
• formBorder:{ rgba value }
  Default action: Set border color to be: '204,204,204,0.35' (pale grey)
  Form border color as 'rgba',
  e.g. 'formBorder:204,204,204,0.25'
• formBorderRadius:{ value }
  Default action: Set border radius to be 0.5rem.
  Form border radius as px, rem, em etc.
  e.g. 'formBorderRadius: 0.25rem'
• 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")
• formWrapperPadding:{ value }
  Value must be specified as 4 x {integer+px}, e.g "8px 24px 8px 24px"
• labelcolor:{ HEX value }
  Value must be specified as a valid HEX value e.g. #c5c5c5