양식은 간단한 연락처 양식부터 복잡한 다단계 등록 흐름에 이르기까지 모든 웹사이트에 필수적입니다. Elementor Pro에는 많은 경우 별도의 양식 플러그인이 필요 없는 내장 양식 위젯이 포함되어 있습니다. 이 가이드에서는 Elementor Pro를 사용하여 연락처 양식, 등록 양식 및 다단계 양식을 만드는 방법과 이메일 마케팅 및 CRM 서비스와의 통합 옵션을 다룹니다.
이 튜토리얼은 Elementor Pro가 필요합니다. Elementor의 무료 버전에는 양식 위젯이 포함되어 있지 않습니다.
Elementor 양식 위젯 개요
Elementor 양식 위젯은 다음과 같은 필드 유형을 지원합니다:
| 필드 유형 | 사용 사례 | 비고 |
|---|---|---|
| 텍스트 | 이름, 회사, 제목 | 단일 행 텍스트 입력 |
| 이메일 | 이메일 주소 수집 | 이메일 형식 유효성 검사 포함 |
| 텍스트 영역 | 메시지 본문, 댓글, 설명 | 구성 가능한 행이 있는 다중 행 텍스트 |
| 전화 | 전화번호 | 모바일에서 숫자 키보드 활성화 |
| 숫자 | 수량, 예산, 평가 | 최소/최대/단계 유효성 검사 |
| URL | 웹사이트 주소 | URL 형식 유효성 검사 |
| 선택 | 드롭다운 선택(국가, 카테고리) | 단일 또는 다중 선택 |
| 라디오 | 옵션 중 단일 선택(서비스 유형) | 드롭다운 없이 표시되는 옵션 |
| 체크박스 | 다중 선택(관심사, 서비스) | 다중 선택 허용 |
| 날짜 | 약속 날짜, 이벤트 날짜 | 네이티브 날짜 선택기 |
| 시간 | 약속 일정 | 시간 선택 제어 |
| 파일 업로드 | 이력서, 문서, 이미지 제출 | 구성 가능한 파일 유형 및 크기 제한 |
| 수락 | 약관, GDPR 동의 | 링크가 있는 필수 체크박스 |
| 숨김 | 추적 데이터(페이지 URL, 추천인) | 사용자에게 표시되지 않음 |
| reCAPTCHA | 스팸 보호 | v2 체크박스 또는 v3 비가시적 |
| 허니팟 | 스팸 방지(인간에게는 보이지 않음) | 봇을 잡는 숨겨진 필드 |
연락처 양식 만들기
1단계: 양식 위젯 추가
- Elementor 편집기에서 아무 페이지를 엽니다.
- 위젯 패널에서 "양식"을 검색합니다.
- 양식 위젯을 레이아웃으로 드래그합니다.
- 기본 양식에는 이름, 이메일 및 메시지 필드가 포함됩니다.
2단계: 양식 필드 구성
표준 연락처 양식의 경우, 다음 필드 구성이 잘 작동합니다:
- 이름 (텍스트 필드, 필수) – 플레이스홀더: "당신의 이름"
- 이메일 (이메일 필드, 필수) – 플레이스홀더: "[email protected]"
- 제목 (텍스트 필드, 선택 사항) – 플레이스홀더: "어떻게 도와드릴까요?"
- 메시지 (텍스트 영역 필드, 필수) – 플레이스홀더: "프로젝트에 대해 말씀해 주세요...", 행: 5
- reCAPTCHA 또는 허니팟을 사용하여 스팸 보호
3단계: 제출 후 작업 구성
"제출 후 작업" 섹션에서 사용자가 양식을 제출할 때 발생하는 일을 구성합니다: For related information, see our guide on Elementor complete guide.
- 이메일: 양식 데이터를 귀하의 이메일 주소(또는 여러 주소)로 전송
- 리디렉션: 제출 후 사용자를 감사 페이지로 전송
- 팝업: 확인 팝업 표시
- 웹후크: 양식 데이터를 외부 URL로 전송(Zapier, Make, 사용자 정의 API)
- Mailchimp / ConvertKit / Drip: 이메일 마케팅 목록에 구독자 추가
- Slack: Slack 채널에 알림 전송
- Discord: Discord 웹후크에 알림 전송
4단계: 양식 스타일 지정
스타일 탭에서 시각적 모양을 사용자 정의합니다: For related information, see our guide on Elementor templates and kits.
- 양식 레이아웃ut: 필드가 쌓여 있거나(전체 너비) 인라인(나란히)
- 필드 스타일링: 테두리, 배경색, 패딩, 테두리 반경, 포커스 상태 색상
- 라벨 스타일링: 글꼴 가족, 크기, 색상, 간격
- 버튼 스타일링: 배경색, 텍스트 색상, 테두리, 호버 효과, 전체 너비 옵션
- 메시지: 성공 및 오류 메시지 색상 및 타이포그래피
다단계 양식 만들기
다단계 양식은 모든 필드를 한 번에 표시하면 사용자가 압도될 수 있는 긴 양식(등록, 신청, 설문조사)에 유용합니다. Elementor Pro는 다단계 양식을 기본적으로 지원합니다. For related information, see our guide on creating landing pages with Elementor.
단계 설정 방법
- 페이지에 양식 위젯 추가
- 양식 필드 목록에서 필드 그룹 사이에 "단계" 필드 유형 추가
- 각 단계 필드는 "다음" 및 "이전" 버튼이 있는 새로운 단계를 생성합니다.
- 예제 구조:
- 1단계: 이름, 이메일, 전화번호 (개인 정보)
- 2단계: 회사, 예산, 일정 (프로젝트 세부정보)
- 3단계: 메시지, 파일 업로드 (추가 정보)
다단계 양식은 사용자가 현재 어느 단계에 있는지를 보여주는 진행 표시기를 표시합니다. 이는 인식된 복잡성을 줄이고 모든 필드를 한 번에 표시하는 것보다 완료율을 향상시킵니다.
사용자 등록 양식 만들기
Elementor Pro는 별도의 플러그인 없이 WordPress 사용자 등록 양식을 만들 수 있습니다:
- 양식 위젯을 추가하고 필드 구성(사용자 이름, 이메일, 비밀번호)
- "제출 후 작업"에서 "등록" 작업 추가
- 각 양식 필드를 해당 WordPress 사용자 필드에 매핑
- 새 등록에 대한 기본 사용자 역할 설정
- 선택적으로 등록 후 사용자를 계정 페이지로 리디렉션
참고: WordPress는 기본적으로 관리자가 새로운 사용자를 승인해야 합니다. 사용자가 자유롭게 등록할 수 있도록 하려면 설정 → 일반 → 회원가입에서 변경할 수 있습니다.
이메일 마케팅 서비스와 통합
Elementor Pro는 인기 있는 이메일 마케팅 플랫폼과 직접 통합됩니다:
| 서비스 | 통합 유형 | 설정 단계 |
|---|---|---|
| Mailchimp | 네이티브(내장) | API 키 추가 → 목록 선택 → 필드 매핑 |
| ConvertKit | 네이티브(내장) | API 키 추가 → 양식 선택 → 필드 매핑 |
| ActiveCampaign | 네이티브(내장) | API 자격 증명 추가 → 목록 선택 → 필드 매핑 |
| Drip | 네이티브(내장) | API 토큰 추가 → 계정 선택 → 필드 매핑 |
| GetResponse | 네이티브(내장) | API 키 추가 → 캠페인 선택 → 필드 매핑 |
| MailerLite | 네이티브(내장) | API 키 추가 → 그룹 선택 → 필드 매핑 |
| HubSpot | 웹후크를 통해 | 웹후크 작업으로 Zapier/Make 연결 생성 |
각 통합의 과정은: Elementor의 통합 설정에 서비스의 API 키를 입력한 후, 양식에서 "제출 후 작업"으로 해당 서비스를 선택합니다. 양식 필드를 서비스의 필드에 매핑하면 양식이 제출될 때 구독자가 자동으로 추가됩니다.
스팸 방지 전략
연락처 양식은 스팸 봇을 유인합니다. Elementor Pro는 여러 가지 스팸 방지 옵션을 제공합니다:
- Google reCAPTCHA v3: 사용자 상호작용 없이 제출을 점수화하는 보이지 않는 스팸 감지. 대부분의 양식에 권장됨
- reCAPTCHA v2: "로봇이 아닙니다" 체크박스. 더 눈에 띄지만 양식 완료율을 줄일 수 있음
- 허니팟 필드: 봇이 채우는 보이지 않는 필드. 필드에 데이터가 포함되면 제출이 거부됨. 사용자 상호작용 필요 없음
- 수락 필드: 필수 체크박스(GDPR 동의, 약관 수락)로 봇 억제 역할도 함
허니팟 필드와 결합된 reCAPTCHA v3 사용을 권장합니다. 이는 눈에 띄는 영향 없이 두 가지 스팸 방지 계층을 제공합니다.
사용자 경험.
Elementor 양식 vs 전용 양식 플러그인
| 기능 | Elementor 양식 | Gravity Forms | WPForms |
|---|---|---|---|
| 비주얼 빌더 | Elementor 편집기 내 | 별도의 드래그 앤 드롭 | 별도의 드래그 앤 드롭 |
| 조건 논리 | 기본 (필드 표시/숨기기) | 고급 | 고급 |
| 결제 통합 | PayPal 버튼 | Stripe, PayPal, Square | Stripe, PayPal, Square |
| 계산 | 아니요 | 예 | 예 (Pro) |
| 다단계 | 예 | 예 | 예 |
| 파일 업로드 | 예 | 예 | 예 |
| 입력 관리 | Elementor 제출을 통해 | 전체 입력 관리자 | 전체 입력 관리자 |
| 페이지 빌더 필요 | 예 (Elementor Pro) | 아니요 | 아니요 |
Elementor 양식은 연락처 양식, 뉴스레터 가입 및 간단한 등록 양식에 충분합니다. 결제 처리, 고급 조건 논리 또는 정교한 입력 관리가 필요한 복잡한 양식의 경우 Gravity Forms 또는 WPForms와 같은 전용 양식 플러그인이 더 적합합니다.
자주 묻는 질문
Elementor Pro 없이 Elementor 양식을 사용할 수 있나요?
아니요. 양식 위젯은 Elementor Pro 전용입니다. 무료 버전의 Elementor로 양식이 필요하다면 Contact Form 7 (무료), WPForms Lite (무료) 또는 Gravity Forms (프리미엄)와 같은 별도의 양식 플러그인을 사용하세요.
Elementor 양식 제출은 어디에 저장되나요?
양식 제출은 WordPress 데이터베이스에 저장되며, 관리 패널의 Elementor → 제출에서 접근할 수 있습니다. 제출 내용을 보고, 내보내기 (CSV) 및 삭제할 수 있습니다. 제출 내용은 이메일 작업에서 구성한 이메일 주소로도 전송됩니다.
Elementor 양식에서 파일 업로드를 수락할 수 있나요?
예. 양식에 파일 업로드 필드 유형을 추가하세요. 수락할 파일 유형 (PDF, JPG, PNG, DOCX 등)과 최대 파일 크기를 구성할 수 있습니다. 업로드된 파일은 WordPress 미디어 라이브러리에 저장되며 양식 제출과 연결됩니다.
Elementor 양식에 조건 논리를 추가하려면 어떻게 하나요?
Elementor Pro는 기본 조건 논리를 지원합니다: 다른 필드의 값에 따라 필드를 표시하거나 숨깁니다. 필드 설정에서 "조건"을 활성화하고 조건을 설정하세요 (예: "사업자입니다" 라디오 버튼이 선택되었을 때만 "회사" 필드를 표시). 고급 조건 논리 (계산, 다단계 조건)가 필요한 경우 전용 양식 플러그인이 더 적합할 수 있습니다.
Elementor로 팝업 양식을 만들 수 있나요?
예. Elementor에서 팝업 템플릿을 만들고 그 안에 양식 위젯을 추가한 후 트리거 조건 (클릭, 스크롤 비율, 종료 의도, 시간 지연)을 설정하세요. 이는 뉴스레터 가입, 리드 자석 및 프로모션 제안을 위해 유용하며, 메인 페이지 레이아웃에 양식을 추가하지 않고도 가능합니다.
Elementor 양식에서 스팸을 방지하려면 어떻게 하나요?
Google reCAPTCHA v3 (보이지 않는)와 Honeypot 필드를 결합하여 이중 보호를 사용하세요. 이는 실제 사용자에게 불편을 주지 않으면서 자동화된 봇을 차단합니다. 스팸이 많이 발생하는 양식의 경우, 세 번째 레이어로 수락 필드 (필수 체크박스)를 추가하는 것을 고려하세요.
양식 빌더와 함께 Elementor Pro를 받으세요
양식 위젯, 테마 빌더, WooCommerce 빌더 및 100개 이상의 Pro 위젯에 접근하세요. 추가 플러그인 없이 시각적으로 양식을 만드세요.
Elementor Pro 둘러보기 →
