워드프레스 컨택트 폼에 이용약관 동의 필드를 추가하는 방법

워드프레스 정보를 제공하는 블로그 Avada 2018. 9. 3. 07:48 • 댓글:

워드프레스에서 Contact Form 7 무료 플러그인을 사용하여 사용자나 고객으로부터 문의를 받을 수 있습니다. 정보를 입력하고 이용약관이나 서비스 약관, 혹은 개인정보 보호정책에 동의해야 컨택트 폼(폼메일)이 발송되도록 하고 싶은 경우가 있습니다.

이 경우 다음과 같은 형식으로 이용약관 필드를 추가할 수 있습니다.

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

그러면 사용자가 이용약관 동의란에 체크하지 않으면 오류가 발생하면서 폼이 발송되지 않습니다.

워드프레스 컨택트 폼

영어로 표시되는 오류 메시지는 '메시지' 탭에서 한글로 변경할 수 있습니다.

워드프레스 컨택트 폼 7 오류 메시지 지정

이용약관 내용을 문의 폼 내에 직접 추가할 수 있습니다. 또는, 별도의 이용약관 페이지를 하나 만들고 이용약관에 링크를 다는 것도 가능합니다.

이용약관 내용을 문의 폼 내에 직접 삽입하고 싶은 경우 다음과 같은 형식으로 삽입하면 됩니다.

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

여기에서 disabled를 추가하지 않으면 사용자가 이용약관 부분을 수정할 수 있게 됩니다. disabled를 넣으면 아래 그림과 같이 이용약관 문구가 편집할 수 없는 상태가 됩니다.

워드프레스 컨택트 폼 이용약관

참고로 jQuery를 사용하여 textarea 필드를 비활성화할 수도 있습니다.

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

Contact Form 7은 무료 컨택트 폼 플러그인으로 많이 사용되고 있습니다. 하지만 원하는 대로 레이아웃을 바꾸려면 HTML과 CSS를 조금 알고 있어야 합니다. 위의 그림에서는 별다른 CSS를 적용하지 않았지만 (Avada) 테마에서 제공되는 스타일이 적용되어 비교적 깔끔하게 표시되네요.

HTML과 CSS를 잘 모르는 경우 Quform 같은 유료 컨택트 폼 플러그인을 사용할 수 있습니다. 예를 들어, Quform을 사용하면 다음과 같이 필드를 2개의 열로 쉽게 만들 수 있습니다(참고).

워드프레스 컨택트 폼 문의폼 Quform 플러그인

Quform은 작년에 단계별로 문의폼을 만들 수 있는 기능이 추가되었습니다.

참고: