【Contact Form 7】formタグにid・class・nameを追加する方法

RELEASE / 2024.2.7 UPDATE / 2024.02.07

Contact Form 7

WordPress

wpcf7_form_class_attr

wpcf7_form_id_attr

wpcf7_form_name_attr

フィルターフック

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

WordPressで簡単にお問い合わせフォームを作成できる人気のプラグイン「Contact Form 7」。
様々なフックが用意されていて実装したいことはどんなことでも実現できる便利なプラグインですね。

「Contact Form 7」で生成されるタグはプラグインが生成するため、formタグは自動で出力されるため、通常の方法では任意のidやclass、nameなどの属性を追加することは出来ません。
しかし、「Contact Form 7」が用意しているフィルターフックを使用することでこれらを追加することが出来ます。
今回の記事では「Contact Form 7」が生成するformタグのid属性、class属性、name属性を追加する方法をご紹介します。

この記事の目次を表示

1 Contact Form 7が生成するformタグにid・class・nameを追加する方法
2 まとめ

Contact Form 7が生成するformタグにid・class・nameを追加する方法

「Contact Form 7」には各種属性を追加するためのフィルターフックが用意されています。
以下のフィルターフックを使用することで各属性を追加することが出来ます。

id属性・・・wpcf7_form_id_attr
class属性・・・wpcf7_form_class_attr
name属性・・・wpcf7_form_name_attr

それでは実際のコードをもとにひとつずつ見ていきましょう。

id属性を追加する方法

まずはid属性を追加するwpcf7_form_id_attrから。
このフィルターフックを以下のようにテーマのfunctions.phpに記述することでid属性を追加することが出来ます。

具体的なコードは以下の通りです。

function my_wpcf7_form_id_attr() {
    $my_id = "xxxxx";
    return $my_id;
}
add_filter('wpcf7_form_id_attr', 'my_wpcf7_form_id_attr', 10, 2);

以下の部分にid名を記述します。

$my_id = "xxxxx";

上のソースをコピペするだけで追加出来るのでid名の部分だけ書き換えてご使用ください。

class属性を追加する方法

さて、続いてはclass属性を追加する方法です。
class属性を追加する場合はwpcf7_form_class_attrというフィルターフックをテーマのfunctions.phpに記述します。

具体的なコードは以下の通りです。

function my_wpcf7_form_class_attr($class) {
    $my_class = "xxxxx " . $class;
    return $my_class;
}
add_filter('wpcf7_form_class_attr','my_wpcf7_form_class_attr', 10, 2);

class属性の場合もid属性同様、以下の部分にclass名を記述します。

$my_class = "xxxxx " . $class;

ただ、class属性の場合はid属性と違い、注意点がひとつあります。

それは「Contact Form 7」が生成するformタグは最初からwpcf7-form init、2つのclass名が指定されているのでそれも合わせて指定する必要があります。
デフォルトのclass名は$classという引数で取得することが出来るので上のように任意のclass名とくっつけてあげます。

その際、任意のclass名のあとは半角空けるようにします。そうしないとデフォルトのclass名と繋がってしまい、全く別のclass名として出力されてしまいます。

注意点をいろいろ書きましたが、上のソースをコピペするだけで追加出来るのでclass名の部分だけ書き換えてご使用ください。

name属性を追加する方法

最後にname属性を追加する方法です。name属性の場合はid属性とほとんど同じで、フィルターフック名が異なるだけです。
name属性の場合はwpcf7_form_name_attrというフィルターフックをテーマのfunctions.phpに記述します。

具体的なコードは以下の通りです。

function my_wpcf7_form_name_attr() {
    $my_name = "xxxxx";
    return $my_name;
}
add_filter('wpcf7_form_name_attr', 'my_wpcf7_form_name_attr', 10, 2);

以下の部分にname名を記述します。