Webflow

Collect form submissions from your Webflow site with onsubmit.dev. Point the native Form Block at our API or paste an Embed — no paid Webflow plan needed to receive submissions.

Overview

Webflow's built-in form handling requires a paid Site plan to store and forward submissions. With onsubmit.dev, your forms submit directly to our API instead — so you can collect submissions on any plan, including the free one, and get email, Telegram, Slack, webhook, and other notifications out of the box.

There are two ways to wire it up: re-point the native Form Block using custom attributes, or drop in an Embed element with your own HTML.

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

Native Webflow form

Keep Webflow's Form Block and just change where it submits. Select the Form element (the wrapper, not the Form Block) and open Settings → Custom attributes, then add:

text

action = https://onsubmit.dev/f/YOUR_FORM_ID
method = POST

Make sure each input has a name attribute (set it under Settings → Name for every field) — that's the key your submission data is stored under:

html

<!-- This is roughly what Webflow exports for the configured Form Block -->
<form action="https://onsubmit.dev/f/YOUR_FORM_ID" method="POST">
  <input type="text" name="name" placeholder="Your name" required>
  <input type="email" name="email" placeholder="Email" required>
  <textarea name="message" placeholder="Message"></textarea>
  <button type="submit">Send</button>
</form>

Webflow's success and error messages only show for forms it handles itself. When you point the action at onsubmit.dev the browser navigates to our response, so use the JavaScript approach below if you want the visitor to stay on the page.

Embed element

Prefer full control over the markup? Add an Embed element (Add panel → Components → Embed) anywhere on the page and paste a plain HTML 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>

The Embed renders on the published site, so style it with global classes or inline styles. Custom code in Embeds does not run inside the Webflow Designer canvas — publish or preview to test the live form.

JavaScript submission

For a smoother experience without a page reload, submit with JavaScript. Paste this into an Embed element, or add it before </body> under Site settings → Custom code:

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" style="display: none;"></p>
</form>

<script>
  (function () {
    var form = document.getElementById('contact-form');
    var status = document.getElementById('form-status');

    form.addEventListener('submit', function (e) {
      e.preventDefault();
      var data = Object.fromEntries(new FormData(form));

      fetch('https://onsubmit.dev/f/YOUR_FORM_ID', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      })
        .then(function (res) {
          if (res.ok) {
            form.reset();
            status.textContent = 'Thanks! We will be in touch.';
            status.style.display = 'block';
          } else {
            throw new Error('Submission failed');
          }
        })
        .catch(function () {
          status.textContent = 'Something went wrong. Please try again.';
          status.style.display = 'block';
        });
    });
  })();
</script>

Using the native Form Block with JavaScript

If you'd rather design the form in Webflow, give the Form Block an ID (e.g. contact-form) under Settings → ID and add only the <script> portion above via custom code. The script intercepts the submit and posts the data to onsubmit.dev, keeping the visitor on the page.