워드프레스 Quform 문의폼 플러그인 다음 우편번호 검색 기능 추가하기

워드프레스 문의폼 플러그인이나 케이보드 게시판 등에 다음 우편번호 검색 기능을 추가할 수 있습니다. Quform과 Contact Form 7 문의폼에 다음 우편번호 검색 기능을 추가하는 방법을 워드프레스 정보꾸러미 블로그에 소개한 적이 있습니다. 페이지 템플릿을 만들어서 자바스크립트 코드를 추가하는 방법으로 설명되어 있습니다. 페이지 템플릿을 만들어서 JS 코드를 추가하면 해당 페이지에서만 JS 코드가 로드되므로 사이트 전체에 미치는 영향을 최소화할 수 있습니다.

며칠 전 워드프레스 알림판에 직접 JS 코드를 추가하여 구현하는 방식으로 Quform으로 만든 문의 페이지에 다음 우편번호 검색 버튼을 추가하는 작업을 진행했습니다. 방법 자체는 동일하고 JS 코드를 어떤 식으로 추가하는가에서 조금 차이가 있습니다. Quform에서는 JS 코드와 CSS 코드를 입력하는 옵션을 제공하며, 해당 코드가 특정 페이지에서만 로드되도록 설정하는 것도 가능합니다.

참고로 Quform은 유료 컨택트 폼 플러그인으로 필요한 기능만 제공하여 강력하면서도 심플한 것이 특징입니다. 제 메인 워드프레스 사이트에 적용되어 있습니다.😄

워드프레스 Quform 문의폼 플러그인 다음 우편번호 검색 기능 추가하기

최종적으로 다음과 같은 레이아웃으로 우편번호 검색 기능을 추가하는 작업을 진행했습니다.

주소와 상세주소 필드는 나란히 배열되도록 했고, 우편번호 필드는 크기를 지정하여 제한했으며 우편번호 찾기 버튼이 우편번호 필드 옆으로 배열되도록 CSS로 조정했습니다(참고).

여기서 조금 더 진행하여 별도의 주소 필드(예: 전체 주소라는 이름의 필드)를 만들어서 우편번호와 주소, 상세주소 정보를 병합하여 전체 주소 필드에 채워지도록 할 수도 있을 것입니다. 조금 복잡할 수 있지만, 위의 같이 되어 있는 경우 우편번호, 주소, 상세주소 정보가 개별적으로 전송되어 조금 불편하게 느껴질 것도 같습니다.

Quform에서는 개별 필드가 이메일과 DB에 활성화(표시)할지 여부를 지정할 수 있는 옵션이 제공됩니다.

우편번호, 주소, 상세주소 정보를 이메일로는 보내지 않도록 하고 대신 통합된 주소 정보를 이메일로 보내는 것도 고려해 볼 수 있을 것입니다. (이렇게 하려면 코드가 조금 더 복잡해지겠지만, 요즘은 챗GPT가 있으므로 챗GPT로 어렵지 않게 해결할 수 있을 것입니다.😄)

우편번호 찾기 버튼을 누르면 다음 우편번호 서비스(Daum Postcode Service) 창이 표시되어 주소를 검색하여 선택할 수 있습니다.

아래와 같이 검색한 주소와 우편번호 정보가 채워지면 정상적으로 작동하는 것입니다.

FTP에 접속하여 페이지 템플릿을 만들지 않고 워드프레스 알림판에서 직접 구현하고 싶은 경우 다음과 같이 코드를 추가할 수 있습니다.

postcode.v2.js 파일을 로드하는 코드는 WPCode와 같은 플러그인을 사용하여 헤더 섹션에 추가할 수 있습니다.

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

코드 스니펫 » 헤더 및 푸터로 이동하여 헤더 섹션에 아래 그림과 같이 추가하면 됩니다.

GeneratePress 테마를 사용하는 경우 Elements 기능을 사용하여 헤더 섹션에 추가할 수 있습니다.

CSS와 JS 코드는 Quform의 설정 부분에서 추가할 수 있습니다. Forms » Settings » Custom CSS & JS 탭에서 Custom CSS에 CSS 코드를 추가하고 Custom JavaScript에 자바스크립트 코드를 추가합니다.

다음 우편번호 서비스 매뉴얼에서는 다음과 같은 코드 예시가 제시됩니다.

    //본 예제에서는 도로명 주소 표기 방식에 대한 법령에 따라, 내려오는 데이터를 조합하여 올바른 주소를 구성하는 방법을 설명합니다.
    function sample4_execDaumPostcode() {
        new daum.Postcode({
            oncomplete: function(data) {
                // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

                // 도로명 주소의 노출 규칙에 따라 주소를 표시한다.
                // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                var roadAddr = data.roadAddress; // 도로명 주소 변수
                var extraRoadAddr = ''; // 참고 항목 변수

                // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
                    extraRoadAddr += data.bname;
                }
                // 건물명이 있고, 공동주택일 경우 추가한다.
                if(data.buildingName !== '' && data.apartment === 'Y'){
                   extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                }
                // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                if(extraRoadAddr !== ''){
                    extraRoadAddr = ' (' + extraRoadAddr + ')';
                }

                // 우편번호와 주소 정보를 해당 필드에 넣는다.
                document.getElementById('sample4_postcode').value = data.zonecode;
                document.getElementById("sample4_roadAddress").value = roadAddr;
                document.getElementById("sample4_jibunAddress").value = data.jibunAddress;
                
                // 참고항목 문자열이 있을 경우 해당 필드에 넣는다.
                if(roadAddr !== ''){
                    document.getElementById("sample4_extraAddress").value = extraRoadAddr;
                } else {
                    document.getElementById("sample4_extraAddress").value = '';
                }

                var guideTextBox = document.getElementById("guide");
                // 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.
                if(data.autoRoadAddress) {
                    var expRoadAddr = data.autoRoadAddress + extraRoadAddr;
                    guideTextBox.innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';
                    guideTextBox.style.display = 'block';

                } else if(data.autoJibunAddress) {
                    var expJibunAddr = data.autoJibunAddress;
                    guideTextBox.innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';
                    guideTextBox.style.display = 'block';
                } else {
                    guideTextBox.innerHTML = '';
                    guideTextBox.style.display = 'none';
                }
            }
        }).open();
    }

이것을 응용하여 코드를 만들 수 있습니다. 상기 코드를 챗GPT에 입력하여 수정을 부탁하면 해당 환경에 맞게 수정된 코드를 얻을 수 있을 것입니다.

참고로 CSS 코드를 모양 » 사용자 정의 » 추가 CSS에 입력하고 JS 코드는 WPCode의 푸터 영역에 추가하는 것도 가능하지만, 이 경우 사이트 전체에서 코드가 로드되므로 사이트 속도에 미미하지만 약간의 영향을 미칠 수 있습니다. Quform의 설정 페이지에 코드를 넣는 경우에는 특정 페이지에만 로드되도록 하여 사이트 성능 저하를 최소화할 수 있습니다.

다음 우편번호 서비스 매뉴얼은 다음 문서를 참고하세요.

Daum 우편번호 서비스

참고로 우편번호 찾기 버튼을 자바스크립트를 이용하여 넣도록 처음에 코드를 만들었습니다. 이 경우 해당 URL로 접속 시에는 문제가 없었지만, 이상하게 메뉴에서 페이지를 클릭하여 접근하면 아래와 같은 에러가 발생하면서 우편번호 찾기 버튼이 표시되지 않는 문제가 발생했습니다.

Uncaught SyntaxError: Failed to execute 'appendChild' on 'Node': Unexpected token ':'
    at m (jquery.min.js?ver=3.7.1:2:880)
    at ce.globalEval (jquery.min.js?ver=3.7.1:2:3031)
    at HTMLScriptElement.<anonymous> (ajax.min.js?ver=6.8.2:1:8202)
    at ce.each (jquery.min.js?ver=3.7.1:2:3129)
    at e.<computed>.each (jquery.min.js?ver=3.7.1:2:1594)
    at slideInNewPage (ajax.min.js?ver=6.8.2:1:8183)
    at d (ajax.min.js?ver=6.8.2:1:16590)

이 문제를 해결하도록 코드를 변경했지만, 제 컴퓨터의 브라우저에서는 제대로 접속이 되었지만 클라이언트 컴퓨터에서는 오류가 지속되어 우편번호 찾기 버튼을 Quform 양식에 직접 추가했습니다.😄

마치며

주소 필드에 사용자가 직접 주소를 입력하도록 만들 수도 있지만, 다음 우편번호 서비스를 이용하여 쉽게 주소를 검색하여 입력하도록 할 수 있습니다. Quform을 이용하는 경우 이 글을 참고하여 다음 우편번호 검색 기능을 추가해 보시기 바랍니다.

참고로 Quform이나 Contact Form 7, Forminator, Gravity Forms, WPForms 등 컨택트 폼 플러그인으로 만든 양식을 방문자나 고객이 제출할 때 SMS 문자로도 내용이 전송되도록 하는 것이 가능합니다. (엘리멘터 프로에서 제공하는 문의폼도 연동이 가능할 것 같습니다.)

워드프레스 SMS 문자 연동 방법 (문의 폼 플러그인, 우커머스) - 워드프레스 정보꾸러미

👉 워드프레스 커스텀 작업이나 워드프레스 또는 웹호스팅 관련 문제 해결에 어려움을 겪는 경우 여기에서 서비스(유료)를 의뢰하실 수 있습니다.

참고

https://avada.tistory.com/3759

워드프레스 Gravity Forms + CoolSMS 연동으로 자동 문자 발송 설정하기

https://avada.tistory.com/3735

워드프레스 Contact Form 7 문의 시 SMS 문자로도 발송되도록 연동하기

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교