ホームページ制作 東京 神奈川 WEBデザイナー - W-LOG

ホーム > ブログ > 「Contact Form 7」にクラス名をつける方法

「Contact Form 7」にクラス名をつける方法

2017.11.05

「Contact Form 7」にクラス名をつける方法

「Contact Form 7」は管理画面からフォームがかんたんに作れてしまうプラグインです。
ただ、慣れてくると見栄えを整えたくなることがあるかもしれません。

基本的にはフォームの設定画面でHTMLを書くことができますが、
テキストフィールドなどの各項目にクラスをつけて、見栄えなどを個別に制御する方法をご紹介します。

クラス名の書き方

まず「Contact Form 7」の各フォームの設定画面を開きます。
ここで必要な項目を準備します。

例えば名前を入力してもらう必須項目だと、以下のとおりです。

[text* your-name]

これにクラス名(例:small)をつけたい場合は、以下のように記述します。

[text* your-name class:small]

class: をつけてクラス名を記載するだけでOKです。

クラス名が複数ある場合

ちなみに複数のクラス名(例:small、input30)をつけたい場合は、以下のように書きます。

[text* your-name class:small class:input30]

他にもidやsizeなども、コロン(:)で区切ることで設定が可能です。

より詳しい情報は「Contact Form 7」の公式サイトで確認することができます。
https://contactform7.com/ja/