<div class="mainSearch js-header-target is-open" id="MainSearch">
    <div class="l-container">
        <form class="mainSearch_form" action="$Link" method="get">
            <input type="text" name="searchByKeywords" id="mainSearchField" class="mainSearch_input js-focus-target" placeholder="Search..." autocomplete="off">
            <label for="mainSearchField" class="u-sr-only">
        Search
      </label>
            <button class="mainSearch_btn" type="submit">
        <span class="i i-search-white"></span>
        <span class="u-sr-only">
          Submit search
        </span>
      </button>
        </form>
    </div>
</div>
<div class="mainSearch js-header-target {{ class }}" id="MainSearch">
  <div class="l-container">
    <form class="mainSearch_form" action="$Link" method="get">
      <input type="text" name="searchByKeywords" id="mainSearchField" class="mainSearch_input js-focus-target" placeholder="Search..." autocomplete="off">
      <label for="mainSearchField" class="u-sr-only">
        Search
      </label>
      <button class="mainSearch_btn" type="submit">
        <span class="i i-search-white"></span>
        <span class="u-sr-only">
          Submit search
        </span>
      </button>
    </form>
  </div>
</div>
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
  "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
  "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
  "url": "#",
  "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
  "class": "is-open"
}

The search form is included in the header and hidden. It is toggled by adding a a is-open class via a button (button is not displayed here).

The white space at the top of the element is needed to dosplay the search correctly inside the header.

For demonstration purposes the .is-open class is added in this example.

To see a working implementation visit https://www.unibz.it and click the search icon in the header or have a look at the “Full Header” example in this library.