郵便番号検索を1つのフォームで2つ以上設定する方法は?
Synergy!LEADのフォームでは、郵便番号検索を標準的に1つ設定することができます。ただし1つのフォームに2つ以上、住所情報を取得し、それぞれに郵便番号検索を設定したい場合には標準機能では設定ができないため、入力画面の「オリジナルHTML」を適用する必要があります。その設定方法をご案内します。
仕上がり例
手順1:1つ目の郵便番号検索を設定する
入力項目に住所関連の項目を追加し終わったあと、1つ目の郵便番号検索を設定します。後ほどHTMLを編集する際に標準デザインをダウンロードしていただきますが、先に標準機能で1つ目の郵便番号検索を設定しておくと、設定された状態のHTMLをダウンロードすることができます。
<custom:zipcodehelper zipCode="1203" prefecture="1204" address1="1205" address2="1206" buttonName="検索する"/>
手順2:2つ目の郵便番号検索の設定内容を確認する
1つ目の郵便番号検索を設定後、2つ目として設定する場合の「検索ボタン」の設定内容を取得します。
項目を変更することで、「郵便番号検索ボタンタグ」の「zipCode」「prefecture」「address1」「address2」に紐づく番号が切り替わります。項目を変更後に生成された「郵便番号検索ボタンタグ」をメモ帳やテキストエディタなどに保管しておきます。このとき、郵便番号検索の [ 保存 ] はしないように注意してください。
以下の例では、「(郵送先)」と記載されている住所項目から、「(その他)」と記載されている住所項目へ切り替えたときに生成される「郵便番号検索ボタンタグ」を示しています。手順1のタグと見比べると、どこが変更されたかご理解いただけると思います。
<custom:zipcodehelper zipCode="1207" prefecture="1208" address1="1209" address2="1210" buttonName="検索する"/>
手順3:現在のデザインをダウンロードする
2つ目の住所項目に「郵便番号検索ボタン」を設置するために、入力画面の「標準デザインテンプレート」をダウンロードします。「標準デザインテンプレート」は、Synergy!LEADが提供するフォームの基本的なデザインが設定されているものです。
手順4:HTMLを修正する
ダウンロードしたHTMLを普段ご利用されている「テキストエディタ」を利用して開いていただき、手順2で保管しておいたボタンのHTMLコードを設定します。
下記例の8行目の「郵便番号(郵送先)」に付与されているボタンは、もともと標準機能で設定し自動的に付与されたボタンです。19行目の「郵便番号(その他)」の横に2つ目のボタンを設定したいので、<input>タグの後ろに手順2で作成したタグを貼り付けて保存します。
<!-- 標準機能で設定してボタンが設定されている箇所 --> <td class="q-txt"><span class="q-num"> </span>郵便番号(郵送先)</td> </tr> </table> <table cellpadding="0" cellspacing="0"> <tr> <td class="a-txt"> <input type="text" name="singleAnswer(ANSWER1203)" size="20" /><custom:zipcodehelper zipCode="1203" prefecture="1204" address1="1205" address2="1206" buttonName="検索する" /> ・・・ <!-- 2つ目にボタンを設定したい箇所 --> <td class="q-txt"><span class="q-num"> </span>郵便番号(その他)</td> </tr> </table> <table cellpadding="0" cellspacing="0"> <tr> <td class="a-txt"> <input type="text" name="singleAnswer(ANSWER1207)" size="20" /><custom:zipcodehelper zipCode="1207" prefecture="1208" address1="1209" address2="1210" buttonName="検索する"/> ・・・
手順5:HTMLをアップロードする
手順4で作成したHTMLをアップロードし、入力画面にオリジナルHTMLを適用することで設定完了となります。