【2026年版・コピペOK】ContactForm7にクリック・URLリンクから値を渡す方法｜セミナー予約フォームに便利

SHARE

WordPress・CF7カスタマイズ
, , ,

セミナーや講座の予約フォームを作るとき、こんな悩みはありませんか？

  • 開催日程が変わるたびに、ContactForm7のフォームを編集しなければならない
  • クライアントにCF7の編集画面を触らせるのは難しい
  • かといって、毎回制作会社に更新依頼するのはコスト的に現実的じゃない

この記事では、リンクにパラメータを仕込んでおくだけで、
クリック時にフォームへ値を自動セットできる実装方法を2パターン紹介します。

カスタムフィールドと組み合わせれば、クライアント側はカスタムフィールドを更新するだけでフォームの選択肢が自動で変わる仕組みも作れます。

実際の案件でも使っている構成なので、コードはそのままコピペしてお使いください。

完成イメージ

例えば、こんなセミナー案内ページを作ったとします。

例えば、フロント側

＜今年もセミナー開催中！＞
「1月10日13時セミナー」←リンクA
「2月20日13時セミナー」←リンクB
「3月15日13時セミナー」←リンクC

このリンクをクリックすると、フォームページへ遷移し、
希望日時欄に「1月10日 13時セミナー」が自動で入力された状態になります。
ユーザーはそのまま送信するだけ。

フォーム側

渡した値はreadonlyで表示されるため、ユーザーが誤って書き換えることもありません。

2つの実装パターンの使い分け

実装方法は2パターンあります。状況に合わせて選んでください。

パターン①GETパラメータ方式

→ リンクとフォームが別ページにある場合に使う
→ JavaScriptが不要でシンプル

パターン②JavaScript方式

→ リンクとフォームが同じページにある場合に使う
→ ページ再読み込みが起きないため、途中入力が消えない

同じページにリンクとフォームが混在する場合は②を選んでください。
①だとリンククリック時にページが再読み込みされ、ユーザーが入力途中だった他の項目が全部消えてしまいます。

パターン①｜別ページからGETパラメータで値を渡す

HTML側の設定

リンクのURLに ?パラメータ名=渡したい値 の形式で値を仕込みます。

<a href="/contact?check=1月10日13時セミナー#form-section">1月10日 13時のセミナーに申し込む</a>
<a href="/contact?check=2月20日13時セミナー#form-section">2月20日 13時のセミナーに申し込む</a>
<a href="/contact?check=3月15日13時セミナー#form-section">3月15日 13時のセミナーに申し込む</a>
  • /contact の部分はフォームページのURLに変更してください
  • ?check= の後が渡したい値です
  • #form-section はページ内のアンカーです。フォームの直前に id=”form-section” の要素があるとリンククリック後にフォーム位置までスクロールされます。不要な場合は削除してください

ContactForm7側の設定

CF7のフォーム編集画面で、値を受け取る欄に以下のタグを使います。

[text* check class:disabled default:get readonly]
  • default:get が必須です。これがないとパラメータの値を受け取れません
  • readonly をつけることで、ユーザーによる書き換えを防止できます
  • class:disabled はグレーアウト表示用のCSSクラスです。任意なので不要であれば削除してください

注意点

GETパラメータは日本語をそのままURLに入れると文字化けする場合があります。

カスタムフィールドでURLを出力する際は、urlencode() 関数でエンコードすることを推奨します。

パターン②｜同じページ内のリンクからJavaScriptで値を渡す

なぜJavaScriptが必要なのか

リンクとフォームが同じページにある場合、GETパラメータ方式を使うとリンククリック時に ページが再読み込みされてしまいます。

ユーザーが他の項目を入力している途中だと、その内容がすべて消えてしまうため、コンバージョンを損なう原因になります。JavaScriptで値を渡す場合はページの再読み込みが発生しないため、 他の入力内容を保ったまま特定のフィールドだけ値をセットできます。

HTML側の設定（スクリプト）

ページのヘッダーか、</body>直前に以下のスクリプトを追加します。

<script>
(function() {
    var links = document.getElementsByClassName("myLink");   // リンクにつけるclass名
    var inputElement = document.getElementById("myInput");   // 渡し先フィールドのID
    var anchorElement = document.getElementById("form-section"); // スクロール先の要素ID

    for (var i = 0; i < links.length; i++) {
        links[i].addEventListener("click", function(event) {
            event.preventDefault();
            var inputValue = this.getAttribute("data-value");
            inputElement.value = inputValue;
            anchorElement.scrollIntoView({ behavior: 'smooth' }); // フォームまでスクロール
        });
    }
})();
</script>
  • フォームまでのスクロールが不要な場合は anchorElement の2行と scrollIntoView の行を削除してください
  • class名・IDは任意に変更できます。変更した場合はリンクタグ・CF7タグも合わせて変更してください

リンクタグの設定

<a href="#" class="myLink" data-value="1月10日13時セミナー">1月10日 13時のセミナーに申し込む</a>
<a href="#" class="myLink" data-value="2月20日13時セミナー">2月20日 13時のセミナーに申し込む</a>
<a href="#" class="myLink" data-value="3月15日13時セミナー">3月15日 13時のセミナーに申し込む</a>

data-value に渡したい値を入れてください。
class=”myLink” はスクリプトで監視するクラス名と一致させてください。

h3: ContactForm7側の設定

値を受け取るフィールドに id:myInput を追加します。

[text* check class:disabled id:myInput readonly]

id:myInput がスクリプトの getElementById(“myInput”) と対応しています。
ここが一致していないと動作しません。

ACFカスタムフィールドと組み合わせる（応用）

日程などの変動する情報をACF（Advanced Custom Fields）のカスタムフィールドで管理している場合、PHPテンプレートやショートコードでdata-valueを動的に出力することで、クライアントはカスタムフィールドを更新するだけで自動的にリンクの値が変わる仕組みが作れます。


ACF繰り返しフィールドを使ってブロックエディタ内にショートコードで出力する方法はこちらの記事で解説しています。

【ACF Pro】繰り返しフィールドをショートコードでブロックエディタ内に出力する方法【コピペOK】

よくある質問

日本語の値を渡すと文字化けする
GETパラメータ方式でPHPから値を出力する場合は urlencode() でエンコードしてください。
JavaScript方式ではdata-valueに直接日本語を書いても問題なく動作します。
値がフォームに反映されない（パターン①）
CF7のフィールドタグに default:get の記述が抜けていないか確認してください。
またパラメータ名（?check=）とフィールド名（check）が一致しているかも確認してください。
値がフォームに反映されない（パターン②）
スクリプト内の getElementById(“myInput”) とCF7タグの id:myInput が一致しているか確認してください。
スクリプトの読み込み順がDOMより先になっている場合も動作しないことがあります。
readonlyを外したい
CF7タグから readonly を削除すれば編集可能になります。
ただし、ユーザーが値を書き換えられるようになるため、運用上問題がないか確認してから外してください。
CF7以外のフォームでも使える？
パターン②のJavaScript方式はCF7に依存していないため、
他のフォームプラグインやHTMLフォームでも応用できます。

まとめ

リンクからContactForm7へ値を渡す方法は、用途によって2パターンを使い分けます。

  • 別ページからのリンク　→ GETパラメータ方式（シンプル・JS不要）
  • 同ページ内のリンク　　→ JavaScript方式（再読み込みなし・ユーザー体験を損なわない）

カスタムフィールドと組み合わせることで、クライアント自身がフォームの選択肢を管理できる仕組みに発展させられるのがこの実装の最大のメリットです。

実装でうまくいかない場合はよくある質問も参考にしてみてください。

【2026年版・コピペOK】ContactForm7で郵便番号から住所を自動入力する方法（function.php方式） 【2026年版プラグイン不要】Contact Form 7に確認画面をつける方法｜カスタムJSで軽量実装【コピペOK】 【2026年版・コピペOK】ContactForm7で土日祝日・特定日付を選択不可にするDatepicker実装

この記事を書いた人

はなわ

パリスタデザイン事務所のWebデザイナー・フロントエンドエンジニア。
WordPress構築・カスタマイズを中心に、CMS設計・構築や情報設計を得意としています。
AIやWeb技術、PC/ガジェットを活用しながら、「無理なく続く仕組みづくり」や実務に役立つ知見を発信しています。

お仕事のご依頼はこちら

パリスタデザイン事務所では、WordPress構築・カスタマイズを中心に、Web制作に関するご相談を承っています。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


前の記事

【今からプレイしても面白い？】Days Gone デイズゴーン…

次の記事

【SANGO】ブロックエディタで画像にテキストが回り込まない問…