CMS
Jul 8, 2025
How to Add and Utilize a Contact Form in Framer
With Framer, you can easily add a contact form using various input types and external service integrations. Efficiently collect user data with basic forms and third-party service connections.
Uploaded by
Translated by
Contents
Table of Contents
This document has been translated from the official Framer blog and includes additional practical information to help domestic users who experience difficulties due to a lack of Korean resources. We hope it is of some assistance to you as you use Framer.
Why are forms necessary?
When running a website, you'll need to gather various data from visitors, such as inquiries, reservations, and email subscriptions. Using the form components provided by Framer, you can easily add various types of forms without coding and integrate them with external services to collect data.
Features of Framer form components
Supports more than 10 input types including text, email, select boxes, checkboxes, etc.
Design various form states directly such as completion and error messages
Send collected data via email, Google Sheets, Webhook, etc.
Built-in features for spam filtering and request rate limiting
How to add a form
Click the
Insertmenu on the left side of the Framer editorSelect the desired form from the
Formssection and drag it to add it to the pageSet up design and data connections
Using Framer's default forms
Framer supports form functions to meet various needs.
Type | Description |
|---|---|
Formspark | A simple contact form for inputting name, email, and message |
Calendly | For scheduling appointments and meetings |
HubSpot | Add leads directly to CRM for marketing purposes |
Intercom | Provides customer support request functionality |
Typeform | Fully customizable forms for rich user interaction |
It is also possible to collect emails using the Input component. This feature supports Loops.so, Mailchimp, Formspark, GetWaitlist services.
Connecting other external form services
To insert external form services like Beehiiv or Tally,
Copy the HTML script provided by the service
Paste it into Framer's Embed component
Alternatively, you can fully customize forms by creating them using Code Components.
Related Materials
How to add Intercom to your website
How to add Mailchimp to your website
How to add Typeform to your website
How to add Formspark to your website
How to add Hubspot Forms to your website
This article is an adapted translation from the Framer official document ‘How can I add a contact form to my Framer website’.
