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 aims to assist domestic users learning Framer by addressing the difficulty caused by a lack of Korean resources. We have translated the content from the official blog into Korean and added practical information. We hope it provides some help to all of you using Framer.
Why are forms necessary?
When running a website, you often need to collect various types of data such as inquiries, reservations, and email subscriptions. Using the form components that Framer provides by default, you can easily add different types of forms without additional coding and integrate them with external services to collect data.
Features of Framer's form components
Supports over 10 input types such as text, email, select boxes, and checkboxes
Allows you to design various form states such as submission completion and error messages
Can send collected data to email, Google Sheets, Webhooks, etc.
Features built-in spam filtering and request rate limiting capabilities
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 onto the pageSet the design and data connections
Using Framer's built-in forms
Framer supports form features tailored to various uses.
Type | Description |
|---|---|
Formspark | A simple contact form for collecting name, email, and message |
Calendly | For scheduling and meeting appointments |
HubSpot | Adds leads directly to CRM for marketing |
Intercom | Provides customer support request capabilities |
Typeform | Fully customizable forms for rich user interactions |
You can also use the Input component to collect emails. This feature supports services like Loops.so, Mailchimp, Formspark, GetWaitlist.
Connecting other external form services
To embed 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 and create forms using Code Components.
Related Resources
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 adaptation and translation of the Framer official document ‘How can I add a contact form to my Framer website’.
