Webflow

Formcarry stores each submission and sends the notification email. The visitor lands on formcarry’s thank you page or stays on the page with Webflow’s Success message after you add the script on this page.

Prerequisites

Before you start, you need:

A formcarry account. Sign up is free.
A form in the dashboard. Its endpoint is on the form’s Setup page. The examples use https://formcarry.com/s/AbC123xyz; put yours in its place.

1. Open the form’s settings

Select the Form block on the canvas or in the Navigator and open the Settings panel.

2. Remove Webflow and Email notifications

If Webflow or Email notifications are listed under Send to, click the delete icon next to each. Webflow does not combine either with a custom action.

3. Add the custom action

Click the add icon next to Send to and select Custom action. Paste the endpoint into the Action field:

https://formcarry.com/s/AbC123xyz

Set the Method to POST rather than GET, otherwise formcarry answers with a page that says GET is not allowed. Click Save.

4. Publish the site

Click Publish. Submissions reach formcarry once the site is published.

Field names

Every input has a Name: select the input and open the Settings panel. Formcarry stores the value under that name. Name the visitor’s address field email rather than contact or your address, otherwise replying to a notification goes nowhere and the auto response is not sent. Set its Text type to email. The default Form block’s Name and Email address inputs have a Name too; check both. A Name with spaces is sent with hyphens in their place, so Phone Number arrives as Phone-Number. A radio button group is sent under its Group name with the chosen Choice value. A select is sent under its Name with the choice’s Value, not its Text.

After the visitor submits

With a custom action, Webflow does not store the submission and does not send its own notification email, so Site settings > Forms stays empty for this form. The submission is on the form’s page in the dashboard, and the notification email comes from formcarry. Webflow’s script does not handle a form with a custom action, so the browser posts it itself. The visitor lands on formcarry’s thank you page, or on the redirect URL when you set one in the dashboard, and Webflow’s Success and Error messages never show. To show them and keep the visitor on the page, add the script in the next section.

How do I keep the visitor on the page?

Custom code needs a Core, Growth, Agency or Freelancer Workspace. Alternatively, it needs a site with an active Site plan. Webflow renders the Form block as a w-form wrapper holding the form, the Success message (w-form-done), and the Error message (w-form-fail). This means a script can find all three without IDs. To post in the background and show them, open the page’s Page settings, paste this under Custom code in the Before </body> tag field, and publish again:

<script>
  document.querySelectorAll('form[action^="https://formcarry.com/s/"]').forEach((form) => {
    const block = form.closest(".w-form")
    const done = block.querySelector(".w-form-done")
    const fail = block.querySelector(".w-form-fail")

    form.addEventListener("submit", async (e) => {
      e.preventDefault()
      const body = new FormData(form)
      let data = {}
      try {
        const res = await fetch(form.action, {
          method: "POST",
          headers: { "Accept": "application/json" },
          body,
        })
        data = await res.json()
      } catch (err) {}

      const stored = data.code === 200
      if (stored && form.dataset.redirect) return location.assign(form.dataset.redirect)
      form.style.display = stored ? "none" : ""
      done.style.display = stored ? "block" : "none"
      fail.style.display = stored ? "none" : "block"
      if (data.message && !stored) (fail.firstElementChild || fail).textContent = data.message
    })
  })
</script>

The script applies to every form on the page whose action is a formcarry endpoint.

A stored submission hides the form and shows the Success message, or sends the visitor to the redirect set in the form’s Settings panel.
A refused submission shows the Error message with formcarry’s reason, such as the 15 second wait. Drop the last line to keep Webflow’s own Error text.

Keep the Custom action set rather than removing it once the script runs, otherwise the script finds no form and Webflow handles the submission itself.

To send a value the visitor does not type, append it to the body before the request:

const body = new FormData(form)
body.append("page", location.pathname)

The value is stored under page like any other field. A 422 carries errors, one entry per failing field, each with a message. To show each message on its field, add this at the end of the submit handler:

if (data.code === 422) {
  for (const name in data.errors) {
    const field = form.elements[name]
    field.setCustomValidity(data.errors[name].message)
    field.addEventListener("input", () => field.setCustomValidity(""), { once: true })
  }
  form.reportValidity()
}

The browser reports each message on its field, and the Error message shows as well. For every page of the site, paste the script under Site settings > Custom code > Footer code instead.

Spam blocker

Leave Webflow’s reCAPTCHA element out of this form. Webflow’s docs say it does not work as expected once a custom form action is set, and formcarry reads only its own token field, g-recaptcha-response. reCAPTCHA validation in Site settings > Apps & Integrations applies to every form on the site, so test this form again after turning it on for another form. For a honeypot, add an Input to the form, set its Name to _gotcha, hide it with display: none in the Style panel, and add a custom attribute tabindex with the value -1. A submission that fills it is marked as spam.

Test it

Fill in the form on the published site and submit it once. The submission is on the form’s page in the dashboard, and the notification email arrives at your account’s address. A second test within 15 seconds from the same address gets a 429, so wait 15 seconds before sending again.

What’s next

What every form needs: field names, hidden inputs, limits and the answers.
Thank you pages: what the visitor sees after submitting.
Spam protection: the challenges, the filter and the honeypot.

Stuck? Write to help@formcarry.com. Include the form id.

Getting Started

Features

Email Configuration

Integrations

Frameworks

Site builders

Build with AI

Connect over MCP

Prerequisites

1. Open the form’s settings

2. Remove Webflow and Email notifications

3. Add the custom action

4. Publish the site

Field names

After the visitor submits

How do I keep the visitor on the page?

Spam blocker

Test it

What’s next

​Prerequisites

​1. Open the form’s settings

​2. Remove Webflow and Email notifications

​3. Add the custom action

​4. Publish the site

​Field names

​After the visitor submits

​How do I keep the visitor on the page?

​Spam blocker

​Test it

​What’s next

Prerequisites

1. Open the form’s settings

2. Remove Webflow and Email notifications

3. Add the custom action

4. Publish the site

Field names

After the visitor submits

How do I keep the visitor on the page?

Spam blocker

Test it

What’s next