Submit a form with JS

submit-form.js

/** @param {HTMLFormElement} form */
async function submitForm(form) {
  const body = new FormData(body)
  
  return fetch(form.action, {
    method: form.method,
    body,
  })
}

// Replace selector with whatever is suitable for your form
const form = document.querySelector('[data-submit-me-with-js-pls]')

form.addEventListener('submit', async event => {
  event.preventDefault()
  
  try {
    await submitForm(form)

    // Handle success
  } catch (error) {
    // Handle any errors
  } finally {
    // Optional. Clean up after yourself
  }
})

The function gets all the form data from your HTML, so if this script fails to load for any reason, your HTML should already be configured in a state where the form can submit successfully.

For example:

<form action="/my-endpoint">
  <label for="message">
    Message
  </message>

  <button type="submit">
    Go on then, submit me
  </button>
</form>

In Liquid you can use the form tag to generate a form

{% form 'contact' %}
  <button type="submit">
    Submit
  </button>
{% endform %}