CMS
2025. 7. 8.
Framer에서 연락처 폼 추가하는 방법과 활용법
Framer를 사용하면 다양한 입력 타입과 외부 서비스 통합으로 간편하게 연락처 폼을 추가할 수 있습니다. 기본 폼과 서드파티 서비스 연동으로 사용자 데이터를 효율적으로 수집해보세요.
Posted By
Framer Space
목차
Table of Contents
본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.
폼이 왜 필요할까요?
웹사이트를 운영하다 보면 방문자의 문의, 예약, 이메일 구독 같은 다양한 데이터를 받아야 할 일이 생깁니다. Framer에서 기본적으로 제공되는 폼 컴포넌트를 사용하면 별도의 코딩 없이도 다양한 종류의 폼을 쉽게 추가하고, 외부 서비스와 연동해 데이터를 수집할 수 있습니다.
Framer 폼 컴포넌트의 기능
텍스트, 이메일, 셀렉트박스, 체크박스 등 10가지 이상의 입력 타입 지원
제출 완료, 오류 메시지 등 폼의 다양한 상태를 직접 디자인 가능
수집된 데이터를 이메일, Google Sheets, Webhook 등으로 전송 가능
스팸 필터링 및 요청 속도 제한 기능 기본 탑재
폼 추가 방법
Framer 에디터 좌측
Insert메뉴 클릭Forms섹션에서 원하는 폼 선택 후 드래그해서 페이지에 추가디자인 및 데이터 연결 설정
Framer의 기본 제공 폼 사용하기
Framer는 다양한 사용 목적에 맞춰 폼의 기능을 지원합니다.
종류 | 설명 |
|---|---|
Formspark | 이름, 이메일, 메시지를 입력받는 간단한 연락처 폼 |
Calendly | 일정 예약 및 미팅 예약용 |
HubSpot | 마케팅용으로 리드를 CRM에 직접 추가 |
Intercom | 고객 지원 요청 기능 제공 |
Typeform | 풍부한 사용자 상호작용을 위한 완전 맞춤형 폼 |
또한, Input 컴포넌트를 사용해 이메일 수집이 가능합니다. 이 기능은 Loops.so, Mailchimp, Formspark, GetWaitlist 서비스를 지원합니다.
기타 외부 폼 서비스 연결하기
Beehiiv나 Tally 같은 외부 폼 서비스를 삽입하려면
해당 서비스에서 제공하는 HTML 스크립트를 복사
Framer의 Embed 컴포넌트에 붙여넣기
다른 방법으로는 Code Components를 사용해 폼을 완전하게 커스터마이징해서 직접 만드는 것이 있습니다.
관련 자료
Intercom을 웹사이트에 추가하는 방법
Mailchimp를 웹사이트에 추가하는 방법
Typeform을 웹사이트에 추가하는 방법
Formspark를 웹사이트에 추가하는 방법
Hubspot Forms를 웹사이트에 추가하는 방법
본 글은 Framer 공식 문서 ‘How can I add a contact form to my Framer website’를 번역·각색한 콘텐츠입니다.
