CSL manual front-end filters markup example

page-template.php

<div class="bh-sl-container">
	<div class="bh-sl-form-container">
		<form id="bh-sl-user-location" method="post" action="#">
			<div class="form-input">
				<label for="bh-sl-address">Enter Address or Zip Code:</label>
				<input type="text" id="bh-sl-address" name="bh-sl-address" />
			</div>

			<button id="bh-sl-submit" type="submit">Submit</button>

			<div class="bh-sl-filters-container">
				<ul id="category-filter" class="bh-sl-filters">
					<li><h3>Categories</h3></li>
					<li>
						<label>
							<input type="checkbox" name="category" value="Restaurant"> Restaurant
						</label>
					</li>
					<li>
						<label>
							<input type="checkbox" name="category" value="Bar"> Bar
						</label>
					</li>
					<li>
						<label>
							<input type="checkbox" name="category" value="Cafe"> Cafe
						</label>
					</li>
					<li>
						<label>
							<input type="checkbox" name="category" value="Bakery"> Bakery
						</label>
					</li>
					<li>
						<label>
							<input type="checkbox" name="category" value="Coffee"> Coffee
						</label>
					</li>
				</ul>

				<ul id="features-filter" class="bh-sl-filters">
					<li><h3>Features</h3></li>
					<li>
						<label>
							<input type="checkbox" name="feature" value="Fresh Guacamole"> Fresh Guacamole
						</label>
					</li>
					<li>
						<label>
							<input type="checkbox" name="feature" value="Online Ordering"> Online Ordering
						</label>
					</li>
					<li>
						<label>
							<input type="checkbox" name="feature" value="Margaritas"> Margaritas
						</label>
					</li>
				</ul>

				<ul id="city-filter" class="bh-sl-filters">
					<li><h3>City</h3></li>
					<li>
						<select name="city">
							<option value="">All cities</option>
							<option value="Minneapolis">Minneapolis</option>
							<option value="Bloomington">Bloomington</option>
							<option value="Golden Valley">Golden Valley</option>
							<option value="St. Louis Park">St. Louis Park</option>
						</select>
					</li>
				</ul>

				<ul id="postal-filter" class="bh-sl-filters">
					<li><h3>Zip</h3></li>
					<li>
						<input type="radio" name="postal" value="55416">55416
					</li>
					<li>
						<input type="radio" name="postal" value="55343">55343
					</li>
					<li>
						<input type="radio" name="postal" value="55402">55402
					</li>
					<li>
						<input type="radio" name="postal" value="55317">55317
					</li>
				</ul>
			</div>
		</form>

	</div>

	<div id="bh-sl-map-container" class="bh-sl-map-container">
		<div id="bh-sl-map" class="bh-sl-map"></div>
		<div class="bh-sl-loc-list">
			<ul class="list"></ul>
		</div>
	</div>
</div>