必須フィールドインジケータの変更方法

WPFormsの必須フィールドインジケータを変更したいですか？テキスト文字列や記号を変更したい場合は、PHPを使用すると簡単に行えます。この記事では、PHPを使用してフォームの必須フィールドのテキストを変更する方法を説明します。

WPFormsでフィールドが必須としてマークされている場合、デフォルトでは、下のスクリーンショットで確認できるように、フィールドラベルの末尾に赤いアスタリスクが表示されます。

フォームの作成

まず、新しいフォームを作成し、フォームフィールドを追加します。これらのフィールドのうち少なくとも1つは必須フィールドとして設定する必要があります。

フォームの作成にヘルプが必要な場合は、こちらのドキュメントをご覧ください。

必須フィールドインジケータのカスタマイズ

次に、このスニペットをサイトに追加します。

スニペットをサイトに追加する方法にヘルプが必要な場合は、こちらのチュートリアルをご覧ください。

/**
 * Modify the required field indicator
 *
 * @link https://wpforms.com/developers/how-to-change-required-field-indicator/
 */

function wpf_dev_required_indicator( $text ) {

	return ' <span class="wpforms-required-label">' . __( '(Required)', 'wpforms' ) . '</span>';
}

add_filter( 'wpforms_get_field_required_label', 'wpf_dev_required_indicator', 10, 1 );

表示したいテキストに合わせて、(必須)というテキストを変更するだけです。

これで完了です！必須フィールドの外観を正常に変更できました！フォームフィールドのプレースホルダーテキストをスタイル設定しますか？フォームフィールドのプレースホルダーテキストのスタイル設定方法に関する記事をご覧ください。

参照フィルター

wpforms_get_field_required_label

よくある質問

Q: アスタリスク記号の色だけを変更するにはどうすればよいですか？

A: これを行うには、このCSSをサイトに追加するだけです。

CSSをサイトに追加する方法にヘルプが必要な場合は、こちらのチュートリアルをご覧ください。

.wpforms-form .wpforms-required-label {
    color: #1e73be !important;
}

Q: スニペットが機能しないのはなぜですか？

A: サイトキャッシュをクリアしても変更が表示されない場合は、関数の優先度を変更してみてください。コードスニペットでは、優先度とは、タスクまたはコード行を実行する必要がある順序を指します。ToDoリストのように、一部のタスクはより重要であり、他のタスクよりも前に行う必要があります。したがって、この特定のスニペットでは、優先度は10に設定されています。変更が反映されない場合は、その数値を大きい数値に変更して、それが役立つかどうかを確認してください。

この例では、優先度番号を20に設定しています。

/**
 * Modify the required field indicator
 *
 * @link https://wpforms.com/developers/how-to-change-required-field-indicator/
 */

function wpf_dev_required_indicator( $text ) {

	return ' <span class="wpforms-required-label">' . __( '(Required)', 'wpforms' ) . '</span>';
}

add_filter( 'wpforms_get_field_required_label', 'wpf_dev_required_indicator', 20, 1 );