質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.78%

問い合わせフォーム作成について

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 474

hakuei

score 18

問い合わせフォームをhtmlで作成しているのですが、googleフォームみたいに、セクションを分けてフォームを作りたいのですがどのようにすればできるでしょうか

===================
セクション1
Q1xxxxx
Q2xxxxx

次へ ←をクリックすると、セクション2へ

===================
セクション2
Q3xxxxxx
Q4xxxxxx

===================

上記みたいなイメージで、最初はセクション1しか表示されておらず、
「次へ」をクリックすると、ページ遷移させずに、
セクション2の質問が表示されるようにしたいです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • hakuei

    2019/04/05 20:27

    考え方とキーワードのみでも頂けますと非常に助かります!!!
    初心者で、セクションをわけてgoogleフォームと同じようにしたいぐらいしか考えられてないので、どうかよろしくお願いします。

    キャンセル

  • m.ts10806

    2019/04/05 20:33

    では、質問を編集してそのように記載しておいてください。「可能ですか?」のままなので。
    先に言っておきますが、現段階では質問者さんが決めなければならない部分、考えなければならない部分が非常に多いです。そのあたりはご認識くださいね

    キャンセル

  • hakuei

    2019/04/05 20:37

    申し訳ございません。丁寧にありがとうございます!
    学んでいきたいので、どうか宜しくお願いします

    キャンセル

回答 3

checkベストアンサー

+1

やり方はたくさんあります。
ただ、それは「どのようにデータを持ちたいか・持たせたいか」「どのように見せたいか」にもよります。
その部分は仕様なので考えていただきたい部分です。


「Googleフォームのような」というと、セクションと項目は固定ではなく動的になります。
動的になるということは、データベースに情報を持つのが最も一般的と思います。

つまりまずやるべきは作りたい機能に必要なデータの体系を考えること。
どのようにデータを持てば動的にセクションと項目を持つようににできるか。
「1対多」「多対多」などデータの関連性の持ち方を習得する必要があります。
ここは「マスタ」と呼ばれるデータの呼び方になります。

また、実際に入力された情報を格納するデータも必要になるかもしれませんね。
まあ送りっぱなしなのであればそれも不要かもしれませんが、履歴として残したいのであればそれも保存する必要がありますね。
要件によって適宜データの持ち方を考えてください。


というところはあくまで「裏側」のことです。
データの持ち方が決まればあとは表の話ですので別々に作ることも出来ます。
(実際現場ではモックという形で静的htmlで画面イメージとクライアント側の動作イメージを作ります)


「ページ遷移」って結構曖昧な概念だったりします。
それによって実現方法がたくさん考えられるわけです。

ひとつめ。

phpとのことで、フォーム送信のことはある程度理解されている前提で書きますが、
form送信する場合に「自身に対してPOSTする」ということがあります。それを「ページ遷移」とするかどうかにもよるわけです。

その「セクション切り分け」をGETとPOSTを組み合わせて作るのが1つ。
つまりformの送信先を自身+セクション番号とすること です。

すると、セクション番号をGETで渡して、それによって取得するセクションの項目を決めるわけですね。
POSTで項目で選択した情報を送信するわけですね。
ただ、「戻る」必要があるかもしれませんのでセッションは覚えておいたほうが良いです。

最終的には全項目を送信するわけですし、隠し要素(input type=hidden)でずっとHTML内に埋め込むよりはセッションのほうが良いかなと(送信後、セッションを破棄する必要があります)

ふたつめ。

セクション毎に項目をおさめるHTMLを最初から用意しておき、JavaScriptで「次へ」「前へ」のボタンで「表示・非表示」のみを切り替える。

これは単純にするならCSSのdisplayの指定をblock/noneを切り替えるということになります。
もちろんあとは動きの問題なのでスライドするなりアニメーションつけるなりはご自由に。

問い合わせ項目の送信は全て一気に行います。

みっつめ。

PJAX

非同期通信を行い、セクション・問い合わせ項目を取得してきてセクションのグループをごそっとJavaScriptで入れ替えます。
すべて入れ替えるため、問い合わせ項目で選択した項目をどこかに保持しておく必要があります。PHPでサーバー側にセッションで持っておくか、
クライアント側でWebStorage(LocalStorage/SessionStorage)に持っておいて送信時はそこから取得してきてもいいかもしれません。
いずれにしても送信項目についてはJavaScriptで作って送信する必要があります。


ざっと思いついたのはこれくらい。
やりやすいのものから対応してみてください。

いずれにしても実際に作ってくためには「項目をどう持つか」「データをどう流すか・データを持つか」を考えるのは共通です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

JavaScript(またはjQuery)、HTML5/CSS3、CSSアニメーションなどを学んでください。インタラクティブな動きはほとんどこれで作れるようになります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

phpの場合htmlは、phpで生成してるのですね?
だとしたら、セッション1からセッション2はそれぞれhtml(phpで作成する)を用意し、1から2へ表示するときに、1pxも狂わず調整して表示するとそのように表示されます。
動きは、1から2へ画面遷移しているが見た感じは高速で表示されるので変化しているようにみえているだけです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る