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

Last Updated: 2023년 07월 17일 1개 댓글

워드프레스의 게시판 플러그인인 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 개 댓글

Leave a Comment

카카오톡 상담 카톡 서비스 상담