Contact Form 7 プラグインで作った「お問い合わせ」の見た目を CSS で直しました。

Contact Form 7 は CSS で見た目を直すのが標準

「お問い合わせ」フォーム等の入力用フォームを簡単に作る事の出来るプラグインが Contact Form 7 です。

多言語用 プラグインの Bogo も開発されている方です。

日本では「お問い合わせ」フォーム作成のデファクトスタンダードと言えるプラグインでしょう。また reCAPTCHA を使用するプラグインとして使っている方も多いでしょう。

このプラグインの見た目は、作者の方自らが「 CSS で直してください」と言われています。

Contact Form 7 はスタイル指定のためのカスタマイズ機能を提供しません。CSS のスタイルシートを編集するのがコンタクトフォームにスタイルを適用する最善の方法です。

との事ですので、CSS で見た目を直しました。

変更後の CSS

標準の入力欄は文字サイズに対する padding が無く窮屈に見えます。少し余裕を持たせた丸みを持った見た目に直しました。

子テーマの style.css に記載する内容です。

/* 20250224 Contact Form 7 CSS customize */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	font-size: var(--wp--preset--font-size--large);
	width: 80%;
	border-radius: 10px;
	padding: 10px 10px;
	border: 1px solid #516028;
	margin-top: 5px;
	margin-bottom: 20px;
	background-color: #ffffff; /* 白 */
	resize:none;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus {
	border:2px  solid #516028;
}
.wpcf7 input[type="text"]::placeholder,
.wpcf7 input[type="email"]::placeholder,
.wpcf7 textarea::placeholder {
	color: #c3c3c3;  /* light gray */
}
.wpcf7 input[type="submit"] {
	font-size: var(--wp--preset--font-size--large);
	border-radius: 10px;
	padding: 10px 20px;
	background-color: #516028;
	color: white;
	cursor: pointer;
	border: 1px solid #516028;
}
.wpcf7 input[type="submit"]:hover {
	color: #516028;
	background-color: #dae7bd;
}
.wpcf7 span.wpcf7-not-valid-tip {
    width: 80%;
}
.wpcf7 div.wpcf7-response-output {
    width: 80%;
}

簡単に内容を説明します。

• 2～14行目 : 入力部分の見た目を修正
• 15～19行目 : 選択時に枠線を太くする
• 20～24行目 : 入力前に表示する文字列の色を薄いグレーに
• 25～37行目 : 「送信」ボタンの見た目変更、hover で反転
• 38～43行目 : エラーメッセージ用

これで見た目が上の画像の様になります。

プレースホルダーテキストの追加

Contact Form 7 の設定で、各フォームにプレースホルダーを設定できます。プレースホルダーとは文字を入力するまでの間に表示させる仮の文字列の事です。

<label> 氏名
    [text* your-name autocomplete:name placeholder "お名前"] </label>

<label> メールアドレス
    [email* your-email autocomplete:email placeholder "E-mail アドレス"] </label>

<label> 題名
    [text* your-subject placeholder "題名"] </label>

<label> メッセージ本文 (任意)
    [textarea your-message placeholder "本文はこちらにお書き下さい"] </label>

[submit "送信"]

placeholder を設定すると、その後の文字列がプレースホルダーテキストになります。薄いグレーにして目立たないようにしています。

多言語ページ用の修正

Contact Form 7 プラグインの編集の中に「メッセージ」という、様々な状況で表示されるメッセージ一覧があります。

このサイトは多言語化しており、各言語用に「お問い合わせ」フォームを作っています。そのメッセージも全て各言語に直しました。これでエラー含めて全て各言語で表示されます。

Contact Form 7 の注記

Contact Form 7 プラグインの設定ページの上部にメッセージが表示されています。

reCAPTCHA ユーザーの方はご注意ください: Google はすべての reCAPTCHA ユーザーを reCAPTCHA Enterprise に移行させる計画を表明しています。

次期バージョンでは reCAPTCHA を Google Cloud 版に対応する事が書かれています。また、reCAPTCHA 以外の選択肢として、Cloudflare の Turnstile に対応する事がアナウンスされています。

上記の図は既に Turnstile を適用した状態です。こちらについては別途記事にします。

結び

Contact Form 7 で作成した「お問い合わせ」の見た目を CSS で直しました。文字と枠の間に余裕を持たせて、角に丸みを付けました。

同じ方法でコメント投稿欄も直しました。

スマホではフッタメニューから「お問い合わせ」フォームに行くことができます。お問い合わせはこのフォームからお願いします。