WordPressのフォームプラグイン「Contact Form 7」は自動的にPタグやBRタグが自動挿入される機能があるためレイアウトが崩れてしまう場合があります。
レイアウトが崩れた表示
画像
自動成型機能により挿入されたBRタグ、Pタグによりチェックボックス横のラベルが改行されてしまっています。
ソースコード
<div class="check">
<input type="checkbox" id="check" name="check_policy"><br>
<label for="check">個人情報保護法について同意する。</label>
</div>
<p><input type="submit" value="送信" class="wpcf7-form-control wpcf7-submit"><span class="ajax-loader"></span></p>意図した表示
画像
ソースコード
<div class="check">
<input type="checkbox" id="check" name="check_policy">
<label for="check">個人情報保護法について同意する。</label>
</div>
<input type="submit" value="送信" class="wpcf7-form-control wpcf7-submit">
<span class="ajax-loader"></span>自動成型機能を無効にする
wp-config.php に以下の設定を追加することで自動成型機能を無効にすることが出来、”意図した表示” のように改行されず正常に表示されるようになります。
define( 'WPCF7_AUTOP', false );動作環境情報
エックスサーバー（x10） PHP 7.4.13 MySQL 5.7 WordPress 5.7.2 Contact Form 7 5.4.1
コメント