Framer Forms: Code Component Setup

Collect submissions from a Framer site with a Code Component or embed that posts to a Formboost endpoint: fields, redirect, spam screening, notifications.

Framer lets you embed custom HTML anywhere on your site using Code Components. Formboost receives the submissions, handles spam filtering, and sends you email notifications.

Prerequisites

A Formboost account (sign up free)
A Framer project

Step 1: Create a Formboost Endpoint

https://formboost.app/f/YOUR_ENDPOINT_ID

Step 2: Add a Code Component in Framer

In Framer, open your project and go to Assets → Code → New Code File. Create a new component and paste the following:

export default function ContactForm() {
  return (
    <form
      action="https://formboost.app/f/YOUR_ENDPOINT_ID"
      method="POST"
      style={{ display: "flex", flexDirection: "column", gap: 12 }}
    >
      <input
        type="text"
        name="name"
        placeholder="Your name"
        required
        style={{ padding: "8px 12px", borderRadius: 6, border: "1px solid #ccc" }}
      />
      <input
        type="email"
        name="email"
        placeholder="Email address"
        required
        style={{ padding: "8px 12px", borderRadius: 6, border: "1px solid #ccc" }}
      />
      <textarea
        name="message"
        placeholder="Your message"
        rows={4}
        style={{ padding: "8px 12px", borderRadius: 6, border: "1px solid #ccc" }}
      />
      <button
        type="submit"
        style={{
          padding: "10px 20px",
          background: "#0070f3",
          color: "#fff",
          border: "none",
          borderRadius: 6,
          cursor: "pointer",
        }}
      >
        Send
      </button>
    </form>
  )
}

Replace YOUR_ENDPOINT_ID with your actual endpoint ID.

Step 3: Place the Component on Your Page

Drag the ContactForm component from the Assets panel onto any page or frame. Style it using Framer's layout controls or by editing the component directly.

Step 4: Custom Redirect (Optional)

By default, Formboost redirects to a hosted thank-you page after submission. To redirect to your own page, add a hidden field:

<input type="hidden" name="_redirect" value="https://yoursite.framer.website/thank-you" />

Step 5: Test It

Publish your Framer site and submit the form. The submission will appear in your Formboost dashboard within seconds, and you'll receive an email notification.