KBoard에 이용약관 동의 폼 추가하기(워드프레스)

워드프레스의 게시판 플러그인인 KBoard를 사용하여 주문 양식을 만드는 경우 이용약관 동의 폼을 추가해야 하는 경우가 있습니다. 이 글에서는 KBoard 주문 양식에서 이용약관 동의 폼을 추가하는 방법에 대해 살펴보겠습니다.

워드프레스 KBoard에 이용약관 동의 폼 추가하기

FTP로 접속하여 해당 스킨 폴더(예: /wp-content/plugins/kboard/skin/avatar) 내의 editor.php를 엽니다. 그리고 적당한 위치에 다음과 비슷한 코드를 추가합니다.

<div class="kboard-attr-row">
<label class="attr-name">약관 동의</label>
<div class="attr-value"><input type="checkbox" required> (이용 약관에 동의해야 합니다.)</div>
</div>

여기서 중요한 것은 <input type="checkbox" required>처럼 "required"를 추가해야 약관 동의 체크란을 선택하지 않고 양식을 제출하려고 할 경우 오류가 발생합니다.

케이보드 이용약관

그리고 바로 아래에 이용 약관을 텍스트 상자에 추가하려면 다음 형식의 코드를 추가할 수 있습니다.


<textarea>이용약관 내용.....</textarea>

style="width: 400px; height: 200px;"를 추가하면 다음과 비슷한 모양이 나옵니다.

KBoard 이용약관 폼

Texarea를 사용한 폼보다 팝업 창을 선호하는 경우 팝업 창을 띄우는 Javascript나 jQuery 소스를 적용할 수 있습니다.

위의 jsfiddle 페이지의 Javascript 코드를 사용하면 다음과 같이 팝업 창(라이트박스)으로 이용약관 내용을 표시할 수 있습니다.

KBoard 팝업 이용약관 창


실제 작동을 이 페이지에서 확인할 수 있습니다.

추가: 참고로 다음 글에 소개된 jQuery 코드로 외부 페이지/URL을 불러올 수 있습니다.

CSS로 작동하는 라이트박스

다음 jsfiddle 코드를 사용하면 javascript를 사용하지 않고 CSS로 작동하는 라이트박스를 구현할 수 있습니다.

참고

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

1개 댓글

댓글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다