contact form7ちょっとした小ネタ

2025.02.11お知らせ

WordPressの送信フォームプラグイン「Contact Form 7」では、フォーム送信後に「送信されました」というメッセージが表示されます。ただ、このメッセージはデフォルトだとフォームの一番下に表示されるため、フォームが長かったり、お問い合わせページ自体が長い場合、画面の外に隠れてしまうことがあります。

そこで、送信後に任意の場所へページ内リンクでスクロールさせる方法をChatGPTに教えてもらったので、メモがてら投稿しておきます！

①JavaScriptでスクロール処理

function.phpに以下のコードを追加。

//contact form7送信後　任意の場所（id=xxxxx）にページ内リンク
function add_cf7_scroll_script() {
    // jQueryが必要ならWordPressのjQueryを読み込む
    wp_enqueue_script('jquery');

    // カスタムスクリプトを追加
    wp_add_inline_script('jquery', '
        document.addEventListener("DOMContentLoaded", function() {
            document.addEventListener("wpcf7mailsent", function(event) {
                document.getElementById("xxxxx").scrollIntoView({ behavior: "smooth" });
            }, false);
        });
    ');
}
add_action('wp_enqueue_scripts', 'add_cf7_scroll_script');

②`id` を指定してスクロール先を決める

送信フォームを設置したページのスクロール先となる要素（id）を追加する。

<div id="xxxxx">
  <h2>お問い合わせありがとうございます！</h2>
</div>

これでできること

✅ CF7で送信完了後、自動で指定した場所へスクロール
✅ ページをリロードせずにスムーズに移動
✅ UX向上！（ユーザーが「送信された？」と迷わない）

PHPもJavaScriptもわからない僕ですが、ChatGPTが教えてくれるおかげで、プログラマーさんが近くにいなくても解決できるようになりました。なんとも便利な時代ですね(^^)

ちょっとしたことなので、必要になる場面があるかはわかりませんが💦
でも、もし同じようにお困りの方がいたら、ぜひ試してみてください！