[Oracle Cloud] Oracle Content Management でフォームを作成・公開する

:::note info 
この記事は以下の技術ブログ（英語）の内容を元に作成しました
*[Design and publish forms in Oracle Content from the Site Builder editor](https://blogs.oracle.com/content-management/post/design-forms-in-oracle-content-from-site-builder-editor) （Oracle Content Management Blog)*
:::

# はじめに

Webサイトを訪問したユーザーに何らかの登録や申し込みをしてもらう場合、**フォーム**を使います。例えば以下のようなシーンでフォームを利用します。

- お問い合わせ
- 資料ダウンロード
- メールマガジンの購読
- イベントやセミナーの参加受付
- キャンペーンへの登録受付
- アンケートの収集
    など

Oracle Cloudにはフォーム作成機能を提供するサービスが複数あり、これらを **Oracle Content Management(OCM)** と組み合わせて利用できます。どのようなクラウドサービスが提供されているのか？どのシーンで利用すべきか？などは、以下のブログ記事（英語）で紹介されています。

- *[Engaging Users with Forms on your Oracle Content Websites](https://blogs.oracle.com/content-management/post/engaging-users-with-forms-on-your-websites)（Oracle Content Management Blog)*

また、OCMは3rdパーティのフォーム作成サービスとの組み合わせにも対応できます。以下の記事では、**Googleフォーム**で作成した問い合わせフォームを、OCMで作成したサイトに配置する方法を紹介しました。

https://qiita.com/nakasato310/items/b3b45402eb6371c844a7

# この記事で紹介すること

この記事では、以下3点を実現する **『サンプル実装』** を紹介します

1. 他社及び自社のクラウドサービスを利用せず、**OCM製品標準のアセット登録・編集画面をカスタマイズ**したフォーム作成機能を実現する
2. 作成されたフォームはリポジトリ内に**アセット**として登録・管理し、OCMの**サイト編集画面（Site Builder）** を利用してWebサイト上への配置・公開を実現する
3. Webサイト上のフォームから入力された内容は、**OCMのリポジトリでアセットとして登録・管理** する

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/87ddbb0b-837c-1ee5-5e32-6208c9f79706.png)


# フォーム作成ライブラリの利用

今回、フォーム作成機能を実現するライブラリとして ドラッグ&ドロップ操作でフォーム作成が可能な **JQueryベースの`formBuilder`** を利用します。formBuilderをOCMのUIに組み込むことで、フォーム作成機能を実現します

https://formbuilder.online/


# 1. 事前準備・条件

- OCMインスタンスが **ライセンス・タイプ=`Premium Edition`** で作成されていること（作成手順は[こちら](https://oracle-japan.github.io/ocitutorials/content-management/create_ocm_instance_IdentityDomain/)）

- OCMを利用するユーザーに少なくとも以下4つのアプリケーションロールが付与されていること（付与手順は[こちら](https://oracle-japan.github.io/ocitutorials/content-management/create_identitydomain_group_user/)）
    - **`CECEnterpriseUser`**
    - **`CECRepositoryAdministrator`**
    - **`CECContentAdministrator`**
    - **`CECDeveloperUser`**

- 以下2つのチュートリアルを実施し、OCMのアセット管理機能、サイト機能の基本的な利用方法を把握していること
    - [Oracle Content ManagementをHeadless CMSとして使ってみよう【初級編】](https://oracle-japan.github.io/ocitutorials/content-management/41_asset_headless/)
    - [Oracle Content ManagementをWebコンテンツ管理(Web CMS)として利用しよう【初級編】](https://oracle-japan.github.io/ocitutorials/content-management/62_webcms/)

# 2. アセット・タイプの作成

作成するフォームを管理するアセット・タイプと、Webサイト上に配置されたフォームから入力された内容を保管するアセットタイプ、の2つのアセットタイプを作成します。今回はどちらも**コンテンツ・タイプ**として作成します

## 2.1 作成したフォームを管理するコンテンツ・タイプ **`MK Form`** を作成する

1. OCMにサインインし、**ADMINISTRATION:コンテンツ→アセット・タイプ** を開きます
1. **作成**をクリックし、以下の通りに入力します
    - 名前: **`MK Form`** （空白は`-`に自動変換され、`MK-Form`と表示）
    - 表示名: MK Form （※自動入力）
    - アセット・タイプの選択: **`コンテンツ・アイテム・タイプの作成`**
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/5467f17a-7775-cc4b-48ce-3d2eab73e5e6.png)
1. 属性を定義します。以下の通りに作成し、**保存**します
    |データフィールド|表示名|名前|必須|データフィールドの外観|説明|
    |-|-|-|-|-|-|
    |埋め込みコンテンツ|Form Definition|form_definition|必須|テキスト領域|formBuilderで作成したフォーム定義(JSON形式)を保管|
    |テキスト|URL|url|必須|単一テキストボックス|フォーム入力された内容を外部サービスに送信するエンドポイントを保管|
    |テキスト|Response|response| |単一テキストボックス|フォーム入力したユーザーに表示される応答メッセージ|
    |日付|Expiration Date|expiration_date| |日付ピッカー|(※未使用)|
    |大きいテキスト|Form HTML|form_html||テキスト領域|Form DefinitionのHT​​ML形式バージョン。 Form Definitionフィールドが更新されるたびに更新されます|

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/b1384440-3902-ee06-3086-bb4aa004c888.png)

## 2.2 サイト訪問者がフォーム入力した内容を管理するコンテンツ・タイプ `FormData`を作成する

1. **作成**をクリックし、以下の通りに入力します
    - 名前: **`FormData`** （空白は`-`に自動変換され、`MK-Form`と表示）
    - 表示名: FormData （※自動入力）
    - アセット・タイプの選択: **`コンテンツ・アイテム・タイプの作成`**
      ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/4ff88406-ee1e-bc1a-487c-015498beb809.png)

1. 属性を定義します。以下の通りに作成し、**保存**します

    |データフィールド|表示名|名前|必須|データフィールドの外観|説明|
    |-|-|-|-|-|-|
    |テキスト|Form Name|form_name|必須|単一テキストボックス|サイト訪問者がフォーム入力したフォームの名前を登録|
    |埋め込みコンテンツ|Form Data|form_data|必須|テキスト領域|サイト訪問者がフォーム入力した内容をJSON形式で登録|

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/e24ecbc1-eb1b-2935-91cf-6986c4be4b04.png)

## 2.3 確認

2つのコンテンツ・タイプ`MK Form`と`FormData`が作成されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/5e3e8827-c64c-3db4-9236-085dcc3393a0.png)

# 3. リポジトリの作成

リポジトリを2つ作成します。
1つはコンテンツ・タイプ`MK Form`のアセット（=formBuilderで作成したフォームを管理するコンテンツ・アイテム）を保管する**アセットリポジトリ**、もう1つはコンテンツ・タイプ`FormData`のアセット（=サイト訪問者がフォーム入力した内容を管理するコンテンツ・アイテム）を保管する**ビジネスリポジトリ**をそれぞれ作成します

## 3.1 アセットリポジトリ`MKFormRepo`の作成

1. **ADMINISTRATION:コンテンツ→リポジトリ** を開きます
1. **作成→アセット・リポジトリ**を選択します
1. 以下の通りに入力・設定します。その他の項目はデフォルトのままとします。最後に **保存** します
    - 名前: **`MKFormRepo`**
    - アセット・タイプ: **`MK Form`** のみを選択
    - デフォルト言語: **日本語 (ja)**
      ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/ce130f50-9497-52d1-59a6-64ad2a86206d.png)

## 3.2 ビジネスリポジトリ`FormDataRepo`の作成

1. **作成→ビジネス・リポジトリ**を選択します
1. 以下の通りに入力・設定します。その他の項目はデフォルトのままとします。最後に **保存** します
    - 名前: **`FormDataRepo`**
    - アセット・タイプ: **`FormData`** のみを選択
    - デフォルト言語: **日本語 (ja)**
      ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/2b5be7bb-c441-3819-138b-77ffc959cc49.png)

1. 作成した **`FormDataRepo`** の **リポジトリID** を記録します。`FormDataRepo`を開き、右パネルを開き **API** タブをクリックします。**リポジトリID** をメモします
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/5965d707-f198-fb46-44f2-32c2fc83a5a4.png)




## 3.3 確認

2つのリポジトリ`MKFormRepo`と`FormDataRepo`が作成されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/3cf7d884-f766-9bc9-830b-109e2ac9986e.png)


# 4. コンテンツフォームの作成

コンテンツ・タイプ`MK Form`のデフォルトのコンテンツ・アイテム作成画面は、以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/48cf4b0a-aa2e-43f7-c2a9-22b6b0c1dd3c.png)

この`MK Form`のコンテンツ・アイテム作成画面をカスタマイズして、フォーム作成画面を実現します。具体的には、**カスタム・コンテンツ・フォーム（コンテンツフォーム）** を作成し、それを`MK Form`の **コンテンツ・アイテム・エディタ** として指定します。コンテンツフォームについては製品ドキュメントをご参照ください。

- [Develop Custom Content Forms](https://docs.oracle.com/en/cloud/paas/content-cloud/solutions/develop-custom-content-forms.html) （※英語原本）
- [カスタム・コンテンツ・フォームの開発](https://docs.oracle.com/cd/E83857_01/paas/content-cloud/solutions/develop-custom-content-forms.html) （※日本語翻訳版）

今回、作成するコンテンツフォームのサンプルコードは、[オリジナルのブログ](https://blogs.oracle.com/content-management/post/design-forms-in-oracle-content-from-site-builder-editor)の著者の[Githubリポジトリ](https://github.com/monte-kluemper/ocm-formbuilder/tree/main/Form-Builder)で公開されています。ここでは、このサンプルコードをそのまま利用します。

なお、サンプルコードの解説は、[オリジナルのブログ](https://blogs.oracle.com/content-management/post/design-forms-in-oracle-content-from-site-builder-editor)をご確認ください

## 4.1 コンテンツフォームの作成

1. **開発者→すべてのコンポーネントの表示**を開きます
1. **作成→コンテンツ・フォームの作成**を選択します
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/a238411c-021c-43a0-2fe3-16bc55fcc05f.png)
1. 名前に **`Form Builder`** と入力します（空白は`-`に自動変換され、`Form-Builder`と表示
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/9218710a-6a48-efae-05dc-f0650ccaa9c0.png)
1. その他はデフォルトのままとし、**作成**をクリックします
1. コンテンツフォーム **`Form-Builder`** が作成されます 
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/2f853411-12e9-f50b-f7db-55a3e8f776a8.png)

## 4.2 コンテンツ・フォームの開発

コンテンツフォーム **`Form-Builder`** は、以下のようなフォルダ構成となります。

```:フォルダ構成
Form-Builder 
├── assets
│   ├── images
│   │   ├── warning.svg
│   └── edit.html
├── appinfo.json
└── _folder_icon.png
```

この中の **`edit.html`** が、コンテンツ・アイテムの作成画面をカスタマイズするときに編集するhtmlファイルです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/b01c35f9-fb02-2302-ce3f-6fa6ff464a40.png)

1. OCMの **assets>`edit.html`** をダウンロードし、任意のエディタで開きます。
1. エディタで開いた`edit.html`のコードをすべて削除します。
1. [Githubリポジトリ上のedit.html](https://github.com/monte-kluemper/ocm-formbuilder/blob/main/Form-Builder/assets/edit.html)のコードをすべてコピーし、ローカルの`edit.html`に貼り付け、保存します
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/ddf24011-e54b-f28e-e15b-3f531cd051e8.png)
1. OCMの **開発者 > コンポーネント > Form-Builder > assets > `edit.html`** を選択し、**新規バージョンのアップロード**をクリックします   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/a0215f8f-d856-b0cf-8cc9-c9839fd71e1b.png)
1. ローカルで編集した **`edit.html`** を指定します。新規バージョン（ここでは`v2`）として **`edit.html`** が登録されます
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/721dd1e8-db1d-0d32-34cf-6067acdc65ca.png)
1. 開発者 > コンポーネントに戻り、**`Form-Builder`** を選択し、**プロモート**を実行します
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/a7b1afe7-bb8e-e385-d270-ed3bb9ef9665.png)


## 4.2 コンテンツフォームをMK Formのコンテンツ・アイテム・エディタとして指定

作成したコンテンツフォーム`Form-Builder`を、MK Formのコンテンツ・アイテム・エディタとして指定します

1. **ADMINISTRATION:コンテンツ→アセット・タイプ→`MK Form`** を選択します
1. **コンテンツ・レイアウト** タブをクリックします
1. **コンテンツ・アイテム・エディタの選択** で **`Form-Builder`** を選択し、**保存**します
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/2452ef29-3463-5c3e-d257-df69322e93cd.png)

## 4.3 確認

`MK Form`コンテンツアイテムを新規作成します。作成画面は`Form Builder`コンテンツフォームでカスタマイズされているため、アイテム入力項目とフォーム作成画面が1つのUI上に表示されます

1. **アセット→MKFormRepo** を開きます
1. **作成→新規コンテンツ・アイテムの作成します** を選択します
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/b47e71ba-91de-5ef6-10fe-b5e63703bbe7.png)
1. コンテンツ・タイプで **`MK Form`** を選択し、**OK**をクリックします
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/ed73c93a-3b3c-0c1b-f954-b78eeb7f8c69.png)
1. コンテンツアイテムの作成画面が開きます。作成画面下部に **フォーム作成UI** が表示されることを確認します
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/9cfa506d-1641-2279-c607-e82403b272c5.png)

1. `MK Form`コンテンツアイテムを1件作成します。以下の通りに入力します
    - Name: **ニュースレターの購読**
    - Description: （任意）
    - Form Action URL: **`https://ocm/<FormDataRepoのリポジトリIDを設定>`**
    - Response Message: (任意）
    - Language: **日本語 (ja)**
      ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/6d5c6236-7237-67a8-57ec-26e3122d9589.png)
      >***【TIPS】***  
      >Form Action URLの`<FormDataRepoのリポジトリIDを設定>`は、**3.2項**でメモしたリポジトリIDを利用します

1. 続けて`Form Builder`でフォームを作成します。ここでは、**名前** と **メールアドレス** だけのシンプルな入力フォームを作成します
    1. **Telephone** の項目を削除します
       ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/deab2381-3b62-fb83-ede3-f47fdd9436e0.png)
    1. **Name** と **Email** のラベルやプレースホルダーを日本語に変えます。項目の **Edit** をクリックすると各項目の編集画面が開きます。`Label`や`Placeholder`、`Type`を変更します
       ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/b2b16762-2f68-c59a-89ba-d00a89bdcaa4.png)
       ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/e074898e-5bec-06af-43a2-7162ba5628b5.png)
    1. 右下の **Save** をクリックします
       ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/f57f5bb3-5b4c-ac14-8c54-36a228e2df9e.png)

       >***【Memo】***  
       >*Saveをクリックしたタイミングで、Form Builderで作成したフォーム定義がコンテンツアイテムの`Form Definition`に、そのHTMLバージョンが`Form HTML`に登録（更新）されます*

1. `Form Builder`で作成したフォームが表示されます。右上の **完了** をクリックし、コンテンツアイテムの作成を終了します
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/9611b259-06bf-91b2-9317-a6dccc46a9c9.png)

1. MK Formのコンテンツ・アイテム（**`ニュースレターの購読`**）が1件作成されます。
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/1ebcfa2b-23e4-559f-d633-8c395a552c4c.png)

1. コンテンツ・アイテムを開きます。`Form Definition`にJSON形式のフォーム定義が、`Form HTML`に`Form Definition`のHTMLバージョンが、それぞれ登録されていることを確認します
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/dc8456ff-d30d-1577-3675-b550e6f393bc.png)



# 5. コンテンツ・レイアウトの作成

`MK Form`コンテンツアイテムとして作成したフォームを、Webサイト上で表示・動作させるために **コンテンツ・レイアウト** を作成します

作成するコンテンツレイアウトのサンプルコードは、[オリジナルのブログ](https://blogs.oracle.com/content-management/post/design-forms-in-oracle-content-from-site-builder-editor)の著者の[Githubリポジトリ](https://github.com/monte-kluemper/ocm-formbuilder/tree/main/MK-Form-detail)で公開されています。ここでは、このサンプルコードを流用します

なお、このコンテンツレイアウトには、アセットをサイト・ページ上で表示するロジックだけではなく、

- フォームの送信時に、**入力内容を指定したリポジトリにREST APIを利用してアセット登録** するカスタムロジック
- フォームの送信完了後の**応答メッセージを表示**するカスタムロジック

が追加されています。詳細は[オリジナルのブログ](https://blogs.oracle.com/content-management/post/design-forms-in-oracle-content-from-site-builder-editor)をご確認ください

## 5.1 コンテンツ・レイアウトの作成

1. **開発者→すべてのコンポーネントの表示**を開きます

1. **作成→コンテンツ・レイアウトの作成**を選択します

1. 以下の通りに入力・設定し、**作成**をクリックします
    - アセット・タイプ: **MK Form**
    - 表示するフィールドの選択: **詳細**
    - コンテンツレイアウトの名前の指定: MK-Form-detail　（※自動入力）
      ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/4eba9d82-6da0-843e-949b-ff1e7ccdd84b.png)

## 5.2 コンテンツ・レイアウトの編集

作成された`MK-Form-detail`の構成は次のようになってます。

```:フォルダ構成
MK-Form-detail 
├── assets
│   ├── common.mjs
│   ├── compile.mjs
│   ├── design.css
│   ├── layout.html
│   ├── render.js
│   ├── render.mjs
│   └── settings.html
├── appinfo.json
└── _folder_icon.png
```

この中より、**assets/`layout.html`**、**assets/`design.css`**、**assets/`render.mjs`** の3つのファイルを更新します。サンプルのコードは、前述の[Githubリポジトリ上](https://github.com/monte-kluemper/ocm-formbuilder/tree/main/MK-Form-detail)にあります。

1. OCM上の **assets/`layout.html`** をローカルにダウンロードし、任意のエディタで開きます
1. `layout.html`内のコードをすべて削除します
1. [Github上のサンプルのassets/layout.html](https://github.com/monte-kluemper/ocm-formbuilder/blob/main/MK-Form-detail/assets/layout.html)を開き、すべてのコードをコピーし、ローカルで開いたエディターにペーストします。最後に保存します
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/d054398f-4dc4-998f-c07f-00ea1e0e0913.png)

1. ローカルで保存した`layout.html`をOCMの **`assets/layout.html`** に新規バージョンとして登録します
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/0c39ce7b-8be7-16a6-8bce-1114f428a785.png)

1. 同じ手順で、OCM上の **`assets/design.css`** を[Github上のサンプルのassets/design.css](https://github.com/monte-kluemper/ocm-formbuilder/blob/main/MK-Form-detail/assets/design.css)で更新します

1. 同じ手順で、OCM上の **`assets/render.mjs`** を[Github上のサンプルのassets/render.mjs](https://github.com/monte-kluemper/ocm-formbuilder/blob/main/MK-Form-detail/assets/render.mjs)で更新します。その際に、152行目の `var auth = "xxxxx"`の`xxxxx`をOCMユーザーの`ユーザーID:パスワード`をBase64エンコードした値に変更します

   ```javascript:render.mjs
   // For anonymous forms, you will need to configure a user or app to create assets in OCM
   var auth = "Basic <ユーザーID:パスワードをBase64エンコードした値>";
   var cred = "omit";
   ```

## 5.3 デフォルト・レイアウトに設定

`MK Form`コンテンツタイプの **デフォルトレイアウト** として、前の手順で作成した **MK-Form-detail** を設定します

1. **ADMINISTRATION:コンテンツ→アセット・タイプ** を開き、**`MK Form`** を開きます
1. **コンテンツ・レイアウト**タブをクリックします
1. **コンテンツ・アイテムのデフォルト**の**デスクトップ・コンテンツ・レイアウト**で、**MK-Form-detail**を選択し、**保存** します
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/76ef3edc-2d30-572e-865f-6cbb97ecf8c1.png)

## 5.4 確認

1. **アセット→MKFormRepo** を開き、前に作成したアセット（ニュースレターの購読）を **プレビュー** します
1. **コンテンツ・レイアウトのデフォルト** を選択します。Form Builderで作成したフォームが表示されることを確認します
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/a8461884-4aaf-503f-7362-4bb9ea402072.png)


# 6. Webサイト上にフォームを配置する

サイトを作成し、ページ上にフォームを配置します

1. 新規サイトを作成します。作成する際は、**エンタープライズ** サイトを選択し、リポジトリは **MKFormRepo**を指定します
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/b589d464-1216-fcb2-16d1-fc1cf5613722.png)
1. 作成したサイトをサイト編集画面（Site Builder）で開きます
1. **コンテンツ・アイテム** コンポーネントをページ上に配置し、設定より「ニュースレターの購読」コンテンツ・アイテムを選択します
![image102.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/3625b8d0-0758-f322-065a-f9a2bd6a30c6.jpeg)

1. **保存→コミット** し、サイト編集画面を閉じます
1. 作成したサイトを**公開→オンライン**にします
1. 公開サイトを別ブラウザで開きます。作成したフォームが表示されることを確認します
1. フォームに必要事項を入力し、**Submit** をクリックします
   ![image103.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/079797ba-e803-9e94-e4ec-e7c82906acef.jpeg)

1. 登録が完了します。OCMの管理画面を開き、**アセット→FormDataRepo** を開きます。先ほどフォームより登録した内容がアセットして登録されていることを確認します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/f999e1c8-6c04-b885-b1ea-b50d8d7dd5fa.png)


# まとめ

この記事では、OCMで作成したサイト上に配置するフォームをカスタムフォーム機能を利用して実現する方法と、サイト上に配置したフォームからの入力内容をOCM内にアセットとして登録する **『サンプル実装』** を紹介しました。皆さまの参考になれば幸いです