プラグインWPFormsのwpforms_frontend_form_attsフィルタの使用方法・解説

概要

wpforms_frontend_form_atts フィルタは、WPForms プラグインにおけるフロントエンドフォームの属性をカスタマイズするために使用されます。このフィルタを利用することで、フォームに対して追加の HTML 属性を追加したり、既存の属性を変更することが可能です。以下のような機能を実装する際に特によく使われます。

1. フォームのカスタムクラスの追加
2. インラインのスタイルの追加
3. データ属性の追加
4. フォームのバリデーションに関する属性の設定
5. マーケティング用のトラッキングコードの追加
6. UI フレームワークに合わせた属性の変更

構文

add_filter('wpforms_frontend_form_atts', 'your_custom_function', 10, 2);

パラメータ

• array $atts: フォームの HTML 属性の連想配列。
• WPForms_Form $form: 現在の WPForms フォームオブジェクト。

戻り値

• 修正されたフォームの属性の連想配列。

使用可能なプラグインとバージョン

• WPForms バージョン: 1.5.0 以上
• WordPress バージョン: 4.9 以上

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

アクション	使用例
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

サンプルコード

サンプル 1: カスタムクラスを追加する

add_filter('wpforms_frontend_form_atts', 'add_custom_class_to_form', 10, 2);
function add_custom_class_to_form($atts, $form) {
    $atts['class'] .= ' my-custom-class';
    return $atts;
}

このサンプルコードは、WPForms フォームに「my-custom-class」というクラスを追加します。

引用元: https://wpforms.com/docs/

サンプル 2: インラインスタイルを追加する

add_filter('wpforms_frontend_form_atts', 'add_inline_style_to_form', 10, 2);
function add_inline_style_to_form($atts, $form) {
    $atts['style'] = 'border: 1px solid red;';
    return $atts;
}

このサンプルコードは、WPForms フォームに赤い枠線のインラインスタイルを追加します。

引用元: https://wpforms.com/docs/

サンプル 3: データ属性を追加する

add_filter('wpforms_frontend_form_atts', 'add_data_attributes_to_form', 10, 2);
function add_data_attributes_to_form($atts, $form) {
    $atts['data-form-id'] = $form->get('id');
    return $atts;
}

このサンプルでは、フォームに「data-form-id」属性を設定し、その値をフォーム ID にしています。

引用元: https://wpforms.com/docs/

サンプル 4: バリデーション属性を追加する

add_filter('wpforms_frontend_form_atts', 'add_validation_attributes_to_form', 10, 2);
function add_validation_attributes_to_form($atts, $form) {
    $atts['novalidate'] = 'novalidate';
    return $atts;
}

このサンプルでは、HTML5 のバリデーションを無効にするための「novalidate」属性を追加します。

引用元: https://wpforms.com/docs/

サンプル 5: トラッキングコードを追加する

add_filter('wpforms_frontend_form_atts', 'add_tracking_code_to_form', 10, 2);
function add_tracking_code_to_form($atts, $form) {
    $atts['data-tracking'] = 'my-tracking-code';
    return $atts;
}

このサンプルコードにより、トラッキング用のデータ属性をフォームに追加します。

引用元: https://wpforms.com/docs/