IDX Broker Support Knowledgebase :: Add a Custom Search form to any web page

Search the Knowledgebase

Getting Started Guide

Email Support

Add a Custom Search form to any web page

Article Details

Last Updated
28th of January, 2011

Would you like to...

Print this page

Email this page

Subscribe me

Add to favorites

Export to PDF

User Opinions (113 votes)

100%

Advanced designers and developers may find it necessary to use search fields other than those offered by the Quick Search Widget. This can be done, however, it requires some knowledge of HTML. In addition, you will need to be familiar with Firefox and Firebug. Firebug is a plugin for Firefox that provides you with direct access to the HTML produced by javascript Widgets. See below for more information.

Most people start with the Advanced Search form. Open the advanced search form and use Firebug's "Inspect" function to identify the opening <form> tags. They should look something like this:

<form onsubmit="return cleanForm()" action="results.php" method="get" id="IDX-searchForm">

This is the opening tag for the search form. Note that the "results.php" path will need to be changed to reflect the full path of your IDX Broker subdomain website. For instance, change the path from the relative link "results.php" to the absolute link "http://www.greatpropertyforsale.idxco.com/idx/4538/results.php". Replace the URL with your subdomain and unique four digit client ID.

Next, you will need to identify which form elements you want to display on the page. You can use Firebug and Firefox to identify the code for those elements. For instance, to identify the code required to embed "Max Days Listed", you would right-click on that form element and click the Firebug option called "Inspect Element". See below:

Next, scroll down to the Firebug HTML display at the bottom of the browser window. Firebug will identify the HTML for that element by displaying a blue box around the element when you hover over the correct <div> or HTML tag.

Right-click on the correct <div> tag and select Copy HTML from the menu options. This will copy all the HTML contained INSIDE the <div> tag, including other <divs> and the closing <div> tag for that Advanced search element.

Next, paste this HTML into your new custom search form, somewhere under the opening <form> tag described above. Your form should now display the "Days on Market" search field.

Add the </form> tag below all of your form elements in order to close your form.

Important: Note that you MUST include the Submit button element in order to process the form. Also, if pasting the HTML into your IDX Global Wrapper - rename the form id to something other than "IDX-searchForm." Otherwise, the custom search form will produce an error due to the fact that every IDX search page uses the same ID. This will eventually be changed to a class, however, that will not occur until new templates have been made available.

No related articles were found.

Attachments

No attachments were found.