Cloudflare Pages

Deploy sites with onsubmit.dev forms on Cloudflare Pages. Works with any framework or static site generator.

Overview

onsubmit.dev works out of the box with Cloudflare Pages deployments. Your forms submit directly to onsubmit.dev's API — no server-side configuration required.

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

Quick start

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

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>

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>

Environment variables

Store your form ID in Cloudflare Pages environment variables for easier management:

bash

# Set in Cloudflare dashboard
VITE_CONTACT_FORM_ID=your-form-id