Create basic and advanced custom IDX Broker search forms that can be placed on your own website pages, giving you more control over form fields, layout, and styling.
Overview
Custom forms allow you to build your own IDX Broker search experience instead of relying only on the default IDX search pages.
With a custom form, you can control:
- Which fields appear
- Field labels
- Input types
- Dropdown values
- Placeholder text
- Styling
- Page placement
- Search destination
Custom forms are commonly used for:
- Homepage search boxes
- Landing pages
- Neighborhood pages
- Custom buyer search experiences
- Simplified search forms
- Advanced search tools
Important Notes
Note: IDX Broker Support does not support custom form creation or troubleshooting.
Custom forms require familiarity with:
- HTML
- Form fields
- URL query parameters
- IDX Broker search URLs
- Browser developer tools
Create a Basic Custom Form
A basic IDX Broker custom form needs four main parts:
- A
<form>HTML tag - An action URL
- Search inputs
- A submit button
Basic Form Example
<form action="https://YourIDXBrokerSubDomain.com/idx/results/listings" method="get">
High Price: <input type="text" name="hp"><br>
Low Price: <input type="text" name="lp"><br>
<input type="submit" value="Submit">
</form>Example Action URL
https://search.yourdomain.com/idx/results/listingsThe action URL should point to the IDX results page for the account.
How the Form Works
When a visitor submits the form:
- The form sends search parameters to the IDX results page
- IDX Broker reads those parameters
- Matching listings are displayed on the results page
Example parameters:
| Field | Description |
|---|---|
hp | High price / maximum price |
lp | Low price / minimum price |
bd | Minimum bedrooms |
tb | Minimum total bathrooms |
Key Points
- The action URL should begin with the IDX Broker subdomain.
- The form must pass valid IDX search parameters.
- Custom forms can be placed on non-IDX pages.
- IDX Broker Support does not troubleshoot custom form code.
Finding IDX Broker Field Names
Forms need valid IDX Broker field names to work correctly.
You can find field names by:
- Inspecting an existing IDX form with browser developer tools
- Reviewing the results page URL after running a search
- Checking Preferences → MLS Settings → Core Fields
- Checking Preferences → MLS Settings → MLS Advanced Fields
- Using the IDX Broker API to retrieve available MLS search fields
Core Fields vs. Advanced Fields
Core Fields
Core fields are standardized fields mapped by IDX Broker.
These fields are generally more consistent across:
- MLSs
- Property types
- Search pages
Because of this, core fields can usually be used when searching across multiple MLSs or multiple property types.
Examples include:
| Field | Description |
|---|---|
lp | Minimum price |
hp | Maximum price |
bd | Minimum bedrooms |
tb | Minimum bathrooms |
zipcode | ZIP code |
city | City |
county | County |
Advanced Fields
Advanced fields are MLS-specific.
Each MLS may use different field names for similar data. For example, one MLS may use subdivision, while another may use legalSubdivisionName.
Advanced fields are best used when searching:
- A specific MLS
- A specific property type
- A known field/value structure
Common Query Logic
IDX Broker search URLs use the following logic:
Separate Fields Use AND Logic
Example:
?lp=300000&hp=600000&bd=3This means:
- Minimum price is 300,000
- Maximum price is 600,000
- Bedrooms are 3+
All criteria must apply.
Multiple Values for the Same Field Use OR Logic
To pass multiple values for the same field, append [] to the field name.
Example:
&a_buildingDesign[]=Manufactured&a_buildingDesign[]=MobileThis searches for listings where the building design is either:
- Manufactured
- Mobile
Advanced Field Prefixes
Advanced field prefixes determine how the field is searched.
| Prefix | Field Type | Example |
|---|---|---|
a_ | List, quick list, yes/no, text | &a_status[]=Active |
k_ | Keyword search | &k_area=Aloha+Marina |
amin_ | Minimum value | &amin_bedrooms=3 |
amax_ | Maximum value | &amax_sqft=2500 |
aw_ | Wild text | &aw_address=Pearl |
csv_ | Comma-separated values | &csv_airConditioning[]=Heat+Pump,Window |
Additional Useful Fields
| Field | Description | Example |
|---|---|---|
pt | Property type | &pt=sfr |
idxID | MLS ID | &idxID=a001 |
bd | Minimum bedrooms | &bd=3 |
tb | Minimum bathrooms | &tb=2 |
lp | Minimum price | &lp=300000 |
hp | Maximum price | &hp=700000 |
srt | Sort order | &srt=newest |
zipcode | ZIP code | &zipcode[]=97401 |
city | City ID | &city[]=15047 |
county | County ID | &county[]=853 |
woh | Listings with open houses | ?woh |
wvt | Listings with virtual tours | ?wvt |
savedName | Saved link query | ?savedName=Eugene-Properties |
Sort Options
| Value | Sort Order |
|---|---|
newest | Newest listings |
oldest | Oldest listings |
pra | Least expensive to most expensive |
prd | Most expensive to least expensive |
bda | Bedrooms low to high |
bdd | Bedrooms high to low |
tba | Bathrooms low to high |
tbd | Bathrooms high to low |
sqfta | Square feet low to high |
sqftd | Square feet high to low |
IDX Broker Property Types
| Value | Property Type |
|---|---|
sfr | Single Family Residential |
mfr | Multifamily Residential |
com | Commercial |
ld | Lots and Land |
rnt | Rentals |
mh | Mobile Homes |
ri | Rental Income |
bo | Business Opportunity |
frm | Farms |
lse | Lease |
othr | Other |
Create a Custom Form Using JavaScript
The following example uses JavaScript and Vue to help generate form code dynamically.
This example is intended for development/testing purposes.
<html>
<head>
<script src="https://unpkg.com/vue"></script>
<script>
function loadDoc(endpoint) {
var key = document.querySelector('#apiKey').value;
var url = 'https://xcm8q62sz2.execute-api.us-west-2.amazonaws.com/beta/' + endpoint;
var xhttp = new XMLHttpRequest();
xhttp.open("GET", url, false);
xhttp.setRequestHeader("Content-type", "application/json");
xhttp.setRequestHeader("accesskey", key);
xhttp.setRequestHeader("outputtype", "json");
xhttp.send();
var response = JSON.parse(xhttp.responseText);
return response[2]['url'];
}
</script>
</head>
<body>
<div id="app-1">
<div id="codeIn" class="ib">
<textarea id="tex" v-model="rawHtml"></textarea>
</div>
<div id="codeOut" class="ib" v-html="rawHtml"></div>
</div>
<div id="app2">
<p>
<button type="button" onclick="loadDoc()">Request data from API</button>
</p>
<p id="demo">
API Key: <input id="apiKey"/>
</p>
<h2>Create Form</h2>
<div id="create">
<p>
<input type="button" value="Opening form tag with action url" onclick="create('action')"/>
<input type="button" value="All basic fields" onclick="create('basic')"/>
<input type="button" value="Input" onclick="create('input')"/>
<input type="button" value="Submit" onclick="create('submit')"/>
</p>
</div>
<h3>Generated code:</h3>
<div id="suggestCode"></div>
</div>
<script>
var app1 = new Vue({
el: '#app-1',
data: {
rawHtml: '<!-- Add form html below, Preview area to the right-->'
}
});
function create(step) {
switch(step) {
case 'action':
var actionURL = loadDoc('systemlinks');
document.querySelector('#suggestCode').innerText =
'<form action ="' + actionURL + '" method="GET" target="_blank">';
break;
case 'basic':
document.querySelector('#suggestCode').innerText =
'<input type="text" name="lp" id="searchIDX-lp" value="" class="searchIDX-input" />\n' +
'<input type="text" name="hp" id="searchIDX-hp" value="" />\n' +
'<select id="searchIDX-bd" name="bd" class="searchIDX-select" autocomplete="off">\n' +
'<option value="">Any Number</option>\n' +
'<option value="0">Studio</option>\n' +
'<option value="1">1+</option>\n' +
'<option value="2">2+</option>\n' +
'<option value="3">3+</option>\n' +
'<option value="4">4+</option>\n' +
'<option value="5">5+</option>\n' +
'</select>\n' +
'<select id="searchIDX-tb" name="tb" class="searchIDX-select" autocomplete="off">\n' +
'<option value="">Any Number</option>\n' +
'<option value="1">1+</option>\n' +
'<option value="2">2+</option>\n' +
'<option value="3">3+</option>\n' +
'<option value="4">4+</option>\n' +
'<option value="5">5+</option>\n' +
'</select>\n' +
'<input type="text" name="sqft" id="searchIDX-sqft" value="" />\n' +
'<input type="text" name="acres" id="IDX-acres" value="" />\n';
break;
case 'input':
document.querySelector('#suggestCode').innerText =
'<input type="text" value="test" />';
break;
case 'submit':
document.querySelector('#suggestCode').innerText =
'<input type="submit" />';
break;
}
}
</script>
<style>
.ib {
display: inline-block;
width: 40%;
padding-left: 10px;
}
#codeIn {
position: relative;
}
#codeOut {
position: fixed;
}
textarea {
box-sizing: border-box;
width: 100%;
height: 50%;
}
</style>
</body>
</html>Query Length Limitations
Long custom search URLs may run into browser or application limits.
Microsoft products historically limit URLs to approximately 2,083 characters. Long IDX search URLs may not work properly in some versions of Outlook or Internet Explorer.
To shorten long queries, use comma-separated values where supported.
Example:
&csv_airConditioning[]=Heat+Pump,WindowInstead of:
&a_airConditioning[]=Heat+Pump&a_airConditioning[]=WindowMulti-MLS and Multi-Property Type Searches
Only core fields should be used when searching across:
- Multiple MLSs
- Multiple property types
Advanced fields are MLS-specific and property-type-specific, so they may not work reliably across multiple MLSs or property types.
No-Commingling MLS Results
Some MLSs do not allow commingling.
When this applies:
- Results from that MLS may appear in a separate tab
- Map Search may not allow searching all MLSs together
- The first tab may include only MLSs that allow commingling
Best Practices
Use Core Fields When Possible
Core fields are more reliable across MLSs and property types.
Inspect Existing IDX Forms
Use browser developer tools to identify working field names and values.
Test All Form Submissions
Confirm that each field passes the expected parameter and returns the correct results.
Avoid Overly Long URLs
Limit the number of fields and selected values where possible.
Do Not Expose API Keys Publicly
Any API-based form builder should avoid exposing API keys in public-facing code.
Additional Resources
- IDX Broker API Documentation
- Browser Developer Tools
- HTML Form Documentation
- JavaScript Form Handling Documentation