<!-- Kids, don't do this at home! Put error messages close to the
  fields where they belong. However, for the cases where you really
  need this kind of functionality, Hyperform has you covered. -->

<form>
  <div id="errors"></div>
  <p>
    <label>
      Field 1 (URL):<br>
      <input type="url" name="foo" required>
    </label>
  </p>
  <p>
    <label>
      Field 2 (date):<br>
      <input type="date" name="bar" required>
    </label>
  </p>
  <p>
    <button>go</button>
  </p>
</form>

<script>
var container = document.getElementById('errors');

/* change Hyperform's renderer to write into the global error div */
hyperform.setRenderer('attachWarning', function(warning, element) {
  if (element.labels && element.labels.length) {
    /* add the label's text, if we have one */
    warning.insertAdjacentText('afterbegin', element.labels[0].textContent);
  }

  container.appendChild(warning);
});

hyperform(window, {
  classes: {
    // the default .hf-warning has a special style appended. Change the class:
    warning: 'warning'
  }
});
</script>