Webサイトからお問い合わせが来たものの、どのページからお問合せに繋がったかが知りたい時ってありますよね。
今回は、お問い合わせフォームに、お問い合わせに繋がったページのURLを自動入力する方法を解説します。
お問い合わせのリンクを書き換える

PHPで書く方法
お問い合わせフォームへのリンクに、現在のページ情報を含めたクエリパラメータを追加するように書き換えます。
<a href="/contact/>
↓
<!-- URLを取得する場合 -->
<a href="/contact/?source=<?php echo urlencode(get_permalink()); ?>>
<!-- ページタイトルを取得する場合 -->
<a href="/contact/?source=<?php echo urlencode(get_the_title()); ?>>
urlencode
は、特殊文字やスペースなどのURLに含めることができない文字列を安全にURLエンコードするために使用しています。
リンクを踏むとお問い合わせページのURLに、以下のような形でクエリパラメータとしてパーセントエンコーディングされたURLが表示されます。
例:https://example.com/contact/?source=https%3A%2F%2F…
PHPのエンコードはセキュリティの要因として機能し、悪意のある入力や攻撃からシステムを守る役割を果たします。
HTMLで書く方法
HTMLで書く場合や静的サイトなどは、各ページが分かる文字列を直接書くのもOKです。
<a href="/contact/?source=タイトルやURLなどページが分かる文字列>
<!-- Aboutページの例 -->
<a href="/contact/?source=about>
<!-- 商品7のページの例 -->
<a href="/contact/?source=item7>
ページごとにクエリパラメータを書き換える必要がありますが、どのエディターでも簡単に記述することができるのがメリットです。
JavaScriptを記述

ウェブページの読み込み時に先ほどのクエリパラメーターを取得し、フォームのテキスト入力フィールドに値を設定するためのJavaScriptを記述します。
script
タグは必要に応じて外してください。
<script>
// ページが読み込まれた際に実行されるコード
document.addEventListener('DOMContentLoaded', function() {
// 現在のページのURLからクエリパラメータを取得
const urlParams = new URLSearchParams(window.location.search);
const source = urlParams.get('source');
// source パラメータが空でない場合に値を設定
if (source !== null) {
// source フィールドにデコードされた値を設定
document.getElementById('お問い合わせフォームのinputのID').value = decodeURIComponent(source);
}
});
</script>
decodeURIComponent
は、エンコードされた文字列をデコードし、元の文字列に戻すために使用しています。
"Hello%20World%21" // エンコードされた文字列
"Hello World!" // デコードされた文字列
お問い合わせフォーム画面で確認

任意のページからお問い合わせページに飛んだ時、お問い合わせフォームのinputのIDを入力した箇所へ自動でURLが追加されるようになります。
ユーザーにこのフィールドを見せる必要がない場合は、display: none
などで非表示にしておけばOKです。
送信画面で非表示にしているだけなので、通知メールにはどのページからお問い合わせに繋がったかが分かる仕組みとなっています。
お問い合わせの少ないページは改善を
今回のように実装することで、どのページに改善が必要かが把握できるようになります。
また、このようなフォームは車両販売や商品販売サイトでも活用でき、「〇〇についてのお問い合わせ」などと件名に入れるのも便利な使い方です。
カスタマイズを自分でしてみませんか?
「機能を追加したい」「もう少しデザインを調整したい」と思ったらWeb制作のスクール「デイトラ」がおすすめです。
どのコースも10万円前後と他のスクールに比べても格安で、副業や転職に十分なスキルが身に付きます。
気になった方は、是非アクセスしてみてください。
コースの一部
ご質問などお気軽にコメントどうぞ