【お問い合わせ申込フォーム】予め表示されている項目を入力し始めると、次の項目が自動的に表示されるようにしたい※参考サイトあり

Question

英会話スクールのお問い合わせ・無料体験申込フォームを作成するにあたり、
下記サイトのような仕様を希望しています。
参考サイト：宅配クリーニングのリネット
※”お申し込みはかんたん３ステップ”の住所入力欄を参照ください。

具体的なイメージとしては、
①「お名前」「フリガナ」の記入スペースのみ表示されていて、
フリガナを入力し始めると、
②電話番号、メールアドレス、住所（※郵便番号から自動表示）までの記入スペースが表示され、
アパート名など住所の詳細を入力し始めると、
③下記の通り残りの項目が全て表示される。
・受講目的/職業/英語力目安→プルダウン表示
・無料体験希望日時（第１〜２希望）→日にち選択（カレンダー表示）後、時間選択（プルダウン表示）
・問い合わせ内容→テキストエリア
④送信

【教えて欲しいこと】
Javascriptで、
①→②→③と自動表示されていく動きのつけ方が分からなかったので、
その点を教えていただきたいです。

また、
このフォーム部分のコーディングとPHP（自動返信あり）を外注した場合、
大体いくらくらいかかるものなのでしょうか？
難易度やPHPの知識が無いため、参考までに、ざっくりした予算を教えていただけると助かります。

以上、２点について、ご教授願います。

Comments

[m.ts10806]

２つ目はこちらで聞くのではなく実際に見積もりとってください。
業者や要件、環境などにより全く変わってきます。

[ma.ya.ki]

ご覧いただき、ありがとうございます。
そうですよね、見積り取ってみます。
失礼いたしました。

Answer 1

このフォーム部分のコーディングとPHP（自動返信あり）を外注した場合、

大体いくらくらいかかるものなのでしょうか？

物によります。
デザインから作成するのか、デザイン案が既にあってそれに沿って作成するのか。
どのような機能を盛り込んで、いつまでに作成するのか。
不明瞭ですし、ここでは出せません。

入力に同期して、次のフォームを出す実装は
JavaScriptで、キー入力を感知して、1文字以上の入力があれば表示する。
というふうにすれば実装は可能です。

Comments

[kyoya0819]

ちなみに、これの作成難易度としてはかなり低いですが、セキュリティ面での知識が必要になってきます。
下手に汎用品を用いると不正に使われる可能性もあります。

[ma.ya.ki]

ご回答いただき、ありがとうございます。
webデザインスクール先日卒業したばかりで、Javascriptに関しては正直まだよく分かっていない状況です。
でも、作成難易度低いということであれば、教えていただいた考え方を元に、とりあえず自力でやってみます。セキュリティ面での知識が必要ということであれば、バックエンド部分のみ、外注にしようかなと思います。PHPについてはスクールで学んでいなかったので、注意点を教えていただき助かりました。

個人事業主である知人からの依頼(LP)で、現在は要件定義や情報設計を行なっている段階です。急ぎの案件ではなく、8月頃に公開を目標にしてます。見積をこれから出すところで、クライアントはこのフォームの実装にこだわりがあるけど、この部分で金額が上がってしまうのなら、どのくらいかかるかと質問されている状況でした。考えているデザイン案、盛り込んで欲しい機能など大体決まっているので、その点を抑えて見積を取ってみようと思います。