Custom Search Forms are NOT widgets. Custom search forms are created by you, using your own CSS and HTML.
By creating your own search forms in HTML, you can create a completely custom search experience, meeting your own needs for design, styling and search capabilities.
NOTE: Based on feedback, the Quick Search widget has been updated to provide many of capabilities requested and used with custom search forms.
Here are some examples of custom search forms that we created, and lower down this page you will find instructions for how to create your OWN custom search forms!
Also see these additional articles:
- Custom search form hacks – for some additional methods to use
- Search fields for your MLS
- Custom Search Auto-populate
For a working example see this page (also see the page source code for notes).
The diagram below indicates the main components needed.
Step 1
Ensure your MBB plugin <script> is loading in the <head> section of your web page.
If you have already installed Buying Buddy, the MBB plugin <script> should be loaded on all web pages in your website.
Step 2
Create the HTML for your form.
Make sure you use the correct names and correct values when naming <input> fields and allowing choices of values. Remember, the “field name” and the chosen “value’ is what will be submitted to the Search Results page and these have to correctly match the names and values actually used.
- The best way (currently) to discover the field names and values to use in your form code, is to look at the source code behind the standard MBB Search Widget on your website. By inspecting this, you will see all the names of fields and all the associated values that are permitted.
- YOU MUST INCLUDE THE BUYING BUDDY “MLS_ID” as a hidden field or the form will not work correctly
- e.g. <input type=”hidden” name=”mls_id” value=”{your MBB mls_id}” />
- You can also discover all field names and values by creating a FILTER using the WIZARD in the Widgets section of your LAC account and then inspecting the generated code
This will show mls_id, names, values etc. - If you get stuck, then please contact our help desk
Design your forms to allow accurate selection of values and options.
Remember ‘garbage in, garbage out’. For example, selecting a CITY typically requires an exact match of the value – so ensure that your form captures the correct values.
If you are in doubt – generate a FILTER using the Widget Tool for “custom search link” and closely examine the names and values shown there.
Step 3
Make sure that
- The HTML FORM tag also includes an “id”, where “id” is a unique short name to identify this specific form. For example:
[code]<form id=”Form-1″ >[/code] - You MUST include a hidden field referring to your MLS (this is the MBB defined “mls_id”)
[code]e.g. <input type=”hidden” name=”mls_id” value=”denver” />[/code]
Step 4
Your form submit option must use an <input> tag with type=”button”.
- This submission <input> tag must have an “onclick=” parameter as shown below. Make sure you format it correctly!
The onclick has the ID of your form, and the URL of your specified Search Results page (or any page where you have a Search Results or Display Widget).
For example:
[code]<input name=”submit” type=”button” onclick=”MBBv3_SubmitCustomSearchForm(‘Form-1′,’http://www.charliesmithrealty.com/results’);” value=”Search!” />[/code]
Live Examples
See a live example, with annotated source code here:
http://mybuyingbuddy.com/example_code/example-custom-search-form.html