【Cocoon】faviconを設定する方法
ENOWL_Nao
ENOWL（エノウル）
Contact Form 7のform要素にidやclassを追加する方法
ENOWL_Nao
どうも、こんにちは。
Webデザイナーのなお（@ENOWL_Nao）です。
直近で、Contact Form 7で実装したお問い合わせフォームに郵便番号から住所を自動入力する機能の追加を行いました。
その際にform要素にclassを追加する必要がありました。
簡単に追加することができたので、今回はそのやり方を説明していきたいと思います。
それでは行ってみましょう！
この記事の見出し
form要素にclassを追加する方法
フォームを読み込んでいるショートコードに下記の記述を追加します。
1html_class="追加するclass名"実際に追加すると下記のような記述になります。
1contact-form-7 id="フォームのID" title="フォームのタイトル" html_class="add-class"
「add-class」というクラスを追加することができました。
複数のclassを追加したい場合は？
複数のclassを追加したい場合は、半角スペースを空けて複数記述します。
1html_class="class名1 class名2"分かりづらいと思いますが、「class名1」と「class名2」の間に半角スペースを入れています。
実際に追加すると下記のような記述になります。
今回は「hoge」と「monge」の2つのclassを追加したいと思います。
1contact-form-7 id="フォームのID" title="フォームのタイトル" html_class="hoge monge"
「hoge」と「monge」2つのclassが追加されました。
form要素にidを追加する方法
次にclassではなく、idを追加したいという場合もあると思います。
idを追加する方法のご紹介です。
フォームを読み込んでいるショートコードに下記の記述を追加します。
1html_id="追加するid"実際に追加すると下記のような記述になります。
1contact-form-7 id="フォームのID" title="フォームのタイトル" html_id="add-id"
idを追加することができました。
form要素にidとclassを追加する方法
idとclassを両方追加したい場合は、下記のように記述します。
1contact-form-7 id="フォームのID" title="フォームのタイトル" html_id="hoge" html_class="monge"
id「hoge」とclass「monge」を追加することができました。
余談（idを複数追加してみた）
HTMLでは、1つのタグに複数のidを設定することが禁止されています。
id の値にホワイトスペース文字 (空白やタブなど) を含めてはいけません。ブラウザーはホワイトスペース文字を含む不適合な ID を、ホワイトスペース文字が ID の一部であるかのように扱います。空白区切りで並べた値を受け入れる class 属性とは対照的に、要素は ID の値をひとつだけ持つことができます。
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/id
なので、試しに複数のidを設定してみました。
今回は、「hoge」と「monge」を追加してみました。
1contact-form-7 id="フォームのID" title="フォームのタイトル" html_id="hoge monge"
半角スペースを空け、複数のidを設定しましたが、半角スペースが削除され1つのidとして設定されました。
まとめ
Contact Form 7のform要素にidやclassを追加する方法でした。
すごく簡単にidやclassを追加することができましたね。
form要素にidやclassをつけてJavaScriptで何かを実装することは多いと思います。
1回やってみれば覚えると思いますので、参考になれば幸いです。
ここまで読んでいただきありがとうございました！
個人事業主さまの「Web担当」そのWebの悩み
そのWebの悩み
一人で抱え込んでいませんか？
「ちょっとここを直したい」「そろそろリニューアルしたい」…。
小さな修正から本格的な制作まで、Webに関する「どうしよう」を私が丸ごと受け止めます。難しい専門用語は使いません。
あなたの事業を支えるパートナーとして、まずは気軽にお話ししませんか？
私について
ホームページをご覧いただきありがとうございます！
なおと申します。
現在はフリーランスのWebデザイナーとして活動しています。 WebデザインからコーディングからWordPress実装まで一貫してホームページ制作を行うことができます。
