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

Last Updated: 2017년 02월 01일 5개 댓글

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

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

우편주소 검색 추가하기

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" 옆의 입력 필드에 복사하여 넣습니다.

Custom JavaScript Code

우편번호 검색 필드

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

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

주소 필드와 상세 주소 필드

주소와 상세 주소 필드 부분은 각각 텍스트 입력 필드를 선택하되, Unique Name에 각 ID 값을 입력하도록 합니다.
Address and Detailed Address
예를 들어 "주소" 필드의 편집 화면을 보면:
Edit Address
표시된 "Unique Name"에는 다음 우편검색 서비스 예제에서 "주소" 부분의 ID 값에 해당합니다.

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

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

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

이용 약관 동의란 추가하기

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

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

참고:


5 개 댓글

Leave a Comment

  1. 안녕하세요 블로그 보면서 항상 많은 도움 받고있습니다.
    혹시 아실까해서 문의드리는데요..주소입력되게끔 수정하고나니 잘 되던 프로필업데이트가 안되네요 ㅠㅠ 프로필 업데이트 버튼을 누르면 404페이지가 나오는데...뭐가문제인지 답답하네요 ㅠㅠ

    응답