WPFormsフォームに次の郵便番号APIを適用する

0

WPFormsは人気 WordPress お問い合わせフォームプラグインを使用して、ドラッグアンドドロップ方式でお問い合わせフォームを作成できます。 WPForms Liteは無料で利用できますが、HTML、ファイルアップロードフィールドなど、一部のフィールドと高度な機能は有料版でのみサポートされています。 WPFormsの無料版に次の郵便番号検索ボタンを追加できますが、他のコンタクトフォームプラグインと比較して少し難しいかもしれません。

WPFormsフォームに次の郵便番号APIを適用する

WPFormsフォームに次の郵便番号APIを適用する

WordPress お問い合わせフォームに郵便番号検索ボタンを追加したい場合 次の郵便番号サービスマニュアルを参照して、次の郵便番号APIを適用できます。

以下は、APIを簡単に利用できるように5つの例を提供しています。その中でシンプルに 郵便番号検索 ボタンと アドレス, 詳細住所 フィールドを表示する「ユーザーが選択した値を使用する」の例を私は活用しています。

カカオ 次の郵便番号サービス

サンプルコードの表示をクリックすると、サンプルのHTML / JSコードが表示されます。

HTMLコードを問い合わせフォームに追加できるようにする必要があります。郵便番号検索機能が正しく機能します。

KBoard 포럼にWPFormsフォームに郵便番号APIを適用する方法に関して質問が上がってきたことがあり、キャプチャしてみました。

KBoard 포럼

WPFormsにHTMLフィールドを追加するには、デフォルトで 有料版が必要です。

この質問では、郵便フィールドをHTMLコードブロックとしてカスタムフィールドを作成し、カカオ郵便番号API接続を試みたとします。しかし、HTMLコードブロックで作成したカスタムフィールドの内容は、渡されない問題について質問をしましたね。

HTMLコードを使用して郵便番号関連フィールドを追加した場合、郵便番号機能が機能してもデータは送信されません。

いくつかの方法があるかもしれませんが、 HTML コードで郵便番号機能を追加し、ユーザーが郵便番号を検索して住所を入力したら、WPFormsによって作成された別の「住所」フィールドにデータを入力することを検討することができます。

WPForms郵便番号を入力する

JavaScriptを使用して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タグが制限されているようです。この問題を解決できず、現在半分のプラグインになりましたが、このプラグインと WordPress ショートコード機能を使用して、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
		);

参照

コメントを残す

コメントを残す