【ContactForm7】自動的に付与されるpタグとbrタグを削除する方法

株式会社LastCardの稲福一也(イナフクカズヤ)です。
今回の記事はお問い合わせフォームで利用されているContactForm7の記事です。

自動的に付与されるpタグとbrタグ

ContactForm7のお問い合わせフォームですが、実装するときにpタグやbrタグが自動的に付与されてレイアウトが崩れてしまうケースが多々あります。

今回はテストでinputタグを実装してみました。
お問い合わせフォームの設定画面は下記のように設定しました。

このようにpタグとbrタグの記述はありません。
ではフロント画面を見てみましょう。

このように改行が入っています。では、ディベロッパーツールでソースコードを確認してみます。

<div class="contact_p">
	<p><label>お問い合わせにpタグが入るテスト<br>
  お問い合わせにpタグが入るテスト<br>
  お問い合わせにpタグが入るテスト</label><br>
  <span class="wpcf7-form-control-wrap" data-name="text-218"><input size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" value="" type="text" name="text-218"></span>
	</p>
</div>

しっかり、pタグとbrタグが入っているのがわかります。シンプルなお問い合わせフォームの場合、問題ないかもしれませんが、レイアウトやデザインにこだわっている場合、この仕様が邪魔をすることは多々あります。

pタグとbrタグを削除する方法

では、pタグとbrタグの削除方法を説明します。テーマの中にあるfuntions.phpに下記を記述するだけで消えます。

add_filter('wpcf7_autop_or_not', '__return_false');

では、フロント画面とソースコードを確認してみましょう。

<div class="contact_p">
  <label>お問い合わせにpタグが入るテスト
    お問い合わせにpタグが入るテスト
    お問い合わせにpタグが入るテスト</label>
  <span class="wpcf7-form-control-wrap" data-name="text-218"><input size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" value="" type="text" name="text-218"></span>
</div>

このようになりました。

最後に

昔はwp-config.phpに書く方法やjsで削除するなど他にも方法があると思います。
が、わざわざそのようなことをしなくても、add_filterを使った方が自然だと思います。

参考になれば幸いです。