フォームフィールドの上にフィールドの説明を表示する方法

概要

フィールドの説明をフォームフィールドの上に配置しますか？ これは、サイトに追加する簡単なPHPスニペットで簡単に実現できます。このチュートリアルでは、フィールドの説明をフォームフィールドの上に配置する方法を説明します。

デフォルトでは、WPFormsはすべてのフィールドの説明をフォームフィールドの入力の下に直接配置します。

セットアップ

これらの説明をフォームフィールドの上に移動するには、まずこのスニペットをサイトにコピーする必要があります。スニペットをサイトに追加する方法と場所についてサポートが必要な場合は、このチュートリアルを確認してください。

/**
 * Move the field description above the form field.
 *
 * @link   https://wpforms.com/developers/how-to-position-the-field-description-above-the-form-field/
 */

function wpf_dev_field_properties( $properties, $field, $form_data ) {
    
    // Only process this snippet on form ID 225
    if ( absint( $form_data[ 'id' ] ) !== 225 ) {
        return $properties;
    } 
    
    {
        // Position the field description above the form field
        $properties[ 'description' ][ 'position' ] = 'before';
    }

    return $properties;
}
add_filter( 'wpforms_field_properties', 'wpf_dev_field_properties', 10, 3 );

上記のコードは、フォームIDが225の場合にのみ、説明をフォームフィールドの上に移動します。225を自分のフォームIDに合わせて変更することを忘れないでください。フォームIDの見つけ方がわからない場合は、このチュートリアルを確認してください。

このコードスニペットを追加すると、説明がフォームフィールドの上に表示されるようになります。

これで完了です！フォームのフィールドの説明をフォームフィールドの上に移動することに成功しました。フォームのテキストフィールドの文字数を制限する方法も知りたいですか？テキストフィールドの文字数を制限する方法に関する記事をご覧ください。

関連

フィルターリファレンス: wpforms_field_properties

よくある質問

Q: スニペットを追加しましたが、まだ機能しませんか？

A: スニペットを追加しても変更が表示されない場合は、サイトのキャッシュをすべてクリアし、上記のスニペットがフォームのフォームIDを反映するように更新されていることを確認してください。

Q: 1つのフォームだけでなく、すべてのフォームでこれを実行するにはどうすればよいですか？

A: すべてのフォームでこの機能を利用したい場合は、フォームIDの呼び出しを削除するだけです。以下はそのスニペットの例です。

/**
 * Move the field description above the form field.
 *
 * @link   https://wpforms.com/developers/how-to-position-the-field-description-above-the-form-field/
 */

function wpf_dev_field_properties( $properties, $field, $form_data ) {

        // Position the field description above the form field
        $properties[ 'description' ][ 'position' ] = 'before';

    return $properties;
}
add_filter( 'wpforms_field_properties', 'wpf_dev_field_properties', 10, 3 );