ContactForm7のForm要素にidとclass属性を追加する方法

シェアする

こんにちは、イナフクカズヤ(@Inafuku_Kazuya)です。

WordPressのContactForm7の10記事目です。

今回の記事は「Contact Form 7」のform要素にidやclassをつける方法です。

form要素にidやclassをつける方法

Contact Form7のデザインを用途ごとに変更したい。もしくはjsで操作したいという場合が出てくると思います。

そんな時にidやclassをつけれると便利です。

idやclassを実装する方法がないか?と公式サイトを確認したらありましたw

contact-form-7 のショートコードに html_id と html_class の属性を追加することで form に任意の id と class を追加できます。

では、実際に試してみましょう。

    お名前 (必須)

    添付ファイル

    メールアドレス (必須)

    題名

    希望席

    テーブル席カウンター席個室

    このお店はどこで知りましたか?

    ネットチラシTVCMその他

    その他

    メッセージ本文

    このコードを

      お名前 (必須)

      添付ファイル

      メールアドレス (必須)

      題名

      希望席

      テーブル席カウンター席個室

      このお店はどこで知りましたか?

      ネットチラシTVCMその他

      その他

      メッセージ本文

      上記のようにショートコードにyoyaku123というidとclassをつけてみます。

      中のソースコードを確認するとyoyaku123がidとclass、両方とも追加されているのがわかります。

      さいごに

      ContactForm7にidとclassを実装したい場合はhtml_idとhtml_classを使用しましょう。