Integrating Postbox in a Framer Site: Waitlist Form in 5 Minutes

You’ve built a beautiful landing page in Framer. Now you need to collect emails for your waitlist. The typical options — embedding a Typeform, spinning up a backend, or wiring up Google Sheets through Zapier — all feel like overkill for what should be simple.

With Postbox, you define a schema, get an API endpoint, and POST to it. Here’s how to add a waitlist form to your Framer site in about five minutes.

Step 1: Create Your Form in Postbox

Log into Postbox and create a new form. Define a simple schema with the fields you need:

{
  "name": "Waitlist",
  "fields": [
    { "name": "email", "type": "email", "required": true },
    { "name": "name", "type": "text", "required": false }
  ]
}

Once created, Postbox gives you an endpoint like:

POST https://usepostbox.com/api/{hash}/f/waitlist

Copy this — you’ll need it in a moment.

Step 2: Add a Code Component in Framer

In Framer, create a new Code Component. This lets you write custom React that lives inside your Framer canvas.

Here’s the component:

import { useState } from "react"

export default function WaitlistForm() {
  const [email, setEmail] = useState("")
  const [status, setStatus] = useState("idle")

  const handleSubmit = async (e) => {
    e.preventDefault()
    setStatus("sending")

    const res = await fetch(
      "https://usepostbox.com/api/YOUR_HASH/f/waitlist",
      {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      }
    )

    setStatus(res.ok ? "success" : "error")
  }

  if (status === "success") {
    return <p>You're on the list!</p>
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="you@email.com"
        required
      />
      <button type="submit" disabled={status === "sending"}>
        {status === "sending" ? "Joining..." : "Join Waitlist"}
      </button>
    </form>
  )
}

Replace YOUR_HASH with the hash from your Postbox dashboard. Style the component to match your site using Framer’s built-in props or inline styles.

Step 3: Drop It Into Your Page

Drag your new code component onto your landing page. Position it in your hero section, footer, or wherever you want the form.

That’s it. When someone submits their email:

1. The data hits Postbox’s API
2. Postbox validates it against your schema
3. It shows up in your dashboard instantly

Optional: Enable Spam Detection

If you’re worried about bots flooding your waitlist, enable AI-powered spam detection on your form. Postbox will analyze each submission and flag suspicious ones. It costs about $0.02 per check and catches what honeypots miss.

You can also enable smart replies — define a simple knowledge base (e.g., “Thanks for joining! We’ll email you when we launch.”) and Postbox will auto-respond to each valid submission.

Why Not Just Use a Form Builder?

You could. But form builders give you their UI, not yours. With Postbox:

• You own the frontend. Use Framer’s design tools to make the form look exactly right.
• You get an API. No iframes, no embed scripts, no style conflicts.
• Intelligence is built in. Spam detection, translation, and auto-replies are one toggle away.

If you’re building with Framer, Webflow, or any frontend tool, Postbox handles the backend so you don’t have to.

Next Steps

• Sign up for free and create your first form
• Read the API reference for advanced options like custom validation
• Try pasting your llms.txt into Cursor and let AI create the form for you