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.
You will need moderate skills in HTML and CSS.
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 helpers - for some additional methods to use
- Search fields for your MLS
- Custom Search Auto-populate
HTML Code
The diagram below indicates the main components needed.
Step 1
Ensure your Buying Buddy plugin is loading in the <head> section of your web page.
If you have already installed Buying Buddy, the Buying Buddy plugin should be loading 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 Buying Buddy 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.
<input name="mls_id" value="[your_buying_buddy_mls_id]"] - You can also discover all field names and values by creating a FILTER using the WIZARD in the Widgets section of your Buying Buddy 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 - use the Widget Wizard Tool in your Buying Buddy dashboard to generate a widget with a filter, then closely examine the names and values shown in the widget code that is created.
Step 3
Make sure of the following:
- The HTML FORM tag also includes an "id", where "id" is a unique short name to identify this specific form.
For example:<form id="Form-1" > - You MUST include a hidden field referring to your MLS (this is the Buyng Buddy defined "mls_id")
For example:<input type="hidden" name="mls_id" value="denver" />
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:
<input name="submit" type="button" onclick="MBBv3_SubmitCustomSearchForm('Form-1','http://www.charliesmithrealty.com/results');" value="Search!" />