メインコンテンツまでスキップ

フォーム画面(確認ページ付)を構築する

概要

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

追加項目の実装方法はKurocoとNuxt.jsで、フォーム画面を構築するを参照してください。

学べること

以下の手順で確認ページ付きのフォームを作成します。

前提条件

備考

このページはKurocoとNuxt.jsでのプロジェクトが構築済みであることを前提としています。
まだ構築していない場合は、下記のチュートリアルを参照してください。
Kurocoビギナーズガイド

備考

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

フォームを作成する

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

Image from Gyazo

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

Image from Gyazo

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

Image from Gyazo

エンドポイントを作成する

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

Image from Gyazo

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

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

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

Image from Gyazo

Image from Gyazo

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

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

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

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

Image from Gyazo

Image from Gyazo

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

SwaggerUIで確認する

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

Image from Gyazo

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

Image from Gyazo

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

{
"email": "test"
}

Image from Gyazo

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

Image from Gyazo

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

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

Image from Gyazo

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

Image from Gyazo

Image from Gyazo

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

フロントエンドの実装をする

ファイルを追加する

フォームのページを以下のコードで追加します。

/pages/form_with_confirmation_page/index.vue
loading...

ブラウザで確認する

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

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

Image from Gyazo

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

Image from Gyazo

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

関連ドキュメント


サポート

お探しのページは見つかりましたか?解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。