How can I add a contact form to my Framer website

Framer provides built-in form components for collecting leads, bookings, and signups, along with the option to embed external forms using the Embed component.

Using our native form solution

With Framer’s native forms, you can:

  • Customize forms with over 10 input types.

  • Design form states for various interactions.

  • Send data via email, Google Sheets, or custom Webhooks.

  • Benefit from built-in spam protection and rate limiting for enhanced security.

To add a native form:

  1. Go to the Insert Menu → Forms.

  2. Drag and drop the form onto your page to start designing and connecting it.

Screenshot of the Forms menu in the Insert panel that show the different Forms options.

Using our built-in forms

Framer offers a variety of built-in form integrations for specific use cases:

  • Formspark: Simple contact forms for Name, Email, and Message fields.

  • Calendly: For booking appointments and meetings.

  • HubSpot: Add leads directly to your CRM for marketing purposes.

  • Intercom: Enable customer support requests.

  • Typeform: Fully customizable forms for rich user interactions.

Additionally, you can use the Input Component to capture email signups. It supports the following services:

Connecting to other third-party form services

To embed third-party forms like Beehiiv or Tally:

  1. Copy the HTML script provided by the service.

  2. Paste the script into Framer’s Embed component.

Alternatively, use Code Components to build fully custom forms tailored to your needs.

Related resources