ステップフォームを作成したい

  • 更新

Ver1.40より、フォーム機能で以下の2つの設定が可能になりました。
・確認画面の省略(確認画面スキップ)
・完了画面遷移先の指定(更新フォームや、サイト機能で作成したマイページを指定できます)
この機能を利用して、擬似的にステップフォームを作成することができます。

ステップフォームのつくりかた、活用事例については動画マニュアルでもご紹介しております。

■メリット
当機能を活用するメリットとしては、以下の2点が考えられます。
・設問が多い場合、フォームごとに設問をグルーピングする(例えば、1フォーム目で「あなたについて教えてください」、次のフォームで「会社について教えてください」と切り分ける)ことで、ユーザビリティが向上します。
・前のページの回答の内容により、次のページの設問内容を分岐させることが可能です。

■作り方の全体像
1枚目のフォームは、基本的に登録フォームです。その入力完了時に、次の更新フォームに自動ログインさせます。
項目に入力して、そこからまた別の更新フォームに自動ログインする、といった形で複数のフォームをつないでいきます。
(最後の更新フォームでは、完了時の自動遷移の設定は不要です)

今までの標準的なフォームでは、フォーム2ページに分けて回答させるには、図1のようにいったん登録フォームに登録した後、更新フォームにログインして後の設問に回答させる、という手順となっていました。

図1 標準的な登録フォーム→更新フォームの遷移イメージ

stepform_view_01.jpg

ステップフォームでは、登録フォームの入力後に「確認画面スキップ」と「完了画面遷移先の指定」を設定することで、更新フォームの入力画面にそのまま遷移させることができます。上の図1の「確認」「完了」「更新フォームログイン画面」がスキップされるので、図2のように表示される画面数が減ります。

図2 ステップフォームの遷移イメージ

stepform_view_02.jpg

また、前のページの回答の内容により、完了画面の遷移先を抽出条件で指定して次のページの設問内容を変えて分岐させることも可能です。
図3では、2ページ目の回答内容により3ページ目に回答させるまたは回答完了画面を出すという遷移イメージとなります。分岐先は最大100まで指定できますが、その数だけ遷移先の作成が必要になります。

図3 ステップフォームで2ページ目の回答内容により分岐する遷移イメージ

stepform_view_03.jpg

注意

  • ステップフォーム入力時に、ブラウザバックは動作しません。フォーム完了時遷移先でその他の遷移方法を設定しているフォームでブラウザバックした場合には、ブラウザバックエラー画面が表示されます。
    ブラウザバックエラー画面は、初期設定では「ブラウザバックは行えません。こちらより元の画面にもどってください。 」という画面で、文言はフォームのメッセージメニューで編集可能です。
  • フォーム完了時遷移先を指定すると、フォーム一覧画面の「公開URL」のボタンが「公開URLコピー」に変わります。
    ボタンを押してコピーしたURLを、ブラウザのアドレスバーに貼り付けてアクセスするようにしてください。
  • ステップフォームでは、1枚のフォームの入力を完了させるごとに情報が登録されます。最後のフォームまで入力完了しなくともレコード数が増えますのでご注意ください。
  • 最終ページのフォームの設問への入力有無により、最終ページまで回答したかどうかを見分けることができますので、定期的に不要なレコードを削除するなどの運用をご検討ください。 なお自動処理機能を利用して、定期的にレコードを削除することも可能です。設定方法は自動処理のマニュアルページをご参照ください。
  • 確認画面スキップの機能は、reCAPTCHA・画像投稿が有効な場合はご利用になれません。
  • フォーム完了時遷移先をサイト機能で作成したマイページに指定することも可能ですが、再度マイページにログインしてもらうためには重複キーの項目データとパスワードが必要です。メールでログインをご案内する場合は、ワンクリックログインもご利用になれます。

事前準備1

システム管理者が管理画面にログインし、システム>機能の有効化 で利用規約に同意し、有効化させます。
有効化の手順は[機能の有効化]をご確認ください。

※なぜ規約への同意が必要なのか
ステップフォームは、最初のページが登録フォーム、その後のページは更新フォームとなります。
フォームの完了画面を次のフォームに指定していくことで、複数のフォームをつないでいく形で作成します。
最終ページまで回答しなかった場合でも、途中までのページの回答内容がクライゼル内に保存されます。
最終ページへの回答入力に関わらず個人情報が保存されますので、ご理解の上、個人情報取得の同意規約をご用意いただくなどの対応をお願いいたします。
また、途中までの回答の場合であってもレコード数が増加します。あらかじめご了承の上ご利用ください。

事前準備2

更新フォームを作成するために、事前にデータベースを作成してください。
[データベース]>[データベース管理]>利用するデータベースの[項目の設定]で設定する項目には、以下の項目が必要です。
1.重複キーとなるデータベース項目
2.パスワード項目
3.ステップフォームの設問で利用するすべての設問のデータベース項目

データベースの作成については[データベースを設定する]をご確認ください。
データベース項目の設定については、[データベース項目を設定する]をご確認ください。

自動生成フォームでステップフォームを作成する

自動生成フォームで、2ページに分かれたフォーム、さらに2ページ目の回答内容によって分岐表示する3ページ目を追加する設定例をご説明します。
デザインフォームは本ページ内「デザインフォームでステップフォームを作成する」をご参照ください。

自動生成で1ページ目(登録フォーム)の作成

設定方法

1[フォーム]>[フォーム設定]>[フォーム一覧]>[フォームグループ新規作成] から自動生成タイプのフォームグループを作成します。その際に、「登録」「更新」フォームを追加してください。
詳細な作成手順は[フォームグループを作成する]をご確認ください。

stepform_01.jpg

2[フォーム一覧]>「タイプ」が「登録」の[デザイン]をクリックします。この登録フォームが1ページ目となります。
画面下部の「確認画面スキップ」タブで「有効」を選択して「次へ」をクリックします。
stepform_02.jpg

3[デザイン]画面下部の「フォーム完了時」タブで遷移先を「その他の遷移方法を設定」を選択し、「設定」をクリックします。stepform_03.jpg

4ポップアップウインドウで「遷移時の動作」を「フォームへログイン」を選択し、「遷移先詳細」を選択します。次へ→実行を押して、ポップアップウインドウを閉じ、元の画面で「次へ」をクリックします。
stepform_04.jpg

5[フォーム一覧]>「タイプ」が「登録」の[項目]をクリックします。
1ページ目のフォームに表示する項目を「必須」または「任意」に設定します。2ページ以降に表示させる項目は「無効」に、パスワードは「自動生成」にします。
画面の例では自動採番項目を重複キーにしているため、自動採番を「自動生成」にしています。
項目の設定についての詳細は、[項目]をご確認ください。
stepform_05.jpg

6[次へ]をクリックします。

自動生成で2ページ目(更新フォーム)の作成

設定方法

1[フォーム一覧]>タイプが「更新」の[デザイン]をクリックします。画面下部の「確認画面スキップ」タブで「有効」を選択して「次へ」をクリックします。

2[デザイン]画面下部の「戻り先URL」タブで「戻るを非表示」を選択し、「次へ」をクリックします。

stepform_06.jpg

3[フォーム一覧]>タイプが「更新」の[項目]をクリックします。2ページ目のフォームに表示する項目を「必須」または「任意」に設定します。パスワード(認証用)は「必須」にします。それ以外の項目はすべて「無効」にします。[次へ]をクリックします。
項目の設定についての詳細は、[項目]をご確認ください。stepform_07.jpg

4更新フォームの場合、初期設定ではフォーム入力画面遷移時に「登録情報を更新いたします。」といったメッセージが出ます。この文言を変更したい場合は、メッセージの修正をしてください。
メッセージの変更手順は[メッセージを設定する]をご確認ください。

5これで2ページに分かれたフォームの完成です。1ページ目の登録フォーム「公開URLコピー」ボタンからURLをコピーしてブラウザのアドレスバーに貼り付け、入力をご確認ください。 問題なければすべてのフォームの「有効」をチェックすると、公開できます。

自動生成で分岐フォーム~前のページの回答内容によって次に表示されるページを変更する

上までの例で言えば、図3のように、2ページ目(分岐元)で「職業:会社員」と回答した人にだけ、3ページ目(分岐先A)を追加して、業種と職種を聞きたい。それ以外の人には「アンケート完了です」という画面(分岐先B)を出したい場合の設定手順をご説明します。

設定方法

1[データベース]>[データベース管理]>利用するデータベースの[項目の設定]で、業種と職種を聞く項目を作成しておきます。

2サイトサービスなどで、「アンケート終了です」という画面を作成してURLを用意しておきます。これが分岐先Bとなります。

3[フォーム]>[フォーム設定]>利用するデータベースの[フォーム一覧]>フォームグループの[+]ボタンを押して、更新フォームを追加します。これが分岐先Aとなります。

stepform_08.jpg

43で作成した分岐先Aになる更新フォームの[デザイン]をクリックします。画面下部の「確認画面スキップ」タブで「有効」を選択して「次へ」をクリックします。
「戻り先URL」タブで「戻るを非表示」を選択し、「次へ」をクリックします。

53で作成した分岐先Aになる更新フォームの[項目]をクリックします。分岐先Aのフォームに表示する項目を「必須」または「任意」に設定します。パスワード(認証用)は「必須」にします。それ以外の項目はすべて「無効」にします。[次へ]をクリックします。
項目の設定についての詳細は、[項目を設定する]をご確認ください。

6分岐先A用の抽出条件を作成します。この例の場合は職業の項目で「会社員を含む」といった条件になります。抽出条件の作成方法は[抽出条件を設定する]をご確認ください。

7分岐を設定します。分岐元となる更新フォーム(この例で言えば2ページ目)[デザイン]画面下部の「フォーム完了時」タブで遷移先を「その他の遷移方法を設定」を選択し、「設定」をクリックします。

8ポップアップウインドウで「分岐数:2」を選択。抽出条件を6で作成した条件を指定。遷移時の動作を「フォームへログイン」を選択し、「遷移先詳細」に分岐先A(3ページ目)になる更新フォームを選択します。
いずれにも該当しない会員は「URLを指定」を選択し、遷移先詳細に2.で用意したURL(分岐先B)を入力します。次へ→実行を押して、ポップアップウインドウを閉じ、元の画面で「次へ」をクリックします。

stepform_09.jpg

9更新フォームの場合、初期設定ではフォーム入力画面遷移時に「登録情報を更新いたします。」といったメッセージが出ます。この文言を変更したい場合は、メッセージの修正をしてください。
メッセージの変更手順は[メッセージを設定する]をご確認ください。

10これで3ページに分かれたフォームの完成です。1ページ目の登録フォーム「公開URLコピー」ボタンからURLをコピーしてブラウザのアドレスバーに貼り付け、分岐元(2ページ目)の回答内容によって、3ページ目が分岐先A、Bを表示することをご確認ください。
問題なければすべてのフォームの「有効」をチェックすると、公開できます。

デザインフォームでステップフォームを作成する

デザインフォームで、2ページに分かれたフォーム、さらに2ページ目の回答内容によって分岐表示する3ページ目を追加する設定例をご説明します。
自動生成フォームは本ページ内「自動生成フォームでステップフォームを作成する」をご参照ください。

デザインで1ページ目(登録フォーム)の作成

設定方法

1[フォーム]>[フォーム設定]>[フォーム一覧]>[フォームグループ新規作成] からデザインタイプのフォームグループを作成します。その際に、「登録」「更新」フォームを追加してください。
詳細な作成手順は[フォームグループを作成する]をご確認ください。

2[フォーム一覧]>タイプが「登録」の[デザイン]をクリックします。確認画面の赤えんぴつアイコンをクリック。 「確認画面をスキップ」を有効にします。次へ→実行をクリックします。

stepform_d_01.jpg

3[フォーム一覧]>タイプが「登録」の[デザイン]をクリックします。完了画面の赤えんぴつアイコンをクリック。
「フォーム完了時の遷移先」を「その他の遷移方法を設定」を選択し、「設定」をクリックします。
stepform_d_02.jpg

4ポップアップウインドウで「遷移時の動作」を「フォームへログイン」を選択し、「遷移先詳細」を選択します。次へ→実行を押して、ポップアップウインドウを閉じ、元の画面で「次へ」をクリックします。
次へ→実行をクリックします。Android,iPhoneなど他のキャリアも同様に3-4の設定を行います。
stepform_d_03.jpg

5[フォーム一覧]>「タイプ」が「登録」の[項目]をクリックします。
1ページ目のフォームに表示する項目を「必須」または「任意」に設定します。2ページ以降に表示させる項目は「無効」に、パスワードは「自動生成」にします。
画面の例では自動採番項目を重複キーにしているため、自動採番を「自動生成」にしています。
項目の設定についての詳細は、[項目を設定する]をご確認ください。
stepform_05.jpg

6各画面のソースを設定します。デザインのメニューで、各画面の赤えんぴつアイコンをクリック。ソースを登録して次へをクリックします。画面のソースの設定方法については、[フォームのデザインを設定する]をご確認ください。
stepform_d_04.jpg

デザインで2ページ目(更新フォーム)の作成

設定方法

1[フォーム一覧]>タイプが「更新」の[デザイン]をクリックします。確認画面の赤えんぴつアイコンをクリック。「確認画面をスキップ」を有効にします。次へ→実行をクリックします。Android,iPhoneなど他の画面も同様に設定します。

2[フォーム一覧]>タイプが「更新」の[項目]をクリックします。2ページ目のフォームに表示する項目を「必須」または「任意」に設定します。パスワード(認証用)は「必須」にします。それ以外の項目はすべて「無効」にします。[次へ]をクリックします。
項目の設定についての詳細は、[項目を設定する]をご確認ください。

stepform_d_05.jpg

3更新フォームの場合、初期設定ではフォーム入力画面遷移時に「登録情報を更新いたします。」といったメッセージが出ます。この文言をs変更したい場合は、メッセージの修正をしてください。
メッセージの変更手順は[メッセージを設定する]をご確認ください。

4各画面のソースを設定します。デザインのメニューで、各画面の赤えんぴつアイコンをクリック。ソースを登録して次へをクリックします。Android,iPhoneなど他の画面も同様に設定します。画面のソースの設定方法については、[フォームのデザインを設定する]をご確認ください。

5これで2ページに分かれたフォームの完成です。1ページ目の登録フォーム「公開URLコピー」ボタンからURLをコピーしてブラウザのアドレスバーに貼り付け、入力をご確認ください。 問題なければすべてのフォームの「有効」をチェックすると、公開できます。

デザインで分岐フォーム~前のページの回答内容によって次に表示されるページを変更する

上までの例で言えば、図3のように、2ページ目(分岐元)で「職業:会社員」と回答した人にだけ、3ページ目(分岐先A)を追加して、業種と職種を聞きたい。それ以外の人には「アンケート完了です」という画面(分岐先B)を出したい場合の設定手順をご説明します。

設定方法

1[データベース]>[データベース管理]>利用するデータベースの[項目の設定]で、業種と職種を聞く項目を作成しておきます。

2サイトサービスなどで、「アンケート終了です」という画面を作成してURLを用意しておきます。これが分岐先Bとなります。

3[フォーム]>[フォーム設定]>利用するデータベースの[フォーム一覧]>フォームグループの[+]ボタンを押して、更新フォームを追加します。これが分岐先Aとなります。

stepform_d_06.jpg

43で作成した分岐先Aになる更新フォームの[デザイン]をクリックします。確認画面の赤えんぴつアイコンをクリック。確認画面をスキップ「有効」を選択します。次へ→実行をクリックします。各キャリアごとに同じように設定します。

53で作成した分岐先Aになる更新フォームの[項目]をクリックします。分岐先Aのフォームに表示する項目を「必須」または「任意」に設定します。パスワード(認証用)は「必須」にします。それ以外の項目はすべて「無効」にします。[次へ]をクリックします。
項目の設定についての詳細は、[項目を設定する]をご確認ください。

6分岐先A用の抽出条件を作成します。この例の場合は職業の項目で「会社員を含む」といった条件になります。抽出条件の作成方法は[抽出条件を設定する]をご確認ください。

7分岐を設定します。分岐元となる更新フォーム(この例で言えば2ページ目)[デザイン]画面で、完了画面の赤えんぴつアイコンをクリック。「フォーム完了時の遷移先」を「その他の遷移方法を設定」を選択し、「設定」をクリックします。各キャリア同様に設定します。

8ポップアップウインドウで「分岐数:2」を選択。抽出条件を6で作成した条件を指定。遷移時の動作を「フォームへログイン」を選択し、「遷移先詳細」に分岐先A(3ページ目)になる更新フォームを選択します。
いずれにも該当しない会員は「URLを指定」を選択し、遷移先詳細に2.で用意したURL(分岐先B)を入力します。次へ→実行を押して、ポップアップウインドウを閉じ、元の画面で「次へ」をクリックします。

stepform_09.jpg

9更新フォームの場合、初期設定ではフォーム入力画面遷移時に「登録情報を更新いたします。」といったメッセージが出ます。この文言を変更したい場合は、メッセージの修正をしてください。
メッセージの変更手順は[メッセージを設定する]をご確認ください。

10これで3ページに分かれたフォームの完成です。1ページ目の登録フォーム「公開URLコピー」ボタンからURLをコピーしてブラウザのアドレスバーに貼り付け、分岐元(2ページ目)の回答内容によって、3ページ目が分岐先A、Bを表示することをご確認ください。
問題なければすべてのフォームの「有効」をチェックすると、公開できます。