WordPressプラグイン「Contact Form 7」の入力欄の幅を変える方法

2019.07.12 2019.05.25

最近、仕事でWordpressのプラグインである「Contact Form 7」をいじることがあった。

その時にちょっと戸惑ったのが、入力欄の幅を変更する方法だ。

Contact Form 7 の問題点
Contact Form 7 のオプションが正常に動かない

Contact Form 7 の問題点

「Contact Form 7」を設定しているときに困ったのが、入力欄の幅の問題だ。

普通に設定すると、入力欄が記事の幅いっぱいになってしまうのだ。

↑何もしないとこんな感じに。

テキストエリアはまあいいとしても、名前欄やメアド欄がこんなに幅広い必要がない。

こんな長い名前の人おらんやろ。

Contact Form 7 のオプションが正常に動かない

Contact Form 7では入力欄の幅を変えることができるオプションがある。

例えば、テキスト項目ならフォームタグの構文内に「size:10」とかいれると、入力フィールドの幅が変更できる。

[text* your-name size:10]

テキストエリアならフォームタグの構文内に「40×10」といれると行数(幅)と列数(高さ)が変更できる。

[textarea* textarea-195 40x10]

テキスト項目 | Contact Form 7 [日本語]

と、Contact Form 7のサイトには書いてあるのだが、構文内にオプション数値をいれても入力欄の幅変わらない。

ここで諦めたり、投げ出したりする人もいるかもしれない。

でも、これは Contact Form 7 の問題ではなく、WordPressのテーマ（CSS）内で幅を決めてしまっているから。

例えば、僕の使っているテーマ「Simplicity」ならスタイルシート（style.css）の1148行目辺りに、こういう箇所がある。

/************************************
** 入力フォーム（Form）
************************************/
input[type="text"],
input[type="url"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
textarea {
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  color: #333;
  /*display: block;*/
  font-size: 16px;
  line-height: 1.42857;
  padding: 6px 12px;
  -webkit-transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  width: 100%;
  box-sizing: border-box;
}

この中の23行目の「width:100%」が悪さをしている。

この「width:100%」せいで、入力欄が記事いっぱいに幅を広がってしまうのだ。

「それならこの記述を消せばいいのか？」と思ったりもするが、どうせなら小テーマに再記述することによって、親テーマの「width:100%」を打ち消してしまおう。それなら何かあってもすぐに直せるし。

やり方は簡単。Simplictyの小テーマのスタイルシート（style.css）に下記のように記述する。

/************************************
** 入力フォーム（Form）
************************************/
input[type="text"],
input[type="url"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
textarea {
  width: auto;
}

autoとはつまり自動、初期値でもある。初期値に戻すということ。これで無理やり記事いっぱい100%幅にされなくなる。