最新ワードプレス ホームページ制作
スタッフブログ

メールフォームの「郵便番号から住所が自動入力される仕組み」をページ内で複数実行したい時のHTMLとJavascriptの記述例

by STAFF

先日、ビジネスパートナーから、「CRMメールのフォーム作成ツールで、郵便番号から住所が自動入力される仕組みを、複数設置する場合は、”オリジナルHTML”を自作し、Javascriptの記述を含めたHTMLソースをアップロードする必要があるらしい。JavascriptもHTMLも苦手だから、助けてちょんまげ」と連絡がありました。

今回は、住所の自動入力の箇所のみをサンプルとして用意しました。

サンプル：Javascript 住所自動入力サンプルページ

Javascript 住所自動入力サンプルページのソースはこちら

<!DOCTYPE HTML>
<html>
<head>
<title>Javascript 住所自動入力サンプルページ</title>
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
</head>

<body>
<form method="post">

<table>
<tr>
<td>郵便番号1</td>
</tr>
<tr>
<td>
<input type="text" name="郵便番号1" size="20" onkeyup="AjaxZip3.zip2addr(this,'','ご住所1','ご住所1');" placeholder="半角入力で住所自動入力"/>
</td>
</tr>
<tr>
<td>ご住所1</td>
</tr>
<tr>
<td>
※番地までご入力ください。<br /><input type="text" name="ご住所1" size="60" />
</td>
</tr>
</table>
	
<hr>
	
<table>
<tr>
<td>郵便番号2</td>
</tr>
<tr>
<td>
<input type="text" name="郵便番号2" size="20" onkeyup="AjaxZip3.zip2addr(this,'','ご住所2','ご住所2');" placeholder="半角入力で住所自動入力"/>
</td>
</tr>
<tr>
<td>ご住所2</td>
</tr>
<tr>
<td>
※番地までご入力ください。<br /><input type="text" name="ご住所2" size="60" />
</td>
</tr>
</table>
</form>

</body>
</html>

このソースコードが、何かのお役に立てば幸いです。

追伸

もしこの記事が役に立ったときは、埼玉県越谷市に向かって「ナイスだぜ、大橋プランニング。ホームページを新規で制作するとき、リニューアルするときが来たら、お前のことを必ず思い出すぜ」と囁いていただけると幸いです。
ちなみに、今のイチオシは「ワードプレスのホームページ制作」です。
お値引きさせていただきます。