<div class="powerTools ss-form js-powerTools is-open" style="max-height:none" data-select="#Form_PowerToolsForm_topics, #Form_PowerToolsForm_departments, select.js-powerTools_extraFilter" data-from-date="#Form_PowerToolsForm_fromDate" data-to-date="#Form_PowerToolsForm_toDate">
    <div class="powerTools_form">
        <form id="Form_PowerToolsForm" action="/en/news/PowerToolsForm" method="post" enctype="application/x-www-form-urlencoded" class="has-filters">
            <p id="Form_PowerToolsForm_error" class="message " style="display: none"></p>
            <fieldset>
                <div id="Form_PowerToolsForm_searchByKeywords_Holder" class="field text">
                    <label class="left" for="Form_PowerToolsForm_searchByKeywords">Search</label>
                    <div class="middleColumn">
                        <input type="text" name="searchByKeywords" class="text" id="Form_PowerToolsForm_searchByKeywords" placeholder="Type keywords" />
                    </div>
                </div>
                <div id="Form_PowerToolsForm_topics_Holder" class="field listbox">
                    <label class="left" for="Form_PowerToolsForm_topics">Categories</label>
                    <div class="middleColumn">
                        <select name="topics[]" class="listbox" id="Form_PowerToolsForm_topics" data-placeholder="Filter by category" multiple="multiple">
              <option value="40">Alumni News</option>
              <option value="35">Competence Centre Language Studies News</option>
              <option value="34">Competence Centre Regional History News</option>
              <option value="24">Faculty of Computer Science News</option>
              <option value="51">Faculty of Design and Art News</option>
              <option value="31">Faculty of Economics News</option>
              <option value="441">Faculty of Education News</option>
              <option value="381">Faculty of Science and Technology News</option>
              <option value="33">Library News</option>
              <option value="70">Press Releases Archive</option>
              <option value="420">Research News</option>
              <option value="422">Students News</option>
              <option value="56">Tourism Management News</option>
              <option value="2" selected="selected">UniNews</option>
            </select>
                    </div>
                </div>
                <div class="fieldWrap fieldWrap-2col">
                    <div id="Form_PowerToolsForm_fromDate_Holder" class="field date text">
                        <label class="left" for="Form_PowerToolsForm_fromDate">From Date</label>
                        <div class="middleColumn">
                            <input type="text" name="fromDate" class="date text" id="Form_PowerToolsForm_fromDate" data-maxdate="0 days" data-isoDateformat="yyyy-MM-dd" data-jquerydateformat="yy-mm-dd" />
                        </div>
                    </div>
                    <div id="Form_PowerToolsForm_toDate_Holder" class="field date text">
                        <label class="left" for="Form_PowerToolsForm_toDate">To Date</label>
                        <div class="middleColumn">
                            <input type="text" name="toDate" class="date text" id="Form_PowerToolsForm_toDate" data-isoDateformat="yyyy-MM-dd" data-jquerydateformat="yy-mm-dd" />
                        </div>
                    </div>
                </div>
                <input type="hidden" name="SecurityID" value="194e413b750a233577c28138b6ee52ed2fe82f39" class="hidden" id="Form_PowerToolsForm_SecurityID" />
                <div class="clear">
                    <!-- -->
                </div>
            </fieldset>

            <div class="Actions">
                <button type="submit" name="action_applyFilters" value="Search" class="action is-submitBtn" id="Form_PowerToolsForm_action_applyFilters">
          Search
        </button>
                <button type="submit" name="action_clearFilters" value="Clear search" class="action is-clearBtn" id="Form_PowerToolsForm_action_clearFilters">
          Clear search
        </button>
            </div>
        </form>

    </div>
</div>
<div
  class="powerTools ss-form js-powerTools is-open"
  style="max-height:none"
  data-select="#Form_PowerToolsForm_topics, #Form_PowerToolsForm_departments, select.js-powerTools_extraFilter"
  data-from-date="#Form_PowerToolsForm_fromDate"
  data-to-date="#Form_PowerToolsForm_toDate"
>
  <div class="powerTools_form">
    <form id="Form_PowerToolsForm" action="/en/news/PowerToolsForm" method="post" enctype="application/x-www-form-urlencoded" class="has-filters">
      <p id="Form_PowerToolsForm_error" class="message " style="display: none"></p>
      <fieldset>
        <div id="Form_PowerToolsForm_searchByKeywords_Holder" class="field text">
          <label class="left" for="Form_PowerToolsForm_searchByKeywords">Search</label>
          <div class="middleColumn">
            <input type="text" name="searchByKeywords" class="text" id="Form_PowerToolsForm_searchByKeywords" placeholder="Type keywords" />
          </div>
        </div>
        <div id="Form_PowerToolsForm_topics_Holder" class="field listbox">
          <label class="left" for="Form_PowerToolsForm_topics">Categories</label>
          <div class="middleColumn">
            <select name="topics[]" class="listbox" id="Form_PowerToolsForm_topics" data-placeholder="Filter by category" multiple="multiple">
              <option value="40">Alumni News</option>
              <option value="35">Competence Centre Language Studies News</option>
              <option value="34">Competence Centre Regional History News</option>
              <option value="24">Faculty of Computer Science News</option>
              <option value="51">Faculty of Design and Art News</option>
              <option value="31">Faculty of Economics News</option>
              <option value="441">Faculty of Education News</option>
              <option value="381">Faculty of Science and Technology News</option>
              <option value="33">Library News</option>
              <option value="70">Press Releases Archive</option>
              <option value="420">Research News</option>
              <option value="422">Students News</option>
              <option value="56">Tourism Management News</option>
              <option value="2" selected="selected">UniNews</option>
            </select>
          </div>
        </div>
        <div class="fieldWrap fieldWrap-2col">
          <div id="Form_PowerToolsForm_fromDate_Holder" class="field date text">
            <label class="left" for="Form_PowerToolsForm_fromDate">From Date</label>
            <div class="middleColumn">
              <input type="text" name="fromDate" class="date text" id="Form_PowerToolsForm_fromDate" data-maxdate="0 days" data-isoDateformat="yyyy-MM-dd" data-jquerydateformat="yy-mm-dd" />
            </div>
          </div>
          <div id="Form_PowerToolsForm_toDate_Holder" class="field date text">
            <label class="left" for="Form_PowerToolsForm_toDate">To Date</label>
            <div class="middleColumn">
              <input type="text" name="toDate" class="date text" id="Form_PowerToolsForm_toDate" data-isoDateformat="yyyy-MM-dd" data-jquerydateformat="yy-mm-dd" />
            </div>
          </div>
        </div>
        <input type="hidden" name="SecurityID" value="194e413b750a233577c28138b6ee52ed2fe82f39" class="hidden" id="Form_PowerToolsForm_SecurityID" />
        <div class="clear"><!-- --></div>
      </fieldset>

      <div class="Actions">
        <button type="submit" name="action_applyFilters" value="Search" class="action is-submitBtn" id="Form_PowerToolsForm_action_applyFilters">
          Search
        </button>
        <button type="submit" name="action_clearFilters" value="Clear search" class="action is-clearBtn" id="Form_PowerToolsForm_action_clearFilters">
          Clear search
        </button>
      </div>
    </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",
  "search": {
    "id": "Search",
    "label": "Search",
    "placeholder": "Type keywords"
  },
  "keywords": {
    "id": "Categories",
    "label": "Categories",
    "attr": "data-placeholder=\"Filter by category\" multiple",
    "options": [
      {
        "value": "option-1",
        "label": "Option 1",
        "selected": true
      },
      {
        "value": "option-2",
        "label": "Option 2"
      },
      {
        "value": "option-3",
        "label": "Option 3"
      }
    ]
  },
  "fromDate": {
    "id": "From",
    "label": "From date",
    "placeholder": null
  },
  "toDate": {
    "id": "To",
    "label": "To date",
    "placeholder": null
  },
  "submit": {
    "label": "Search",
    "class": "js-comForm_submit",
    "el": "button",
    "attr": "type=\"submit\""
  },
  "cancel": {
    "label": "Cancel search",
    "class": "btn-close js-comForm_close",
    "el": "button",
    "attr": "type=\"submit\""
  },
  "class": "is-open"
}

By default the form is hidden on small / mobile devices and toggled via a button (added the .is-open class to the module, the button is not displayed here).

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

To see a working implementation visit https://www.unibz.it/en/news/?topics=2