ブログ・Wordpress・Elementor・プラグイン

Blog
Wordpress
Elementor
Plugins

郵便番号で住所を自動入力

Noimage - 街ぐるり小山

今更ですが、郵便番号を入力することで、住所を自動入力させるアレをFluent Formに実装しましょう。
まず最初に、問答無用で、Wordpressの[外観]→[テーマファイルエディター]→childテーマの[function.php]に以下を書き込みます。
(childテーマが分からない場合、「子テーマ」で検索して調べてください)

/****
郵便番号呼び出し
**/
function meta_headcustomtags() {
$headcustomtag = <<<EOM

EOM;
echo $headcustomtag;
}
add_action( ‘wp_head’, ‘meta_headcustomtags’, 99);

Fluent Formのフォームパーツには、IDやクラス名など、様々な属性を付与するための入力欄が備わっています。
但し少々癖があり、「ff_3_クラス名」の様に頭に勝手にFluentFormの頭文字+フォームIDが付与されるものもあったりしますので、
付与したIDまたはクラスで動かないときは、コードを一度見てください。

さて、この属性の入力欄ですが、これから実装する郵便番号での住所自動登録に必須となる、
onkeyup=”AjaxZip3.zip2addr(this,”,’hogehoge’,’fugafuga’);” を入れる為の入力欄はありません。がしかし、
Fluent Formには、CSSとJavascriptを書き込む欄がありますので、自分で振ったIDがあるパーツに対し、以下のJavascriptを書き込みます。

今回は事前に以下のようなIDを振っています。
郵便番号: zipcode
都道府県: prefecture
郡・市区町村: city

[JavaScript]
var sample = document.getElementById(‘ff_3_zipcode’);
sample.setAttribute(‘onKeyUp’, “AjaxZip3.zip2addr(this,”,’prefecture’,’city’);”);

サイト管理者

フリーでWEBデザインをしておりますナベさんです。WEBサイトの他、ドローンでの空撮などもしております。空撮、WEB制作のご用命は是非ナベさんまで宜しくお願い申し上げます。

お問い合わせ