問い合わせフォームの種類を、遷移元に合わせて自動選択する(Contact Form 7)

サービス紹介ページの「この分野について相談する」ボタンから問い合わせフォームに来てくれた人に、もう一度「お問い合わせの種類」を選ばせるのは無駄なワンタップです。当社サイトでは、遷移元のサービスに応じてフォームの種類を自動選択する仕組みをContact Form 7で実装しました。小さな改善ですが、フォームの入力体験は確実に良くなります。この記事では実装の全体像と、CF7ならではのハマりポイントを紹介します。

仕組みの全体像

やることは3つだけです。

サービスページのCTAリンクに ?type=web のようなクエリパラメータを付ける
フォームのセレクトボックスには、未選択を表す「選択してください」をプレースホルダーとして用意する
問い合わせページのJavaScriptでパラメータを読み、対応する選択肢を選択済みにする

実装1: CF7のセレクト定義

Contact Form 7のフォーム定義はこうなっています。ポイントは first_as_label で、先頭の「選択してください」を値を持たないラベル行として扱えます。select*(必須)と組み合わせると、未選択のまま送信しようとしたときにバリデーションで止まります。

[select* inquiry-type id:inquiry-type first_as_label "選択してください"
  "AI自動化代行について" "AIエージェント開発について" "AI導入支援について"
  "Webサイト制作について" "アプリ開発について" "採用について" "その他"]

実装2: 遷移元リンクにパラメータを付ける

各サービスのCTAは、問い合わせページへのリンクにサービス識別子を付けるだけです。

/contact/?type=web    ← Webサイト制作のCTAから
/contact/?type=agent  ← AIエージェント開発のCTAから

実装3: 自動選択のJavaScript

問い合わせページ側で、パラメータを選択肢のラベルに対応付けて選択状態にします。

document.addEventListener('DOMContentLoaded', function () {
  var map = {
    auto:  'AI自動化代行について',
    agent: 'AIエージェント開発について',
    ai:    'AI導入支援について',
    web:   'Webサイト制作について',
    app:   'アプリ開発について'
  };
  var t = new URLSearchParams(location.search).get('type');
  var sel = document.getElementById('inquiry-type');
  if (t && map[t] && sel) {
    // CF7が初期化時にreset()を呼ぶため、既定選択(defaultSelected)ごと書き換える
    for (var i = 0; i < sel.options.length; i++) {
      sel.options[i].defaultSelected = (sel.options[i].value === map[t]);
    }
    sel.value = map[t];
  }
});

ハマりポイント: sel.value だけでは効かない

最初は素直に sel.value = map[t] とだけ書いたのですが、これが効きませんでした。ページを開くと一瞬選択されて、すぐ「選択してください」に戻ってしまうのです。

原因はContact Form 7の初期化処理でした。CF7はフォームの初期化時に内部で reset() を呼びます。reset() はフォームを「既定値」に戻す処理なので、JavaScriptで value を変えただけの選択状態は消されてしまいます。

そこで、value ではなく各optionの defaultSelected(既定選択そのもの)を書き換える方針にしました。既定値ごと変えてしまえば、後からreset()が走っても選択状態は保たれます。CF7に限らず、「初期化でリセットがかかるフォーム」全般に使える考え方です。

効果

ユーザー側から見ると「サービスページから来たら、種類がもう選ばれている」だけの地味な変化ですが、入力項目がひとつ減ることは離脱の減少に直結します。選び間違いも起きません。運用側にも、どのサービス経由の問い合わせかが正確に入ってくるという利点があります。

まとめ

CTAリンクに ?type= を付けるだけで、フォームに文脈を渡せる
CF7の必須セレクトには first_as_label のプレースホルダーを併用する
CF7は初期化時にreset()が走るため、自動選択は defaultSelected を書き換えるのが正解

問い合わせ導線の改善やWebサイトのユーザビリティ向上のご相談は、お問い合わせフォームからどうぞ——もちろん、種類は自動で選択されています。

← TECH-BLOG一覧へ