ContactForm7のデザインCSSがおかしい！自動整形を無効にしてpタグによる謎の空白を削除する

2019年6月6日2019年12月23日ContactForm7カスタマイズ,WordPressプラグインの設定＆カスタマイズ

ContactForm7でお問合せフォームを作ったら、ところどころに変な空白が！？

ということはありませんか？

自分でHTMLやCSSを修正しても、どうしても思い通りにならないデザインは、自動整形のせいかもしれません。

ContactForm7の見た目を狂わせる自動挿入機能とは？謎の空白の原因

WordPressにはエディタで打ち込んだ文を自動的にpタグ(段落)やbrタグ(改行)などのHTMLを出力してページを作ってくれる機能があります。

ContactForm7のフォームを書くフィールドでもその機能は働いています。

<div class="contact-box">
<p class="contact-box-title">ご連絡先</p>
<label>電話番号（ハイフン無し）<span class="must">必須</span>
[tel* your-tel id:your-tel class:input-box]</label>
<label>メールアドレス<span class="must">必須</span>
[email* your-email id:email class:input-box]</label>
<label>メールアドレス（確認用）<span class="must">必須</span>
[email* your-email-2 id:your-email-2 class:input-box]</label>
<p class="explain">確認のため再度ご入力ください。</p>
<label>ウェブサイト<span class="free">自由回答</span>
[url your-website id:your-website class:input-box placeholder "URL"]</label>
</div>

公開されたサイトを見てみると、pタグやbrが自動挿入されて謎の空白ができてしまっています。

要らない自動挿入されたpタグは、空白を作ってしまうだけでなく、意図しない要素なため書き込んだCSSを狂わせてしまうこともあります。

定期的に挿入される空白だけの問題ならばCSSで調整することもできますが、不規則になぜか挿入されるという現象なため、CSSでは対応しきれません。

コピペで使えるコードなどもすべて台無しになってしまいます。

ContactForm7で自動整形を無効にする簡単な方法

自動整形機能を無くせば上記のような現象は起こりません。

ただし、すべての自動整形機能をなくしてしまうと、記事を書く際に段落をつくるためにいちいちpタグを書き込まなければならなくなるなど、支障が出ます。

そのためContactForm7では、ContactForm7でのみこの機能を無効にするための定数が用意されています。

定数指定で動作を制御する|ContactForm7(日本語)

wp-config.phpにContactForm7の定数を書き込む

ContactForm7の定数は、wp-config.phpに記入します。

FTPソフトでサーバーにアクセスし、WordPressのファイルが置いてあるドメインのpublic_htmlを開いたら、wp-config.phpをダウンロードして編集します。

追加で定数を一つ書き込むだけです。

/*Contact Form 7でpタグやbrが自動で挿入される自動整形を無効にする*/
define('WPCF7_AUTOP', false);

このコードをwp-config.phpの最後の行であるrequire_once(ABSPATH . 'wp-settings.php');よりも前に書き込みます。

/*Contact Form 7でpタグやbrが自動で挿入される自動整形を無効にする*/
define('WPCF7_AUTOP', false);

/** Sets up WordPress vars and included files. */
require_once(ABSPATH . 'wp-settings.php');

このようになれば完了です。

変更を保存したら、FTPソフトで元の場所にアップロードして上書きしましょう。

ContactForm7でデザインを自作するなら必ず自動整形を無効に！

単純なデザインでは影響が出ないことも多いですが、複雑なHTMLをContactForm7で書くと必ず自動整形の問題は出てきます。

謎のpタグやbrで頭を悩ませて時間を無駄にする前に、この簡単な作業を行っておきましょう。