<!-- 
For general guidance and help see http://support.mybuyingbuddy.com/codepen/
--> 
<!-- Buying Buddy Plugin for codepen.io -->
<script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyAlDq8fLYmfwIZdmngXCW6Ts80NIlhjwi8'></script>
<script src='https://www.mbb2.com/version3/css/theme/acid/OLrJDh'></script>
<script>
var MBB = { mbbUrl: 'https://www.mbb2.com/version3', seo : 'false' };
MBB.data = { acid : 'OLrJDh', mbbdomain : 'codepen.io' };
</script>
<script src='https://www.mbb2.com/scripts/my-buying-buddy.4.0.js'></script>
<!-- End Buying Buddy Plugin -->

<section id="pen-title">
    <h2>(cs#1) 1-Row Search Form</h2>
  <p style="color:red">Updated October 2020 to improve accessibility.</p>
  <p><small><a href="https://support.mybuyingbuddy.com/codepen/#disclaimer" target="_blank">PLEASE READ DISCLAIMER</a></small></p>
</section>

<!--BEGIN CODE TO COPY -->
<div id="MBBv3Form">
     <div class="bfg-grid-container">
          <div class="custom-form-wrapper clearfix">
               <form id="form-1" class="mbb-lcf-form">
                    <!-- ** CHANGE THIS** The MBB defined MLS ID for your MLS -->
                    <input type="hidden" name="mls_id" value="demo" />
                    <!--End Form Header--> 
                    <!--First Row Container-->
                    <div class="bfg-grid-30 bfg-tablet-grid-30 bfg-grid-parent">
                         <!--Start Text Box Placeholder-->
                         <div class="bfg-grid-100">
                              <div class="bfg-input-wrap">
                                   <div class="bfg-input-item">
                                        <!-- ** CHANGE THIS ** make these correct city names values for your mls  -->
                                        <select name="city" class="bfg-input-field" aria-label="City">
                                             <option value="" selected="" disabled="">City</option>
                                             <option value="Arvada">Arvada</option>
                                             <option value="Broomfield">Broomfield</option>
                                             <option value="Thornton">Thornton</option>
                                             <option value="Westminster">Westminster</option>
                                        </select>
                                   </div>
                              </div>
                         </div>
                    </div>
                    <!--End first row container-->
                    <!--Second Row Container-->
                    <div class="bfg-grid-30 bfg-tablet-grid-30 bfg-grid-parent"> 
                         <!--End Text Box Placeholder--> 
                         <!--Start Selector Placeholder-->
                         <div class="bfg-grid-50 bfg-tablet-grid-50 bfg-mobile-grid-50">
                              <div class="bfg-input-wrap">
                                   <div class="bfg-input-item">
                                        <select name="price_min" class="bfg-input-field" aria-label="Min price">
                                             <option value="" selected="" disabled="">Price Min</option>
                                             <option value="50000">$50,000</option>
                                             <option value="100000">$100,000</option>
                                             <option value="200000">$200,000</option>
                                             <option value="300000">$300,000</option>
                                             <option value="400000">$400,000</option>
                                             <option value="500000">$500,000</option>
                                             <option value="600000">$600,000</option>
                                             <option value="700000">$700,000</option>
                                             <option value="800000">$800,000</option>
                                             <option value="900000">$900,000</option>
                                             <option value="1000000">$1,000,000</option>
                                             <option value="1500000">$1,500,000</option>
                                             <option value="2000000">$2,000,000</option>
                                             <option value="3000000">$3,000,000</option>
                                             <option value="4000000">$4,000,000</option>
                                             <option value="5000000">$5,000,000</option>
                                             <option value="10000000">$10,000,000</option>
                                        </select>
                                   </div>
                              </div>
                         </div>
                         <!--End Selector Placeholder--> 
                         <!--Start Selector Placeholder-->
                         <div class="bfg-grid-50 bfg-tablet-grid-50 bfg-mobile-grid-50">
                              <div class="bfg-input-wrap">
                                   <div class="bfg-input-item">
                                        <select name="price_max" class="bfg-input-field" aria-label="Max price">
                                             <option value="" selected="" disabled="">Price Max</option>
                                             <option value="100000">$100,000</option>
                                             <option value="200000">$200,000</option>
                                             <option value="300000">$300,000</option>
                                             <option value="400000">$400,000</option>
                                             <option value="500000">$500,000</option>
                                             <option value="600000">$600,000</option>
                                             <option value="700000">$700,000</option>
                                             <option value="800000">$800,000</option>
                                             <option value="900000">$900,000</option>
                                             <option value="1000000">$1,000,000</option>
                                             <option value="1500000">$1,500,000</option>
                                             <option value="2000000">$2,000,000</option>
                                             <option value="3000000">$3,000,000</option>
                                             <option value="4000000">$4,000,000</option>
                                             <option value="5000000">$5,000,000</option>
                                             <option value="10000000">$10,000,000</option>
                                        </select>
                                   </div>
                              </div>
                         </div>
                         <!--End Selector Placeholder--> 
                    </div>
                    <!--End second row container--> 
                    <!--Third Row Container-->
                    <div class="bfg-grid-40 bfg-tablet-grid-40 bfg-grid-parent">                       
                         <!--Start Selector Placeholder-->
                         <div class="bfg-grid-40 bfg-tablet-grid-40 bfg-mobile-grid-40">
                              <div class="bfg-input-wrap">
                                   <div class="bfg-input-item">
                                        <select name="bedrooms_total_min" class="bfg-input-field" aria-label="Min bedrooms">
                                             <option value="" selected="" disabled="">Min Beds</option>
                                             <option value="1">1</option>
                                             <option value="2">2</option>
                                             <option value="3">3</option>
                                             <option value="4">4</option>
                                             <option value="5">5</option>
                                             <option value="6">6+</option>
                                        </select>
                                   </div>
                              </div>
                         </div>
                         <!--End Selector Placeholder--> 
                         <!--Start Selector Placeholder-->
                         <div class="bfg-grid-40 bfg-tablet-grid-40 bfg-mobile-grid-40">
                              <div class="bfg-input-wrap">
                                   <div class="bfg-input-item">
                                        <select name="baths_total_min" class="bfg-input-field" aria-label="Min bathrooms">
                                             <option value="" selected="" disabled="">Min Baths</option>
                                             <option value="1">1</option>
                                             <option value="2">2</option>
                                             <option value="3">3</option>
                                             <option value="4">4</option>
                                             <option value="5">5</option>
                                             <option value="6">6+</option>
                                        </select>
                                   </div>
                              </div>
                         </div>
                         <!--Start Search Button-->
                         <div class="bfg-grid-20 bfg-tablet-grid-20 bfg-mobile-grid-20"> <a href="#" class="bfg-btn btn-bg2 bfg-sf-view-results" onclick="MBBv3_SubmitCustomSearchForm('form-1','https://s.codepen.io/bluefiregroup/details/f442f6eb6eaa6d832f015bbb8e24d545/');return false;"><i class="icon-search"></i><span class="tablet-hidden">GO</span></a></div>
                         <!--End Search Button--> 
                    </div>
                    <!--End Third row container-->
               </form>
          </div>
     </div>
</div>
<!--END CODE TO COPY -->
/*
Helps reduce spaces between fields for smaller displays
*/
@media (max-width: 1024px) {
  #MBBv3Form .bfg-grid-container [class^="bfg-grid-"]:not(.bfg-grid-parent)   {
    padding-left: 5px;
    padding-right: 5px;
  }
}

/*
This CSS wrapper is optional and provides the translucent background. 
All other CSS comes from the MBB plugin.
*/
.custom-form-wrapper {
  padding-top: 20px;
	padding-bottom: 5px;
  border-radius: 2px;
  border-color: #dddddd;
  border-width: 1px;
  border-style: solid;
  background: rgba(255,255,255,0.2);
}

External CSS

  1. https://codepen.io/bluefiregroup/pen/28f8a2d44f0c132e33e11c15281c5e63.css

External JavaScript

This Pen doesn't use any external JavaScript resources.