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

2018/6/25 ContactForm7, WordPress

シェアする

こんにちは、イナフクカズヤ(@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を使用しましょう。