Contact Form 7でテキストフィールドなどの長さを変更する方法（STORKテーマ）

WordPressのメールフォームプラグイン「Contact Form 7」で、テキストフィールドやメールアドレス、テキストエリアなどのフォームの長さを変更する方法のご紹介です。

「size:値」でサイズを指定してフォームの長さを変更する

Contact Form 7でテキストフィールドなどの長さを変更したい場合、管理画面のお問い合わせ編集画面からフォームタグにsize:80（テキストエリアの場合80xなど）のようにサイズ指定するとOKです。

すると、こんな感じで各フィールドの長さが変わります。

以下、公式サイトからの情報を引用しますが、各フィールドで指定するサイズオプションと使用例は、こんな感じになっています。

テキスト項目

CSSでフォームの長さを変更する

基本的には、上のようなフォームタグにサイズを指定する方法で長さを変更できるんだけど、実際のところ、[szie:値]のサイズオプションが効かない（フォームの長さが変わってくれない）ことが多いです。

その理由は、WordPressのテーマによっては、テキストフィールドなどの幅値が、あらかじめCSSで指定されていることが多いからです。

Twenty ****系のテーマは、だいたいフォームの幅は固定されているっぽいですし、STORKテーマは、input[type=”text”]やtextareaの幅が固定されてるので、上の[size:]の指定だと幅を変更することができないんです。

・・・

そこで、例えばSTORKのテーマを使っているブログで、フォームの長さを変更したいときは、管理画面の「外観」>「カスタマイズ」から、以下のようなCSSを追加する必要があります。

もともとこんな感じの見え方だったフォームでしたが、

各フィールドの長さを変更することができました。

特定のテキストフィールドの長さを変更する

もちろん、複数あるテキストフィールドの中で特定のフィールドだけ長さを変えることもできます。

この場合は、フォームタグの名前の部分（例：[text* your-name]だったら、your-nameが名前に当たる）をCSSで指定すればOK。

こんな感じで、名前フィールドの長さだけを変更することができました。

幅の値については、ご利用のテーマに合わせて調整してみてくださいね★

スポンサードリンク

ブログを始めるならWordPressテーマSTORKがオススメ

理由は以下の記事でまとめています。

【STORK】有料テーマ購入を迷う人にストークをオススメする7つの理由2021年版

2019年6月1日

綺麗なデザインが最初から用意されているので、「ブログを書きたい」と思った時からすぐに始めることができます。しかも、執筆に便利なツールも一通りそろっているので、「書くことだけ」に集中できるという、ブロガーにとってはとても魅力的なテーマです。

是非STORKを試してみてくださいね★

関連記事