guides

Framer Contact Form — Get Submissions to Your Email (Free)

Header graphic that shows the Framer logo

Add a Contact Form to Your Framer Site

Get form submissions delivered straight to your inbox. No backend code required.

Get Started FreeView Demo


Why Use FormBackend with Framer?

Framer’s built-in forms work for simple use cases, but they have limitations. If you need more control over where your submissions go, want to connect forms to other tools, or need features like file uploads, FormBackend is a better fit.

Here’s what you get with FormBackend:

Email notifications — Receive form submissions directly in your inbox, formatted exactly how you want them.

Spam protection — Block bots automatically with built-in filtering, or add hCaptcha, Google reCAPTCHA, or Cloudflare Turnstile for extra security.

File uploads — Let visitors attach documents, images, or PDFs to their submissions.

Integrations — Send submissions to Slack, Discord, Notion, Airtable, Google Sheets, and more.

Custom redirects — Send visitors to a thank-you page after they submit.

Webhooks — Connect to any tool with webhook support for custom workflows.

Submission dashboard — View, search, and export all your form submissions from one place.

All of this is available on the free plan. No credit card required.


How It Works (3 Steps)

Adding a FormBackend-powered contact form to your Framer site takes about 5 minutes.

Step 1: Create a FormBackend Form

First, sign up for a free FormBackend account. Once you’re in, create a new form. You’ll get a unique form URL that looks like this:

https://www.formbackend.com/f/abc123xyz

Copy this URL — you’ll need it in the next step.

While you’re here, you can also configure: - Which email address receives submissions - What fields to expect (name, email, message, etc.) - Whether to enable spam protection - Any integrations you want to connect

Step 2: Connect Your Framer Form

In Framer, you have two options for adding a contact form:

Option A: Use Framer’s Native Form Component

This is the easiest approach if you want to stay within Framer’s visual editor.

  1. Add a Form component to your page from the Insert panel
  2. Select the form on your canvas
  3. In the right sidebar, find the form settings
  4. Set the Action URL to your FormBackend form URL
  5. Make sure the Method is set to POST

That’s it. Your form submissions will now go to FormBackend, and you’ll receive them via email.

Option B: Use an Embed Component with Custom HTML

If you want more control over the form markup, you can paste custom HTML into a Framer Embed component.

Here’s a simple contact form you can use:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>
  </div>

  <div>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
  </div>

  <div>
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>

  <button type="submit">Send Message</button>
</form>

Replace YOUR_FORM_ID with your actual FormBackend form ID.

To add this to Framer: 1. From the Insert panel, add an Embed component 2. Paste your HTML code 3. Style the embed container as needed

Step 3: Test Your Form

Publish your Framer site and submit a test entry. You should receive an email notification within a few seconds.

You can also log into your FormBackend dashboard to see all submissions, including any that might have been filtered as spam.


Customizing Your Form

Adding and Removing Fields

FormBackend works with any standard HTML form fields. Common fields include:

  • Text inputs — for names, subjects, company names
  • Email inputs — for email addresses (with built-in validation)
  • Textarea — for longer messages
  • Select dropdowns — for categories or departments
  • Checkboxes — for consent or multiple options
  • File inputs — for attachments

Just add the fields to your form HTML or use Framer’s form builder to add them visually. FormBackend automatically captures whatever fields you include.

Styling Your Form

If you’re using Framer’s native form component, style it like any other Framer element — adjust colors, fonts, spacing, and hover states in the design panel.

If you’re using custom HTML in an Embed, add your CSS directly in a <style> tag within the embed, or style it to match your Framer site’s design system.

Setting Up a Thank-You Page

By default, FormBackend shows a simple confirmation message after submission. But you probably want to redirect users to a custom thank-you page on your site.

To set this up: 1. Create a thank-you page in Framer (e.g., /thank-you) 2. In your FormBackend form settings, enable Redirect after submission 3. Enter your thank-you page URL

Learn more about custom thank-you pages and redirect options.


Adding Spam Protection

Contact forms attract spam bots. FormBackend includes automatic spam filtering that catches most junk submissions, but you can add an extra layer of protection with a CAPTCHA.

FormBackend supports three CAPTCHA providers:

Cloudflare Turnstile — A privacy-friendly, often invisible CAPTCHA. Recommended for most sites.

hCaptcha — Similar to reCAPTCHA but more privacy-focused. Good alternative if you want to avoid Google.

Google reCAPTCHA — The most widely recognized CAPTCHA. Use v2 (checkbox) or v3 (invisible).

To enable CAPTCHA protection: 1. Go to your form settings in FormBackend 2. Choose your preferred CAPTCHA provider 3. Add the CAPTCHA widget to your form (instructions provided for each provider)

Even without CAPTCHA, FormBackend’s built-in spam filtering blocks most automated submissions. You can review filtered submissions in your dashboard to make sure nothing legitimate was caught.


Connecting to Other Tools

One of the biggest advantages of using FormBackend is the ability to connect your forms to other tools in your workflow.

Slack — Get instant notifications in a Slack channel when someone submits your form.

Discord — Same as Slack, but for Discord servers. Great for community sites.

Notion — Automatically create new entries in a Notion database for each submission.

Airtable — Send submissions to an Airtable base for tracking, filtering, and collaboration.

Google Sheets — Append each submission as a new row in a spreadsheet.

Mailchimp — Add form submitters to your email list automatically.

Using Webhooks

For tools that aren’t directly supported, you can use webhooks. FormBackend sends a POST request to any URL you specify whenever a form is submitted.

This lets you connect to: - Zapier (for 5,000+ app integrations) - Make (Integromat) - n8n - Custom backends or APIs


Framer Form Examples

Need inspiration? Here are some common form types you can build:

Simple contact form — Name, email, message. View example

Contact form with file uploads — Let visitors attach files. View example

Contact form with AJAX — Submit without page reload. View example

Multi-department contact form — Route submissions based on selected department.

Newsletter signup — Single email field that connects to Mailchimp.

Quote request form — Detailed forms with dropdowns, checkboxes, and file uploads.

You can also remix our Framer demo form directly into your Framer account.


Frequently Asked Questions

Is FormBackend free?

Yes. The free plan includes 100 submissions per month and all core features including email notifications, spam filtering, and integrations. Paid plans start at $9/month for higher volumes and additional features.

Do I need to write any code?

No. You can use Framer’s visual form builder and just paste in your FormBackend URL. If you want more control, you can write custom HTML, but it’s not required.

Can visitors upload files through the form?

Yes. FormBackend supports file uploads up to 10MB per file. Just add a file input field to your form.

How do I prevent spam submissions?

FormBackend includes automatic spam filtering that catches most bot submissions. For extra protection, you can enable hCaptcha, Google reCAPTCHA, or Cloudflare Turnstile.

Can I connect form submissions to Notion, Slack, or other tools?

Yes. FormBackend has built-in integrations for Slack, Discord, Notion, Airtable, Google Sheets, Mailchimp, and more. You can also use webhooks to connect to any tool.

Does FormBackend work with Framer’s native form component?

Yes. Just set your FormBackend URL as the form’s action URL and set the method to POST. Works exactly like any other form endpoint.

Can I customize what happens after someone submits the form?

Yes. You can redirect users to any URL after submission — like a custom thank-you page on your Framer site. You can also customize the email notifications you receive.

Where can I see my form submissions?

All submissions are stored in your FormBackend dashboard, where you can view, search, filter, and export them. You’ll also receive email notifications for each submission (configurable).


Get Started

Ready to add a contact form to your Framer site?

Create Your Free Form

No credit card required. Set up in under 5 minutes.