This document was created to help domestic users learning Framer overcome the lack of Korean resources by translating content from the official blog into Korean and adding practical information. We hope it is of some help to you who use Framer.

What is Formspark?

Formspark is a service that allows you to receive form submission data directly via email, or integrate it with platforms like Slack, Zapier, or Integromat. You can easily manage contact forms, lead collection forms, support tickets, and more.

Key Use Cases for Formspark in Framer

In Framer, you can customize forms to your liking. With Formspark, you can instantly collect visitor information from your Framer site without managing a server or learning APIs.

• Contact Form: A "Contact Us" form provides an easy avenue for potential and current customers to reach out. It’s recommended to include guiding text that encourages specific requests, effectively collecting useful information from customers.

• Email Subscription Form: You can increase your email list by adding a subscription form to your blog or website.

• Customer Support Form: Use a simplified system to organize all tickets in one place, efficiently handling customer support requests.

Step-by-Step Setup Guide

1. Copying Form ID from Formspark

First, access Formspark to create a new HTML form or open an existing one, and copy the Form ID (e.g., 7PbPpGN3) from the form settings. When creating a new form, make sure that HTML is selected in the Technology option.

2. Adding Formspark Component in Framer

After opening your Framer project, open the Insert panel on the left side of the canvas. Find Formspark under the Elements section and drag it to the canvas.

3. Pasting Form ID and Customizing Form

Enter the copied Form ID into the Formspark ID field on the right panel. You'll see name / email / message fields displayed below the ID field. You can enable or disable these fields and change the appearance by adjusting the layout, changing colors, adding custom fonts, and more.

Basic Form Features of Framer

Framer also has native form capabilities, which include the following features:

• Supports over 10 input type types

• Allows diverse interaction design for forms

• Can send data via email, Google Sheets, or Webhook

• Built-in spam protection and submission rate limitation features

To add a basic form to Framer, please refer to this guide. If you still encounter issues, please contact us through the contact page for additional support.

This article is a translated and adapted version of Framer's official blog post ‘Adding Formspark to your site’.