郵便番号に紐づく住所以降の住所入力チェックの方法ありますでしょうか。 | Community
Skip to main content
New Participant
July 25, 2022
Solved

郵便番号に紐づく住所以降の住所入力チェックの方法ありますでしょうか。

  • July 25, 2022
  • 1 reply
  • 87 views

現在、弊社ではフォームにおいて、郵便番号を入力すると自動で郵便番号に紐づく住所が
住所フィールドに入力されるように設定されています。
設定は下記の【TIPS】を参考にしております。
https://nation.marketo.com/t5/japan-user-group-discussions/tips-%E9%83%B5%E4%BE%BF%E7%95%AA%E5%8F%B7%E3%81%8B%E3%82%89%E4%BD%8F%E6%89%80%E3%82%92%E8%87%AA%E5%8B%95%E5%85%A5%E5%8A%9B%E3%81%99%E3%82%8B/gpm-p/251983#M2967

 

しかし、それ以降の住所は手動での入力のため、番地やマンション番号などの入力漏れが時々発生しています。
番地やマンション番号などが入力されていなければ、「入力されていません」のようなエラーメッセージを表示する設定などはありますでしょうか。

 

Javascriptに関しては素人のため、知識がありません。皆さまが行っている対策をお教えいただければ幸いです。
よろしくお願いいたします。

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Naoki_Kumagai

@tfky 様

株式会社ルシダスの熊谷です。

 

お悩みの件、

「フラッシュフィールド」のハックを利用することで解決できるのでは?と考えました。

以下、ご確認くださいませ。

 

【フォームの作成について】

  1. 郵便番号を必須項目にする。
  2. Javascriptで取得しきれない住所の続き(番地やマンション名)を入力するために「フラッシュフィールド」のカスタムフィールドを必須項目で追加する

【スマートキャンペーンのフローについて】

  1. 該当のフォーム入力をトリガーに、「フラッシュフィールド」で回収した値を、リードトークンを利用して「住所(Address)フィールド」へ書き写す
  2. 役目を終えたフラッシュフィールドの値はNULLで空欄に戻す。

【補足】

上記だけでも目的は果たせるかと思いますが、Javascriptで取得してきた「都道府県(State)」「市町村(City)」「住所(Address)」の値をフォーム入力の際にお客様が自由に書き換えられるのはかえって不都合があるかと思います。

 

そこで、

該当の3つのフィールドに対して、「readonly="true"」を付与して、「表示はされるが書き換えはできない」としてあげることで、より利便性やデータの保守向上に繋がるのではないでしょうか?

 

以下、Javascript改造例

 

MktoForms2.whenReady(function (form) {

 if(!!document.getElementById("PostalCode")){

//入力を受け付けないように変更し、灰色の背景色で入力不可を視覚的に伝える

  document.getElementById("State").setAttribute("readOnly", true);
  document.getElementById("State").style.background = ("#ddd");
  document.getElementById("City").setAttribute("readOnly", true);
  document.getElementById("City").style.background = ("#ddd");
  document.getElementById("Address").setAttribute("readOnly", true);

  document.getElementById("Address").style.background = ("#ddd");

 

  document.getElementById("PostalCode").onkeyup = function(){

   AjaxZip3.zip2addr('PostalCode','','State','City','Address');

  }

 }else{

  console.log("noPostalCode")

 };

});

 

 

フォーム側の下準備

 

スマートキャンペーンのフロー設定方法と実行結果

 

以上です。

ぜひお試しください。

 

 

「フラッシュフィールド」のハックについて詳細はこちら

https://nation.marketo.com/t5/japan-user-group-discussions/001-marketo%E3%82%92%E6%8B%A1%E5%BC%B5%E3%81%99%E3%82%8B%E3%83%95%E3%83%A9%E3%83%83%E3%82%B7%E3%83%A5%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89-marketohack/gpm-p/244325#M2723

 

 

1 reply

Naoki_Kumagai
Naoki_KumagaiAccepted solution
New Participant
July 26, 2022

@tfky 様

株式会社ルシダスの熊谷です。

 

お悩みの件、

「フラッシュフィールド」のハックを利用することで解決できるのでは?と考えました。

以下、ご確認くださいませ。

 

【フォームの作成について】

  1. 郵便番号を必須項目にする。
  2. Javascriptで取得しきれない住所の続き(番地やマンション名)を入力するために「フラッシュフィールド」のカスタムフィールドを必須項目で追加する

【スマートキャンペーンのフローについて】

  1. 該当のフォーム入力をトリガーに、「フラッシュフィールド」で回収した値を、リードトークンを利用して「住所(Address)フィールド」へ書き写す
  2. 役目を終えたフラッシュフィールドの値はNULLで空欄に戻す。

【補足】

上記だけでも目的は果たせるかと思いますが、Javascriptで取得してきた「都道府県(State)」「市町村(City)」「住所(Address)」の値をフォーム入力の際にお客様が自由に書き換えられるのはかえって不都合があるかと思います。

 

そこで、

該当の3つのフィールドに対して、「readonly="true"」を付与して、「表示はされるが書き換えはできない」としてあげることで、より利便性やデータの保守向上に繋がるのではないでしょうか?

 

以下、Javascript改造例

 

MktoForms2.whenReady(function (form) {

 if(!!document.getElementById("PostalCode")){

//入力を受け付けないように変更し、灰色の背景色で入力不可を視覚的に伝える

  document.getElementById("State").setAttribute("readOnly", true);
  document.getElementById("State").style.background = ("#ddd");
  document.getElementById("City").setAttribute("readOnly", true);
  document.getElementById("City").style.background = ("#ddd");
  document.getElementById("Address").setAttribute("readOnly", true);

  document.getElementById("Address").style.background = ("#ddd");

 

  document.getElementById("PostalCode").onkeyup = function(){

   AjaxZip3.zip2addr('PostalCode','','State','City','Address');

  }

 }else{

  console.log("noPostalCode")

 };

});

 

 

フォーム側の下準備

 

スマートキャンペーンのフロー設定方法と実行結果

 

以上です。

ぜひお試しください。

 

 

「フラッシュフィールド」のハックについて詳細はこちら

https://nation.marketo.com/t5/japan-user-group-discussions/001-marketo%E3%82%92%E6%8B%A1%E5%BC%B5%E3%81%99%E3%82%8B%E3%83%95%E3%83%A9%E3%83%83%E3%82%B7%E3%83%A5%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89-marketohack/gpm-p/244325#M2723

 

 

TfkyAuthor
New Participant
July 28, 2022

ご返信ありがとうございます。

 

ご丁寧に説明いただきありがとうございます。

お教えいただいた方法で解決できそうなので試してみます。

 

ありがとうございました。