Form Layouts - Search Forms
Front's form control expands on different styles, layout options, and custom components for creating a wide variety of forms.
Search form #1
<!-- Job Positions - Filter -->
<div class="row align-items-md-center space-1">
<div class="col-lg-4 mb-4 mb-lg-0">
<!-- Department Search Field -->
<div class="js-focus-state">
<label class="sr-only" for="searchJobsSr">Search Jobs</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="searchJobs">
<span class="fas fa-search"></span>
</span>
</div>
<input type="text" class="form-control" name="text" id="searchJobsSr" placeholder="Search Jobs" aria-label="Search Jobs" aria-describedby="searchJobs">
</div>
</div>
<!-- End Department Search Field -->
</div>
<div class="col-sm-6 col-lg-3 mb-4 mb-lg-0">
<!-- Locations -->
<select class="custom-select">
<option selected>All locations</option>
<option value="location1">Chicago, US</option>
<option value="location2">New York, US</option>
<option value="location3">Seattle/Kirkland, US</option>
<option value="location4">Los Angles, US</option>
<option value="location5">Moscow, Russia</option>
<option value="location6">Sydney, Australia</option>
<option value="location7">Birmingham, UK</option>
<option value="location7">Manchester, UK</option>
<option value="location8">Beijing, China</option>
</select>
<!-- End Locations -->
</div>
<div class="col-sm-6 col-lg-3 mb-4 mb-lg-0">
<!-- Departments List -->
<select class="custom-select">
<option selected>All departments</option>
<option value="department1">Analytics</option>
<option value="department2">Business Strategy</option>
<option value="department3">Data Center & Network</option>
<option value="department4">Developer Relations</option>
<option value="department5">Engineering</option>
<option value="department6">Hardware Engineering</option>
<option value="department7">IT & Data Management</option>
<option value="department8">Legal & Government Relations</option>
<option value="department9">Manufacturing & Supply Chain</option>
<option value="department10">Marketing & Communications</option>
<option value="department11">Network Engineering</option>
<option value="department12">Partnerships</option>
<option value="department13">Web</option>
</select>
<!-- End Departments List -->
</div>
<div class="col-lg-2 text-lg-right">
<a class="link-muted" href="#">22 Open Positions</a>
</div>
</div>
<!-- End Job Positions - Filter -->
<!-- JS Front -->
<script src="../../assets/js/components/hs.focus-state.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of forms
$.HSCore.components.HSFocusState.init();
});
</script>
Search form #2
Get access to millions of company reviews
Find great places to work
<!-- Hero Section -->
<div id="SVGfiles" class="svg-preloader bg-light position-relative z-index-2">
<div class="container space-2">
<!-- Title -->
<div class="mb-7">
<span class="d-block text-secondary">Get access to millions of company reviews</span>
<h1 class="text-primary font-weight-semi-bold">Find great places to work</h1>
</div>
<!-- End Title -->
<!-- Search Jobs Form -->
<form class="row mb-2">
<div class="col-lg-5 mb-4 mb-lg-0">
<!-- Input -->
<label class="d-block">
<span class="h6 d-block text-dark font-weight-semi-bold mb-0">Company name or job title</span>
</label>
<div class="js-focus-state">
<div class="input-group">
<input type="text" class="form-control" placeholder="Company or title" aria-label="Company or title" aria-describedby="keywordInputAddon">
<div class="input-group-append">
<span class="input-group-text">
<span class="fas fa-search" id="keywordInputAddon"></span>
</span>
</div>
</div>
</div>
<!-- End Input -->
</div>
<div class="col-lg-5 mb-4 mb-lg-0">
<!-- Input -->
<label class="d-block">
<span class="h6 d-block text-dark font-weight-semi-bold mb-0">City, state, or zip</span>
</label>
<div class="js-focus-state">
<div class="input-group">
<input type="text" class="form-control" placeholder="City, state, or zip" aria-label="City, state, or zip" aria-describedby="locationInputAddon">
<div class="input-group-append">
<span class="input-group-text">
<span class="fas fa-map-marker-alt" id="locationInputAddon"></span>
</span>
</div>
</div>
</div>
<!-- End Input -->
</div>
<div class="col-lg-2 align-self-lg-end">
<button type="submit" class="btn btn-block btn-primary transition-3d-hover">Search</button>
</div>
<!-- End Checkbox -->
</form>
<!-- End Search Jobs Form -->
</div>
<!-- SVG Icon -->
<div class="d-none d-lg-block w-100 position-absolute bottom-0 right-0 z-index-n1 max-width-27">
<figure class="ie-files">
<img class="js-svg-injector" src="../../assets/svg/illustrations/files.svg" alt="Image Description"
data-parent="#SVGfiles">
</figure>
</div>
<!-- End SVG Icon -->
</div>
<!-- End Hero Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.focus-state.js"></script>
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of forms
$.HSCore.components.HSFocusState.init();
});
</script>
<!-- JS Plugins Init. -->
<script>
$(document).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Search form #3
<!-- Search Section -->
<div class="bg-light">
<div class="container space-1">
<div class="row mx-gutters-2">
<div class="col-lg mb-3 mb-lg-0">
<!-- Search Property Input -->
<div class="js-focus-state">
<label class="sr-only" for="searchPropertySr">Search property</label>
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text" id="searchProperty">
<span class="fas fa-search"></span>
</span>
</div>
<input type="text" class="form-control" name="text" id="searchPropertySr" placeholder="Search property" aria-label="Search property" aria-describedby="searchProperty" value="London">
</div>
</div>
<!-- End Search Property Input -->
</div>
<div class="col-sm-auto ml-md-auto mb-3 mb-lg-0">
<!-- Filter -->
<div class="position-relative">
<a id="filter2DropdownInvoker" class="btn btn-block btn-sm btn-soft-secondary dropdown-toggle" href="javascript:;" role="button"
aria-controls="filter2Dropdown"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-target="#filter2Dropdown"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-animation-in="slidefadeIn"
data-unfold-animation-out="fadeOut">
<span class="fas fa-home dropdown-item-icon"></span>
Property type
</a>
<div id="filter2Dropdown" class="dropdown-menu dropdown-unfold dropdown-menu-lg-right dropdown-menu-size-md p-5" aria-labelledby="filter2DropdownInvoker">
<div class="row">
<div class="col-sm-6 u-ver-divider u-ver-divider--none-sm mb-4 mb-sm-0">
<!-- Radio Checkbox -->
<div class="custom-control custom-radio mb-2">
<input type="radio" class="custom-control-input" id="propertyRadioChechbox1" name="propertyRadioChechbox" checked>
<label class="custom-control-label" for="propertyRadioChechbox1">
Show all
</label>
</div>
<!-- End Radio Checkbox -->
<!-- Radio Checkbox -->
<div class="custom-control custom-radio mb-2">
<input type="radio" class="custom-control-input" id="propertyRadioChechbox2" name="propertyRadioChechbox">
<label class="custom-control-label" for="propertyRadioChechbox2">
Houses
</label>
</div>
<!-- End Radio Checkbox -->
<!-- Radio Checkbox -->
<div class="custom-control custom-radio mb-2">
<input type="radio" class="custom-control-input" id="propertyRadioChechbox3" name="propertyRadioChechbox">
<label class="custom-control-label" for="propertyRadioChechbox3">
Flats
</label>
</div>
<!-- End Radio Checkbox -->
<!-- Radio Checkbox -->
<div class="custom-control custom-radio mb-2">
<input type="radio" class="custom-control-input" id="propertyRadioChechbox4" name="propertyRadioChechbox">
<label class="custom-control-label" for="propertyRadioChechbox4">
Multi-family
</label>
</div>
<!-- End Radio Checkbox -->
<!-- Radio Checkbox -->
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="propertyRadioChechbox5" name="propertyRadioChechbox">
<label class="custom-control-label" for="propertyRadioChechbox5">
Farms/land
</label>
</div>
<!-- End Radio Checkbox -->
</div>
<div class="col-sm-6">
<!-- Radio Checkbox -->
<div class="custom-control custom-radio mb-2">
<input type="radio" class="custom-control-input" id="propertyAddedTimeRadioChechbox1" name="propertyAddedTimeRadioChechbox" checked>
<label class="custom-control-label" for="propertyAddedTimeRadioChechbox1">
Added anytime
</label>
</div>
<!-- End Radio Checkbox -->
<!-- Radio Checkbox -->
<div class="custom-control custom-radio mb-2">
<input type="radio" class="custom-control-input" id="propertyAddedTimeRadioChechbox2" name="propertyAddedTimeRadioChechbox">
<label class="custom-control-label" for="propertyAddedTimeRadioChechbox2">
Last 24 hours
</label>
</div>
<!-- End Radio Checkbox -->
<!-- Radio Checkbox -->
<div class="custom-control custom-radio mb-2">
<input type="radio" class="custom-control-input" id="propertyAddedTimeRadioChechbox3" name="propertyAddedTimeRadioChechbox">
<label class="custom-control-label" for="propertyAddedTimeRadioChechbox3">
Last 7 days
</label>
</div>
<!-- End Radio Checkbox -->
<!-- Radio Checkbox -->
<div class="custom-control custom-radio mb-2">
<input type="radio" class="custom-control-input" id="propertyAddedTimeRadioChechbox4" name="propertyAddedTimeRadioChechbox">
<label class="custom-control-label" for="propertyAddedTimeRadioChechbox4">
Last 14 days
</label>
</div>
<!-- End Radio Checkbox -->
<!-- Radio Checkbox -->
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="propertyAddedTimeRadioChechbox5" name="propertyAddedTimeRadioChechbox">
<label class="custom-control-label" for="propertyAddedTimeRadioChechbox5">
Last 30 days
</label>
</div>
<!-- End Radio Checkbox -->
</div>
</div>
</div>
</div>
<!-- End Filter -->
</div>
<div class="col-sm-auto mb-3 mb-lg-0">
<!-- Filter -->
<div class="position-relative">
<a id="filter3DropdownInvoker" class="btn btn-block btn-sm btn-soft-secondary dropdown-toggle" href="javascript:;" role="button"
aria-controls="filter3Dropdown"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-target="#filter3Dropdown"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-animation-in="slidefadeIn"
data-unfold-animation-out="fadeOut">
<span class="fas fa-sliders-h dropdown-item-icon"></span>
Refine
</a>
<div id="filter3Dropdown" class="dropdown-menu dropdown-unfold dropdown-menu-sm-right dropdown-menu-size-lg p-5" aria-labelledby="filter3DropdownInvoker">
<div class="row">
<div class="col-lg-7 u-ver-divider u-ver-divider--none-lg mb-5 mb-lg-0">
<div class="pr-lg-2">
<label class="form-label mb-2">Price range</label>
<!-- Area Charts -->
<div class="position-relative overflow-hidden mb-2" style="height: 80px;">
<div class="js-area-chart position-absolute w-100"
data-height="80px"
data-high="1500"
data-low="0"
data-offset-x="0"
data-offset-y="0"
data-is-show-area="true"
data-is-show-line="false"
data-is-show-point="false"
data-is-full-width="true"
data-is-stack-bars="true"
data-is-show-axis-x="false"
data-is-show-axis-y="false"
data-is-show-tooltips="false"
data-fill-opacity="1"
data-fill-colors='["#e7eaf3"]'
data-stroke-color="#e7eaf3"
data-text-color-x="#77838f"
data-text-offset-top-x="0"
data-text-size-y=".75rem"
data-text-color-y="#77838f"
data-points-colors='["#e7eaf3"]'
data-series='[
[
{"value": 289},
{"value": 100},
{"value": 700},
{"value": 500},
{"value": 1500},
{"value": 200},
{"value": 855},
{"value": 321},
{"value": 75}
]
]'></div>
<div id="foregroundAreaChartDoubleResult" class="position-absolute h-100 overflow-hidden">
<div class="js-area-chart position-absolute"
data-height="80px"
data-high="1500"
data-low="0"
data-offset-x="0"
data-offset-y="0"
data-is-show-area="true"
data-is-show-line="false"
data-is-show-point="false"
data-is-full-width="true"
data-is-stack-bars="true"
data-is-show-axis-x="false"
data-is-show-axis-y="false"
data-is-show-tooltips="false"
data-fill-opacity="1"
data-fill-colors='["#377dff"]'
data-stroke-color="#377dff"
data-text-color-x="#77838f"
data-text-offset-top-x="0"
data-text-size-y=".75rem"
data-text-color-y="#77838f"
data-points-colors='["#377dff"]'
data-series='[
[
{"value": 289},
{"value": 100},
{"value": 700},
{"value": 500},
{"value": 1500},
{"value": 200},
{"value": 855},
{"value": 321},
{"value": 75}
]
]'></div>
</div>
</div>
<!-- End Area Charts -->
<!-- Range Slider -->
<input class="js-range-slider" type="text"
data-extra-classes="u-range-slider"
data-type="double"
data-foreground-target="#foregroundAreaChartDoubleResult"
data-min="0"
data-max="999000"
data-from="250000"
data-to="750000"
data-result-min="#rangeSliderExample7MinResult"
data-result-max="#rangeSliderExample7MaxResult">
<div class="d-flex justify-content-between align-items-center mt-6">
<div>
<span class="text-muted">Min price:</span>
<span id="rangeSliderExample7MinResult" class="text-muted"></span>
</div>
<div>
<span class="text-muted">Max price:</span>
<span id="rangeSliderExample7MaxResult" class="text-muted"></span>
</div>
</div>
</div>
</div>
<div class="col-lg-5">
<div class="pl-lg-2">
<label class="form-label mb-2">Status</label>
<!-- Button Group -->
<div class="btn-group btn-group-toggle d-flex mb-5" data-toggle="buttons">
<label class="btn btn-sm btn-outline-secondary btn-custom-toggle-primary flex-fill active">
<input type="radio" name="options" id="option1" checked>
For sale
</label>
<label class="btn btn-sm btn-outline-secondary btn-custom-toggle-primary flex-fill">
<input type="radio" name="options" id="option2">
For rent
</label>
</div>
<!-- End Button Group -->
<!-- Rooms -->
<div class="row mx-gutters-2">
<div class="col-6">
<label class="form-label mb-2">Beds</label>
<!-- Select -->
<select class="js-select selectpicker dropdown-select"
data-size="10"
data-width="100%"
data-style="btn-soft-secondary btn-sm">
<option value="bedValueAll" selected>All</option>
<option value="bedValueMin1">1</option>
<option value="bedValueMin2">2</option>
<option value="bedValueMin3">3</option>
<option value="bedValueMin4">4</option>
<option value="bedValueMin5">5</option>
<option value="bedValueMin6">6</option>
<option value="bedValueMin7">7</option>
<option value="bedValueMin8">8</option>
<option value="bedValueMin9">9</option>
<option value="bedValueMin10">10</option>
</select>
<!-- End Select -->
</div>
<div class="col-6">
<!-- Select -->
<label for="bathLabel" class="form-label mb-2">Baths</label>
<select id="bathLabel" class="js-select selectpicker dropdown-select"
data-size="10"
data-width="100%"
data-style="btn-soft-secondary btn-sm">
<option value="bedValueAll" selected>All</option>
<option value="bedValueMax1">1</option>
<option value="bedValueMax2">2</option>
<option value="bedValueMax3">3</option>
<option value="bedValueMax4">4</option>
<option value="bedValueMax5">5</option>
<option value="bedValueMax6">6</option>
<option value="bedValueMax7">7</option>
<option value="bedValueMax8">8</option>
<option value="bedValueMax9">9</option>
<option value="bedValueMax10">10</option>
</select>
<!-- End Select -->
</div>
</div>
<!-- End Rooms -->
</div>
</div>
</div>
</div>
</div>
<!-- End Filter -->
</div>
<div class="col-sm-auto">
<button type="submit" class="btn btn-sm btn-primary">Search</button>
</div>
</div>
</div>
</div>
<!-- End Search Section -->
<link rel="stylesheet" href="../../assets/vendor/bootstrap-select/dist/css/bootstrap-select.min.css">
<link rel="stylesheet" href="../../assets/vendor/ion-rangeslider/css/ion.rangeSlider.css">
<link rel="stylesheet" href="../../assets/vendor/chartist/dist/chartist.min.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="../../assets/vendor/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
<script src="../../assets/vendor/chartist/dist/chartist.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.unfold.js"></script>
<script src="../../assets/js/components/hs.selectpicker.js"></script>
<script src="../../assets/js/components/hs.range-slider.js"></script>
<script src="../../assets/js/components/hs.chartist-area-chart.js"></script>
<!-- JS Plugins Init. -->
<script>
// initialization of select picker
$.HSCore.components.HSSelectPicker.init('.js-select');
// initialization of unfold component
$.HSCore.components.HSUnfold.init($('[data-unfold-target]:not(#filter3DropdownInvoker)'));
$.HSCore.components.HSUnfold.init($('#filter3DropdownInvoker'), {
afterOpen: function() {
$.HSCore.components.HSRangeSlider.init('.js-range-slider');
$.HSCore.components.HSChartistAreaChart.init('.js-area-chart');
}
});
$(window).on('resize', function() {
setTimeout(function() {
$.HSCore.components.HSChartistAreaChart.init('.js-area-chart');
}, 800);
});
</script>