ver.2サポートサイト

フォームブロック

機能概要

フォームブロック管理では、ページに依存せずにフォームブロックの作成・管理・編集が行えます。
1つのDBから複数のフォームを発行することが可能です。登録されたデータはフォーム発行元のDBに登録されます。

※ フォームの作成手順はサイト機能の全体像の操作画面の項目をご参照ください。

※ 作成したフォームブロックはページに設置することで、機能します。

※ ページ作成時/編集時にフォームを作成することも可能です。詳しくはページ機能をご参照ください。

※ フォームからDB内の特定のレコード更新/削除をする場合は、更新/削除フォームブロックの設定が必要です。
更新/削除フォームブロックの作成手順は更新フォームブロック/削除フォームブロックをご参照ください。

機能仕様

ページとブロックの関係

SPIRAL ver.2ではサイトの中にページを、ページの中にブロックを配置します。

ブロックは複数のページに設置可能です。

その為、同一のフォームを複数ページに配置したい場合は、それぞれにフォームを作成することなく、1つのフォームブロックとして共通管理することができます。

その為、同一ブロックを異なるページに設定している場合、ブロック管理もしくはページ側から当該ブロックを編集、削除した際は、設定している他のページ内の同一ブロックも当該編集や削除が適用されます。

フォームブロック削除時の注意点

・フォームブロック自体の削除は、ブロック管理からのみ行えます。

・ブロック管理からフォームブロックを削除した場合、当該ブロックを設定していたページを閲覧する際、当該ブロックは表示されません。

・ページ編集画面上においては、ビジュアル設定でのフォームブロック、ソース設定上でのフォームタグは残ったままとなります。但し、当該ページの編集時に、そのブロックが残っているとエラーとなります。削除済みブロックを除外して保存してください。

各ステップのパラメータ付与

SPIRAL ver.2ではページの中にフォームブロックを配置しますが、登録フォーム/更新フォームブロックに限り、

ブロックやブロックのステップ情報を識別するパラメータを自動付与いたします。

これにより、Google Analyticsなどのアクセス解析ツール上で、訪れたページのビュー数などを計測しやすくなり、ページのアクセス解析に役立てます。

パラメータ付与対象ブロック

登録/更新フォームブロックにパラメータが付与されます。

URL表示形式

URLの表示形式は以下の仕様となります。

ページURL?_{[フォーム種別]登録:ifbs, 更新:ufbs}-{フォーム識別名}=s{ステップの順番}_{ステップ表示名}
例）https://pipedbits-corporatesite.spiral-site.com/page1?_ifbs-form1=s1_Step1

※ステップ表示名にはマルチバイト文字が使用可能です。ブラウザのアドレスバー上に表示されるステップ表示名がURLエンコードされるかはブラウザの仕様に依存いたします。

※完了ステップの場合、フォーム識別名以降の表示が=completionと表示されます。

UI：フォームブロック作成/編集

ブロック一覧

サイト一覧＞テスト環境／本番環境の各ブロックメニューから一覧がご確認頂けます。

表示名をクリックすると各フォームの詳細設定画面が表示されます。

ブロックタイプを切り替える場合は、プルダウンから対象ブロックを選択してください。

ビジュアル設定とフォーム設定で作成/編集方法が異なります。

それぞれ以下のコンテンツをご確認ください。

・フォームブロックのビジュアル設定

・フォームブロックのソース設定

プレビュー

保存前にブラウザー画面での表示をプレビューで確認できます。

左のプルダウンからプレビューするページを選択できます。

プレビューサイズの変更

ブラウザ画面サイズを横幅x縦幅ピクセルで入力できます。

レスポンシブ表示の確認等に使用します。

エラーメッセージの表示確認

各種エラーメッセージの表示確認ができます。

共通タブ

全フィールド共通の、エラーメッセージ、入力必須ラベル等の設定ができます。

デフォルトメッセージは予め作成したデフォルトメッセージを選択できます。

詳しくはデフォルトメッセージ設定をご参照ください。

メールアクション

メールアクション機能を使うと登録者宛の登録完了メールや、運営側への登録通知メールを送信することができます。

UI：複数ステップ設定

ステップ設定から入力ステップ、確認ステップを追加することができます。

アンケートフォーム等でアンケート入力と個人情報入力でページを分けたいとき等にご利用いただけます。

1．ステップ設定

フォームブロック編集モーダル左の「ステップ設定」をクリックします。

2．ステップ設定モーダル

現在のステップ設定モーダルが開きます。

左上の＋ボタンからステップを追加できます。また既存のステップの名称も変更可能です。

※追加/変更後の画面

確認ステップは入力ページが複数の場合でも「対象入力ステップ」からひとつのページにまとめることができます。

3．複数ステップページの設定

追加したステップページは通常のフォームブロックと同様に編集可能です。

ステップフロー

フォームブロックのビジュアル設定にて、入力ステップや確認ステップなど、現在のステップ箇所を表示するパーツを追加することができます。

複数の入力ステップを使用するお問い合わせフォーム等、インターネットユーザに対して、現在のステップ箇所を分かりやすく案内するデザインをマウス操作で設定、ご利用いただけます。

1．ステップ設定

フォームブロック編集モーダル左の「ステップ設定」をクリックします。

ステップ設定モーダルが開きます。

フローパーツをクリックすると、ステップフローパーツの設定画面が表示されます。

2.ステップフローモーダル

ステップフロー上に表示するステップ名のラベル名を設定できます。

ラベル名を設定しない場合、ステップ設定のステップ名がそのまま反映されます。

ステップフローで使用するデザインタイプを指定します。

デザインタイプ設定

3.ステップフローモーダル

ステップフローのデザインはステップ設定から変更できます。

変更できるデザインは、「幅広」または「幅狭」と同じデザインから変更可能です。

完了

完了時の動作

左メニューの歯車アイコンから完了時の動作を設定できます。HTMLだけではなく別ページへのリダイレクト設定なども可能です。

完了画面表示

同フォームブロック内にある完了ページを表示します。

レコード値挿入

フォームで入力した値を完了画面に表示させる機能です。

「レコード値挿入」ボタンをクリックすると同フォームで使用しているDBの各フィールドが表示されます。

※日時型フィールドおよびファイル型フィールドは使用することができません。

ソース設定の例：選択したフィールドが完了画面のHTMLソースにThymeleafタグで挿入されます。

ビジュアル設定の例：選択したフィールドが{{@DB識別名.フィールド識別名}}の形で挿入されます。

実際の完了画面での表示例です。入力した名前が完了画面で表示されています。

リダイレクト

外部ページに完了画面をリダイレクトします。

サイト内ページ

サイト内のページを指定できます。

ページIDで紐づけられているので、ページ側で親ページやページ識別名が変更された場合でも設定は関連付けされます。

エラー

入力/確認ステップページと同様に完了/エラーページの作成ができます。(↓ビジュアル設定の場合の表示)

締切

フォーム登録に締切設定を行うことができる機能です。件数と期間で設定することができます。

締切ページの設定

登録期間以外の締切状態のコンテンツを設定できます。

フォーム設定タブ（ビジュアル設定の場合）またはHTMLタブ（ソース設定の場合）の左メニュー「締切」から設定します。

締切設定

左メニュー「締切」の歯車メニューから締切の詳細を設定できます。

件数で締切

指定した登録件数以上になった際にフォームにアクセスすると締切ページが表示されます。

登録件数はテスト環境と本番環境でそれぞれカウントされます。

※同じタイミングに複数の登録が発生する場合などは、締切件数を超えて登録される場合があります。

期間で締切

指定した期間（開始日、終了日）にフォームにアクセスすると締切ページが表示されます。

１）登録期間

　　フォーム登録を受け付ける期間を指定します。開始のみ、終了のみの設定も可能です。

２）登録期間のタイムゾーン

　　指定した登録期間のタイムゾーンを指定することで、海外用フォームなどを準備する際に現地時刻での締切設定が可能です。

その他

• • HTML/CSS/JSそれぞれで入力できる文字数の上限値はこちらをご参照ください。
  • 生成されるHTMLページは専用の<div><form>タグで囲まれます。
  • 画像のアップロード機能は提供しておりません。別サーバーにアップ後https://で始まる絶対パスで記述してください。