CF7を利用した問い合わせフォーム送信時にコンテンツを消す方法

はじめに

先日WordPressでサイトを作成する業務があり、そのときに、Contact Form 7で作成した問い合わせフォームの送信後に、問い合わせフォームを消す方法を調べたのでその2つを紹介します。

Before

問い合わせフォームが残ったまま、下に小さく送信メッセージが表示される

After

問い合わせフォームが消え、送信メッセージが目立つ

Contact Form 7とは

Contact Form 7は、お問い合わせフォームなどのフォームの作成や管理を簡単に行うことができる、WordPressの拡張プラグインです。

非常に多く利用されており、Contact Form 7のための拡張プラグイン(Flamingoなど)も充実しています。

1. form.sent p{display:none}を追加CSSに記入する

お問い合わせフォームが送信されると、classにsentが追加されることを利用して送信ボタンまで含めた問い合わせフォーム全体を非表示にできます。
送信ボタンや入力欄もp要素を親要素に持っているため、form.sent pを指定することで全て消すことができます。

自分でフォーム内にp要素以外を追加していてそれも消したい場合は、テーマの追加CSSに並べて記入します。

/*<div class="hoge">も消したい場合*/
form.sent p,
form.sent div.hoge {
    display: none;
}

2. フォーム内にJavaScriptを記入する

CF7のお問い合わせフォームではJavaScriptの記述が可能なため、こちらの方法でもコンテンツを消すことができます。

記述が少し多くなりますが、こちらの方法ですと消す範囲を細かく指定することも可能です。

<!-- 送信後にfugafugaだけ残したい場合 -->
<div class="disappear">
    hogehoge
</div>
fugafuga
<div class="disappear">
    hogihogi
</div>
<!-- 送信ボタンも囲う -->
<div class="disappear">
    [submit "送信"]
</div>
<script>
    document.addEventListener('wpcf7mailsent', () => {
        document.querySelectorAll(".disappear").forEach((e) => { e.style.display = "none" })
    }, false);
</script>

今回はメール送信時のwpcf7mailentを指定しましたが、その他のDOMイベントについてはこちらに載っています。(https://contactform7.com/ja/dom-events/)