複数ページにまたがるフォーム(ステップ登録)を作成する

スパイラルで作成できるフォームは通常、入力ページは1つ(1ページ内に全ての項目を表示)ですが、以下のように複数のページに分けてステップ形式で入力させるようなフォームを設定することができます。

(イメージ)

項目数が多いアンケートフォームや、入力情報をカテゴリ別に分けたい場合は、複数のフォームを設定し、それらをつなげることで、複数ページにわたったフォームにすることができます。

 DBには予め、入力させたい項目に応じたフィールドを設定しておいてください(DBは分ける必要なく、1つ設定すればOKです)。

1. ページの分だけフォームを作る

まず分けたいページの分だけフォームを作成します。入力ページを3つに分けたい場合は3つフォームを作成します。

各フォームにおける「使用フィールド」は、そのページで表示したいフィールドのみ「入力項目として使用する」にし、表示しないフィールドは「使用しない」にします。

  • キーフィールドを設定する必要がある場合(更新型フォームなど)は、すべてのフォームにおいて「特殊入力:値を引き継ぐ」に設定し、情報を引き継ぐようにします。
  • 登録日時やユーザーエージェントなど、「特殊入力」で自動取得設定をするフィールドについては、最後のページにあたるフォームにおいてのみ設定すると良いでしょう。

2. 入力ページの設定

必要に応じて、前のページへ戻るためのボタンを設置します。

(イメージ)

サンプルコード:前のステップの入力ページに戻るボタン

<input class="submit" type="submit" onClick="var cnf=document.createElement('input');cnf.type='hidden';cnf.name='confirm';cnf.value='true';document.forms[0].appendChild(cnf);document.forms[0].SMPFORM.value='XXXXXXXXXXXXXXXX';return true;" name="SMPFORM_BACK" value="前ページへ戻る">

上記の「XXXX…」には、前ページにあたるフォームのURLの末尾 “SMPFORM=“ 以降を入れます。

例えば、2ページ目に設置する戻るボタンには、1ページにあたるフォームのURL末尾(“SMPFORM=“以降)を入れます。

ちなみに、次のページへ進むためのボタン(次へボタン)は、以下のような既存HTMLページソースにあるコードでOKです。

<input class="submit" type="submit" name="submit" value="次へ">

3. 確認ページの設定

1ページ目など、最終ステップ以外のページにあたるフォームにおける確認ページは「使用しない」よう設定します。

最終ステップにあたるフォームにおける確認ページでは、各ページで入力してきたフィールドの差替えキーワード($~~~$)を設置することで、入力情報を確認することができます。
確認ページのHTMLページソース上に直接記述してください。

※ 各フィールドの差替えキーワードは、「デフォルトデザイン」ボタンよりダウンロードできるHTMLファイルにて確認することができます。

4. サンキューページの設定

1ページ目など、最終ステップ以外のページにあたるフォームにおけるサンキューページは、「リダイレクト先」にて「登録情報を引き継ぎ、次の登録ページへリダイレクト」にチェックし、次ページにあたるフォームを選択します。

この設定をすることで、各ページでの入力情報を引継いでいくことができます。
最終ステップにあたるフォームにおけるサンキューページは通常どおり、スパイラル内サンキューページを使用するか、外部サンキューページを指定してください。

以上、ひととおり必要な設定が完了しました。1ページ目のフォームURLにアクセスし、動作検証をしてみてくださいね。

ちなみに、今回は複数のフォームを作りそれらをつなぎ合わせることで複数ページにわたるフォームを作成する方法をご案内しましたが、こちらのデモサイトのような、一問一答形式のアンケートが作成できるステップアンケートという機能もあります。
ステップアンケートでは、回答した内容に応じて次の質問を変えるような分岐設定をすることができるので、回答者の属性に応じた細かい設問設定をしたい場合などに便利です。是非触ってみてくださいね。

▼参考リンク(スパイラル サポートサイトページへ遷移します)
ステップアンケート