Adding a Form to Framer

In this guide, we’ll show you how to embed a contact form into your Framer site using Formspree.

Formspree makes it easy to add functional forms to your Framer site. With just a small code snippet, you can start receiving form submissions directly in your inbox, without any server setup, plugins, or backend logic.

By the end of this guide, you’ll have a fully working contact form embedded in your Framer website, styled and powered by Formspree.

Prerequisites

To follow this guide, you’ll need:

• A Formspree account (you can sign up for free here)
• A published Framer site (or a draft site you’re actively building)
• Access to the Embed Code component in Framer

Adding a Form to Framer

Framer provides an Embed Component that you can use to add custom HTML to your Framer websites. You can also use that to add a simple HTML form connected to the Formspree backend to your Framer websites.

Step 1: Add the Embed Code Component

In the Framer editor, click the + Insert icon in the top-left to add a new layer. Search for Embed and select the Embed component.

This will add the component next to your webpage. Drag it and place it on the webpage where you want your form to appear on the canvas. Once you have placed it correctly, select it and in the right bottom pane, set Embed > Type to HTML.

Once done, you will see a text area where you can paste your custom HTML.

Step 2: Add the Form HTML

We’ll use a pre-built Simple Contact Form from the Formspree Library. Visit the page and copy the HTML code.

In the Embed Code editor, paste the form HTML. You will notice the form appears in the Framer editor, but it looks quite barebones:

To match the style you saw on the Formspree library, copy the CSS for the form from the Formspree library page and paste it inside a <style></style> tag inside the <form></form> tag, like the following:

<form
  action="https://formspree.io/f/{FORM_ID}"
  class="fs-form"
  method="POST"
>
  <!-- Rest of the form code -->

  
  <!-- Add the following <style> tag -->
  <style>
    /* Paste the CSS here */
  </style>

</form>

This should turn the form from a basic HTML structure to a polished contact form that compliments your Framer site’s style:

You’re almost there! Now, you just need to replace the URL in the action attribute of the <form> component with a Formspree form endpoint, and you’ll be set!

Step 3: Create Your Form on Formspree

To do that, go to the Formspree dashboard. If you don’t have an account yet you can sign up here.

Once you have an account, create a new form with ++ Add New > New Form, call it Contact form and update the recipient email to the email where you wish to receive your form submissions.

Then click Create Form.

On the form details page, you will find the Form Endpoint:

Copy the Form Endpoint URL (e.g., https://formspree.io/f/xyznabcd) and paste it in the action attribute of your HTML <form> in the Framer Embed component.

Step 4: Publish and Test Your Form

Click Publish in Framer and open the live site. Fill in the form fields and hit Submit.

If all goes well, you’ll should see a similar “thank you” screen:

You should also receive an email notification on your configured recipient address. This means the form is ready to go!

Bonus Section: Using AJAX to Submit your Framer Form

If you are looking to collect form submissions without redirecting your users to a separate “thank you” page, you can do that by using AJAX in your form’s HTML code. To do that, just add a <script> tag to the <form> tag (just like you added the <style> tag for CSS earlier), and paste the following script in it:

<script>
  var form = document.getElementsByClassName("fs-form")[0];
  async function handleSubmit(event) {
  event.preventDefault();
  var data = new FormData(event.target);
  fetch(event.target.action, {
    method: form.method,
    body: data,
    headers: {
      'Accept': 'application/json'
  }
  }).then(response => {
    if (response.ok) {
      window.alert("Thanks for your submission!")
      form.reset()
    } else {
      response.json().then(data => {
      if (Object.hasOwn(data, 'errors')) {
        window.alert(data["errors"].map(error => error["message"]).join(", "))
      } else {
        window.alert("Oops! There was a problem submitting your form")
      }
    })
  }
  }).catch(error => {
    window.alert("Oops! There was a problem submitting your form")
  });
  }
  form.addEventListener("submit", handleSubmit)
</script>

Here’s what the structure of the HTML code snippet should look like once you have added the styles and the script:

<form
  action="https://formspree.io/f/{FORM_ID}"
  class="fs-form"
  target="_top"
  method="POST"
>
  <!--Form fields here-->
  <div class="fs-button-group">
    <button class="fs-button" type="submit">Submit</button>
  </div>

  <style>
    /** Form styles here */
  </style>

  <script>
    // The AJAX script here
  </script>

</form>

That’s it, you’re done! 🎉

You’ve successfully added a custom Formspree form to your Framer site using the Embed component. You can now start receiving up to 50 responses for free every month, directly in your inbox! If you need a higher limit, feel free to subscribe to one of our plans!

For more advanced features like conditional logic, file uploads, or integrations, visit the Formspree Documentation.

Got Feedback?