Snow Monkey Formsにzipadrr-jpを連携させる方法

  • URLをコピーしました!
目次

結論

  • (zipadrr-jp有効化後)必要に応じて「placeholder上書」を入力
  • Snow Monkey Formsの郵便番号のid欄にzipと入力
  • Snow Monkey Formsの住所のid欄にaddrと入力

①(zipadrr-jp有効化後)必要に応じて「placeholder上書」を入力

特に設定をいじる必要はなく、私はplaceholderに「住所自動入力(ハイフン不要)」と記載。

「ハイフン不要」を記載した理由は後述(おまけ参照)

②Snow Monkey Formsの郵便番号のid欄にzipと入力

Snow Monkey Formsの設定に行き、郵便番号のIDに「zip」を付与。

他のブログ記事に「NAMEにzipと入れる」ように解説されており、それでも動いたので謎。

③Snow Monkey Formsの住所欄にaddrと入力

住所のID欄にaddrと入れます。

都道府県、市町村、番地というように欄が分かれているフォームであれば、それぞれにpref, city, addrを入れるのだと思います。

他のブログ記事によると『「pref city area addr」と間に半角空白を入れて記入』とあり、IDなのに複数指定できるのか??と疑問に思いつつその通りにしてみるとやはり「住所id名の定義がありません」とアラート出現

結論「addr」だけでいけましたが、「pref」や「city」でも同じように番地の手前までの住所が取得・表示されました(謎)

おまけ:ホバーした時に出るメッセージを消す方法

zipaddr-jpを有効化したあと、郵便番号欄をホバーすると「ハイフンなしで入力!」という緑のメッセージが出現します。

今回は語尾の「!」がサイトの雰囲気と異なり、かつ文言の編集が不可能だったので追加CSSで消して「住所自動入力(ハイフン不要)」とプレースホルダーに書きました。

/* 追加CSSで消す記述 */

#autozip {
   display: none !important;
}

以上です!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次