Divi 연락처 양식 모듈은 코드 없이 문의 폼을 만들어 방문자가 보낸 내용을 지정한 이메일로 받게 해 주는 Divi 테마의 기본 모듈이다. 이 글에서는 연락처 양식 모듈이 어떤 기능을 하는지(필드 구성, 이메일 수신, 스팸 방지, 완료 동작)를 개념 중심으로 정리한다. 과거 스크린샷 기반으로 작성했던 글이지만 이미지가 모두 유실되어, UI 클릭 위치 대신 설정의 의미와 원리를 텍스트로 다시 풀어 쓴다.
참고로 누스쿨은 현재 Divi가 아닌 Elementor로 사이트를 운영한다. 아래 내용은 Divi를 쓰는 환경 기준이며, Elementor에도 같은 역할의 폼 위젯(Form)이 별도로 있다. 이 글은 검색·아카이브 목적으로 유지한다.
Divi 연락처 양식 모듈이란
연락처 양식 모듈은 Divi 빌더에서 섹션 → 행(Row) → 모듈 순으로 추가하는 콘텐츠 요소 중 하나다. 모듈을 추가하면 기본으로 이름(Name)·이메일(Email)·메시지(Message) 세 필드가 들어간 폼이 생성된다. 방문자가 폼을 작성해 제출하면 그 내용이 관리자가 지정한 이메일 주소로 전달되는 구조다.
Divi 모듈의 모든 설정은 상단의 세 개 탭으로 나뉜다. 연락처 양식 모듈도 동일하다.
| 탭 | 다루는 내용 |
|---|---|
| 콘텐츠(Content) | 필드 구성, 수신 이메일·메시지 패턴, 스팸 방지, 완료 후 동작(성공 메시지/리디렉션) |
| 디자인(Design) | 입력 필드·텍스트·버튼·간격 등 폼 전체의 시각 스타일 |
| 고급(Advanced) | CSS ID·클래스, 가시성(visibility), 위치·전환 효과 등 개발자용 옵션 |
필드 구성과 새 필드 추가
기본 세 필드 외에 필요한 항목을 직접 추가할 수 있다. 예를 들어 전화번호 필드를 추가하려면 콘텐츠 탭에서 필드를 하나 더 만들고 필드 유형을 텍스트 입력(Input)으로 지정하면 된다. Divi가 제공하는 필드 유형은 다음과 같다.
- 입력(Input) — 일반 텍스트 입력(이름·전화번호 등)
- 이메일(Email) — 이메일 주소 입력 전용
- 텍스트영역(Textarea) — 여러 줄 입력(문의 내용·메시지)
- 체크박스(Checkboxes) — 여러 항목을 동시에 선택
- 라디오 버튼(Radio) — 여러 항목 중 하나만 선택
- 선택 드롭다운(Select) — 펼침 목록에서 하나 선택
각 필드는 필수 입력(required) 여부를 지정할 수 있고, 길이·문자 제한 같은 세부 조건도 설정할 수 있다. 전화번호처럼 형식이 정해진 항목은 입력 필드로 두고 필수로 표시해 두는 식으로 활용한다.
수신 이메일과 메시지 패턴
연락처 양식의 핵심은 “방문자가 보낸 내용을 어디로 받을 것인가”다. 콘텐츠 탭의 이메일(Email) 영역에서 수신할 이메일 주소를 입력하면, 제출된 폼 내용이 그 주소로 전송된다. 주소를 비워 두면 메일이 도착하지 않으니 반드시 지정해야 한다.
같은 영역의 메시지 패턴(Message Pattern)은 받는 메일 본문에 필드 값이 어떻게 들어갈지를 정한다. %%field_id%% 형식으로 필드를 끼워 넣으며, 비워 두면 기본 형식으로 자동 정리된다. 예를 들어 이름·전화번호·문의 내용을 한눈에 보이게 본문 순서를 직접 짤 수 있다.
이름: %%name%%
전화번호: %%phone%%
문의 내용:
%%message%%스팸 방지(Captcha·reCAPTCHA)
공개된 문의 폼은 봇이 자동으로 가짜 메시지를 보내는 스팸에 노출되기 쉽다. Divi 연락처 양식 모듈은 콘텐츠 탭에서 스팸 방지를 켤 수 있으며, 두 가지 방식을 제공한다.
- 기본 캡차(Basic Captcha) — 제출 전 간단한 산수 문제를 풀게 하는 내장 방식. 별도 설정 없이 즉시 사용 가능하다.
- Google reCAPTCHA — 외부 서비스 연동 방식. 더 강력한 봇 차단을 원할 때 사용한다.
reCAPTCHA를 쓰려면 Google reCAPTCHA Admin Console에서 사이트를 등록하고 사이트 키(Site Key)와 비밀 키(Secret Key)를 발급받아 Divi에 입력한다. reCAPTCHA v3는 사용자에게 별도 동작을 요구하지 않고 점수로 봇 여부를 판별하며, 통과 기준 점수(기본 0.5)를 조정할 수 있다. 누스쿨도 회원 가입·로그인에 reCAPTCHA v3를 적용해 점수 미달 요청을 차단한다.
제출 완료 후 동작
방문자가 폼을 제출한 뒤 무엇을 볼지도 콘텐츠 탭에서 정한다. 기본값은 “전송이 완료됐다”는 성공 메시지를 같은 화면에 보여 주는 것이다. 대신 다른 페이지로 보내고 싶다면 리디렉션 URL(Redirect URL) 옵션을 켜고 이동시킬 주소를 입력한다.
리디렉션은 흔히 “문의 감사합니다” 같은 별도 완료 페이지로 안내하거나, 전환(conversion) 추적을 위해 특정 URL 도달을 측정할 때 쓴다. 리디렉션을 켜지 않으면 폼 자리에 성공 메시지가 그대로 표시된다.
정리
Divi 연락처 양식 모듈은 ① 기본 이름·이메일·메시지에 전화번호 같은 필드를 추가하고 ② 콘텐츠 탭에서 수신 이메일과 메시지 패턴을 지정하며 ③ 캡차/reCAPTCHA로 스팸을 막고 ④ 제출 후 성공 메시지 또는 리디렉션을 선택하는 흐름으로 완성한다. 디자인은 디자인 탭, CSS·가시성 같은 세부 제어는 고급 탭에서 처리한다. Divi가 아닌 Elementor를 쓴다면 Form 위젯에서 거의 동일한 개념(필드·이메일 액션·reCAPTCHA·리디렉션)을 똑같이 설정하면 된다.
💬 댓글 0