ラボ > Javascript関連:ajax、form、HTML:form関連、雑学

Form投稿の仕組みについて

ベストなform投稿の仕組みを考える

作成日:2018-05-07, 更新日:2018-08-30

ベストなform投稿

まず何をもってベストなのかが分からない・・・分からないが希望は下記のような感じ。
・作り手にとって、作る手間が少ない
・作り手にとって、メンテナンスがラク
・ユーザーにとって、使いやすい
※「メンテナンス」は例えば、運用開始後、任意のタイミングで「formの項目を増減する」ということ。

想定しているform投稿

・問合せフォーム:問合せのようなform
・登録フォーム:会員情報の登録、編集のようなform

ページ構成

ページ構成は基本、下記の3種類。
・入力画面
・確認画面
・保存、その後の画面

通常は「入力→確認→保存」の流れ。
「入力→確認→入力→確認→保存」のように確認画面から入力に戻ることもある。
また「入力→確認」のように途中で終了というパターンもある。

入力画面

考えられるパターンや問題は下記あたり。
・登録フォームは「新規登録」と「編集」の2つあるが、問合せフォームは1つだけ。
・確認後に修正で戻ってくることもある。
・画像を含めたい
・郵便番号の検索を含めたい
・別から読み込んだ情報(役職やカテゴリー、タグなど)を含めたい

ページのタイプ

入力フォーム自体は下記の2タイプがあると思う。
・専用のページを作る
・ポップアップ(モーダルウィンドウ)を作る

入力項目が少ない、検索フォームは含めないなら「ポップアップ(モーダルウィンドウ)」でも問題無し。
※項目が少なくても「確認画面」の問題で「ポップアップ(モーダルウィンドウ)」は避けたほうがいいかもしれない。

画像や別から読み込んだ情報(役職やカテゴリー、タグなど)を含める場合は・・・状況によっては「ポップアップ(モーダルウィンドウ)」は避けたほうがいい。

確認画面

考えられるパターンは下記あたり。
・不要:確認無しで即保存させる
・入力画面で兼用させる
・専用にページを用意

不要な場合

何も考えなくていいからラク。
ただ、確認できないはユーザーにとってどうなんだろうか?という問題あり。
問合せフォームだと、後で変更ってワケにもいかないだろうから、確認画面は必要だと思う

入力画面で兼用させる

面倒だから避けたい方法。

やり方としては下記のような感じ

<form id="wrapInput">
各入力フォーム
<button id="btnConfirm">確認</button>
</form>

<div id="wrapConfirm" style="display:none">
入力したデータ
<button id="btnEdit">修正</button>
<button id="btnSave">保存</button>
</div>

<script>
$('#btnConfirm').on('click', function(){
  ~ 「id="wrapConfirm"」の中に入力されたデータを記載させる ~
  
  $('#wrapConfirm').css('display', '');   // 表示
  $('#wrapInput').css('display', 'none'); // 非表示
});

$('#btnEdit').on('click', function(){
  $('#wrapConfirm').css('display', 'none'); // 非表示
  $('#wrapInput').css('display', '');       // 表示
});

$('#btnSave').on('click', function(){
  ~ 保存させる ~
});
</script>

コレのいいとこは入力データが残るから、処理がラク。

専用にページを用意

入力項目が多くなってもページが別だと見やすい。
ただ、前のページに戻る、保存させるというときに入力データをどういう風に扱うのかが問題。

ブラウザの「戻る」ボタンも考慮する必要あるし・・・。

あと、formでファイルを送ってもらうときの対応も考慮する

保存、その後の画面

いわゆるサンキューページで、考えられるパターンは下記あたり。
・専用にページを用意
・任意のページにメッセージを表示

関連項目

Form投稿の仕組みについて
Form投稿とファイルのアップについて