Gravity Formsで住所フィールドの順番を日本語の順番にする

1. Gravity Formsの住所フィールドはおかしい
2. 表示する項目とサブラベルを設定する
3. 各入力欄の表示順の変更
3.1. JQueryを使って順番を変更する方法
3.1.1. デモ
3.2. CSS Flexboxを使用する方法

Gravity Formsの住所フィールドはおかしい

Gravity Forms本体は、プラグインの日本語訳はされておりますが、日本語化はされておりません。
そのため、住所フィールドを適用すると以下のような並び順で表示されます。

これでは怪しい海外のサイトのようです。

これは日本の住所入力のルールに従って変更してあげる必要があります。

表示する項目とサブラベルを設定する

ラベルの文言変更や各サブフィールドの表示/非表示については以下のように「住所タイプ」を「海外」に設定することで、フォームエディターでコントロールすることができます。

例として、一般的に表示設定とラベルの設定例を記載します。

表示	フィールド（デフォルト値）	任意のサブラベル（設定値）
ON	住所(丁目、番地、号)	番地
ON	住所2	建物名・部屋番号
ON	区市町村	市区町村
ON	州 / 都道府県	都道府県
ON	郵便番号	ー
OFF	国	ー

フォームエディターの住所フィールドの設定値

各入力欄の表示順の変更

次に問題となるのが各フィールドの表示順です。
上記の設定を行うと以下のような順番になります。

順番を変更する方法を2種類ご紹介します。

JQueryを使って順番を変更する方法

これを変更するために、Jqueryで順番を変更します。
以下のコードを Simple Custom CSS and JS プラグインや、テーマのJS追加欄等にペーストしてフロントエンドに適用します。
ginput_container_address は住所フィールドの各入力欄を包括しているdivになります。
ginput_container_address の配下の入力欄を span.ginput_address_city から順番に先頭に追加していきます。
番地と建物名の上に、郵便番号（ginput_address_zip）、都道府県（span.ginput_address_state）、市区町村（span.ginput_address_city）を先頭に追加していくことで順番を入れ替えています。

なお、郵便番号の右側にスペース（<span class="ginput_right ginput_address_zip_space"> </span>）を追加して都道府県を次の行の先頭から始まるようにしています。

jQuery(document).ready(function( $ ){
// 住所の順番を日本化（郵便番号、都道府県、市区町村、番地、建物名の順）
$('div.ginput_container_address').prepend($('span.ginput_address_city'));
$('div.ginput_container_address').prepend($('span.ginput_address_state'));
$('div.ginput_container_address').prepend('<span class="ginput_right ginput_address_zip_space">&nbsp;</span>');
$('div.ginput_container_address').prepend($('span.ginput_address_zip'));
});

これで以下のような表示になります。

注意点

これは、フロントエンド表示時に動作しますので、Gravity Formsのフォームエディターや各投稿の編集画面では反映しません。
また、上記のコードだとサイト内のGravity Formsの全てのフォームで住所フィールドを使用すると順番が入れ替わります。

デモ

以下は実際にGravity Formsを使用したデモになります。
（管理画面のブロックエディタではデフォルトのままの並び順になっていますが、フロントでは並び順が変わっています。）

住所

ご住所を入力してください。

番地建物名・部屋番号市区町村都道府県郵便番号

CSS Flexboxを使用する方法

Gravity Formsの住所フィールドはFlexboxを使用しているので、Flexコンテナ内のFlexアイテムの表示順を指定する「order」プロパティを使用すれば順番を変更することができます。

以下のようなCSSを書いて適用すると、サイト内の住所フィールド全てで適用されます。

// 郵便番号を1番目
.ginput_container_address span.ginput_address_zip {
   order: 0;
}
// 都道府県を2番目
.ginput_container_address span.ginput_address_state{
   order: 1;
}
// 区市町村を3番目
.ginput_container_address span.ginput_address_city {
   order: 2;
}
// 住所1（番地）を4番目
.ginput_container_address span.ginput_address_line_1 {
   order: 3;
}
// 住所2（建物名）を5番目
.ginput_container_address span.ginput_address_line_2 {
   order: 4;
}

注意事項

orderプロパティの初期値は「0」です。

以下が表示例になります。
郵便番号の右に都道府県がきてしまうなど、少々違和感があります。

そこで上の方でやったjQueryを応用します。

郵便番号のフィールドの後ろにスペースのspanを追加します。
このスペースはスマートフォンの場合は一行分のすき間があいてしまうので「max-width: 640px」の時には挿入しないようにしてあげます。

コードはこのように書きます。

// 郵便番号の後ろにスペースを追加
jQuery(document).ready(function( $ ){
  if (window.matchMedia("(max-width: 640px)").matches) {
    //画面横幅が640px以下のときの処理
  } else {
	//画面横幅が641px以上のときの処理
    $('.ginput_address_zip').after('<span class="ginput_right ginput_address_zip_space"> </span>');
  };
});