회원가입 양식에 주소 검색과 약관/개인정보 동의 추가하기 II (워드프레스)

처음 Front-end Membership Modules라는 워드프레스 회원 등록관리 플러그인을 소개한 이후 몇 가지 업데이트가 이루어졌습니다. 이 글에서는 구체적으로 등록 양식에 우편주소 검색창과 개인정보 동의 체크란을 추가하는 방법을 살펴보겠습니다.

위의 그림과 같이 우편주소와 약관동의 체크란을 입력할 수 있습니다.

우편주소 검색 추가하기

Javascript 코드 추가하기

우편주소 검색은 다음 우편검색 서비스를 이용하도록 합니다. 다음 우편검색 서비스 페이지를 방문하여 마음에 드는 예제를 선택합니다. 예제에 나와있는 ID 속성자는 임의로 변경이 가능하지만 편의상 예제에 나와 있는 코드를 기준으로 설명합니다.

먼저 예제 코드에서 javascript 부분을 CSSJocky 아래의 Membership Modules 메뉴에서 Configuration > Custom CSS or javascript의 입력창에 복사하도록 합니다.

<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script>
function sample6_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

// .....

// 커서를 상세주소 필드로 이동한다.
document.getElementById("sample6_address2").focus();
}
}).open();
}
</script>

예를 들어 위와 같은 코드를 "Custom JavaScript Code" 옆의 입력 필드에 복사하여 넣습니다.

우편번호 검색 필드

이하의 작업은 Customize Forms에서 진행합니다. 원하는 폼 이름 옆의 "Customize Fields" 아이콘을 눌러 새로운 필드를 추가하거나 수정할 수 있습니다.

우편번호 검색 필드는 두 개의 텍스트 입력 필드와 하나의 Custom HTML 필드로 구성해도 되지만, 편의상 하나의 "Custom HTML"로 설정해도 됩니다. 저는 편의상 우편번호 검색 필드 부분을 하나로 처리하여 "Custom HTML" 필드를 추가하여 코드를 넣는 방식을 선택했습니다. (꼭, 우편번호 정보를 받아야 하는 경우에는 각 우편번호 입력창에 대하여 텍스트 입력 필드를 선택해주시면 되겠습니다.)

위와 같이 우편번호 검색 입력 필드와 검색 버튼 부분의 코드를 그대로 복사해 넣으면 됩니다.

주소 필드와 상세 주소 필드

주소와 상세 주소 필드 부분은 각각 텍스트 입력 필드를 선택하되, Unique Name에 각 ID 값을 입력하도록 합니다.

예를 들어 "주소" 필드의 편집 화면을 보면:

표시된 "Unique Name"에는 다음 우편검색 서비스 예제에서 "주소" 부분의 ID 값에 해당합니다.

<input type="text" id="sample6_address" placeholder="주소">

"상세 주소" 부분도 동일한 방법으로 필드를 추가하면 됩니다.

이상의 과정을 마치면 맨 위의 그림과 같이 우편번호 검색창과 주소 필드가 추가됩니다. 코드를 이상 없이 넣었으면 정상적으로 작동함을 확인할 수 있습니다. (임의로 ID를 변경하여 넣을 때 간혹 오류가 발생하는 경우가 있습니다. 그런 경우 하나씩 대조하여 오류를 수정하도록 합니다.)

이용 약관 동의란 추가하기

이용약관 동의란은 "checkbox" 필드를 추가하여 구현할 수 있습니다.

여기서 중요한 점은 "Required Field?" 부분을 "Yes"로 선택해야 한다는 점입니다. Description 부분에 위와 같이 이용약관 링크를 추가할 수 있습니다. Field Options 부분에 적당한 문구를 입력합니다. (예: "동의")

이상으로 Front-end Membership Modules 워드프레스 플러그인에서 우편번호 검색과 이용약관 동의란을 추가하는 방법을 살펴보았습니다.

참고:

• WP-Members에서 우편번호를 추가하는 방법
• 무료 플러그인을 사용하여 기본 등록 양식에 이용약관 추가하기
• 플러그인을 사용하지 않고 워드프레스 기본 로그인 폼/등록 폼의 디자인을 바꾸는 방법