ContactForm7 横幅 カスタマイズ

この記事は約3分で読めます。

ワードプレスの、「ContactForm7」で、入力欄の横幅を、広げたり、狭くしたりするなど、
カスタマイズしたいことがあるかと思います。CSSのカスタマイズなどの方法を・・・

ContactForm7、デザインがイマイチ

ContactForm7
↑ContactForm7を設置すると、入力欄が、「短い」場合があります。
赤い矢印枠部分の右側まで、入力欄を伸ばしたい(カスタマイズしたい)!

どうすべきか・・・

入力欄の外側のボックスは、既存のデザインテーマのClassを使っています。
(赤矢印部分)
このボックスは全体のバランスで、残したいデザインです・・・。

解決方法1、ContactForm7用のCSSを入れる

既存のテーマに、ContactForm7用のCSSを入れてみます。

ContactForm7

これは、入力欄に対して、「width」横幅を最大にする。
という事です。
これで、横幅いっぱいになるはずである。

しかし、入力欄の横幅が広がりませんでした・・・

解決方法2、元のデザインテーマをチェックする

元々の、デザインテーマの中の「style.css」の中で、「input」のサイズを設定している場合があります。これを変更すると、反映される場合があります。

というような指定を見つけて、「width」を変更してみることです・・・
私のデザインテーマでは、指定されていませんでした・・・

解決方法3、入力欄自体の幅を変更する

フォームメールのHTMLにおいて、一般的な書式は

という感じで記述します。

この「size」と「maxlength」を調整して、結果的に、デザインを変更してみます。

表示に影響するのは、「size」です。
サイズを「120」にしてみます。

ContactForm7

今回、横幅を、外枠とそろえたいので、表示文字数を大きくして、横幅を大きくします。
上記、sizeにより、↑図の赤枠のようにしたいと思います。

このサイズの変更は、これは、ContactForm7の編集画面で行います。

ContactForm7

↑上記の、赤枠部分「120/120」ですが、前者の「120」が「size」の数字。
後者の「120」が、「maxlength」の数字になります。

ContactForm7

↑上記のように

と記述しても同じです。

「メッセージ本文」の「textarea」部分ですが、この指定は、違う方法で指定します。

ContactForm7

↑上記のように「120×10」というように指定します。
「行数x列数」という指定になります。
この設定が、見た目に影響されます。

ContactForm7

↑これで、見た目が、幅いっぱいになりました。

スマホで見た時も、レスポンシブ対応で、きれいに表示されます。

しかしながら、この方法は、見た目優先です。
入力文字数自体が、多くなるので、留意が必要です。

解決方法4、メディアクエリ、ブレイクポイントによる変更

ContactForm7 のCSSを利用して、横幅によって、サイズを指定することもできるかと・・・
これは、「width:100%;」としても、有効にならない場合の代替え手段の一つかと思います。

ContactForm7 横幅、カスタマイズ方法 結論

「width:100%」で、横幅いっぱいに表示されない場合は、ContactForm7の「size」と「maxsize」で調整するのが、簡単で、見た目もきれいかと思います。

ContactForm7 関連記事

WordPress ContactForm7 プルダウンを横並びにする方法

タイトルとURLをコピーしました