워드프레스 사이트에서 고객이나 방문자들로부터 문의 또는 피드백을 받고 싶은 경우 문의폼 플러그인을 사용하거나 페이지 빌더 또는 테마에서 제공하는 컨택트 폼 기능을 사용할 수 있습니다. 엘리멘터 프로와 같은 페이지 빌더와 아바다 또는 Divi와 같은 일부 테마에서는 자체적으로 문의 폼 요소를 제공합니다.있습니다.
무료 컨택트 폼 플러그인으로 Contact Form 7과 WPForms Lite가 많이 사용됩니다. 고급 기능을 원하는 경우 유료 문의 양식 플러그인인 Quform을 사용할 수 있습니다. 이 글에서는 Quform으로 만든 문의폼에 개인정보 보호정책 또는 이용약관 동의 필드를 추가하는 방법에 대하여 살펴보겠습니다.
워드프레스 Quform: 개인정보 보호 및 이용약관 동의 필드 추가하기
문의 양식에 개인정보 보호정책 동의 필드나 이용약관 동의 필드를 추가해야 하는 상황이 있을 수 있습니다.
동의 필드를 체크하지 않고 양식을 제출하려고 시도할 경우 위의 그림과 같이 개인정보 정책을 표시하고 "개인정보 보호정책에 동의해야 합니다" 경고가 표시되면서 양식이 제출되지 않도록 하는 방법에 대하여 살펴보겠습니다.
동의 필드는 두 가지 방법을 생각할 수 있습니다.
- 체크박스(Checkbox)를 표시하고 사용자가 동의 체크박스를 선택하지 않으면 양식이 제출되지 않도록 하는 방법, 또는
- 라디오 버튼으로 "동의"와 "비동의" 두 가지 옵션을 표시하고, 사용자가 "동의" 버튼을 선택해야 양식이 제출되도록 하는 방법
Quform을 사용하면 위의 두 가지 방법 모두 가능합니다. 여기에서는 첫 번째 방법에 대하여 살펴보겠습니다.
1 툴바에서 체크박스 요소를 끌어다가 동의 필드를 만듭니다.
오른쪽의 필수 필드로 설정하는 체크박스 토글을 활성화하여 이 필드를 필수 필드로 만듭니다.
2 톱니바퀴 모양의 아이콘을 클릭하여 설정 화면을 표시합니다. Basic 탭에서 라벨(예: 개인정보 보호정책)을 입력하고 Options에서 동의 옵션을 추가합니다.
3 필수 필드로 설정되었기 때문에 사용자가 동의 체크박스를 선택하지 않고 양식을 제출하려고 시도하면 오류 메시지가 표시되면서 문의 폼이 제출되지 않습니다. 오류 메시지는 Translations (번역) 탭에서 지정할 수 있습니다.
4 개인정보 보호정책(또는 이용약관 등) 텍스트를 표시하고 싶은 경우 HTML 엘리먼트를 사용할 수 있습니다.
5 설정 페이지의 Basic 탭에 개인정보 보호정책 텍스트를 입력할 수 있습니다.
텍스트 탭을 선택하고 다음과 같은 형식으로 정책 텍스트를 입력합니다.
<textarea rows="6" readonly style="width: 100%;">
1. 개인정보 수집 및 이용
....
</textarea>사용자가 정책 텍스트를 편집할 수 없도록 readonly를 추가했고 6줄이 표시되도록 했습니다.
최종적으로 다음과 비슷하게 표시됩니다.
동의, 비동의 옵션 선택 필드 추가
동의, 비동의 옵션을 표시하고 동의를 선택하지 않으면 양식이 제출되지 않도록 하려면 요소 선택 툴바에서 라디오 버튼(Radio Buttons) 엘리먼트를 선택합니다.
동의 버튼을 선택했는지를 체크하려면 설정 페이지의 Advanced 탭에서 Validators를 추가하면 됩니다.
아래 그림과 비슷하게 유효성 검사 규칙을 설정하면 됩니다.
동의 옵션을 선택하지 않으면 설정에서 지정한 에러 메시지(예: 동의를 선택해주세요)가 표시됩니다.
마치며
이상으로 Quform 문의폼에 개인정보 보호정책 동의 필드를 추가하는 방법에 대하여 살펴보았습니다. Contact Form 7이나 WPForms와 같은 무료 플러그인에서도 개인정보 동의 옵션을 추가할 수도 있습니다.
엘리멘터 프로의 컨택트 폼을 사용하는 경우 "엘리멘터 폼 개인정보 및 이용약관 동의 필드" 글을 참고할 수 있습니다.
댓글 남기기