Gravity Formsでの名前フィールドの処理

1. Gravity Formsの日本語化の状況
2. 名前フィールドの日本語化
2.1. フロント側の入力フォームだけ、順番をJavaScriptで入れ替える方法
2.1.1. デモ
3. フロント・管理画面すべてで順番を入れ替える
3.1. ラベルをJavaScriptで変更する方法（実用性低）
3.1.1. デモ
3.2. 手作業で設定する方法
3.2.1. デモ

Gravity Formsの日本語化の状況

Gravity Formsはかなり高度な日本語訳が行われておりますが、フォームの日本語化は行われていません。
例えば、「First Name」は「名」、「Last Name」は「姓」と翻訳されていますが、順番は「名」「姓」の順番です。
これでは日本語環境下では、ユーザーに違和感を持たれてしまいます。

そのため、日本語環境に合わせた対応が必要となります。

名前フィールドの日本語化

「高度なフィールド」の「名前」フィールドは、順番が「名」「姓」の順番になっています。
日本語環境では、「姓」「名」が一般的な順番ですので入れ替えする必要があります。

入れ替えする方法としてはいくつかの方法が考えられます。

フロント側の入力フォームだけ、順番をJavaScriptで入れ替える
フロント・管理画面すべてで順番を入れ替える

フロント側の入力フォームだけ、順番をJavaScriptで入れ替える方法

フロント側の入力フォームだけ、順番をJavaScriptで入れ替える方法はJqueyを使用します。
例として以下のコードで説明します。

jQuery(document).ready(function( $ ){
	// 名前の順番を日本化（姓、名の順番にする）
	$('div.ginput_container_name').prepend($('span.name_first'));
	$('div.ginput_container_name').prepend($('span.name_last'));
});

ginput_container_nameのdivにname_first（名前）のspanを先頭に追加し、その後name_last（姓）のspanを先頭に追加しています。
この方法では、以下の条件でフォームに適用されます。

サイト内の全てのGravityFormsのフォームに対して
「高度なフィールド」の「名前」フィールドを使用したフィールドの入力画面
（名前フィールドを2か所設定した場合は2か所両方で入れ替えます。）

上記コードをCode Snipetプラグインに記載することでラベルの入れ替えを行うことができます。

注意

注意点としては、この方法では入力フォームの位置だけしか入れ替わりません。
Gravity Formsにはデフォルトで確認画面がありませんが、確認画面を作成した場合は別途順番を入れ替えて表示する必要があります。
また、フォームエディターやフォームの投稿結果の順番は入れ替わりませんので注意してください。

デモ

以下のフォームは実際にJqueryで入れ替えを行ったデモです。
このデモでは、フロント画面側のフォーム入力の「名」と「姓」、「メイ」と「セイ」のspanの入れ替えを行っています。
そのため、管理画面側（フォームエディターと記事作成画面及びフォーム投稿一覧画面）は「名」「姓」、「メイ」「セイ」の順番で表示されます。

この投稿にはデモとして複数のフォームと複数の名前フィールドが挿入されているので、それらを特定するためにフィールドIDを指定して入れ替えやclassの変更を行っています。
（なお、「セイ」「メイ」のラベルはGravity Formsのフォームエディターで手動で変更しています。）

名前

名姓

フリガナ

メイセイ

jQuery(document).ready(function( $ ){
	// 名前の順番を日本化
	$('div#input_1_1').prepend($('span#input_1_1_3_container'));//名前フィールドを先頭に
	$('div#input_1_1').prepend($('span#input_1_1_6_container'));//次に苗字フィールドを先頭に

	// 名前フィールドのクラスを表示変更
	$('div#input_1_1>span#input_1_1_3_container').removeClass('ginput_left');//名前フィールドからclass削除
	$('div#input_1_1>span#input_1_1_3_container').addClass('ginput_right');//名前フィールドからclass追加
	$('div#input_1_1>span#input_1_1_6_container').removeClass('ginput_right');//苗字フィールドからclass削除
	$('div#input_1_1>span#input_1_1_6_container').addClass('ginput_left');//苗字フィールドからclass追加

	// カナの順番を日本化
	$('div#input_1_2').prepend($('span#input_1_2_3_container'));//メイのフィールドを先頭に
	$('div#input_1_2').prepend($('span#input_1_2_6_container'));//次にセイのフィールドを先頭に

	// カナフィールドのクラスを表示変更
	$('div#input_1_2>span#input_1_2_3_container').removeClass('ginput_left');//メイのフィールドからclass削除
	$('div#input_1_2>span#input_1_2_3_container').addClass('ginput_right');//メイのフィールドからclass追加
	$('div#input_1_2>span#input_1_2_6_container').removeClass('ginput_right');//セイのフィールドからclass削除
	$('div#input_1_2>span#input_1_2_6_container').addClass('ginput_left');//セイのフィールドからclass追加
});

フロント・管理画面すべてで順番を入れ替える

ラベル自体を入れ替えてしまう方法をご紹介します。
この方法の場合は、ラベルを入れ替えるのでフロント側の入力画面だけでなく、管理画面のフォームエディターや記事投稿画面、フォームの入力された結果すべてで入れ替わります。
データベースとしては、名前のカラムに姓が、姓のカラムに名前が格納されるので少々気持ち悪いですが、こちらの方が便利だと思います。

ラベルをJavaScriptで変更する方法（実用性低）

または、以下のコードをfunctions.phpやCode Snipetプラグインに記載することでラベルの入れ替えを行うことができます。

add_filter( 'gform_name_last', 'change_last', 10, 2 );
function change_last( $label, $form_id ) {
    return "名";
}

add_filter( 'gform_name_first', 'change_first', 10, 2 );
function change_first( $label, $form_id ) {
    return "姓";
}

上記の例では、すべてのフォームの「名前」フィールドで「Last Name」を「名」、「First Name」を「姓」に入れ替えます。

サイト内の全てのGravityFormsのフォームに対して
「高度なフィールド」の「名前」フィールドを使用したフィールドの入力画面
（名前フィールドを2か所設定した場合は2か所両方で入れ替えます。）

注意

注意点としては、この方法ではサイト内のGravityFormsの全てのフォームで名前フィールドを使用すると「名」のラベルが「姓」に、「姓」のラベルが「名」に入れ替わります。

サイト内の特定のフォームにだけ適用する場合は'gform_name_last'を'gform_name_last_1'のようにに変更します。（例：フォームIDが1の時だけ適用）

add_filter( 'gform_name_last_1', 'change_last', 10, 2 );
function change_last( $label, $form_id ) {
    return "名";
}

add_filter( 'gform_name_first_1', 'change_first', 10, 2 );
function change_first( $label, $form_id ) {
    return "姓";
}

注意

注意点としては、この方法では指定したフォームで複数の名前フィールドを使用すると、すべての名前フィールドの「名」のラベルが「姓」に、「姓」のラベルが「名」に入れ替わります。
つまりフリガナを名前と同じように名前フィールドを使用した場合にも適用されてますので、フリガナを使用する場合はこの方法は使用できません。
（下のデモを参照してください。）