NewtとNuxt3を利用して、問い合わせフォームを作成する

.env

1NUXT_PUBLIC_NEWT_FORM_ENDPOINT=https://xxxxxx.form.newt.so/v1/xxxxxx

nuxt.config.ts

1  runtimeConfig: {
2    public: {
3      newt: {
4        formEndpoint: ''
5      }
6    }
7  },

pages/contact.vue

1<script lang="ts" setup>
2const config = useRuntimeConfig()
3
4useHead({
5  title: 'Newt・Nuxtフォーム',
6  meta: [
7    { name: 'description', content: 'NewtとNuxtを利用した問い合わせフォームです' }
8  ]
9})
10</script>
11
12<template>
13  <div>
14    <h1>Contact us</h1>
15    <form :action="config.public.newt.formEndpoint" method="post">
16      <label for="name">Name</label>
17      <input id="name" name="name">
18      <label for="email">Email</label>
19      <input id="email" name="email" type="email">
20      <label for="message">Message</label>
21      <textarea id="message" name="message" />
22      <button type="submit">
23        Submit
24      </button>
25    </form>
26  </div>
27</template>

pages/contact.vue

1<script lang="ts" setup>
2import { useForm } from 'vee-validate'
3
4const config = useRuntimeConfig()
5
6const schema = {
7  name (value: string) {
8    return value ? true : 'Name is required'
9  }
10}
11const { defineField, handleSubmit, errors } = useForm({
12  validationSchema: schema
13})
14const [name, nameProps] = defineField('name')
15const [email, emailProps] = defineField('email')
16const [message, messageProps] = defineField('message')
17
18const onSubmit = handleSubmit(async (values) => {
19  const formData = new FormData()
20  Object.entries(values).forEach(([key, value]) => {
21    formData.append(key, value)
22  })
23
24  await fetch(config.public.newt.formEndpoint, {
25    method: 'POST',
26    body: formData,
27    headers: {
28      Accept: 'application/json'
29    }
30  })
31})
32
33useHead({
34  title: 'Newt・Nuxtフォーム',
35  meta: [
36    { name: 'description', content: 'NewtとNuxtを利用した問い合わせフォームです' }
37  ]
38})
39</script>
40
41<template>
42  <div>
43    <h1>Contact us</h1>
44    <form @submit="onSubmit">
45      <label for="name">Name*</label>
46      <input id="name" v-model="name" v-bind="nameProps" name="name" aria-describedby="error-name-required">
47      <span v-if="errors.name" id="error-name-required" aria-live="assertive">
48        {{ errors.name }}
49      </span>
50      <label for="email">Email</label>
51      <input id="email" v-model="email" v-bind="emailProps" name="email" type="email">
52      <label for="message">Message</label>
53      <textarea id="message" v-model="message" v-bind="messageProps" name="message" />
54      <button type="submit">
55        Submit
56      </button>
57    </form>
58  </div>
59</template>

.env

1NUXT_PUBLIC_NEWT_FORM_ENDPOINT=https://xxxxxx.form.newt.so/v1/xxxxxx
2NUXT_PUBLIC_NEWT_RECAPTCHA_SITE_KEY=xxxx

nuxt.config.ts

1  runtimeConfig: {
2    public: {
3      newt: {
4        formEndpoint: '',
5        recaptchaSiteKey: ''
6      }
7    }
8  },

pages/contact.vue

1<script lang="ts" setup>
2import { useForm } from 'vee-validate'
3import { VueReCaptcha, useReCaptcha } from 'vue-recaptcha-v3'
4
5const config = useRuntimeConfig()
6
7const schema = {
8  name (value: string) {
9    return value ? true : 'Name is required'
10  }
11}
12const { defineField, handleSubmit, errors } = useForm({
13  validationSchema: schema
14})
15const [name, nameProps] = defineField('name')
16const [email, emailProps] = defineField('email')
17const [message, messageProps] = defineField('message')
18
19const { vueApp } = useNuxtApp()
20vueApp.use(VueReCaptcha, {
21  siteKey: config.public.newt.recaptchaSiteKey,
22  loaderOptions: {
23    renderParameters: {
24      hl: 'ja'
25    }
26  }
27})
28const recaptchaInstance = useReCaptcha()
29
30const onSubmit = handleSubmit(async (values) => {
31  await recaptchaInstance?.recaptchaLoaded()
32  const token = await recaptchaInstance?.executeRecaptcha('submit')
33  values.googleReCaptchaToken = token
34
35  const formData = new FormData()
36  Object.entries(values).forEach(([key, value]) => {
37    formData.append(key, value)
38  })
39
40  await fetch(config.public.newt.formEndpoint, {
41    method: 'POST',
42    body: formData,
43    headers: {
44      Accept: 'application/json'
45    }
46  })
47})
48
49useHead({
50  title: 'Newt・Nuxtフォーム',
51  meta: [
52    { name: 'description', content: 'NewtとNuxtを利用した問い合わせフォームです' }
53  ]
54})
55</script>
56
57<template>
58  <div>
59    <h1>Contact us</h1>
60    <form @submit="onSubmit">
61      <label for="name">Name*</label>
62      <input id="name" v-model="name" v-bind="nameProps" name="name" aria-describedby="error-name-required">
63      <span v-if="errors.name" id="error-name-required" aria-live="assertive">
64        {{ errors.name }}
65      </span>
66      <label for="email">Email</label>
67      <input id="email" v-model="email" v-bind="emailProps" name="email" type="email">
68      <label for="message">Message</label>
69      <textarea id="message" v-model="message" v-bind="messageProps" name="message" />
70      <button type="submit">
71        Submit
72      </button>
73    </form>
74  </div>
75</template>

pages/thanks.vue

1<script lang="ts" setup>
2useHead({
3  title: 'Thank you',
4  meta: [
5    { name: 'description', content: '問い合わせの送信が成功しました' }
6  ]
7})
8</script>
9
10<template>
11  <div>
12    <h1>Thank you!</h1>
13    <div>
14      <NuxtLink href="/contact">
15        Back to Previous Page
16      </NuxtLink>
17    </div>
18  </div>
19</template>

pages/error.vue

1<script lang="ts" setup>
2useHead({
3  title: 'Error',
4  meta: [
5    { name: 'description', content: '問い合わせの送信が失敗しました' }
6  ]
7})
8</script>
9
10<template>
11  <div>
12    <h1>Error!</h1>
13    <div>
14      <NuxtLink href="/contact">
15        Back to Previous Page
16      </NuxtLink>
17    </div>
18  </div>
19</template>

pages/contact.vue

1<script lang="ts" setup>
2（省略）
3
4const onSubmit = handleSubmit(async (values) => {
5  await recaptchaInstance?.recaptchaLoaded()
6  const token = await recaptchaInstance?.executeRecaptcha('submit')
7  values.googleReCaptchaToken = token
8
9  const formData = new FormData()
10  Object.entries(values).forEach(([key, value]) => {
11    formData.append(key, value)
12  })
13
14  await fetch(config.public.newt.formEndpoint, {
15    method: 'POST',
16    body: formData,
17    headers: {
18      Accept: 'application/json'
19    }
20  })
21  try {
22    const response = await fetch(config.public.newt.formEndpoint, {
23      method: 'POST',
24      body: formData,
25      headers: {
26        Accept: 'application/json'
27      }
28    })
29
30    if (response.ok) {
31      await navigateTo('/thanks')
32    } else {
33      await navigateTo('/error')
34    }
35  } catch (err) {
36    await navigateTo('/error')
37  }
38})
39
40（省略）
41</script>
42
43<template>
44  （省略）
45</template>