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

Contact Form 7 WordPressプラグイン

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

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

スポンサーリンク

Contact Form 7 の問題点

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

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

Contact Form 7 入力欄 記事幅いっぱいに

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

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

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

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

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

ontact Form 7 オプション

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

[text* your-name size:10]

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

[textarea* textarea-195 40x10]
テキスト項目
テキスト入力項目はコンタクトフォームの最も基本的な要素です。もうご存じと思いますが、HTML はテキスト入力項…

と、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%幅にされなくなる。

Contact Form 入力欄幅 調整可能に

これで適正な表示がされるようになった。上記の画像はオプション数値の設定を特に施してないので、これが初期値での幅ということである。

上の画像から判断するに、 テキスト項目の初期値はsize:40、テキストエリアの初期値は40×10とわかる。

この状態にきて、オプション数値を記述すると、ちゃんと表示されるようになる。こんな感じで↓

Contact Form 入力幅 変更

コメント

トップへ戻る
タイトルとURLをコピーしました