워드프레스 Contact Form 7에 이용약관 동의 필드 추가하기

[워드프레스] Contact Form 7에 이용약관 동의 필드 추가하기

워드프레스에서는 Contact Form 7과 같은 무료 플러그인이나 Quform과 유료 플러그인을 사용하여 쉽게 문의 양식을 블로그에 추가할 수 있습니다.

기본적인 Contact Form 7 사용법은 여기를 참고해보시기 바랍니다.

이 글에서는 Contact Form 7에 이용약관(사용약관, 서비스 약관 등 명칭은 다양할 수 있음)이나 개인정보 보호정책 등에 동의 필드를 추가하는 방법을 살펴보겠습니다.

먼저 동의 필드는 체크박스 필드를 추가하여 동의 폼을 만들 수 있습니다. 다음과 비슷한 형식으로 체크박스를 추가합니다.

<p>이용약관(필수) [checkbox* checkbox-857 "동의"] </p>

이용약관 혹은 개인정보 정책은 링크로 연결해도 되지만, 여기서는 textarea를 사용하여 추가해보겠습니다. 다음과 같은 형식으로 teaxtarea 태그를 직접 추가하면 약관 내용이 박스 형태로 출력됩니다. 그리고 disabled를 추가해야 사용자가 개인정보 정책 내용을 수정하거나 삭제할 수 없습니다.

<p><textarea id='mytextarea' disabled>이용 약관 ("약관")
최종 업데이트: (날짜).
제1장 : 총칙
제2장 : 서비스 이용계약
제3장 : 계약당사자의 의무
....
</textarea></p>

만약  다음 형식으로 textarea를 추가하려는 경우를 생각해볼 수 있습니다.

[textarea id:mytextarea your-message]
foo
bar
[/textarea]

이 경우 다음과 같은 jQuery를 사용하여 textarea 필드를 비활성화시킬 수 있습니다. 그러면 textarea에 미리 입력되어 있는 내용을 사용자가 수정할 수 없게 됩니다.

$("#mytextarea").attr("disabled","disabled");

그러면 다음과 같은 형태로 이용약관 동의 필드가 추가됩니다.

워드프레스 Contact Form 7에 이용약관 동의 필드 추가하기

이용약관 동의 체크란을 선택하지 않으면 오류 메시지가 표시되면서 양식이 제출되지 않습니다.

Quform에서도 비슷한 방식으로 이용약관을 추가할 수 있습니다. Quform의 경우 오른쪽에 있는 상자에서  “HTML” 요소를 끌어다가 HTML 코드를 직접 삽입하면 됩니다.

Quform - add html

참고:



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.