設計情報

投稿者: SPIRERS ナレッジ向上チーム 2022年12月27日 (火)

動画で学ぶ SPIRAL ver.2 基本機能 ~【サイト管理】フォームブロック ~

SPIRAL ver.2の主要機能であるサイト管理の中でも フォームブロック をピックアップしてお伝えします。
また、最初にブロックの概要についても説明いたします。

変更・改訂履歴

  • 改訂

    記事フォーマットの変更

  • 改訂

    「参照フィールド入力項目として使用する際の注意点」「参照フィールド自動登録 引用(認証レコード値)設定」を追加

動画

ブロック説明

動画を見る
※ブロックについて説明している部分(0:17~)へジャンプします。
ブロックとは
ブロックはページに設置することで機能する、フォームや一覧表などのパーツのことです。
フォームブロックやレコードリストブロック、フリーコンテンツブロックなど、様々なWebページを作成できるよう幅広いブロックを用意しています。

フォームブロック説明

動画を見る
※フォームブロックについて説明している部分(0:44~)へジャンプします。
フォームブロックとは
フォームブロックは全部で6種類あります。
ブロック名 動作 利用用途
登録フォームブロック DBにレコードを登録する 会員登録フォーム
お問い合わせフォーム
セミナー申込フォーム
など
更新フォームブロック DB内の特定のレコードを更新する 会員情報変更フォーム
セミナー情報変更フォーム
など
削除フォームブロック DB内の特定のレコードを削除する 会員退会フォーム
セミナー情報削除フォーム
など
ログインフォームブロック 認証エリアにログインする ログインフォーム
パスワード再登録フォームブロック 認証エリア ログイン時のパスワードを再発行する パスワード再登録フォーム
レコード照合フォームブロック 入力するデータの値がDB内のレコード情報と一致した場合、有効期限のある認証パラメータ付きのURLを記載したメールを自動送信する 情報変更依頼フォーム
会員退会依頼フォーム
メールマガジン配信停止依頼フォーム
など
※パスワードを使用せず、認証エリア内ページにアクセスさせたい場合に利用

フォームブロック作成

動画を見る
※フォームブロック作成について説明している部分(2:32~)へジャンプします。
フォームブロック作成
ブロック作成は、
ブロックメニューからブロックを先に作成して、ページに設置する方法 と
ページメニューから該当ページに進み、ブロックを作成し設置する方法 の2通りあります。

作成したいブロックを選択し、+ボタンをクリックして、表示名と任意入力ですが識別名を入力します。
会員限定の登録フォームブロックや、情報変更などの更新フォームブロックのように、認証エリア内のページに設置するブロックの場合は、認証エリアを選択します。

設定方法は2つあります。
ビジュアル設定 ボタン操作でフィールドの追加やデザイン指定を行う方法
ソース設定 HTML編集やCSS設置など、自由にカスタマイズする方法
フォームブロック作成後に詳細設定を行います。
プレビュー 画面ごとのプレビューを確認することが可能
登録フォーム 入力画面や確認画面、完了画面などの各画面の設定やメールアクション、自動登録設定が可能
スタイル
(ソース設定の場合は、CSS)
デザイン指定が可能
JavaScript JavaScript専用の設置場所
共通 全フィールド共通のエラーメッセージや入力必須ラベルなどの設定が可能
【ご注意】
参照フィールドを入力項目として使用できるのは、ソース設定の登録フォームブロック、更新フォームブロックのみです。
ブロックは単体では機能しませんので、ページに設置して完了です。
自動登録とは
自動登録は、予め指定した値をDBへ自動登録するための機能です。
固定値 フォームブロックから登録した際、予め指定した値をDBへ自動登録することが可能
引用(認証レコード値) 認証エリアに設置しているフォームブロックから登録した際、認証レコード値をDBへ自動登録することが可能
引用(任意値) フォームブロックから登録した際、該当フィールドにURL末尾に付与されたパラメータ値をDBへ自動登録することが可能
【ご注意】
入力画面で使用しているフィールドには、自動登録設定はできません。
補足
同一ブロックを複数のページに設置することができ、全ページ共通で表示させることも可能です。
また、ブロックの他にこちらの共通ソースではサイト内の全ページ共通で参照する「head」「CSS」「JavaScript」を指定し、サイト横断的に共通要素を適用することができます。

なお、各要素が読み込まれる順番は下記です。
head 共通ソース → ページ
CSS、JavaScript 共通ソース → ページ → ブロック

参考リンク

最後に

登録フォームブロックへのフィールドの追加方法やデザイン指定方法、などについては、次の動画でビジュアル設定・ソース設定ごとに説明いたします。
併せてフォームブロックの注目ポイントもご紹介しますので、是非ご覧ください。
解決しない場合はこちら コンテンツに関しての
要望はこちら