---
title: フォーム画面(確認ページ付)を構築する
description: Kurocoを利用したプロジェクトで、入力内容の確認ページを含んだフォームの作成方法を紹介します。本チュートリアルでは、デフォルトの項目(名前、メールアドレス、問い合わせ内容)のみのシンプルなフォームを作成します。
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

## 概要
Kurocoを利用したプロジェクトで、入力内容の確認ページを含んだフォームの作成方法を紹介します。  
フォームは、デフォルトの項目(名前、メールアドレス、問い合わせ内容)のみのシンプルなフォームを作成し、  
フロントエンドのコードとして、Nuxt.jsを紹介します。

追加項目の実装方法は[KurocoとNuxt.jsで、フォーム画面を構築する](/ja/docs/tutorials/setting-up-inquiry-forms/#カスタム項目を追加する)を参照してください。

### 学べること
以下の手順で確認ページ付きのフォームを作成します。
- [フォームを作成する](#フォームを作成する)
- [エンドポイントを作成する](#エンドポイントを作成する)
- [フロントエンドの実装をする](#フロントエンドの実装をする)

### 前提条件
:::info
このページはKurocoとNuxt.jsでのプロジェクトが構築済みであることを前提としています。  
まだ構築していない場合は、下記のチュートリアルを参照してください。  
[Kurocoビギナーズガイド](/ja/docs/tutorials/beginners-guide/)
:::

:::info
本チュートリアルでは以下のバージョンでコードを書いています。  
Nuxt2: v2.15.8  
Nuxt3: v3.8.0  
:::

## フォームを作成する
まずは、回答を受け付けるフォームを作成します。  
[キャンペーン] -> [フォーム]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/32c4cda8202d4db6a403e4d9a96a7621.png)

フォーム一覧から[追加]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/19b2303d90338e3d3cea6b87e149712e.png)

デフォルトの設定のまま[追加する]をクリックしてフォームを追加します。  
追加したフォームIDは後ほど使うのでメモしてください。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/829c31307bf96193a55d38c3ffe4873b.png)

## エンドポイントを作成する
APIページから、[新しいエンドポイントの追加]をクリックして、フォームのバリデーションを行うエンドポイントとフォームの送信をするエンドポイントの2つを作成します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/4968a6df7132b965957098116b1daefd.png)

### バリデーションを行うエンドポイント

以下の設定でエンドポイントを作成します。  

|項目|設定内容|
| :--- | :--- |
|パス|form_validate|
|カテゴリー|フォーム|
|モデル|InquiryMessage|
|オペレーション|send|
|id|利用するフォームのID(16)|
|validation_only|チェックを入れる|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/c62f32eb18b48eb727d1ecbee992f89b.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/86d20c0bb3cde41d964fbf1590a0dc5c.png)

入力ができたら[追加する]をクリックしてエンドポイントを作成します。  

### フォームの送信を行うエンドポイント

以下の設定でエンドポイントを作成します。  

|項目|設定内容|
| :--- | :--- |
|パス|form_send|
|カテゴリー|フォーム|
|モデル|InquiryMessage|
|オペレーション|send|
|id|利用するフォームのID(16)|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/fe96d2287a98a615b0052c8dfba94a8f.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/a78adeffe9f3b5dfe61f569864466a36.png)

入力ができたら[追加する]をクリックしてエンドポイントを作成します。  

### SwaggerUIで確認する
SwaggerUIで、フォームのバリデーションを行うエンドポイントが動作するかを確認します。
APIページより、[Swagger UI]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/229b94677de655efe05b3a5a5c466a8b.png)

先ほど作成した`/form_validate`を選択し、[Try it out]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/1da5922ff21e7947ecfcaa5060daf6fc.png)

Request bodyに以下を入力して、[Execute]をクリックします。

```json
{
  "email": "test"
}
```

![Image from Gyazo](https://t.gyazo.com/teams/diverta/1c7ac31d451b318cfe75841243392286.png)


レスポンスコード422が返ってくることと、`errors`にエラー内容が表示されていることを確認できます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/23d45df7aa9e1939a4772fd37f032f69.png)

次に、Request bodyに以下を入力し、[Execute]をクリックします。

```json
{
    "name":"Diverta Taro",
    "email":"example@example.com",
    "body":"this is test message"
}
```

![Image from Gyazo](https://t.gyazo.com/teams/diverta/0a2bcda0ee3e6c585d9671b523774af6.png)

レスポンスコード200が返って来ますが、`id`が`null`になっており、フォームの回答は追加されていないことを確認します。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/c4e6aef498f750f3f9ff7db9dd37d9a8.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/86601a0ace21d732437913798dec1585.png)

こちらを利用して、バリデーション用のエンドポイントにリクエストを送り、200のレスポンスコードが返ってきた場合に確認画面を表示するようフロントエンドを実装します。

## フロントエンドの実装をする
### ファイルを追加する
フォームのページを以下のコードで追加します。

<Tabs>
<TabItem value="Nuxt2" label="Nuxt2" default>

```markup reference title="/pages/form_with_confirmation_page/index.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxtjs/form_with_confirmation_page.vue
```

</TabItem>
<TabItem value="Nuxt3" label="Nuxt3" default>

```markup reference title="/pages/form_with_confirmation_page/index.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxt3/form_with_confirmation_page.vue
```

</TabItem>
</Tabs>

### ブラウザで確認する
次に、先ほど作成したページをブラウザで確認します。
ローカルサーバーが停止している場合は`npm run dev`を実行し、`http://localhost:3000/form_with_confirmation_page`にアクセスします。  

入力画面で必須項目を空白にして[入力内容の確認]をクリックすると、エラーが表示されます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/3df406d93e01fc00f650a36918167132.gif)

必要項目を入力して[入力内容の確認]をクリックすると、確認画面が表示されます。デザインは任意のものをあててください。  
この画面で[送信]をクリックすると、問い合わせが送信されます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/14b3e75919049fabcd50321e07319926.gif)

以上で確認ページ付の問い合わせフォームの作成が完了しました。

## 関連ドキュメント
- [チュートリアル：KurocoとNuxt.jsで、フォーム画面を構築する](/ja/docs/tutorials/setting-up-inquiry-forms/)