본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

Formspark란 무엇인가요?

Formspark는 폼 제출 데이터를 직접 이메일로 받거나, Slack, Zapier, Integromat 같은 플랫폼과 연동할 수 있는 서비스입니다. 문의 폼, 리드 수집 폼, 지원 티켓 등을 간단히 관리할 수 있습니다.

Framer에서 Formspark의 주요 사용 사례

Framer에서 폼을 사용자 맞춤으로 설정할 수 있는데요. Formspark를 사용하면 서버를 관리하거나 API를 배울 필요 없이 Framer 사이트에서 방문자 정보를 즉시 수집할 수 있습니다.

• 문의 폼: "문의하기” 폼은 잠재 고객 및 유치 고객이 쉽게 연락할 수 있는 창구를 제공해요. 해당 고객들의 유용한 정보를 효과적으로 수집할 수 있도록 구체적인 요청을 유도하는 안내 문구를 추가하는 걸 추천드려요.

• 이메일 구독 폼: 블로그나 홈페이지에 구독 폼을 추가하여 이메일 목록을 늘려볼 수 있어요.

• 고객 지원 폼: 모든 티켓을 한곳에서 정리할 수 있는 간단한 시스템을 사용하여, 고객의 지원 요청을 효율적으로 처리해보세요.

단계별 설정 방법

1. Formspark에서 Form ID 복사하기

먼저 Formspark에 접속해 새 HTML 폼을 만들거나 기존 폼을 열고, 폼 설정에서 Form ID (예: 7PbPpGN3)를 복사하세요. 폼을 새로 만들 때에는 반드시 Technology 선태란에서 HTML이 선택되어 있는지 확인해야 합니다.

2. Framer에서 Formspark 컴포넌트 추가하기

Framer 프로젝트를 연 후, 캔버스 왼쪽의 Insert 패널을 엽니다. Elements 섹션 아래에서 Formspark를 찾아 캔버스로 드래그합니다.

3. Form ID 붙여넣기 및 폼 커스터마이징

오른쪽 패널의의 Formspark ID 필드에 복사한 Form ID를 입력합니다. ID 필드 아래에 이름 / 이메일 / 메시지 필드가 표시됩니다. 이 필드들을 켜거나 끌 수 있으며 레이아웃 조정, 색상 변경, 사용자 지정 폰트 추가 등 원하는 대로 모양을 변경할 수 있습니다.

Framer의 기본 폼 기능

Framer 자체에도 네이티브 폼 기능이 포함되어 있는데요, 아래와 같은 기능을 갖추고 있습니다.

• 10가지 이상의 입력 유형 타입 지원

• 해당 양식에 다양한 인터렉션 디자인 가능

• 이메일, Google Sheets, Webhook으로 데이터 전송 가능

• 스팸 보호 기능 및 전송 속도 제한 기능 내장

Framer의 기본 폼을 추가하려면 해당 가이드를 참조해보세요. 여전히 문제가 발생하는 경우, 추가 지원을 받으려면 연락처 페이지 를 통해 문의해 주세요 .

본 글은 Framer 공식 블로그의 ‘Adding Formspark to your site’를 번역·각색한 콘텐츠입니다.