「お見積もりフォームを用意しているのに、届く内容が『見積もりをお願いします』の一言だけ」。そんな経験はありませんか？
入力する項目が一度にずらっと並んだフォームは、見ただけで面倒に感じられ、途中でやめてしまう人や、最低限だけ書いて送る人が増えがちです。そこで役立つのが、質問を少しずつ見せる ステップ形式のフォーム です。
Cruwでは、自社サイトのお見積もりフォームを、質問を4つのステップに分けて作っています。この記事では、質問の分け方の考え方と、WordPressのフォームプラグイン「Contact Form 7」での作り方、つまずきやすい点を、実際のフォームとコードを例に紹介します。
結論：質問を「選ぶだけ」の小さなまとまりに分ける
見積もりフォームを答えやすくするコツは、次の3つです。
- 質問を3〜4つのステップに分ける：一度に見える質問を少なくする
- 選択式を中心にする：文章を書かなくても、選ぶだけで状況が伝わるようにする
- 連絡先は最後に聞く：先に相談の中身を答えてもらい、最後に名前やメールアドレスを聞く
こうすると、相談する人は迷わず答えられ、受け取る側も、最初の返信から具体的な提案を考えやすくなります。
Cruwの見積もりフォームの例（システム開発）
Cruwのシステム開発のお見積もりフォームは、次の4ステップです。
| ステップ | 聞くこと | 答え方 |
|---|---|---|
| 質問1 | ご相談の内容（新規開発・改修・引き継ぎ・AIの導入など） | 1つ選ぶ |
| 質問2 | 開発したいもの、主に使う人、今の管理方法 | 選ぶ（複数可） |
| 質問3 | 希望の時期、予算の目安、手元にある資料 | 選ぶ |
| 連絡先 | 名前、会社名、メールアドレス、電話番号、実現したいこと | 入力 |
ホームページ制作用のお見積もりフォームも同じ形ですが、質問の中身は「必要なページ」「欲しい機能」「想定のページ数」など、まったく別のものです。サービスごとに、見積もりに必要な質問は変わります。1つのフォームで何でも受けようとせず、サービスに合わせて分けるのがおすすめです。
質問を決めるときの考え方
見積もりに本当に必要なことだけを聞く
質問を増やすほど、答える負担は大きくなります。「この答えがないと見積もりが出せない」「最初の提案の方向が変わる」ものに絞りましょう。細かいことは、返信や打ち合わせで聞けば十分です。
「わからない」「未定」を選べるようにする
時期や予算は、決まっていない方も多くいます。「未定」「相談しながら決めたい」という選択肢を用意しておくと、そこで手が止まりません。
答えによって、必要な質問だけを出す
Cruwのフォームでは、質問1で「今あるシステムを改修したい」「他社が開発したシステムを引き継いでほしい」を選んだときだけ、「現在のシステムについて」の入力欄を出しています。関係のない人には見せないことで、質問を少なく感じてもらえます。
Contact Form 7での作り方
ここからは、制作者の方向けに、実際の作り方を紹介します。特別なプラグインは使わず、Contact Form 7 のフォームをステップごとに囲み、CSS と JavaScript で表示を切り替えています。
1. フォームをステップごとに囲む
Contact Form 7 のフォームの編集画面で、ステップごとに div で囲み、「次へ」「戻る」のリンクを置きます。
<div class="form-group" id="step1">
<h2>質問1</h2>
<label>ご相談の内容を教えてください。</label>
[radio consult-type use_label_element default:1 "新しいシステム・サービスを開発したい" "今あるシステムを改修・機能追加したい"]
<a href="#step2" class="next-btn" id="next1">次へ</a>
</div>
<div class="form-group" id="step2">
<h2>質問2</h2>
<label>開発したいものを教えてください。</label>
[checkbox* develop-type use_label_element "業務管理システム" "予約・受付システム" "その他"]
<a href="#step1" class="prev-btn" id="prev1">戻る</a>
<a href="#step3" class="next-btn" id="next2">次へ</a>
</div>
<!-- 質問3、連絡先（step4）も同じ形で続ける。最後のステップに送信ボタンを置く -->2. CSSで、2つ目以降のステップを隠す
#step2, #step3, #step4 {
display: none;
}3. JavaScriptで、表示するステップを切り替える
「次へ」を押したら今のステップを隠し、次のステップを表示します。サイトで jQuery を読み込んでいる場合の例です。
jQuery(function ($) {
function goStep(from, to) {
$(from).hide();
$(to).show();
}
$('#next1').on('click', function () {
goStep('#step1', '#step2');
});
// 必須の質問は、選んでいるときだけ次へ進める
$('#next2').on('click', function () {
if ($('input:checkbox[name="develop-type[]"]:checked').length > 0) {
goStep('#step2', '#step3');
} else {
alert('未選択の項目があります。');
return false;
}
});
$('#prev1').on('click', function () {
goStep('#step2', '#step1');
});
});つまずきやすい点
必須のチェックは「次へ」を押したときにも行う
Contact Form 7 の必須チェックは、送信ボタンを押したとき に行われます。そのため、質問2の必須項目を選ばずに最後まで進めて送信すると、エラーは質問2に出ているのに、画面には最後のステップしか見えず、「送信できない理由がわからない」状態になります。
これを防ぐには、上のコードのように、必須の質問があるステップでは「次へ」を押したときに選択されているかを確かめ、選ばれていなければ進めないようにします。
答えによって出す欄は、隠すときに中身を空にする
「改修」を選んで入力したあとに「新規開発」に選び直すと、隠れた欄に入力が残ったまま送信されてしまいます。欄を隠すときは、入力した内容も空にしておきましょう。
function toggleCurrent() {
var index = $('input:radio[name="consult-type"]').index($('input:radio[name="consult-type"]:checked'));
var show = index === 1; // 2番目の選択肢（改修）を選んだとき。選択肢を増やしたら、ここの条件も合わせる
$('#formCurrent').toggle(show);
if (!show) {
$('textarea[name="current-system"]').val('');
}
}フォームを増やしたら、必ずテスト送信する
フォームを新しく作ったときは、受信メールと自動返信メールが届くか、送信後のページに移るかを、必ず実際に送って確かめます。Cruwでも、新しいフォームのページで迷惑メール対策の読み込みが止まり、送信できない不具合が見つかりました。くわしくはContact Form 7で「メッセージの送信に失敗しました」と出る原因と対処法で紹介しています。
よくある質問
ステップに分けると、送信する人が減りませんか？
画面を進める回数は増えますが、1つの画面で考えることが少なくなるので、答える負担は軽くなります。大切なのは、質問を増やしすぎないことと、選ぶだけで答えられる質問を中心にすることです。
どんなフォームでも、ステップ形式にしたほうがいいですか？
いいえ。名前とメールアドレス、お問い合わせ内容だけのような短いフォームは、1画面のままのほうが早く送れます。見積もりのように、聞きたいことが多いフォームに向いた方法です。
専用のプラグインを使わなくても作れますか？
作れます。この記事の方法は、Contact Form 7 と、少しの CSS・JavaScript だけで動きます。条件によって質問を大きく分けたい場合などは、専用のプラグインを検討するとよいでしょう。
まとめ
- 見積もりフォームは、質問を3〜4つのステップに分け、選択式を中心にすると答えやすくなる
- 連絡先は最後に聞き、「未定」などの選択肢も用意する
- Contact Form 7 では、ステップごとに囲んで表示を切り替えれば作れる。必須のチェックは「次へ」を押したときにも行う
「フォームからの相談を増やしたい」「今のフォームを使いやすくしたい」といったご相談も承っています。長野県上田市のCruwまで、お問い合わせからお気軽にご相談ください。サービスのページの見直しについては、問い合わせにつながるサービスページの作り方でも紹介しています。
