フォーム管理の概要

フォーム管理機能を使用すると、WEBサイトにお問い合わせや資料請求などのフォームを簡単に設置できます。フォームの設定やデザインをカスタマイズし、送信されたデータを管理できます。

以下の特徴があります。

Webサイトにフォームを設置
フォームエディターで構成を直感的に編集
フォームのデザインをカスタマイズ可能
フォームから送信されたデータを管理

機能の有効化

スキーマでテーブルごとに有効化できます。enableForm プロパティを true に設定します。formOptions プロパティでフォームのオプション設定ができます。

orizm.config.ts


import { defineConfig } from "@orizm/cli/config";
 
export default defineConfig({
  tables: {
    form: {
      columns: {
        key: {
          type: "string",
          required: true,
          pattern: "^[0-9a-z-]+$",
        },
        displayName: {
          type: "string",
          required: true,
        },
        body: {
          type: "json",
        },
      },
      indexes: [{ columns: ["key"], unique: true }],
      enableForm: true,
      formOptions: {
        submissionColumns: {
          status: {
            type: "string",
            pattern: /^(open|in_progress|closed|trashed)$/,
            default: "open",
            required: true,
          },
          memo: {
            type: "string",
          },
        },
      },
    },
  },
});

この form テーブルには、フォームに関するメタデータを保存します。key カラムにはフォームを特定するための一意なキーを設定し、body カラムにはフォームの構造をJSON形式で保存します。

submissionColumns

フォーム機能では、フォームから送信されたデータ（以下、受信データ）も管理できます。これを利用してCMSに受信箱機能を実装できます。

formOptions.submissionColumns で受信箱に任意のカラムを追加できます。先の例では、受信データを管理するための status と memo カラムを追加しています。

statusカラム: 受信データのステータスを保存する
memoカラム: 受信データに対するメモを保存する

予約カラム

フォーム管理機能を有効化すると、テーブルに予約カラムが追加されます。

formSchema

フォームの項目やバリデーションルールなどのスキーマです。JSON形式で保存されます。

フォームエディターと組み合わせて使用します。

次のステップ

フォーム管理機能を使うには、フォームエディターを導入する必要があります。次のステップでは、フォームエディターの導入方法と実装方法を説明します。

フォームエディター