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

src/pages/contact.astro

1---
2import Layout from '../layouts/Layout.astro'
3---
4
5<Layout
6  title="Newt・Astroフォーム"
7  description="NewtとAstroを利用した問い合わせフォームです"
8>
9  <div>
10    <h1>Contact us</h1>
11    <form action="https://xxxxxx.form.newt.so/v1/xxxxxx" method="post">
12      <label for="name">
13        Name
14        <input id="name" name="name" />
15      </label>
16      <label for="email">
17        Email
18        <input id="email" name="email" type="email" />
19      </label>
20      <label for="message">
21        Message
22        <textarea id="message" name="message"></textarea>
23      </label>
24      <button type="submit">Submit</button>
25    </form>
26  </div>
27</Layout>

src/components/ContactForm.tsx

1import { useForm } from 'react-hook-form'
2
3type FormValues = {
4  name: string
5  email: string
6  message: string
7}
8
9export default function ContactForm() {
10  const {
11    register,
12    handleSubmit,
13    formState: { errors },
14  } = useForm<FormValues>({ mode: 'onChange' })
15
16  const onSubmit = handleSubmit(async (data) => {
17    const formData = new FormData()
18    Object.entries(data).forEach(([key, value]) => {
19      formData.append(key, value)
20    })
21
22    await fetch('https://xxxxxx.form.newt.so/v1/xxxxxx', {
23      method: 'POST',
24      body: formData,
25      headers: {
26        Accept: 'application/json',
27      },
28    })
29  })
30
31  return (
32    <div>
33      <h1>Contact us</h1>
34      <form onSubmit={onSubmit}>
35        <label htmlFor="name">Name*</label>
36        <input
37          id="name"
38          {...register('name', { required: 'Name is required' })}
39          aria-describedby="error-name-required"
40        />
41        {errors?.name && (
42          <span id="error-name-required" aria-live="assertive">
43            {errors.name.message}
44          </span>
45        )}
46        <label htmlFor="email">Email</label>
47        <input id="email" {...register('email')} />
48        <label htmlFor="message">Message</label>
49        <textarea id="message" {...register('message')}></textarea>
50        <button type="submit">Submit</button>
51      </form>
52    </div>
53  )
54}

src/pages/contact.astro

1---
2import ContactForm from '../components/ContactForm'
3import Layout from '../layouts/Layout.astro'
4---
5
6<Layout
7  title="Newt・Astroフォーム"
8  description="NewtとAstroを利用した問い合わせフォームです"
9>
10  <ContactForm client:load />
11</Layout>

src/pages/cotact.astro

1---
2import Layout from '../layouts/Layout.astro'
3---
4
5<Layout
6  title="Newt・Astroフォーム"
7  description="NewtとAstroを利用した問い合わせフォームです"
8>
9  <div>
10    <h1>Contact us</h1>
11    <form id="form">
12      <label for="name">
13        Name
14        <input id="name" name="name" />
15      </label>
16      <label for="email">
17        Email
18        <input id="email" name="email" type="email" />
19      </label>
20      <label for="message">
21        Message
22        <textarea id="message" name="message"></textarea>
23      </label>
24      <textarea id="message" name="message"></textarea>
25      <button type="submit">Submit</button>
26    </form>
27  </div>
28</Layout>
29
30<script
31  is:inline
32  src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key&hl=ja"
33></script>
34<script>
35  const form = document.getElementById('form')
36  form?.addEventListener('submit', submitFormData)
37
38  function submitFormData(event: Event) {
39    event.preventDefault()
40    grecaptcha.ready(() => {
41      grecaptcha
42        .execute('reCAPTCHA_site_key', { action: 'submit' })
43        .then(async (token) => {
44          const target = event.target as typeof event.target & {
45            name: { value: string }
46            email: { value: string }
47            message: { value: string }
48          }
49
50          const data = {
51            name: target.name.value,
52            email: target.email.value,
53            message: target.message.value,
54            googleReCaptchaToken: token,
55          }
56
57          const formData = new FormData()
58          Object.entries(data).forEach(([key, value]) => {
59            formData.append(key, value)
60          })
61
62          await sendRequest(formData)
63        })
64    })
65  }
66
67  async function sendRequest(formData: FormData) {
68    return await fetch('https://xxxxxx.form.newt.so/v1/xxxxxx', {
69      method: 'POST',
70      body: formData,
71      headers: {
72        Accept: 'application/json',
73      },
74    })
75  }
76</script>

pages/thanks.astro

1---
2import Layout from '../layouts/Layout.astro'
3---
4
5<Layout title="Thank you" description="問い合わせの送信が成功しました">
6  <div>
7    <h1>Thank you!</h1>
8    <div>
9      <a href="/contact">Back to Previous Page</a>
10    </div>
11  </div>
12</Layout>

page/error.astro

1---
2import Layout from '../layouts/Layout.astro'
3---
4
5<Layout title="Error" description="問い合わせの送信が失敗しました">
6  <div class="Result">
7    <h1>Error!</h1>
8    <div>
9      <a href="/contact">Back to Previous Page</a>
10    </div>
11  </div>
12</Layout>

page/contact.astro

1（省略）
2
3  function submitFormData(event: Event) {
4    event.preventDefault()
5    grecaptcha.ready(() => {
6      grecaptcha
7        .execute('reCAPTCHA_site_key', { action: 'submit' })
8          action: 'submit',
9        })
10        .then(async (token) => {
11          const target = event.target as typeof event.target & {
12            name: { value: string }
13            email: { value: string }
14            message: { value: string }
15          }
16
17          const data = {
18            name: target.name.value,
19            email: target.email.value,
20            message: target.message.value,
21            googleReCaptchaToken: token,
22          }
23
24          const formData = new FormData()
25          Object.entries(data).forEach(([key, value]) => {
26            formData.append(key, value)
27          })
28
29          await sendRequest(formData)
30          try {
31            const response = await sendRequest(formData)
32            if (response.ok) {
33              location.href = '/thanks'
34            } else {
35              location.href = '/error'
36            }
37          } catch (err) {
38            location.href = '/error'
39          }
40        })
41    })
42  }
43（省略）