Header & Footer
Search
A site search form, inline or an expanding icon.
Live demo
See it in action
Inline form — always visible
Icon — expands on click
The markup
Clean, lean code
This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.
<section>
<div class="fw-container">
<div class="fw-row">
<div class="fw-col-12">
<p class="sc-spec-label">Inline form — always visible</p>
<div class="sc-site-search search-8a7dc701 sc-site-search--inline-form">
<form role="search" method="get" class="sc-search-form" action="https://demos.unysonplus.com/">
<label class="screen-reader-text" for="search-field">Search for:</label>
<input type="search" id="search-field" class="sc-search-field" placeholder="Search the site …" value="" name="s">
<button type="submit" class="sc-search-submit" aria-label="Search"><svg class="sc-search-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="7" cy="7" r="5"></circle><line x1="11" y1="11" x2="14.5" y2="14.5"></line></svg></button>
</form>
</div>
<p class="sc-spec-label">Icon — expands on click</p>
<div class="sc-site-search search-3da5ac1d sc-site-search--icon-toggle">
<button type="button" class="sc-search-toggle" aria-expanded="false" aria-label="Open search"><svg class="sc-search-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="7" cy="7" r="5"></circle><line x1="11" y1="11" x2="14.5" y2="14.5"></line></svg></button>
<div class="sc-search-panel" hidden>
<form role="search" method="get" class="sc-search-form" action="https://demos.unysonplus.com/">
<label class="screen-reader-text" for="search-field">Search for:</label>
<input type="search" id="search-field" class="sc-search-field" placeholder="Search …" value="" name="s">
<button type="submit" class="sc-search-submit" aria-label="Search"><svg class="sc-search-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="7" cy="7" r="5"></circle><line x1="11" y1="11" x2="14.5" y2="14.5"></line></svg></button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>To learn more about the Search shortcode, please check out the online manual here.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.