【Contact Form 7 】フォームが入力できない問題の解決方法

先日、WordPressでContact Form 7(CF7)を使っていて、「フォームが入力できない！」という問題に遭遇しました。

その際の解決方法のメモ。

問題の原因

既存サイトのカスタマイズのご依頼で、WordPress内に新規ページを制作。
その中にContact Form 7のフォームを設置したのですが、クリックしても、カーソルが入力欄に入らない・・・という問題に遭遇しました。

このような問題で考えられる主な原因は以下の3つです。

１．要素の重なり順(z-index)の問題

他の要素がフォームの上に重なっていて、クリックイベントをブロックしている状態。

２．pointer-eventsの設定

親要素にpointer-events: noneが設定されていて、子要素のクリックイベントが無効化されている。

３．WordPressブロックエディタの制約

.is-layout-constrainedなどのクラスが付与され、レイアウト制約が影響している。

今回の解決方法

１．問題のあるページのみに適用

全ページに適用すると、他のページのボタンやリンクが押せなくなってしまうので、該当のページの「カスタムCSS」など、特定のページだけにCSSを適用します。

WordPressの管理画面で

固定ページ > 該当ページを編集
「カスタムCSS」 に以下を追加

２．修正CSS

/* ページ全体の要素を無効化 */
main,
main > *,
article,
article > *,
.entry-body,
.entry-body > *,
.content,
.post-content,
.wp-block-cover,
.wp-block-cover *,
.wp-block-group,
.wp-block-columns {
    pointer-events: none !important;
}

/* フォーム関連のみ有効化 */
.wpcf7,
.wpcf7 *,
form,
form *,
input,
textarea,
select,
button,
label,
a {
    pointer-events: auto !important;
}

/* フォームを最前面に */
.wpcf7 {
    position: relative !important;
    z-index: 999999 !important;
}

CSSメモ：

フォーム以外のすべての要素のクリックイベントを無効化
フォーム関連要素だけクリックイベントを有効化
z-indexでフォームを最前面に配置

まとめ

今回のContact Form 7のフォームが入力できない問題は、要素の重なりやクリックイベントの制御が原因でした。

今回のポイント

ページ固有のカスタムCSSを使う(全体に適用しない)
pointer-eventsでクリックイベントを制御
z-indexで要素の重なり順を調整

Contact Form 7のデザインカスタマイズはこちらから。