demo.html

<style>
  form div {
    margin: 5px 0;
  }
</style>
<form name="simple-form" id="simple-form">
  <div>
    <label for="name-input">Name: </label>
    <input required id="name-input" name="name" />
  </div>
  <div>
    <label for="email-input">Email: </label>
    <input required type="email" id="email-input" name="email" />
  </div>
  <button type="submit">Submit</button>
</form>
<h2>Form Output</h2>
<p id="form-output"></p>

index.js

import template from "./demo.html";

document.body.innerHTML = template;

(function () {
  const output = document.getElementById("form-output");
  const form = document.getElementById("simple-form");
  form.onsubmit = () => false;
  console.log("Ready");

  form.addEventListener("submit", () => {
    const formData = new FormData(form);

    let outputHTML = "";
    for (var pair of formData.entries()) {
      outputHTML += `<div>${pair[0]}: ${pair[1]}</div>`;
    }
    output.innerHTML = outputHTML;
  });
})();