<main>

  <p><a href="#">Here's something to focus on</a></p>
  <p>Press 'Go' to disable the form via <code>&lt;fieldset disabled&gt;</code></p>
  <fieldset id="fields">
<form id="form">
    <input type="text" placeholder="Name" />
    <input type="submit" value="Go" />
</form>
  </fieldset>
<p id="status" hidden>Fields <a href="#">disabled</a> for 5s...</p>

</main>

body {
  font-family: 'Open Sans', Sans-Serif;
    letter-spacing: -1px;
}

main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex-flow: column;
}

main p {
  min-height: 2em;
  margin: 0.5em;

  code {
    font-family: monospace;
  }

  &[hidden] {
    display: inherit;
    opacity: 0;
  }
}

#fields {
  margin-bottom: 12px;
}

#fields input {
  font: inherit;
  line-height: inherit;
  border: 2px solid #33333a55;
  border-radius: 12px;
  padding: 8px;

  &[type="submit"] {
    font-weight: bold;
    cursor: pointer;
    background: #2229;
    color: white;
  }

  &:focus {
    outline: none;
    border-color: #00f8;
  }
}

#fields[disabled] {
  opacity: 0.2;
  cursor: not-allowed;

  input {
    cursor: inherit !important;
  }
}

const form = document.getElementById('form');
const fields = document.getElementById('fields');
const status = document.getElementById('status');

form.addEventListener('submit', (ev) => {
  ev.preventDefault();
  fields.disabled = true;
  status.hidden = false;

  window.setTimeout(() => {
    fields.disabled = false;
    status.hidden = true;

    // clear text fields for a demo
    const toClear = Array.from(fields.querySelectorAll('input[type="text"]'));
    toClear.forEach((x) => x.value = '');
  }, 5 * 1000);

});