Adding a contact form

Framer includes built-in form components for creating contact forms and collecting submissions. You can also connect external services or embed third-party forms directly on your site.

Use Framer’s native forms

Framer’s native forms provide a flexible way to collect information from visitors without relying on external tools.

With native forms, you can:

• Customize forms with multiple input types

• Design different form states and interactions

• Send submissions to email, Google Sheets, or custom webhooks

• Benefit from built-in spam protection and rate limiting

To add a native form:

1. Open the Insert menu.

2. Navigate to Forms.

3. Drag a form component onto your page.

4. Customize the fields, styling, and submission settings.

Use built-in form integrations

Framer includes integrations for common form and lead-generation workflows. Available integrations include Formspark, Hubspot or Typeform.

These integrations can be added and configured directly within your project.

Collect email signups

For email capture and newsletter signups, you can use the Input component.

The Input component supports:

• Loops.so

• Mailchimp

• Formspark

• GetWaitlist

Embed third-party forms

If your preferred form provider is not available as a built-in integration, you can embed it directly into your site.

To embed a third-party form:

1. Copy the embed code or HTML script provided by the form service.

2. Add an Embed component to your page.

3. Paste the code into the Embed component.

This approach works with services such as Beehiiv, Tally, and other providers that offer embed code.