以前、業務システム支援関連のWEBサイトを制作させていただいたクライアントより、「他サイトからのアクセスが見積依頼につながった時にどのサイトから来たのか知りたい」という相談がありました。
具体的には、リファラーに応じてIDを取得したいということでした。
- WEBサイトはWordPressで制作しており、見積依頼フォームはプラグイン「Contact Form 7」を使用している。
- アクセス元ページのURLにパラメータ（クエリ文字列）を付加してもらうことは可能。
- 「Contact Form 7」にはHTTPのGETで送信された値を取得可能とするオプションはある。
でしたので、比較的簡単に対応することができました。
また、パラメータがあるURLからのアクセスの場合は取得IDを読み取り専用として編集不可、パラメータの無いURLからのアクセスには手動で入力可能とするご要望もいただきました。これらはJavaScript（jQuery）で対応しました。
これらを以下にまとめます。
Contact Form 7 で作成したフォームにパラメータを取得する
まずは「Contact Form 7」で作成したフォームにURLパラメータ取得用のinput要素を追加します。
name属性はここでは introducerID とします。
[text introducerID]
これに、HTTP GET変数からデフォルト値を得る default:get オプションを追加します。
[text introducerID default:get]
読み取り専用としたいので、readonly属性を付加します。
[text introducerID default:get readonly]
「Contact Form 7」側はこれで完了です。
今回は可視化しましたが、フォームの入力者に見せたくない（隠し入力項目とする）場合は「Contact Form 7」のフォームタグタイプに text を使わず hidden を使います。
[hidden introducerID default:get readonly]
フォームの参照元URLにパラメータ（クエリ文字列）を付加する
パラメータ（クエリ文字列）をフォームのURLの後に ? に続いて付加します。
URLクエリパラメータの構造
?パラメータ（変数）名=パラメータ（変数）の値
パラメータ名を「Contact Form 7」で作ったinput要素のname属性（ここでは introducerID ）とし、パラメータの値をここでは任意のIDとして扱います。
フォームのURLが https://example.com/contact だとしましたら、
といった感じです。
これで、このURLでアクセスしてきたフォームには、作成したinput要素に referrer1 がデフォルトで入力されます。もちろん、「Contact Form 7」のメールタグを使用してメール受信することも可能です。
jQueryでURLパラメータが無いときにinput要素を入力可にする
パラメータ用のinput要素には readonly属性を付けましたので、この段階では編集不可となっています。
これを、パラメータが無いURL（ https://example.com/contact や https://example.com/contact?introducerID= など）でのアクセスの場合に編集可として任意で入力できるようにします。
パラメータが無いURL（値が無い） = input要素のvalue値が空 という考え方で、jQueryのattrメソッドを使います。
attrメソッドは、HTML要素の属性の値を取得したり変更したりできるメソッドです。
//URLパラメータ取得用inputのvalueが空の場合にreadonlyを無効化
$(document).ready(function(){
var introducerID = $('input[name="introducerID"]');
if(introducerID.val() == "") {
introducerID.attr('readonly',false);
}
});
上記スクリプトで、name属性が introducerID のinput要素に対して、そのvalue値が空だった場合に、そのreadonly属性を無効にします。
このスクリプトを記述したjsファイルをページのフッターで読み込むようにすれば完了です。
以上、ご参考になれば幸いです。
コメント