プラグインNinja Formsのninja_forms_display_after_fieldsアクションの使用方法・解説

概要

ninja_forms_display_after_fields は、Ninja Forms プラグインにおけるフックであり、フォームフィールドの表示が完了した後に追加の処理を行うことができます。このアクションは、フォームがユーザーに対して表示された後にカスタム HTML を追加したり、特定のロジックを実行したりする際に非常に便利です。以下に、一般的にこのアクションを使用して実現される機能をいくつか挙げます。

計算結果の表示
カスタムメッセージの追加
外部APIからのデータ取得および表示
フォーム送信後の追跡コードの挿入
CSS や JavaScript のカスタムスクリプトのエンキュー
条件に基づくフィードバックの表示

構文

add_action('ninja_forms_display_after_fields', 'your_function_name', 10, 2);

パラメータ

function_name: 実行するコールバック関数の名前
10: 優先度（デフォルトは 10）
2: コールバック関数に渡される引数の数

戻り値

このアクションは特に戻り値をもたず、追加の HTML を出力することを目的としています。

使用可能なバージョン

Ninja Forms: 3.0 以上
WordPress: 4.0 以上

サンプルコード

サンプル1: カスタムメッセージの追加

add_action('ninja_forms_display_after_fields', 'add_custom_message');

function add_custom_message($form_data, $form_id) {
    echo '<div class="custom-message">ご質問があればお気軽にお問い合わせください。</div>';
}

このサンプルコードは、フォームの下にカスタムメッセージを追加します。

サンプル2: 計算結果の表示

add_action('ninja_forms_display_after_fields', 'show_calculation_result');

function show_calculation_result($form_data, $form_id) {
    $total = 100; // 例として固定の値を計算
    echo '<div class="calculation-result">合計金額: ' . $total . '円です。</div>';
}

このコードは、一部のフィールドに基づいて計算した合計金額を表示します。

サンプル3: 外部APIデータの表示

add_action('ninja_forms_display_after_fields', 'fetch_external_data');

function fetch_external_data($form_data, $form_id) {
    $response = wp_remote_get('https://api.example.com/data');
    if (is_array($response) && !is_wp_error($response)) {
        $data = json_decode($response['body'], true);
        echo '<div class="external-data">外部データ: ' . esc_html($data['info']) . '</div>';
    }
}

このサンプルは、外部APIからデータを取得し、フォームの下に表示します。

サンプル4: CSSやJavaScriptのエンキュー

add_action('ninja_forms_display_after_fields', 'enqueue_custom_scripts');

function enqueue_custom_scripts($form_data, $form_id) {
    echo '<script>console.log("カスタムスクリプトが実行されています");</script>';
}

このサンプルコードでは、カスタムスクリプトをフォームの下に追加しています。

サンプル5: フィードバックの表示

add_action('ninja_forms_display_after_fields', 'conditional_feedback_display');

function conditional_feedback_display($form_data, $form_id) {
    if ($form_id == 1) { // フォームIDが1の場合の処理
        echo '<div class="feedback">このフォームをご利用いただきありがとうございます。</div>';
    }
}

このコードでは、特定のフォームIDに基づいてフィードバックメッセージを表示します。

この関数のアクションでの使用可能性

アクション	使用例
mu_plugin_loaded
registered_post_type
plugins_loaded
wp_roles_init
setup_theme
after_setup_theme
set_current_user
init
register_sidebar
wp_loaded
send_headers
parse_query
pre_get_posts
wp
template_redirect
get_header
wp_head

この表では、ninja_forms_display_after_fields アクションが他のアクションとどのように関連しているかを示しています。

概要

構文