やりたいこと
前提：求人応募フォームに「職種」の選択肢（ドロップダウン）がある
それぞれの職種の募集要項ページから「この求人に応募する」のリンクをクリックし、求人応募フォームページへ遷移すると、ひとつ前のページで閲覧していた「職種」がセットされた状態になっている。
Contact Form 7側の設定
Contact Form 7の設定で応募職種のドロップダウンを作成します。
<label> 応募職種 ※必須</label>
[select* select "選択してください" "広告営業" "広告運用スタッフ" "WEBデザイナー" "経理事務"]
nameのselectはスクリプトで取得するため重要なので忘れずに設定- 未選択の場合は、「選択してください」が表示
リンク元のコード
<a href="http://example.com/form-page?job=広告営業">この求人に応募する</a>
<a href="http://example.com/form-page?job=広告運用スタッフ">この求人に応募する</a>
<a href="http://example.com/form-page?job=WEBデザイナー">この求人に応募する</a>
<a href="http://example.com/form-page?job=経理事務">この求人に応募する</a>
- リンク先のURL部分はフォームページを入力
- URLの後ろに
?job=職種名の形式でクエリパラメータを指定
リンク先のフォームページのスクリプト
以下のjavascriptをfooter.phpの</body>タグ直前またはフォームページで読み込んでいるjsファイルに追加します。
<script>
document.addEventListener('DOMContentLoaded', function () {
// クエリパラメータを取得する関数
function getQueryParam(param) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(param) ? decodeURIComponent(urlParams.get(param)) : null;
}
// 応募職種を設定する関数
function setJobDropdown() {
const selectedJob = getQueryParam('job'); // URLからクエリパラメータを取得
if (selectedJob) {
const jobDropdown = document.querySelector('select[name="select"]'); // ドロップダウンを取得
if (jobDropdown) {
const options = Array.from(jobDropdown.options);
options.forEach(option => {
if (option.value === selectedJob) {
option.selected = true; // 一致する選択肢を選択
}
});
}
}
}
// 応募職種のドロップダウンを設定
setJobDropdown();
});
</script>
動作の仕組み
- リンク元のボタン
各リンクにクエリパラメータ（job=職種名）を追加。 - リンク先でクエリパラメータを取得
JavaScriptでjobの値を取得（getQueryParam関数）。 - ドロップダウンを設定
select要素の中からjobの値と一致する選択肢を選択状態にする（setJobDropdown関数）。
確認手順
- 各ボタンをクリックしてフォームページに遷移します。
- フォームページで、該当する職種が応募職種のドロップダウンで選択されていることを確認します。
求人応募フォーム以外にもいろいろと使える方法だと思うのでぜひ活用してみてくださいね！