Contact Form 7を使ってお問い合わせフォームを作成してみたけど、
「なぜか横幅が狭い」
「デザインが崩れる」
などのトラブルに悩んでいませんか？
特にAFFINGER環境では、フォームのレイアウトがデフォルトのままだとうまく表示されないことがよくあります。
そこで今回は、AFFINGERでContact Form 7が崩れる原因と、その対処法をわかりやすく解説していきます。
AFFINGERでContact Form 7が崩れる理由
Contact Form 7はシンプルで使いやすいフォームプラグインなんですが、AFFINGERの環境で使うと、見た目がちょっと崩れてしまうことがあります。
たとえばこんな感じです。
- フォームの横幅がやたら狭い
- 項目がガタついてて揃っていない
- スマホで見ると、入力欄が折り重なって見にくい
- 送信ボタンの位置がズレてる or サイズが小さい
正直、初めて見たとき「は？なんでこんなことになるの？」と思いました。
原因としては、AFFINGER側のスタイル（CSS）がフォームに影響してしまっていること。
AFFINGERは見出しやボタンなどのデザインが豊富ですが、そのぶんフォームの見た目にも干渉してしまうことがあるんですね。
このままだと、「デザインに気を使ってないサイト」に見えてしまいますし、せっかくのフォームがユーザーにとって使いづらい状態になってしまいます。
ということで、AFFINGERでフォームが崩れないようにするための具体的な対策を紹介していきます。
クラス指定で横幅100％にする方法
AFFINGER環境でContact Form 7を使うと、「入力欄がなぜか50％くらいの幅になってしまう」てことがあります。
これ、特にスマホで見るとかなり気になります。。。
入力欄が狭すぎて文字が見切れてしまったり、「なんか使いにくそう…」と思われる可能性もあります。
そこで対策として使えるのが、クラス指定での横幅調整です。
やり方はとてもシンプルで、各入力フィールドに「class:full-width」を付けるだけ。
たとえば、お名前の欄を設定するなら、以下のような感じです
[text* your-name class:full-width]メールアドレスや電話番号、テキストエリアなども、以下のように設定すればOKです。
[email* your-email class:full-width]
[tel your-tel class:full-width]
[textarea your-message class:full-width]この「full-width」というクラス名は、AFFINGER側でちゃんと幅100％に広がるようにスタイルが用意されているので、余計なCSSを追加しなくても、見た目がしっかり整います。
CSSを自分でいじらなくても調整できる、というのがポイントです。
CSSで全体を整える方法（中級者向け）
クラス指定で横幅は整ったけど、「まだなんかゴチャついて見えるな…」と感じる方もいるかもしれません。
特に中級者以上の方は、フォーム全体の余白やフォント、枠線のバランスまで気になるところです。
そんなときは、追加CSSで細かく調整するのがおすすめ！
たとえば以下のようなCSSを、「カスタマイズ」→「追加CSS」に貼り付けるだけで、見た目がかなり整います。
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="date"],
.contact-form select,
.contact-form textarea {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}これを入れておくと、
- すべての入力欄がキレイに100％表示される
- パディング（内側の余白）で文字が見やすくなる
- 角がちょっと丸くなって柔らかい印象になる
- スマホでも違和感なく入力しやすい
といった効果があります。
ちなみにこのコードは、Contact Form 7のformタグに付いているclass="contact-form"を前提にしています。
AFFINGERの標準スタイルとうまくなじむように書いてあるので、「どのテーマでも使える万能CSS」というより、AFFINGERに最適化した設計になっています。
見た目を整えるカスタマイズ案
ここからさらに
「ちょっとおしゃれにしたい」
「やわらかい印象にしたい」
という方向けに、いくつか簡単にできるカスタマイズを紹介しておきます。
ラジオボタンやチェックボックスの行間を広げる
デフォルトのままだと詰まって見える場合は、ちょっと余白を入れるだけで読みやすくなります。
.wpcf7-list-item {
margin-bottom: 10px;
}テキストエリアをもう少し大きくしたい
長文入力用のテキストエリアが小さいと使いにくいですよね。
.contact-form textarea {
height: 150px;
}送信ボタンを目立たせたい
AFFINGERだと送信ボタンがちょっと地味なので、次のようなカスタマイズもアリです。
.contact-form input[type="submit"] {
background-color: #f57c00;
color: #fff;
padding: 12px 24px;
border: none;
border-radius: 30px;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}
.contact-form input[type="submit"]:hover {
background-color: #ef6c00;
}ボタンの色や丸みは好みで調整してもOKです。
このあたりのカスタマイズはガッツリやる人向けなので、初心者の方は「とりあえずclass指定＋CSSで整える」までで十分。「もうちょっとこだわりたい！」というときに試してみてください。
まとめ
Contact Form 7はとても便利なフォームプラグインですが、AFFINGERと組み合わせる場合はちょっとした工夫が必要になります。
特に「横幅の崩れ」や「デザインの統一感」はそのままだと気になるポイント。
今回紹介したクラス指定やCSSの調整をしておけば、AFFINGER環境でも見た目をきれいに整えられます。
これからフォームを設置する方は、ぜひ参考にしてみてください。
