Can I customize my FLX web app for my website?

Yes, you can! You can customize the search form to add to any web page that supports javascript. 

For example, you could add a foreclosure search form to your blog that offers a pull-down menu of your local cities, which then took users to your web page with the FLX Search Widget and showed the results for the city the user selected.

Below is sample code for a simple search form:

<!-- flx embed  -->

<style>

html {

    font-family:'Trebuchet MS', sans-serif;

    font-size:12px;

}

body {margin:0;padding:0}

</style>

<script>

function search() {

    if (isValidSearch()) {

        // "/flx_test.html" is an example file name and path.

        // Please replace with the path and name of the file containing the

        // Advanced Embed Code on your site.

        var url = 'flx_test.html?id=51672053045ec&Location='+ge('Location').value;

        if (ge('MinBeds').value != "") url += '&MinBeds='+ge('MinBeds').value;

        if (ge('MinBaths').value != "") url += '&MinBaths='+ge('MinBaths').value;

        if (ge('MinAVM').value != "") url += '&MinAVM='+ge('MinAVM').value;

        if (ge('MaxAVM').value != "") url += '&MaxAVM='+ge('MaxAVM').value;

        if (ge('MinSF').value != "") url += '&MinSF='+ge('MinSF').value;

        url += "&Type=";

        var add_comma = false;

 

        if(ge('bo-filter').checked) url += "Bank Owned,";

        if(ge('au-filter').checked) url += "Auction,";

        if(ge('pf-filter').checked) url += "Preforeclosure";

 

        window.open(url);

    } else {

        searchError();

    }

}

 

function isZipCode(code)

{

    var r = /^\d{5}([\-\+])*(\d{4})?$/

    var zip = code.search(r);

        return (zip == -1) ? false : true;

}

 

function isAlphanumeric(s)

{

    var r = /^[a-zA-Z0-9]+$/

    return r.test(s);

}

 

function isAlphabetic(s)

{

    var r = /^[a-zA-Z ]+$/

    return r.test(s);

}

 

function isInteger(s)

{

    var r = /^\d+$/

    return r.test(s)

}

 

function hasComma(s)

{

    var r = /,/;

    return r.test(s);

}

 

function ge(el) {return document.getElementById(el)}

 

function isValidSearch()

{

    var s = ge('Location').value;

    if (s == 'City, ST or zip' || s == '')

        return false;

    if (isInteger(s)) {

        if (isZipCode(s))

            return true;

        return false;

    }

    if (isAlphabetic(s))

        return true;

    if (isAlphanumeric(s))

        return false;

    if (hasComma(s)) {

        return true;

    }

 

    return false;

}

function searchError()

{

    return alert("Invalid search location. Please try again.");

}

 

function resetSearch()

{

    if (ge('Location').value == "City, ST or zip")

        ge('Location').value = "";

}

 

</script>

    <div class="search-form">

        <h1 id="title">Foreclosure Search</h1>

        <div class="form-row location-search">

            <div class="label">Location:</div>

            <input id="Location" value="City, ST or zip" onClick="resetSearch()"/>

        </div>

        <div class="form-row type-filter">

            <div class="label">Type:</div>

            <div class="ftype">

                <div class="type-row bo-row">

                    <input type="checkbox" checked="checked" class="atype-flt" id="bo-filter" value="Bank Owned"/>

                    <label for="bo-filter">

                        <img src="https://widgets.propertyradar.com/flx/images/icon_radar_red.png" alt="Bank Owned" align="absmiddle"/> Bank Owned

                    </label>

                </div>

 

                <div class="type-row au-row">

                    <input type="checkbox" checked="checked" class="atype-flt" id="au-filter" value="Auction"/>

                    <label for="au-filter">

                        <img src="https://widgets.propertyradar.com/flx/images/icon_radar_blue.png" alt="Auction"  align="absmiddle"/> Auction

                    </label><br/>

                </div>

 

                <div class="type-row pf-row">

                    <input type="checkbox" checked="checked" class="atype-flt" id="pf-filter" value="Preforeclosure"/>

                    <label for="pf-filter">

                        <img src="https://widgets.propertyradar.com/flx/images/icon_radar_green.png" alt="Auction"  align="absmiddle"/> Preforeclosure

                    </label>

                </div>

            </div>

            <div style="clear:both"></div>

        </div>

        <div class="form-row price-row">

            <div class="label">Value:</div>

            <select id="MinAVM">

                <option value="">Min</option>

                <option value="50000">50K</option>

                <option value="100000">100K</option>

                <option value="150000">150K</option>

                <option value="200000">200K</option>

                <option value="250000">250K</option>

                <option value="300000">300K</option>

                <option value="400000">400K</option>

                <option value="500000">500K</option>

                <option value="750000">750K</option>

                <option value="1000000">1M</option>

            </select>

            <select id="MaxAVM" style="margin-left:4px">

                <option value="">Max</option>

                <option value="100000">100K</option>

                <option value="150000">150K</option>

                <option value="200000">200K</option>

                <option value="250000">250K</option>

                <option value="300000">300K</option>

                <option value="400000">400K</option>

                <option value="500000">500K</option>

                <option value="750000">750K</option>

                <option value="1000000">1M</option>

                <option value="2000000">2M</option>

            </select>

        </div>

        <div class="form-row beds-row">

            <div class="label">Beds:</div>

            <select id="MinBeds">

                <option value="">Any</option>

                <option value="1">1+</option>

                <option value="2">2+</option>

                <option value="3">3+</option>

                <option value="4">4+</option>

            </select>

        </div>

        <div class="form-row baths-row">

            <div class="label" style="width:50px">Baths:</div>

            <select id="MinBaths">

                <option value="">Any</option>

                <option value="1">1+</option>

                <option value="2">2+</option>

                <option value="3">3+</option>

                <option value="4">4+</option>

            </select>

        </div>

        <div class="form-row sqft-row">

            <div class="label" style="width:50px">Sq. Ft.:</div>

            <select id="MinSF">

                <option value="">Any</option>

                <option value="250">250+</option>

                <option value="500">500+</option>

                <option value="1000">1000+</option>

                <option value="1250">1250+</option>

                <option value="1500">1500+</option>

                <option value="1750">1750+</option>

                <option value="2000">2000+</option>

                <option value="2500">2500+</option>

                <option value="3000">3000+</option>

                <option value="4000">4000+</option>

            </select>

        </div> 

 

    <div class="row submit-btn">

        <button type="submit" onclick="search(true)" style="margin:10px 0">Search</button>

    </div>

    <a href="https://www.propertyradar.com" target="_blank" >Powered by PropertyRadar</a>

    <a href="https://www.propertyradar.com/user-agreement" target="_blank" >User Agreement</a>

    <div style="clear:both"></div>

    <input id="wId" type="hidden" value="0">

</div>

 

<!-- end flx -->

Have more questions? Submit a request

Comments

Powered by Zendesk