くま太君名前のラベルの変更方法がわからない！
名、姓の順番じゃ、おかしいよね？！
ブログのお問い合わせでよく利用されている、クマのアイコンが目印のフォームプラグイン、Contact Form by WPForms。
無料版と有料版があり、直感的に操作できるので、とても扱いやすいフォームプラグインの1つです。
とはいえ、日本語対応はしているものの、そこは海外製品。
お問い合わせフォームで使いたいのに、肝心の名前のサブラベルがうまく変更できない！
なんてお悩みはありませんか？
くま太君これね、なかなか直せなかったんだよね……。
名前のサブラベルが変更できないままだと、
このことから名前のサブラベルが変更できないか、調べてみました。
今回はそんな、Contact Form by WPFormsプラグインで名前のサブラベルを変更する方法をシェアしていきます。
今回は、
・コードを使って正式に？名前サブラベルを変更する方法
・名前サブラベルを使わない代替案
この２点を解説します。
Contact Form by WPFormsの名前のサブラベルって何？
くま太君まずは、ラベルとサブラベルの違いを確認しておこう。
Contact Form by WPFormsプラグインでは、次の概念があります。
- ラベル
- サブラベル
①ラベルについて
①のラベルについては、Contact Form by WPFormsプラグインの編集画面で簡単に変更が可能です。
Contact Form by WPFormsプラグインは海外製品ではありますが、日本語対応しているので、上記図のように自由に名称を変更できます。
②サブラベルについて
くま太君このサブラベルの修正がなかなか出来なかったんだけど……。
②のサブラベルについては、一部項目でボックスの内容を表す（説明する）役割があります。
たとえばお問い合わせフォームなどのメールアドレスの項目を、思い浮かべてみてください。
入力メールアドレスが間違えていないか、多くのWEBサイトのフォームで確認メールを入力するように設定されていますよね。
その際もし、何の説明もなくボックスが2つ並んでいるだけでは、利用者側からしたら「？？？」となりませんか？
多くのフォームに触れていたら「確認メールのことだな」と経験から予想が付きますが、かなり不親切ですよね。
このような誘導するためのラベルが、サブラベルの役割になっています。
Contact Form by WPFormsプラグインでも、上記図のように説明が必要な項目には、②サブラベルを付することができます。
ただここで海外製品プラグインの弊害がでてきます。
Contact Form by WPFormsプラグインの名前フィールドのサブラベルです。
デフォルト状態だと、姓と名が逆に表示されてしまいます。
日本語表記だと、姓、名の順番ですよね。
今回はこの名前のサブラベルを、修正していきます。
Contact Form by WPFormsの名前フィールドの種類
Contact Form by WPFormsプラグインの名前フィールドは3種類用意されています。
以下の図は、Contact Form by WPFormsプラグイン編集画面の名前フィールドです。
名前フィールド シンプル
Contact Form by WPFormsプラグインの名前フィールドのシンプルフォーマットは、1行で完結します。
苗字も名前も続けて入力するタイプです。
そのため今回のような、名前のサブラベルを表示する必要はありません。
名前フィールド 姓、名
くま太君ちょっぴり玄人っぽい作りに見えるよね。
ポピュラーなタイプのフォーマットですね。
ちょっと本格的な作りっぽい、お問い合わせフォームに見えます。
苗字と名前を別々で入力してもらうタイプです。
名前のサブラベルがないと、ボックスだけになり不親切です。
この場合サブラベルを付けるか、ボックスの中に文字を表示するプレースフォルダーが必要になります。
名前フィールド 名、ミドルネーム、姓
ミドルネーム入りのフォーマットです。
日本のみで使うフォームを作成するのであれば、使用しないフォーマットです。
お問い合わせフォームとして使うなら、どれがおすすめ？
くま太君お問い合わせはフォームは、実際にアクションをしてくださる方が見る大事なページ。
きちんと作っておきたいよね。
Contact Form by WPFormsプラグインを使ってお問い合わせフォームを作るなら、名前フィールドは
このどちらかがおすすめ。
どちらか使いやすい方、ご自身の管理しやすいフォーマットを選んで利用すると良いでしょう。
個人的におすすめなのは、姓、名がわかれているフォーマットです。
Contact Form by WPFormsプラグインの有料版では、データをエクスポートすることができます。
csvやxmlで情報をダウンロードできるので、データ管理がしやすいです。
Contact Form by WPFormsで、名前のサブラベルをカスタマイズする方法
くま太君お待たせしました！
ここから名前サブラベルの変更方法を解説するよ！
上記図のように、姓、名の並び順にすることが、今回の目標です。
ここからは、実際にContact Form by WPFormsで名前のサブラベルを変更する方法を解説します
Contact Form by WPFormsプラグインで、サブラベルを書き換えるには、functions.phpにコードを書く必要があります。
くま太君コードはコピペでOK！
ぜひ試してみてね！
Contact Form by WPForms公式サイトに名前のサブラベルの変更方法が掲載されています。
Contact Form by WPForms公式サイト
全文英語です。
https://wpforms.com/developers/how-to-change-sublabels-for-the-name-field/
functions.phpにどうやって書けばいい？どこにあるの？
WordPressでfunctions.phpに書き込みをするには、2種類の方法があります。
・直にfunctions.phpファイルを開いてカスタマイズ用のコードを書き込む
・WordPressのテーマファイルエディターからカスタマイズ用のコードを書き込む
まずはそれぞれのfunctions.phpに書き込む方法を確認します。
直にfunctions.phpファイルを開いてカスタマイズコードを書き込む
くま太君FTPでサーバーからfunctions.phpファイルをダウンロードしてから、作業しよう。
今回のようにカスタマイズするためのコードを、functions.phpファイルに直接書き込む際は、必ず子テーマフォルダに入っている、functions.phpファイルを使いましょう。
くま太君子テーマのfunctions.phpファイルを使う理由は、
良かったらこの記事を確認してみてね。
functions.phpファイルをダウンロードしたら、
・functions.phpファイルをコピーするなどして、必ずバックアップしておく
ファイルのバックアップは必ずしておきましょう。
万が一失敗しても、バックアップした元のファイルをアップロードすれば元に戻せるので、安心して作業することができます。
functions.phpファイルを開いたら、一番下にコードをコピペするだけ。
このコードを書き足したfunctions.phpファイルを再度アップロードしたら、完了。
WordPressのテーマファイルエディターからカスタマイズコードを書き込む
くま太君WordPressの管理画面から、コードを書き込めるよ。
必ず使用しているWordPressテーマの子テーマを選択してください。
テーマファイルで、functions.phpをクリックして切り替える
ファイルを更新ボタンをクリック後、ファイルの編集に成功しましたとなれば完了。
追加コードは、下記をまるごとコピペしてください。
function wpf_dev_name_field_properties( $properties, $field, $form_data ) {
// Change sublabel values
$properties[ 'inputs' ][ 'first' ][ 'sublabel' ][ 'value' ] = __( '姓', 'plugin-domain' );
$properties[ 'inputs' ][ 'middle' ][ 'sublabel' ][ 'value' ] = __( '名', 'plugin-domain' );
$properties[ 'inputs' ][ 'last' ][ 'sublabel' ][ 'value' ] = __( '名', 'plugin-domain' );
return $properties;
}
add_filter( 'wpforms_field_properties_name' , 'wpf_dev_name_field_properties', 10, 3 );Contact Form by WPFormsで名前のサブラベルが、デフォルトだと名、姓だったのが、姓、名の並び順に修正されました。
ここは個人的な意見なのですが、できればFTPでサーバーにアクセスできる環境を用意しておいた方が安心です。
今回のように、WordPressのテーマファイルエディターを使って作業した場合、トラブルが無いとは言い切れません。
過去に実際私も作業中エラーが起こり、エラーアラートや画面が白くなったことがあります。
今回はfunctions.phpに書き込みをするので、エラーになった場合はFTPでサーバーにアクセスし、子テーマフォルダ内にあるfunctions.phpファイルをダウンロードして、コードが追加されていれば一度削除してアップロードをし直すと、復活できます。
すべてのContact Form by WPFormsに、名前サブラベルのカスタマイズを適用させる場合のコード
くま太君ここに載せたコードを、functions.phpファイルにコピペしよう。
下記の黒ボックス内のコードをそのまま全てコピーして、functions.phpファイルにペーストしてください。
このコードはContact Form by WPFormsプラグインで、複数のフォームを作成していた場合、全ての名前のサブラベルが変更されます。
必ず子テーマのfunctions.phpを使用してください。
function wpf_dev_name_field_properties( $properties, $field, $form_data ) {
// Change sublabel values
$properties[ 'inputs' ][ 'first' ][ 'sublabel' ][ 'value' ] = __( '姓', 'plugin-domain' );
$properties[ 'inputs' ][ 'middle' ][ 'sublabel' ][ 'value' ] = __( 'ミドルネーム', 'plugin-domain' );
$properties[ 'inputs' ][ 'last' ][ 'sublabel' ][ 'value' ] = __( '名', 'plugin-domain' );
return $properties;
}
add_filter( 'wpforms_field_properties_name' , 'wpf_dev_name_field_properties', 10, 3 );ある1つのContact Form by WPFormsに、名前サブラベルのカスタマイズを適用させる場合のコード
くま太君たくさんフォームを作っていたとき、1つのフォームにだけ、名前のサブラベルの変更を適用させることもできるよ。
フォームをいくつか作成していて、ある1つのフォームにのみ名前のサブラベルを変更したい時は、対象のフォームのIDをfunctions.phpにコードを書く必要があります。
下記の黒ボックス内の2・3行目の数字を、対象のフォームのIDに変更します。
function wpf_dev_name_field_properties( $properties, $field, $form_data ) {
// Only process this snippet on the form ID 123
if ( absint( $form_data[ 'id' ] ) !== 123 ) {
return $properties;
}
// Change sublabel values
$properties[ 'inputs' ][ 'first' ][ 'sublabel' ][ 'value' ] = __( '姓', 'plugin-domain' );
$properties[ 'inputs' ][ 'middle' ][ 'sublabel' ][ 'value' ] = __( 'ミドルネーム', 'plugin-domain' );
$properties[ 'inputs' ][ 'last' ][ 'sublabel' ][ 'value' ] = __( '名', 'plugin-domain' );
return $properties;
}
add_filter( 'wpforms_field_properties_name' , 'wpf_dev_name_field_properties', 10, 3 );form ID 123を、form ID 10に変更した例が下記です。
// Only process this snippet on the form ID 10
if ( absint( $form_data[ 'id' ] ) !== 10 ) {Contact Form by WPFormsプラグインのform IDの調べ方
くま太君とっても簡単！
マウスでカーソルを添わせるだけ！
この方法は、Contact Form by WPFormsプラグインのform IDを調べるだけでなく、WordPressの固定ページや投稿のIDを調べるのにも活用できます。
また、テキストリンクや画像リンクも含め、色々なWEBサイトでも活用できます。
WordPressの管理画面で、Contact Form by WPFormsのすべてのフォーム一覧を表示させます。
対象のフォーム名の部分にマウスでカーソルを添わせると（クリックしない）、画面の下の方にURLが表示されます。
下記図だと、form ID ＝ 10の、10の数字がform IDになります。
超絶簡単！Contact Form by WPFormsの名前のサブラベルを使わないで、何とかしたいときの代替案
くま太君functions.phpファイルを編集するのが怖い！そんなときの代替案を考えてみたよ。
Contact Form by WPFormsプラグインの編集画面内で完結させる方法です。
名前フィールドの高度な設定を見ると、左側の設定部分下にサブラベルを非表示というボタンがあります。
下記図だと、サブラベルを非表示OFFになっているので、図の右側のように、名前のサブラベルが表示されています。
くま太君まずは、この名前のサブラベルを消しちゃおう！
サブラベルを非表示ボタンをクリックして、下記図のようにサブラベルを非表示ONにします。
すると図の右側のように、名前のサブラベルが消えました。
ただこの姓、名がボックスで分かれているフィールドを使う場合、名前のサブラベルがないと少々不親切です。
ここでイケてるフォームにするには、図の左側にあるプレースフォルダー欄にそれぞれ姓、名を入力します。
すると図の右側のように、名前のボックス内に姓、名と表示されました。
これだと名前のサブラベルがなくても、それぞれが何のボックスか見てすぐ分かりますよね。
参考までにfunctions.phpを編集しないで、イケてるお問い合わせフォームになる代替案を掲載してみました。
functions.phpを編集して、おかしくなったらどうしよう、functions.phpを編集する自信がない……
そんなときは、ぜひこの方法を試してみてください。
今回のまとめ。Contact Form by WPFormsの名前のサブラベルを変更するのは、案外簡単だった
くま太君ここにたどり着くまで、ボク結構ムダな努力してたよね～。
今回のContact Form by WPFormsプラグインの名前のサブラベルの変更をすることで、
・鼻高々になれる
・自分がなんだかやり切った感で、満足できる
・見栄えの良いお問い合わせフォームになる
・見る人がみれば、ヤルナ！と思われる
という利点（？！）があります。
functions.phpを編集するのは怖いけど、コピペで簡単にできるので、挑戦してみるのもいいかもしれません。
その際、万が一のコトを考えてサイトなりfunctions.phpファイルなりの、バックアップをしておくことを強くおすすめします。
このひと手間で、
くま太君ボクってデキル奴！
と、鼻高々になれるかもしれません。
お問い合わせフォームは、実際にアクションをしてくださる方が見る大事なページなので、手を抜きたくなかったのが本音です。
今回のContact Form by WPFormsプラグインの名前のサブラベルの変更方法は、Google検索をしても中々ヒットしなかったので、お役に立てたら幸いです。
カスタマイズお疲れ様でした。
くま太君Contact Form by WPFormsプラグインの無料版と有料版の違いもまとめてみたよ。
興味があったら見てみてね。
最後までお読みいただきありがとうございました。
＼ 【広告】SWELLだと、設定も編集もサクサク快適！ ／
WordPressテーマ『SWELL』の詳細は公式サイトで！