「Contact Form 7」にクラス名をつける方法
2017.11.05
「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/