はじめに
WordPressでお問い合わせフォームを設置すると便利ですが、問い合わせ送信後のユーザー体験があまり良くないことがあります。「送信完了メッセージが小さくて見にくい」「フォームが送信後も表示されたまま」「送信後に完了メッセージが画面外にある」といった問題に直面したことはありませんか？
今回はContact Form 7を使ったフォームで、送信後の見栄えと使い勝手を改善するシンプルなカスタマイズを紹介します。わずか数行のコードで、ユーザー体験を大きく向上させることができました。
改善したかった3つの問題点
WordPressのContact Form 7を使っていて、次のような不便さを感じていました：
- 送信完了メッセージが小さく目立たない
- フォームを送信しても入力欄が残ったままで紛らわしい
- 長いフォームの場合、送信後に完了メッセージが画面上部に見えない
これらの問題は、ちょっとしたCSSとJavaScriptで解決できます。
解決方法：シンプルな3つのコード
1. 送信完了メッセージを大きく表示する
.wpcf7 form.sent .wpcf7-response-output {
font-size: 18px;
}
Code language: CSS (css)このCSSは、フォーム送信後の応答メッセージ（「お問い合わせありがとうございます」などのテキスト）のフォントサイズを18ピクセルに設定します。デフォルトより大きく表示されるので、ユーザーが見落とす心配がありません。
2. 送信後にフォーム自体を非表示にする
.wpcf7 form.sent > p {
display: none;
}
Code language: CSS (css)このコードは、フォームが送信された後（.sentクラスが付与された状態）で、フォーム内のパラグラフ要素（入力欄を含む部分）を非表示にします。これにより、送信完了後はフォームが消え、完了メッセージだけがすっきり表示されます。
3. 送信後に画面を自動的に上部へスクロールさせる
document.querySelector('.wpcf7-form').addEventListener('submit', function() {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
Code language: JavaScript (javascript)このJavaScriptコードは、フォームが送信されたタイミングで画面を滑らかに上部へスクロールさせます。長いフォームでは送信ボタンが画面下部にあることが多いので、このコードによって送信後は自動的に完了メッセージが見える位置まで画面がスクロールします。
各コードの詳しい解説
送信完了メッセージの拡大表示
Contact Form 7では、フォーム送信後に表示されるメッセージは「.wpcf7-response-output」というクラス名の要素に格納されます。また、送信が成功すると、フォーム全体に「.sent」というクラスが追加されます。
この性質を利用して、「送信成功時の応答メッセージ」だけを大きくするスタイルを指定しています。フォントサイズは必要に応じて調整できます。
フォームの非表示化
送信成功後にフォームの入力欄が残っていると、「もう一度入力する必要があるのか？」とユーザーが混乱することがあります。そこで、送信成功時に入力欄を非表示にしてすっきりさせます。
Contact Form 7では、入力欄の多くは段落（<p>）タグで囲まれているため、それらを一括で非表示にするセレクタを使用しています。もし入力欄の構造が異なる場合は、セレクタを適宜調整する必要があります。
自動スクロール機能
長いフォームの場合、送信ボタンを押した後に完了メッセージが画面上部に表示されますが、ユーザーの視点は依然として画面下部（送信ボタン付近）にあります。そのため、自動的に画面上部にスクロールさせる仕組みが便利です。
JavaScriptのwindow.scrollTo()メソッドを使うと、指定した位置に画面をスクロールさせることができます。behavior: 'smooth'を指定すると、唐突に画面が切り替わるのではなく、滑らかなアニメーションでスクロールするため、ユーザー体験が向上します。
実装時の注意点
Contact Form 7でのイベント処理
上記のJavaScriptコードは、フォームの「submit」イベントで動作します。しかし、Contact Form 7はAjaxでフォーム送信を行うため、実際のフォーム送信（サーバーへのデータ送信）とユーザーが送信ボタンを押す操作が必ずしも一致しません。
より確実なタイミングでスクロールさせたい場合は、Contact Form 7が提供する「wpcf7mailsent」イベントを利用する方法もあります：
document.addEventListener('wpcf7mailsent', function(event) {
window.scrollTo({ top: 0, behavior: 'smooth' });
}, false);
Code language: JavaScript (javascript)このコードは、メールが実際に送信された後（つまり、サーバー側での処理が成功した後）に実行されます。
CSSセレクタの調整
WordPressのテーマやContact Form 7のバージョンによっては、CSSセレクタが効かない場合があります。その場合は、ブラウザの開発者ツールを使って実際の要素構造を確認し、適切なセレクタに調整する必要があります。
実装方法
これらのコードは、WordPressの「テーマのカスタマイズ」から「追加CSS」に貼り付けるか、テーマのstyle.cssファイルに追加します。JavaScriptコードは、「テーマのカスタマイズ」から「追加JavaScript」（もしあれば）か、またはfunctions.phpファイルに以下のように追加します：
function custom_contact_form_script() {
if (is_page('contact')) { // お問い合わせページでのみ読み込む場合
echo '<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelector(".wpcf7-form").addEventListener("submit", function() {
window.scrollTo({ top: 0, behavior: "smooth" });
});
});
</script>';
}
}
add_action('wp_footer', 'custom_contact_form_script');
Code language: HTML, XML (xml)まとめ
今回紹介した3つのシンプルなコードは、ユーザーの視点に立った小さな改善です。送信完了メッセージを大きく表示し、不要なフォームを非表示にし、自動スクロールで完了メッセージを見やすくすることで、ユーザー体験が大幅に向上します。わずかな労力で実装できるので、ぜひ試してみてください。