Hugo

Add form submissions to your Hugo static site using plain HTML forms or JavaScript for a better user experience.

Quick start

Point your form's action attribute to your onsubmit.dev endpoint:

html

<!-- layouts/partials/contact-form.html -->
<form action="https://onsubmit.dev/f/YOUR_FORM_ID" method="POST">
  <input name="name" placeholder="Your name" required />
  <input name="email" type="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message"></textarea>
  <button type="submit">Send</button>
</form>

Your form ID is available in the onsubmit.dev dashboard after creating a form.

JavaScript submission

For a better user experience without page reloads, submit the form with JavaScript:

html

<form id="contact-form">
  <input name="name" placeholder="Your name" required />
  <input name="email" type="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message"></textarea>
  <button type="submit">Send</button>
  <p id="form-status" hidden></p>
</form>

<script>
  const form = document.getElementById('contact-form');
  const status = document.getElementById('form-status');

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const data = Object.fromEntries(new FormData(form));

    try {
      const res = await fetch('https://onsubmit.dev/f/YOUR_FORM_ID', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      });

      if (res.ok) {
        form.reset();
        status.textContent = 'Thanks! We\'ll be in touch.';
        status.hidden = false;
      } else {
        throw new Error('Submission failed');
      }
    } catch (err) {
      status.textContent = 'Something went wrong. Please try again.';
      status.hidden = false;
    }
  });
</script>

File uploads

For forms with file inputs, use FormData directly:

javascript

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(form);

  const res = await fetch('https://onsubmit.dev/f/YOUR_FORM_ID', {
    method: 'POST',
    body: formData, // Don't set Content-Type header
  });
});