WPForms 폼에 다음 우편번호 API 적용하기

WPForms는 인기 워드프레스 문의폼 플러그인으로 드래그 앤 드롭 방식으로 문의 양식을 만들 수 있습니다. WPForms Lite는 무료로 사용이 가능하지만 HTML, 파일 업로드 필드 등 일부 필드와 고급 기능은 유료 버전에서만 지원됩니다. WPForms 무료 버전에 다음 우편번호 검색 버튼을 추가할 수 있지만 다른 컨택트 폼 플러그인에 비해 조금 까다로울 수 있습니다.

WPForms 폼에 다음 우편번호 API 적용하기

워드프레스 문의 폼에 우편번호 검색 버튼을 추가하고 싶은 경우 다음의 우편번호 서비스 매뉴얼을 참고하여 다음 우편번호 API를 적용할 수 있습니다.

다음은 API를 쉽게 이용할 수 있도록 5개의 예제를 제공하고 있습니다. 그 중에서 심플하게 우편번호 찾기 버튼과 주소, 상세주소 필드를 표시하는 "사용자가 선택한 값 이용하기" 예제를 저는 활용하는 편입니다.

예제 코드보기를 클릭하면 예시 HTML/JS 코드가 제시됩니다.

HTML 코드를 문의 폼에 추가할 수 있어야 우편번호 검색 기능이 제대로 작동하게 됩니다.

케이보드 포럼에 WPForms 폼에 우편번호 API를 적용하는 방법과 관련하여 질문이 올라온 것이 있어 캡처해 보았습니다.

WPForms에 HTML 필드를 추가하려면 기본적으로 유료 버전이 필요합니다.

WPForms 문의폼에서 HTML 필드 사용하기

해당 질문에서는 우편 필드를 HTML 코드 블럭으로 커스텀 필드를 만들어서 카카오 우편번호 API 연결을 시도했다고 하네요. 하지만 HTML 코드 블럭으로 작성한 커스텀 필드의 내용은 전달되지 않는 문제에 대하여 질문을 올렸네요.

HTML 코드를 사용하여 우편번호 관련 필드를 추가했다면 우편번호 기능이 작동하더라도 데이터는 전송되지 않습니다.

여러 가지 방법이 있을 수 있겠지만, HTML 코드로 우편번호 기능을 추가하고 사용자가 우편번호를 검색하여 주소를 입력하면 WPForms에서 만든 별도의 '주소' 필드에 데이터가 채워지도록 하는 것을 고려할 수 있을 것 같습니다.

자바스크립트를 사용하여 HTML 필드에 채워진 주소 데이터를 WPForms의 텍스트 필드로 넘겨주는 것은 그리 어렵지 않습니다.

// 실시간으로 입력값을 #wpforms-598-field_9에 합성 반영
document.addEventListener('DOMContentLoaded', function(){
	// 필드 참조
	var elPostcode = document.getElementById('sample2_postcode');
	var elAddress = document.getElementById('sample2_address');
	var elDetail = document.getElementById('sample2_detailAddress');
	var elOut = document.getElementById('wpforms-598-field_9');

	if (!elPostcode || !elAddress || !elDetail || !elOut) return;

	// 주소 문자열 합성 -> 출력 필드에 반영
	function updateCombined(){
		var addr = (elAddress.value || '').trim();
		var detail = (elDetail.value || '').trim();
		var post = (elPostcode.value || '').trim();

		var combined = '';
		if (addr) combined = addr;
		if (detail) combined += (combined ? ' ' : '') + detail;
		if (post) combined += (combined ? ' ' : '') + '(우편번호: ' + post + ')';

		elOut.value = combined;
	}

	// 사용자 입력 시 실시간 반영
	elAddress.addEventListener('input', updateCombined);
	elDetail.addEventListener('input', updateCombined);
	elPostcode.addEventListener('input', updateCombined);

	// 초기 1회 반영
	updateCombined();
});

Quform, Forminiator 등 다른 컨택트 폼 플러그인을 사용하는 경우에도 비슷한 접근법으로 우편번호 버튼을 표시할 수 있습니다.

저는 WPForms Lite 버전에 커스텀 HTML 필드를 추가하는 애드온 플러그인을 자체적으로 만드는 시도를 했습니다. HTML 필드가 추가가 되지만, 일부 HTML 태그(예: input 필드 등)가 필터링되어 사라지는 현상이 발생하고 있습니다. 아마 WPForms의 보안 기능에 의해 일부 HTML 태그가 제한되는 것 같습니다. 이 문제를 해결하지 못해 현재 반쪽짜리 플러그인이 되었지만, 이 플러그인과 워드프레스 숏코드 기능을 사용하여 HTML 필드에 다음 우편번호 관련 HTML 코드를 추가해 보았습니다.

HTML 코드로 우편번호 부분을 추가하는 경우 우편번호 검색 버튼과 입력 필드의 스타일이 어색하게 보일 수 있습니다. CSS를 사용하여 스타일을 데모와 비슷하게 만들 수 있습니다.

/* 공통 리셋 */
.wpforms-field-custom-html-content input[type="text"],
.wpforms-field-custom-html-content input[type="button"] {
	box-sizing: border-box;	/* 테두리/패딩 포함 폭 계산 */
	font-size: 14px;
}

/* 1) 첫 줄: 우편번호 + 버튼(인접 형제 선택) */
#sample2_postcode {
	display: inline-block;
	width: 160px;			/* 데모와 비슷한 폭 */
	height: 36px;
	padding: 8px 10px;
	border: 1px solid #ddd;
	border-radius: 3px;
	vertical-align: top;
}

#sample2_postcode + input[type="button"] {
	display: inline-block;
	height: 36px;
	padding: 0 14px;		/* 좌우 여백으로 버튼 폭 조절 */
	margin-left: 8px;		/* 입력칸과 버튼 사이 여백 */
	border: 1px solid #ccc;
	border-radius: 3px;
	background: #f7f7f7;
	cursor: pointer;
	vertical-align: top;
	    color: #373737;
}

/* 2) 아래 줄들: 전체 폭 필드 */
#sample2_address,
#sample2_detailAddress {
	display: block;
	width: 100%;
	height: 36px;
	padding: 8px 10px;
	border: 1px solid #ddd;
	border-radius: 3px;
	margin-top: 10px;
}

/* 포커스/호버 상태 */
#sample2_postcode:focus,
#sample2_address:focus,
#sample2_detailAddress:focus {
	border-color: #4e8cff;
	outline: none;
	box-shadow: 0 0 0 3px rgba(78,140,255,0.15);
}

#sample2_postcode + input[type="button"]:hover {
	background: #efefef;
}

#sample2_postcode + input[type="button"]:active {
	background: #e7e7e7;
}

/* placeholder 색상(부드럽게) */
#sample2_postcode::placeholder,
#sample2_address::placeholder,
#sample2_detailAddress::placeholder {
	color: #9aa0a6;
}

/* 컨테이너 최대폭(선택) */
.wpforms-field-custom-html-content {
	max-width: 680px;		/* 필요 시 조정 */
}

/* 반응형: 좁은 화면에서 버튼을 다음 줄로 내려 정렬 */
@media (max-width: 480px) {
	#sample2_postcode {
		width: 100%;
		margin-bottom: 8px;
	}

	#sample2_postcode + input[type="button"] {
		display: block;
		width: 100%;
		margin-left: 0;
	}
}

label.wpforms-field-label[for="wpforms-598-field_8"] {
    margin-bottom: -3px;
}

다음 우편번호 서비스 매뉴얼에서 제공하는 JS 코드를 적절히 응용하여 수정할 수 있습니다. 예시:

/* 다음 우편번호 + WPForms 연동 */
(function(){
	// DOM 준비
	document.addEventListener('DOMContentLoaded', function(){
		// 필드 캐시
		var elPostcode = document.getElementById('sample2_postcode');
		var elAddress = document.getElementById('sample2_address');
		var elDetail = document.getElementById('sample2_detailAddress');
		var elExtra = document.getElementById('sample2_extraAddress');
		var elLayer = document.getElementById('layer');
		var elOut = document.getElementById('wpforms-598-field_9'); // 출력 대상

		// 방어 코드: 필수 엘리먼트 없으면 중단
		if (!elPostcode || !elAddress || !elDetail || !elLayer || !elOut) return;

		// 주소 문자열 합성 -> 출력 필드에 반영
		function updateCombined(){
			var addr = (elAddress.value || '').trim();
			var detail = (elDetail.value || '').trim();
			var post = (elPostcode.value || '').trim();

			var combined = '';
			if (addr) combined = addr;
			if (detail) combined += (combined ? ' ' : '') + detail;
			if (post) combined += (combined ? ' ' : '') + '(우편번호: ' + post + ')';

			elOut.value = combined;
		}

		// 이벤트: 사용자가 직접 수정할 때 실시간 반영
		elAddress.addEventListener('input', updateCombined);
		elDetail.addEventListener('input', updateCombined);
		elPostcode.addEventListener('input', updateCombined);

		// 레이어 닫기
		function closeDaumPostcode(){
			elLayer.style.display = 'none';
		}

		// 레이어 위치 초기화
		function initLayerPosition(){
			var width = 300;	// 우편번호서비스 width
			var height = 400;	// 우편번호서비스 height
			var borderWidth = 5;	// 테두리 두께

			elLayer.style.width = width + 'px';
			elLayer.style.height = height + 'px';
			elLayer.style.border = borderWidth + 'px solid';
			elLayer.style.left = (((window.innerWidth || document.documentElement.clientWidth) - width) / 2 - borderWidth) + 'px';
			elLayer.style.top = (((window.innerHeight || document.documentElement.clientHeight) - height) / 2 - borderWidth) + 'px';
		}

		// 우편번호 검색 실행
		function sample2_execDaumPostcode(){
			new daum.Postcode({
				oncomplete: function(data){
					var addr = '';
					var extraAddr = '';

					// 주소 타입 분기
					if (data.userSelectedType === 'R') {
                        addr = data.roadAddress;
					} else {
                        addr = data.jibunAddress;
					}

					// 참고항목 조합 (도로명)
					if (data.userSelectedType === 'R') {
						if (data.bname !== '' && /[동|로|가]$/g.test(data.bname)) {
							extraAddr += data.bname;
						}
						if (data.buildingName !== '' && data.apartment === 'Y') {
							extraAddr += (extraAddr !== '' ? ', ' : '') + data.buildingName;
						}
						if (extraAddr !== '') {
							extraAddr = ' (' + extraAddr + ')';
						}
						if (elExtra) elExtra.value = extraAddr;
					} else {
						if (elExtra) elExtra.value = '';
					}

					// 값 채우기
					elPostcode.value = data.zonecode || '';
					elAddress.value = addr || '';

					// 출력 필드 즉시 갱신
					updateCombined();

					// 상세주소로 포커스
					elDetail.focus();

					// 레이어 닫기 (autoClose:false를 쓰지 않는 기본 동작)
					elLayer.style.display = 'none';
				},
				width: '100%',
				height: '100%',
				maxSuggestItems: 5
			}).embed(elLayer);

			// 레이어 표시 및 가운데 정렬
			elLayer.style.display = 'block';
			initLayerPosition();
		}

		// 전역에서 접근해야 하는 함수들을 window에 노출
		// (HTML의 onclick="sample2_execDaumPostcode()" / close 버튼에서 사용)
		window.sample2_execDaumPostcode = sample2_execDaumPostcode;
		window.closeDaumPostcode = closeDaumPostcode;

		// 화면 회전/리사이즈 시 레이어 위치 재계산
		window.addEventListener('resize', function(){
			if (elLayer.style.display === 'block') initLayerPosition();
		});

		// 페이지 로드 시 한 번 초기 합성
		updateCombined();
	});
})();

카카오 우편번호 스크립트를 해당 문의 폼이 표시되는 페이지에만 로드되도록 하면 사이트에 미치는 영향을 최소화할 수 있습니다.

	// 페이지 ID 603에서만 스크립트 로드
	if (is_page(603)) {
		// 1) 카카오(다음) 우편번호 스크립트
		wp_enqueue_script(
			'daum-postcode',
			'https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js',
			[],
			null,
			true
		);

WPForms 폼에 다음 우편번호 API 적용하기

WPForms 폼에 다음 우편번호 API 적용하기

참고

워드크래커

댓글 남기기

댓글 남기기 응답 취소