main.js

/**
 * Create form as soon as the page is loaded.
 */
 document.addEventListener('DOMContentLoaded', (event) => {
  createForm();
});

createForm = () => {
  const container = document.querySelector('#form-container');

  const title = document.createElement('h4');
  title.innerHTML = 'Personal Details';
  container.appendChild(title);

  const form = document.createElement('form');
  form.setAttribute('id', 'form');
  form.setAttribute('method', 'post');
  form.setAttribute('action', '<server post endpoint>');

  // Create Label for first name
  const firstNameLabel = document.createElement('label');
  firstNameLabel.setAttribute('for', 'name');
  firstNameLabel.innerHTML = 'Name';
  form.appendChild(firstNameLabel);

  // Create Input for first name
  const firstNameInput = document.createElement('input');
  firstNameInput.setAttribute('id', 'name');
  firstNameInput.type = 'text';
  firstNameInput.setAttribute('placeholder', 'First name');
  firstNameInput.setAttribute('autocomplete', 'given-name');
  firstNameInput.setAttribute('required', '');
  firstNameInput.setAttribute('name', 'name');
  form.appendChild(firstNameInput);

  const submitButton = document.createElement('button');
  submitButton.type = 'submit';
  submitButton.innerHTML = 'Submit';
  form.appendChild(submitButton);

  form.addEventListener('submit', function(event) {
  // Setup the request
  var headers = new Headers();
  // Set some Headers
  headers.set('Accept', 'application/json');
  // Get Data from Form
  var formData = new FormData();
  formData.append(form[0].name, form[0].value);
  formData.append(form[1].name, form[1].value);

  // Make the request
  fetch('<server post endpoint>', {
    method: 'POST',
    headers,
    body: formData
  });

  event.preventDefault();
});

  container.appendChild(form);
}