2021/2/19

2025/2/11

10549 views

大変便利なワードプレスのお問い合わせプラグイン「Contact Form 7（コンタクトフォーム７）」。
今回は応用的な使い方として、「遷移前ページのタイトルやURLを取得し送信する方法」の解説です。

どういう場合に使える？

フォームを別テンプレートファイルで設置管理したいときに使えます。
たとえば、各記事毎に記事の感想フォームを作りたい場合にsigle.phpにフォームを設置するのではなく、別の感想投稿用のページのフォームから送りたい場合などです。
この場合、感想投稿用のページの遷移前の記事の情報を継承させるのが今回のやりたいことです。

やり方

1. フォームページへのリンクにリファラを持たせる

まずは、フォームがあるページへのリンク（<a>タグ）にリファラ（遷移前ページ情報）を持たせるコードを記述します。
以下記述例です。

<p><a href="/contact?referertitle=<?php echo get_the_title();?>&refererurl=<?php echo get_the_permalink();?>">投稿フォームへ</a></p>

解説すると、「<?php echo get_the_title();?>」で現在ページのタイトルを、「<?php echo get_the_permalink();?>」で現在ページのURLの情報を持たせています。

2. フォーム編集に項目を作る

Contact Form 7のコンタクトフォームの編集のフォーム入力欄に下記のようにリファラの項目を作ります。

contact form7のフォーム欄

<p>前のページのタイトル<br>
[text referertitle default:get]</p>
<p>前のページのURL<br>
[url refererurl default:get]</p>

3. 受信メールのほうにも項目を作る

受信メールのほうにも下記のように項目を記入します。

contact form7のメール受信設定欄

前のページのタイトル
[referertitle]

前のページのURL
[refererurl]

4. テストメールをする

もうここまでで完了しているので、テストメールを送って確認してください。

応用）隠し項目にしたい場合

またURLの方を表のフォーム画面に出力せずにメールで受信したい場合は下記のようにフォーム項目を作ります。
[hidden]という項目名にすることで隠し項目に設定できます。

[hidden referertitle default:get]

Contact Form7  隠入力項目

応用）サンクスページにリファラを持たせる

「Redirection for Contact Form 7」を使い、サンクスページにリファラ情報を持たせる方法です。

１．前ページ（リンク設置ページ）に以下のJavaScript を記述し、タイトルを URL に埋め込む

<script>
document.addEventListener("DOMContentLoaded", function () {
    let link = document.getElementById("form-link");
    let refererTitle = encodeURIComponent(document.title);
    let refererUrl = encodeURIComponent(window.location.href);
    link.href = "/contact?referertitle=" + refererTitle + "&refererurl=" + refererUrl;
});
</script>

２．フォームページでリファラ情報を取得し、フォームにセット

<script>
document.addEventListener("DOMContentLoaded", function () {
    function getQueryParam(param) {
        let urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(param);
    }

    let refererTitle = getQueryParam("referertitle");
    let refererUrl = getQueryParam("refererurl");

    if (refererTitle) {
        sessionStorage.setItem("originalRefererTitle", refererTitle);
    }
    if (refererUrl) {
        sessionStorage.setItem("originalRefererUrl", refererUrl);
    }

    document.getElementById("referertitle").value = sessionStorage.getItem("originalRefererTitle");
    document.getElementById("refererurl").value = sessionStorage.getItem("originalRefererUrl");
});
</script>

<!-- Contact Form 7 の hidden フィールド -->
<input type="hidden" id="referertitle" name="referertitle">
<input type="hidden" id="refererurl" name="refererurl">

3．サンクスページでリファラ情報を表示

<script>
document.addEventListener("DOMContentLoaded", function () {
    let storedRefererTitle = sessionStorage.getItem("originalRefererTitle");
    let storedRefererUrl = sessionStorage.getItem("originalRefererUrl");

    document.getElementById("referer-title-display").innerText = storedRefererTitle ? storedRefererTitle : "リファラタイトルなし";
    document.getElementById("referer-url-display").innerText = storedRefererUrl ? storedRefererUrl : "リファラURLなし";
});
</script>

<p>前のページのタイトル: <span id="referer-title-display"></span></p>
<p>前のページのURL: <span id="referer-url-display"></span></p>

まとめ

以上が、Contact Form 7で遷移前ページのタイトルやURLを取得し送信する方法の解説でした。
活用しだいで、予約フォームなどにも対応できそうですね。
ご質問などありましたらお気軽にコメントください。