【Astro】Contact FormにValidationとreCAPTCHA v3を追加する

以下のお問い合わせを受信しました。

■お名前
{submission.name}

■メールアドレス
{submission.email}

■お問い合わせ内容
{submission.message}

pnpm astro add react

✔ Resolving packages...
23:00:01
  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭───────────────────────────────────────────────────────╮
 │ pnpm add @astrojs/react@^3.6.0 @types/react@^18.3.3 @types/react-dom@^18.3.0 react@^18.3.1 react-dom@^18.3.1  │
 ╰────────────────────────────────────────────────────────╯

✔ Continue?

Astro will make the following changes to your config file:

 ╭ astro.config.mjs ───────────────────────╮
 │ import { defineConfig } from 'astro/config';                   │
 │ import mdx from '@astrojs/mdx';                                │
 │ import sitemap from '@astrojs/sitemap';                        │
 │ import tailwind from '@astrojs/tailwind';                      │
 │ import { never } from 'astro/zod';                             │
 │                                                                │
 │ import react from "@astrojs/react";                            │
 │                                                                │

? Continue?

  Astro will make the following changes to your tsconfig.json:

 ╭ tsconfig.json  ───────────────────────╮
 │ {                                                            │
 │   "extends": "astro/tsconfigs/strict",                       │
 │   "compilerOptions": {                                       │
 │     "jsx": "react-jsx",                                      │
 │     "jsxImportSource": "react"                               │

? Continue?

 success  Successfully updated TypeScript settings

pnpm add react-hook-form

Packages: +1
+
Progress: resolved 1613, reused 1538, downloaded 1, added 1, done

dependencies:
+ react-hook-form 7.52.0

Done in 4.1s

import { useForm } from 'react-hook-form'

type FormValues = {
  name: string
  email: string
  message: string
}

interface FormProps {
  formUrl: string
  siteKey: string
}

export default function ContactForm(props: FormProps) {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm<FormValues>({ mode: 'onChange' })

  const onSubmit = handleSubmit(async (data) => {
    grecaptcha.ready(() => {
      grecaptcha.execute(props.siteKey, { action: 'submit' }).then(async (token) => {
        const formData = new FormData()
        Object.entries(data).forEach(([key, value]) => {
          formData.append(key, value)
        })

        formData.append('googleReCaptchaToken', token)

        try {
          const response = await fetch(props.formUrl, {
            method: 'POST',
            body: formData,
            headers: {
              Accept: 'application/json'
            }
          })

          if (response.ok) {
            location.href = '/thanks/'
          } else {
            location.href = '/error/'
          }
        } catch (err) {
          location.href = '/error/'
        }
      })
    })
  })

  return (
    <form onSubmit={onSubmit}>
      <div className='mb-6'>
        <label htmlFor='name' className='block text-sm font-medium mb-2'>
          Name
          <span className='text-red-800 mx-1 text-sm'>*</span>
          {errors?.name && (
            <span id='error-name-required' aria-live='assertive' className='ml-4 text-red-700'>
              {errors.name.message}
            </span>
          )}
        </label>
        <input
          id='name'
          className='p-4 block w-full text-md rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-slate-900 '
          {...register('name', { required: '※Name は必須項目です。' })}
          aria-describedby='error-name-required'
          placeholder='名前'
        />
      </div>
      <div className='mb-6'>
        <label htmlFor='email' className='block text-sm font-medium mb-2'>
          Email
          <span className='text-red-800 mx-1 text-sm'>*</span>
          {errors?.email && (
            <span id='error-email-required' aria-live='assertive' className='ml-4 text-red-700'>
              {errors.email.message}
            </span>
          )}
        </label>
        <input
          id='email'
          className='p-4 md:p-4 block w-full text-md rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-slate-900'
          {...register('email', { required: '※Emailは必須項目です。' })}
          placeholder='[email protected]'
        />
      </div>
      <div className='mb-8'>
        <label htmlFor='message' className='block text-sm font-medium mb-2'>
          Message
          <span className='text-red-800 mx-1 text-sm'>*</span>
          {errors?.message && (
            <span id='error-message-required' aria-live='assertive' className='ml-4 text-red-700'>
              {errors.message.message}
            </span>
          )}
        </label>
        <textarea
          id='message'
          rows={5}
          className='p-4 md:p-4 block w-full text-md rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-slate-900'
          {...register('message', { required: '※Message は必須項目です。' })}
          placeholder='メッセージ'
        ></textarea>
      </div>
      <div className='flex justify-center items-center mb-4'>
        <button type='submit' className='primary-btn mx-auto w-full'>
          送信
        </button>
      </div>
    </form>
  )
}

---
import BaseLayout from '@/layouts/BaseLayout'
import ContactForm from 'src/components/ui/ContactForm'

const title = 'お問い合わせ'
const description = 'このブログに関する問い合わせフォームのページです。'

const siteKey: string = import.meta.env.VITE_NEWT_KEY
const id: string = import.meta.env.VITE_NEWT_ID
const formUrl = `https://neputa-note.form.newt.so/v1/${id}`
---

<BaseLayout title={title} description={description}>
  <div class='mx-auto w-full max-w-3xl'>
    <div
      class='mx-auto flex flex-col rounded-lg border border-gray-200 bg-gray-100 p-4 shadow backdrop-blur dark:border-gray-700 dark:bg-slate-900 sm:p-6 lg:p-8'
    >
      <ContactForm siteKey={siteKey} formUrl={formUrl} client:load />
    </div>
  </div>
</BaseLayout>

<script is:inline src=`https://www.google.com/recaptcha/api.js?render=${siteKey}&hl=ja`></script>