Framer

You set the input names and the endpoint in Framer; the code component at the end of this page posts from each visitor’s browser instead, with the spam blocker and formcarry’s thank you 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. Add a form in Framer

Open the Insert menu, go to Forms and drag a form component onto your page. To add an input, select the form on the canvas, click the + icon in the bottom toolbar and pick Text, Checkbox, Radio or Select.

2. Name every input

Select an input and set its Name in the properties panel on the right. Framer posts the inputs as JSON keyed by that name, so it is the field name you see in the dashboard.

3. Send the form to your endpoint

Select the form on the canvas. In the right sidebar, click Add… next to Send To and choose Webhook. Enter your endpoint as the webhook URL:

https://formcarry.com/s/AbC123xyz

Framer signs each request with a secret if you set one here; formcarry does not check the signature.

4. Publish the site

Click Publish in the top right corner of the editor.

Field names

A Checkbox sends true or false. Name the visitor’s address input email: it becomes the reply to address of the notification email and the recipient of the auto response. For a value the visitor does not see, enable Hidden on the input rather than turning Visible off, otherwise Framer leaves the input out of the submission.

After the visitor submits

The submission comes from Framer, not from the visitor’s browser. The visitor sees what you set in Framer: a redirect on submit, an overlay, or a change to the button or the form. They never see formcarry’s thank you page. Leave the form’s thank you URL in the dashboard empty rather than setting one, otherwise formcarry answers Framer’s post with a redirect, which Framer does not follow. A stored submission is answered with a 200, which Framer counts as delivered; any other answer makes Framer send the submission again.

Spam blocker

Framer’s own spam protection is on by default and runs on the visitor’s device before Framer sends the submission. Framer’s JSON carries no challenge token. Leave this form’s spam blocker off rather than pasting a secret key into Form Security, otherwise every submission is refused with a 403 (reCAPTCHA) or a 400 (hCaptcha, Turnstile).

A code component that posts from the browser

Framer’s code components are React components rendered on the published site, so a form inside one posts from the visitor’s browser, as on the React page. In the Assets panel select Code, click Create Code File, replace the file’s contents with this component, then add it to your canvas:

import { useState } from "react"

export default function ContactForm() {
  const [status, setStatus] = useState("idle")
  const [message, setMessage] = useState("")

  async function submit(e) {
    e.preventDefault()
    setStatus("sending")
    const res = await fetch("https://formcarry.com/s/AbC123xyz", {
      method: "POST",
      headers: { "Accept": "application/json", "Content-Type": "application/json" },
      body: JSON.stringify(Object.fromEntries(new FormData(e.currentTarget))),
    })
    const data = await res.json()
    setMessage(data.message)
    setStatus(data.code === 200 ? "sent" : "error")
  }

  if (status === "sent") return <p>{message}</p>

  return (
    <form onSubmit={submit}>
      <input name="email" type="email" placeholder="Email" />
      <textarea name="message" placeholder="Message" />
      <input name="_gotcha" type="text" style={{ display: "none" }} tabIndex={-1} autoComplete="off" />
      <button type="submit" disabled={status === "sending"}>Send</button>
      {status === "error" && <p>{message}</p>}
    </form>
  )
}

The input names are the keys formcarry stores. _gotcha is the honeypot: leave it empty, a submission that fills it is marked as spam. A stored submission answers with code: 200; a refused one answers with the reason in message, see What every form needs. Each visitor posts from their own address, so the 15 second window is theirs alone. A challenge’s token is read in the browser, so the spam blocker applies to this form: send the token under the field name formcarry reads, see Spam blocker. Give the component its own form in the dashboard rather than the Webhook form’s endpoint, otherwise turning the spam blocker on refuses the Webhook submissions. To send a file, add a file input and post the FormData itself, leaving the content type to the browser:

async function submit(e) {
  e.preventDefault()
  setStatus("sending")
  const res = await fetch("https://formcarry.com/s/AbC123xyz", {
    method: "POST",
    headers: { "Accept": "application/json" },
    body: new FormData(e.currentTarget),
  })
  const data = await res.json()
  setMessage(data.message)
  setStatus(data.code === 200 ? "sent" : "error")
}

<input name="attachment" type="file" />

Send Accept and nothing else rather than adding Content-Type yourself, otherwise the multipart boundary is missing and the upload fails. Files are stored on paid plans; on the free plan the rest of the submission is stored without them. To land the visitor on formcarry’s thank you page, or on the form’s redirect if you set one, put action and method on the form and leave onSubmit off:

export default function ContactForm() {
  return (
    <form action="https://formcarry.com/s/AbC123xyz" method="POST">
      <input name="email" type="email" placeholder="Email" />
      <textarea name="message" placeholder="Message" />
      <button type="submit">Send</button>
    </form>
  )
}

The browser posts the form itself, without an Accept header, so the answer is the thank you page or the redirect.

Test it

On the published page, fill the form in 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.

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. Add a form in Framer

2. Name every input

3. Send the form to your endpoint

4. Publish the site

Field names

After the visitor submits

Spam blocker

A code component that posts from the browser

Test it

What’s next

​Prerequisites

​1. Add a form in Framer

​2. Name every input

​3. Send the form to your endpoint

​4. Publish the site

​Field names

​After the visitor submits

​Spam blocker

​A code component that posts from the browser

​Test it

​What’s next

Prerequisites

1. Add a form in Framer

2. Name every input

3. Send the form to your endpoint

4. Publish the site

Field names

After the visitor submits

Spam blocker

A code component that posts from the browser

Test it

What’s next