はじめに
WordPressでお問い合わせフォームを作成する際、最も人気のあるプラグインの一つが Contact Form 7 です。導入の手軽さや拡張性の高さから多くの現場で使われていますが、実務でよく遭遇する問題のひとつが、勝手に<p>タグや<br>タグが挿入されてしまう現象です。
これにより、以下のような悩みが発生します。
- 余計な余白ができてしまう
- レイアウトが崩れてしまう
- CSSで思ったようにスタイリングできない
本記事では、Contact Form 7で自動挿入されるpタグやbrタグを削除する2つの方法を、コード例とともにわかりやすく解説します。
フロントエンドを学習している方はもちろん、実際にWordPress案件で構築を行っている方にも役立つ内容になっています。
なぜpタグやbrタグが自動で挿入されるのか？
Contact Form 7は、フォームの可読性を高めるために、内部的にwpautopというWordPressの関数を利用してHTMLを整形しています。この仕様により、フォームタグの出力に対して自動的に段落（<p>）や改行（<br>）が追加されます。
例：
<p><label>お名前<br />
<input type="text" name="your-name" /></label></p>この仕様自体は便利ですが、デザインを細かく調整したい場合や、CSSグリッド・Flexboxでレイアウトを組んでいる場合には、余計なタグが障害になってしまいます。
方法1: フィルターフックを使って全体的に無効化する
まず紹介するのは、テーマ全体で自動挿入を無効化する方法です。
WordPressテーマのfunctions.phpに以下を追加します。
// Contact Form 7 の自動pタグ・brタグを無効化
add_filter('wpcf7_autop_or_not', '__return_false');解説
- wpcf7_autop_or_not フィルターは、Contact Form 7の自動整形を制御する専用フック。
- __return_false を指定することで「自動整形しない（falseを返す）」という挙動になります。
- 全てのフォームに適用されるため、複数のフォームを持つサイトでも一括で制御可能。
メリット
- 全フォームに一括適用できるため、サイト全体の整合性がとれる
- 実務で「不要な改行を全部なくしたい」というケースに最適
デメリット
- 特定のフォームだけ自動整形を残したい場合には不向き
方法2: ショートコード属性で個別に制御する
次に紹介するのは、特定のフォームだけpタグ/brタグの自動挿入を無効化する方法です。
通常のフォーム呼び出しは以下のようになります。
[contact-form-7 id="123" title="お問い合わせフォーム"]
ここに do_not_autop=”true” を追加します。
[contact-form-7 id="123" title="お問い合わせフォーム" do_not_autop="true"]解説
- do_not_autop=”true” を付与すると、そのフォームだけ自動整形が無効化されます。
- サイト内に複数フォームがある場合、個別に制御できるのが大きな特徴。
メリット
- 必要なフォームだけ制御できるため柔軟性が高い
- コード編集（functions.php）不要なので初心者でも扱いやすい
デメリット
- 複数フォームを扱う場合、毎回オプションを追加する手間がある
実務ではどちらを選ぶべきか？
- 全サイトで統一して無効化したい場合 → 方法1（フィルターフック）
- フォームごとに制御したい場合 → 方法2（ショートコード属性）
特に実務では、基本は方法1で全体制御 → 特定フォームだけ方法2で調整という使い分けがおすすめです。
応用Tips: デザイン調整と併用する
pタグやbrタグを削除した後は、CSSやHTML構造を自分でしっかり組み立てる必要があります。
例：Flexboxを使った整列
.form-row {
display: flex;
gap: 20px;
}
.form-row label {
flex: 1;
}このように、意図的にレイアウトを制御することで、無駄な余白を排除しつつ、デザイン性の高いフォームを構築できます。
まとめ
Contact Form 7で勝手に挿入されるpタグ・brタグを削除する方法は大きく2つあります。
- フィルターフックを使って全体的に無効化
add_filter('wpcf7_autop_or_not', '__return_false');
ショートコード属性で個別に制御
[contact-form-7 id="123" do_not_autop="true"]実務での推奨は「方法1で全体無効化＋必要に応じて方法2を併用」。
これでフォームの余計な余白や崩れを防ぎ、思い通りのデザインを実現できるようになります。