Adding a Form to Framer

    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

    Step 1: Create a Formboost Endpoint

    Log in to your Formboost dashboard and create a new endpoint. Copy the endpoint URL — it looks like:

    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:

    1export default function ContactForm() {
2  return (
3    <form
4      action="https://formboost.app/f/YOUR_ENDPOINT_ID"
5      method="POST"
6      style={{ display: "flex", flexDirection: "column", gap: 12 }}
7    >
8      <input
9        type="text"
10        name="name"
11        placeholder="Your name"
12        required
13        style={{ padding: "8px 12px", borderRadius: 6, border: "1px solid #ccc" }}
14      />
15      <input
16        type="email"
17        name="email"
18        placeholder="Email address"
19        required
20        style={{ padding: "8px 12px", borderRadius: 6, border: "1px solid #ccc" }}
21      />
22      <textarea
23        name="message"
24        placeholder="Your message"
25        rows={4}
26        style={{ padding: "8px 12px", borderRadius: 6, border: "1px solid #ccc" }}
27      />
28      <button
29        type="submit"
30        style={{
31          padding: "10px 20px",
32          background: "#0070f3",
33          color: "#fff",
34          border: "none",
35          borderRadius: 6,
36          cursor: "pointer",
37        }}
38      >
39        Send
40      </button>
41    </form>
42  )
43}

    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:

    1<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.

    Next Steps

    PreviousHTTP WebhookNextAdding a Form to Squarespace