양식 개요 - Webflow 도움말
양식은 웹에서 가장 강력한 도구 중 하나로, 이메일 뉴스레터 가입이나 잠재 고객의 업무 문의를 효율적으로 수집할 수 있습니다. Webflow를 사용하면 필요에 맞게 양식을 완전히 사용자 정의하고 최적화할 수 있습니다. 추가 패널 → 요소 → 양식에서 사이트에 양식 블록을 추가할 수 있습니다.
양식 구조
양식 블록은 상위 요소의 전체 너비를 상속하며 세 가지 하위 요소를 포함합니다:
- 양식 — 모든 양식 입력 및 요소를 포함
- 성공 메시지 — 양식이 성공적으로 제출되었을 때 반환되는 메시지
- 오류 메시지 — 양식 제출에 문제가 있을 때 반환되는 메시지
양식 구성
필요에 따라 양식 내에서 다음 양식 요소를 추가하거나 삭제하여 양식을 사용자 정의할 수 있습니다:
| 양식 요소 | 목적 |
|---|---|
| 필드 레이블 | 양식 필드의 기능이나 목적을 설명하는 데 사용됩니다. 필드 레이블은 접근성에 매우 중요합니다. |
| 입력 | 질문에 대한 짧은 응답(예: 이름이나 이메일 주소)과 같은 단일 행 데이터를 수집하는 데 사용됩니다. |
| 파일 업로드 | 사이트 방문자가 양식 제출에 파일을 첨부할 수 있도록 합니다. |
| 텍스트 영역 | 사이트 방문자가 긴 메시지와 같은 여러 줄 데이터를 입력할 수 있도록 합니다. |
| 체크박스 | 사이트 방문자가 하나 또는 여러 옵션을 선택할 수 있는 입력 데이터에 사용됩니다. |
| 라디오 버튼 | 사이트 방문자가 여러 옵션 중 하나만 선택할 수 있는 입력 데이터에 사용됩니다. |
| 선택 | 사이트 방문자가 드롭다운 목록에서 옵션을 선택할 수 있도록 합니다. 여러 선택이 가능합니다. |
| reCAPTCHA | 양식 스팸을 방지하는 Google 서비스 |
| 제출 버튼 | 양식에서 수집된 모든 데이터를 제출합니다. 제출 버튼이 없는 양식은 완전하지 않습니다. |
양식 요소 구성 방법
양식 요소(예: 입력, 제출 버튼)를 더블 클릭하여 설정을 열 수 있습니다. 각 양식 요소는 유형에 따라 다른 입력 설정을 가지고 있습니다:
| 입력 설정 | 목적 | 추가 메모 |
|---|---|---|
| 이름 | 양식 제출 시 필드를 식별합니다 | n/a |
| 필수 | 양식을 제출하기 위해 필드를 채워야 하도록 설정합니다 | 빈 제출 차단 |
| 플레이스홀더 | 입력 시 사라지는 텍스트를 표시합니다; 레이블이나 중요한 지침을 대체해서는 안 됩니다 | 보조 기술이나 번역 도구에 사용 불가; 상태 메뉴에서 스타일 가능 |
| 텍스트 유형 | 입력 유형을 지정합니다 (예: 이메일, 전화번호, 비밀번호) | 전화번호는 문자 허용 및 키패드 표시; 비밀번호는 입력 문자 숨김 |
| 자동 포커스 | 페이지 로드 시 필드가 자동으로 포커스될지 결정합니다 | 스크롤/점프 문제 또는 숨겨진 필드가 제출을 차단하는지 주의 |
제출 버튼
제출 버튼의 설정을 통해 다음을 설정할 수 있습니다:
- 버튼 텍스트: 버튼에 표시되는 내용 (기본값: "제출")
- 대기 텍스트: 클릭 후 제출 완료 전까지 버튼을 대체하는 내용 (기본값: "잠시만 기다려 주세요...")
양식 설정 관리 방법
성공 및 오류 상태 사용자 정의
양식 블록을 선택하고 양식 블록 설정으로 이동하여:
- 일반: 기본 상태
- 성공: 성공적인 제출 후 메시지
- 오류: 제출 실패 후 메시지
양식 이름 설정
설정한 이름은 양식과 제출 데이터를 연결합니다.
고유한 이름을 설정하지 않으면 모든 제출 데이터가 "이메일 양식" 아래에 나타납니다.
양식을 구분하기 위해 설명적인 이름을 지정하세요.
양식 제출 및 알림 관리
- 양식 블록 설정에서 수신자를 지정합니다.
- 사이트 설정 → 양식 → 양식 알림에서 고급 알림에 액세스합니다.
- 전체 웹사이트 소유자는 사이트 설정 → 양식 → 양식 제출에서 양식 데이터를 액세스/관리할 수 있습니다.
양식 제출 시 사이트 방문자 리디렉션
리디렉션 필드에 URL을 추가하여 제출 후 사용자를 다른 곳으로 보냅니다.
사용자 지정 작업 설정
제출물을 다른 곳으로 보내기 위해 사용자 지정 작업을 추가합니다 (예: HubSpot).
이 작업을 추가하면 Webflow는 알림을 처리하거나 보내지 않습니다.
더 많은 통합을 위해 앱을 연결할 수도 있습니다.
앱 연결 보기
연결된 앱은 연결에 나타납니다.
참고: 양식 데이터를 Webflow로 보내기는 Webflow 처리를 완전히 우회하지 않는 한 항상 나타납니다.
양식 데이터와 GDPR
- EU 거주자로부터 개인 데이터를 수집하는 경우 (양식을 통해 포함) GDPR에 따라 데이터 컨트롤러가 됩니다.
- 데이터 수집에 대한 적절한 동의를 얻으세요.
- 클라이언트를 위해 구축하는 경우, 그들의 책임에 대해 교육하세요.
- 데이터를 제3자에게 연결하는 경우 (예: Zapier) 책임을 검토하세요.
더 알아보기:
문제 해결
양식을 제출할 수 없는 경우:
- reCAPTCHA를 활성화한 경우, 모든 양식에 포함되어 있는지 확인하세요. 그렇지 않으면 제출이 실패합니다.
- 숨겨진 필드가 있는 경우, 해당 필드에 자동 포커스가 꺼져 있는지 확인하세요.
- 무료/호스팅되지 않은 사이트는 총 50개의 양식 제출로 제한됩니다. 사이트 플랜 업그레이드하여 제한을 제거하세요.
문제가 계속되면 고객 지원에 문의하세요.