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

概要

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

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

学べること

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

• フォームを作成する
• エンドポイントを作成する
• フロントエンドの実装をする

前提条件

備考

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

備考

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

フォームを作成する

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

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

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

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

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

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

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

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

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

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

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

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

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

SwaggerUIで確認する

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

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

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

{
  "email": "test"
}

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

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

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

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

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

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

ファイルを追加する

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

Nuxt2

/pages/form_with_confirmation_page/index.vue

<template>
  <div>
    <section>
      <h1>Contact</h1>
      <form v-if="!validated" class="input">
        <div v-if="error" class="error">
          <p v-for="(err, idx) in error" :key="idx">
            {{ err }}
          </p>
        </div>
        <div>
          <dl>
            <dt>Name</dt>
            <dd><input v-model="submitData.name" name="name" type="text" :disabled="validated"></dd>
          </dl>
          <dl>
            <dt>Email</dt>
            <dd><input v-model="submitData.email" name="email" type="text" :disabled="validated"></dd>
          </dl>
          <dl>
            <dt>Message</dt>
            <dd><textarea v-model="submitData.body" name="body" :disabled="validated"></textarea></dd>
          </dl>
        </div>
        <button @click.prevent="handleOnValidate">Confirm your entry</button>
      </form>
      <form v-if="validated" class="confirm">
        <div v-if="submitted">Inquiry submitted.</div>
        <div v-else>
          <div>
            <div>Name   :{{submitData.name}}</div>
            <div>Email  :{{submitData.email}}</div>
            <div>Message:{{submitData.body}}</div>
          </div>
          <div>
            <button @click.prevent="handleOnSubmit">Submit</button>
            <button @click.prevent="validated = false">Back</button>
          </div>
        </div>
      </form>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      submitted: false,
      validated: false,
      submitData: {},
      error: null,
    }
  },
  methods: {
    async handleOnValidate() {
      //Validate the entry
      try {
        await this.$axios.$post('/rcms-api/1/form_validate', { ...this.submitData });
        this.validated = true;
        this.error = null;
      } catch (e) {
        this.error = e.response.data.errors;
      }
    },
    async handleOnSubmit() {
      //Post processing to Kuroco endpoints
      try {
        await this.$axios.$post('/rcms-api/1/form_send', { ...this.submitData });
        this.submitted = true;
      } catch (e) {
        console.log(e);
      }
    }
  }
};
</script>

View on GitHub

Nuxt3

/pages/form_with_confirmation_page/index.vue

<template>
  <div>
    <section>
      <h1>Contact</h1>
      <form v-if="!validated" class="input">
        <div v-if="error" class="error">
          <p v-for="(err, idx) in error" :key="idx">
            {{ err }}
          </p>
        </div>
        <div>
          <dl>
            <dt>Name</dt>
            <dd><input v-model="submitData.name" name="name" type="text" :disabled="validated"></dd>
          </dl>
          <dl>
            <dt>Email</dt>
            <dd><input v-model="submitData.email" name="email" type="text" :disabled="validated"></dd>
          </dl>
          <dl>
            <dt>Message</dt>
            <dd><textarea v-model="submitData.body" name="body" :disabled="validated"></textarea></dd>
          </dl>
        </div>
        <button @click.prevent="handleOnValidate">Confirm your entry</button>
      </form>
      <form v-if="validated" class="confirm">
        <div v-if="submitted">Inquiry submitted.</div>
        <div v-else>
          <div>
            <div>Name :{{ submitData.name }}</div>
            <div>Email :{{ submitData.email }}</div>
            <div>Message:{{ submitData.body }}</div>
          </div>
          <div>
            <button @click.prevent="handleOnSubmit">Submit</button>
            <button @click.prevent="validated = false">Back</button>
          </div>
        </div>
      </form>
    </section>
  </div>
</template>

<script setup>
const submitted = ref(false);
const validated = ref(false);
const submitData = ref({});
const error = ref([]);
const config = useRuntimeConfig();

const handleOnValidate = async () => {
  //Validate the entry
  try {
    await $fetch('/rcms-api/1/form_validate', {
      method: 'POST',
      body: { ...submitData.value },
      baseURL: config.public.apiBase,
      credentials: 'include',
    });
    validated.value = true;
    error.value = null;
  } catch (e) {
    error.value = e.response._data.errors;
  }
};

const handleOnSubmit = async () => {
  //Post processing to Kuroco endpoints
  try {
    await $fetch('/rcms-api/1/form_send', {
      method: 'POST',
      body: { ...submitData.value },
      baseURL: config.public.apiBase,
      credentials: 'include',
    });
    submitted.value = true;
  } catch (e) {
    console.log(e);
  }
};
</script>

View on GitHub

ブラウザで確認する

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

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

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

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

関連ドキュメント

• チュートリアル：KurocoとNuxt.jsで、フォーム画面を構築する