SalesforceにはWeb-to-リードという、Webサイトからリードを作成するための機能があります。
このWeb-to-リードを簡単に利用するために、Salesforceにはリードの項目を選択すればその項目を登録するフォームを自動生成する「Web-to-リードフォームの作成」という機能があります。
この「Web-to-リードフォームの作成」機能は各項目を登録するためのテキストボックスを含む簡単なフォームを作成するだけのもので、その他の機能はありません。
今回は、このフォームに自動住所入力機能（郵便番号を入れると自動で住所を入力する機能）を加えてみます。
Web-to-リードフォームに加える項目
今回は、必要最小限と思われる以下項目を追加してみます。
- 姓
- 名
- メール
- 会社名
- 郵便番号
- 国
- 都道府県
- 市区郡
- 町名・番地
Web-to-リードフォームが生成するHTMLコード
上記項目を選択した場合に生成されるHTMLコードは以下になります。（コメントアウト部分など、不要な個所は除きます）
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8"> <form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST"> <input type=hidden name="oid" value="00Dxxxxxxxxxxxx"> <input type=hidden name="retURL" value="http://www.google.com"> <label for="last_name">姓</label><input id="last_name" maxlength="80" name="last_name" size="20" type="text" /><br> <label for="first_name">名</label><input id="first_name" maxlength="40" name="first_name" size="20" type="text" /><br> <label for="email">メール</label><input id="email" maxlength="80" name="email" size="20" type="text" /><br> <label for="company">会社名</label><input id="company" maxlength="40" name="company" size="20" type="text" /><br> <label for="zip">郵便番号</label><input id="zip" maxlength="20" name="zip" size="20" type="text" /><br> <label for="country">国</label><input id="country" maxlength="40" name="country" size="20" type="text" /><br> <label for="state">都道府県</label><input id="state" maxlength="20" name="state" size="20" type="text" /><br> <label for="city">市区郡</label><input id="city" maxlength="40" name="city" size="20" type="text" /><br> <label for="street">町名・番地</label><textarea name="street"></textarea><br> <input type="submit" name="submit"> </form>
ブラウザから見るとこう見えます。
自動住所入力機能を追加する
今回は、ajaxzip3を使用して機能を追加してみます。
まず、ヘッダ部分に
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
を追加します。
次に、「郵便番号」の行を
<label for="zip">郵便番号</label><input id="zip" maxlength="20" name="zip" size="20" type="text" onKeyUp="AjaxZip3.zip2addr(this,'','state','city','street');"/><br>
に変更します。
変更後のHTMLコードは以下になります。
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8"> <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script> <form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST"> <input type=hidden name="oid" value="00Dxxxxxxxxxxxx"> <input type=hidden name="retURL" value="http://www.google.com"> <label for="last_name">姓</label><input id="last_name" maxlength="80" name="last_name" size="20" type="text" /><br> <label for="first_name">名</label><input id="first_name" maxlength="40" name="first_name" size="20" type="text" /><br> <label for="email">メール</label><input id="email" maxlength="80" name="email" size="20" type="text" /><br> <label for="company">会社名</label><input id="company" maxlength="40" name="company" size="20" type="text" /><br> <label for="zip">郵便番号</label><input id="zip" maxlength="20" name="zip" size="20" type="text" onKeyUp="AjaxZip3.zip2addr(this,'','state','city','street');"/><br> <label for="country">国</label><input id="country" maxlength="40" name="country" size="20" type="text" /><br> <label for="state">都道府県</label><input id="state" maxlength="20" name="state" size="20" type="text" /><br> <label for="city">市区郡</label><input id="city" maxlength="40" name="city" size="20" type="text" /><br> <label for="street">町名・番地</label><textarea name="street"></textarea><br> <input type="submit" name="submit"> </form>
おわりに
Web-to-リードフォームで生成されるHTMLコードは非常に単純なため、このまま使用することは推奨できません*1が、「もし生成コードに自動住所入力機能を追加するなら」ということで書いてみました。
参考になれば幸いです。
*1:Web-to-リード作成に必要な組織IDがHTMLソースコードから見えるため、スパムが大量に送られる危険がある
