Contact Form 7 入力欄の幅を調整 【WordPress】

Contact Form 7は簡単にお問い合わせフォームを設置できる定番のWordPressプラグインです。

非常に便利で使い勝手がいいのですが、デフォルトの設定では入力欄の幅が狭かったり、利用するテーマによっては幅一杯に広がってしまったりして見栄えがイマイチです。

入力欄の幅を調整する方法として、Contact Form 7のタグにサイズを記述する方法と、CSSで制御する方法をご紹介します。

利用するテーマによってはContact Form 7のタグ編集では調整が効かない場合があります。その時はCSSでの制御をお試しください。

Contact Form 7のタグにサイズを記述する

コンタクトフォーム7の編集画面でサイズを記述する方法です。
WordPressの管理画面から お問い合わせ → コンタクトフォーム をクリックします。

作成済みのお問い合わせフォームの 編集 をクリックします。

以下のように、1行の入力欄は size:値
メッセージ本文の textarea は 幅x高さ の書式で指定します。

最後に 保存 をクリックしてフォームを保存し、実際の表示を確かめながら調整してください。

お使いのWordPressテーマのCSSなどで入力フォームの幅が固定されている場合はこの方法では幅を調整することができません。

その場合は新たにCSSを追記して幅や高さを変更することができます。

CSSで入力欄の幅を指定する

CSS（スタイルシート）にContact Form 7の幅を指定して変更する方法です。

WordPress管理画面から 外観 → テーマエディター をクリックします。

スタイルシート（style.css）に以下の内容を記述します。
※子テーマを使っている場合は子テーマのスタイルシートを編集してください。

.wpcf7 input[name="your-name"] { /* 名前入力欄 */
	width: 85%;
}
.wpcf7 input[name="your-email"] { /* メール入力欄 */
	width: 85%;
}
.wpcf7 input[name="your-subject"] { /* タイトル入力欄 */
	width: 85%;
}
.wpcf7 textarea[name="your-message"] { /* 本文入力欄 */
	width: 100%;
}

最後に ファイル更新 をクリックし、スタイルシートを保存してください。

widthの単位を % で指定すると、コンテンツ幅に対する割合になります。実際の画面で確かめながら調整してください。