「Contact Form 7」の入力ボックスサイズを変更する

Contact Form 7の入力ボックスはデフォルトでは全て幅が同じサイズに設定されています。けれども場合によっては、「この項目の幅は長くしたい」等の要望がでてくるかと思います。今回は入力ボックスの幅の変更方法についてご紹介いたします。ここではテキストボックスを例にご説明いたしますので、ご参照下さい。

一律で幅サイズを変更したい場合

これはテキストボックスを選択した場合、全てのテキストボックスを対象にサイズを変更します。特定の入力フィールドのサイズを変える必要はないけれど、デフォルトのサイズに不満がある場合はこちらをご覧ください。

input[type="text"]
{
background-color: #ffffff;
color: #000000;
width: 30%;
}

上のコードは、background-color(フィールド内の色)は白、color(文字色)は黒、width(ボックス幅)は表示画面に対して30%と指示しています。色指定は#fff、#000と4文字で指定する場合がありますが、IEで表示した場合色が反映されない場合がありますので、7文字表記で記述した方が無難です。

テキストボックスではなくEmailの入力フィールドを変更したい場合は一番上のinput[type=”text”]をinput[type=”email”]に変更すればOKです。ボックス内の色、文字色、ボックス幅はご希望に合わせて変更してください。

ダッシュボードの「外観」→「カスタマイズ」をクリックし、メニュー「追加CSS」を開きます。

上記作成したコードをこの追加CSSにコピー&ペーストし、「保存して公開」をクリックすればサイズ変更は完了です。

特定の項目の入力ボックス幅を変更する

例えば、「会社名」や「氏名」の入力ボックスの幅はそのままでいいけれど、「住所」の入力ボックスの幅はもっと大きくしたい等、特定の項目の入力フィールドだけ大きくしたい場合があります。その場合、編集したコードに名前を付けることで対応することができます。

#address
{
background-color: #ffffff;
color: #000000;
width: 80%;
}

#addressは以下のコードにつけたIDです。addressは任意の名前を付けることができます。このコードを同様に、ダッシュボードの「外観」→「カスタマイズ」をクリックし、メニュー「追加CSS」を開きコピー&ペーストします。

上記のカスタマイズしたフィールドを使用したい場合は、コンタクトフォームで通常使用するショートコード[text text-xxx]にid(指定した名前)を加えて[text text-xxx id:address]と記述すればOKです。

※Contact Form 7は「その他の設定」でカスタマイズ用のコードを入力できるようになっています。本来はこちらにコピー&ペーストすべきなのでしょうが、私自身こちらを使用せず「追加CSS」で対応してきたため、検証実績のある「追加CSS」でご紹介させていただきました。

補足

テーマによってはなぜか「電話番号」のフィールドだけ細くなったり、ボックスの線が太くなったりする現象が現れることがあります。その場合も上記「一律設定」方法でinput[type=”tel”]を他の入力フィールドと同じ設定にすることで問題は解消することができます。

 

この記事が役に立ったらシェア!