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

このチュートリアルでは、Newtの Form App と Astro を利用して、問い合わせフォームを作成する手順を紹介します。

記事内で使用している主なソフトウェアのバージョン

• Astro（astro）: 2.0.11
• @astrojs/react（@astrojs/react）: 2.0.2
• React Hook Form（react-hook-form）: 7.43.0

前提条件

• Astroのプロジェクトを作成済みであること

概要

Astroで問い合わせフォームを作成し、Newtで問い合わせデータを確認できるようにします。
はじめに、自動返信・受信通知のついたシンプルなフォームを作成し、その後でバリデーション・スパム対策・リダイレクトの処理を実装しながら、カスタマイズの方法を学習していきます。
※ ここではスタイルについては扱いません。スタイルについて確認したい方は、Next.jsのコードとなりますが、問い合わせ用のテンプレート newt-starter-nextjs-contact を用意しているので、そちらのコードをご確認ください。

Astroのセットアップについて知りたい場合は、以下のドキュメントをご確認ください。

• Astroの インストール のドキュメント
• NewtとAstroを利用してブログを作成する

1. Form Appを作成する

はじめに、NewtでForm Appを作成します。

1-1. Form Appの追加

「Appを追加」をクリックして「タイプを選択して追加」を選択します。

「Form App」を選択して「追加」をクリックします。

App名・App UID・Appアイコンを設定して「追加」をクリックします。

これで「Contact」という名前のForm Appが追加されました。

1-2. フォームの作成

次にフォームを作成します。「フォームを作成」ボタンをクリックし、名前を付けてフォームを作成します。

作成後に表示されるエンドポイントは、2-1で利用します。

2. Astroでシンプルな問い合わせフォームを作成する

続いて、Astroでシンプルな問い合わせフォームを作成しましょう。
ここでは /contact というパスにアクセスした時に、問い合わせフォームを表示するようにします。

2-1. HTMLフォームの追加

src/pages/contact.astro を作成し、以下のように記述します。
form の action 属性に設定している https://xxxxxx.form.newt.so/v1/xxxxxx の値については、1-2で確認したエンドポイントの値に置き換えてください。

// src/pages/contact.astro

---
import Layout from '../layouts/Layout.astro'
---

<Layout
  title="Newt・Astroフォーム"
  description="NewtとAstroを利用した問い合わせフォームです"
>
  <div>
    <h1>Contact us</h1>
    <form action="https://xxxxxx.form.newt.so/v1/xxxxxx" method="post">
      <label for="name">Name</label>
      <input id="name" name="name" />
      <label for="email">Email</label>
      <input id="email" name="email" type="email" />
      <label for="message">Message</label>
      <textarea id="message" name="message"></textarea>
      <button type="submit">Submit</button>
    </form>
  </div>
</Layout>

各属性について説明します。

label要素のfor属性と、input要素・textarea要素のid属性
label要素 の for 属性は、input要素 や textarea要素 の id 属性と一致するように設定します。

input要素・textarea要素のname属性
input要素・textarea要素のnameで設定された値をもとに、投稿データのスキーマが決まります。例えば上記の例では、name・email・message フィールドを持ったスキーマが作成されます。
詳細については、フィールドの仕様 のドキュメントをご確認ください。

input要素のtype属性
お好みの入力形式に応じて、inputの型 を選択してください。デフォルトでは text となります。

これで http://localhost:3000/contact にアクセスすると、以下のような問い合わせフォームが作成できました。
※ スタイルについてはお好みで設定してください

2-2. 自動返信メールの設定

自動返信メール の設定をします。自動返信メールを設定することで、投稿を送信したエンドユーザーに対して、設定した内容のメールを自動で送信できます。

※ Newtは自動返信メールの送信先メールアドレスを検出するために email フィールドを使います。input要素のname属性に email を指定し、エンドユーザーのメールアドレスが入力されるようにしてください。

「App設定」から該当のフォームをクリックし、「メール設定」を選択します。
「自動返信メールを有効にする」にチェックを入れ、件名と本文を入力し、「保存」をクリックします。

自動返信メールでは {submission.name} のように記述することで、メールの件名や本文に、投稿データの内容を埋め込めます。
2-1で、input要素・textarea要素のname属性に name・email・message を指定したので、ここでは {submission.name}・{submission.email}・{submission.message} を利用できます。

2-3. 受信通知メールの設定

受信通知メール の設定をします。受信通知メールを設定することで、エンドユーザーから新しいメッセージを受信した際に、メールで通知を受け取れます。

「App設定」から該当のフォームをクリックし、「メール設定」を選択します。
「受信通知メールを有効にする」にチェックを入れ、通知を受け取るメールアドレス・件名・本文を設定し、「保存」をクリックします。

受信通知メールでも、自動返信メールと同様に、投稿データの内容を埋め込めます。

2-4. 挙動の確認

これで、シンプルな問い合わせフォームを作成できました。
実際に動かして、挙動を確認してみましょう。

まず、開発サーバーを立ち上げて、問い合わせフォームを表示します。ここでは http://localhost:3000/contact にアクセスします。
適当な内容を入力して送信すればよいですが、設定したEmail（name属性に email を指定した入力値）に自動返信メールが届くので、ご自身のメールアドレスを入力するよう気をつけてください。

送信が成功すると、以下の画面が表示されます。

管理画面では、以下のようにデータが確認できます。

次に自動返信メールを確認します。以下のようなメールが飛んでいれば成功です。

最後に受信通知メールを確認します。以下のようなメールが飛んでいれば成功です。

これでシンプルなフォームの作成・自動返信メールの設定・受信通知メールの設定ができました。ここからはフォームのカスタマイズをしながら、より高度なフォームの作成方法を学んでいきましょう。

3. バリデーションを追加する

クライアントサイドのバリデーションについて、以下の順で紹介します。

• input要素の属性を利用したバリデーション
• JavaScriptを利用したバリデーション（React Hook Formを利用したバリデーション）

3-1. input要素の属性を利用したバリデーション

HTML5のフォームバリデーションを利用することで、JavaScriptなしでバリデーションを実行できます。よく使われるものについては HTML5のフォームバリデーション をご確認ください。

例えば、name を必須にしたい場合は、以下のように required を指定します。

<input id="name" name="name" required />

もし name を指定せず、送信を実行した場合は、以下のように表示されます。

3-2. JavaScriptを利用したバリデーション

HTMLネイティブのフォームバリデーションでは足りない場合、JavaScriptを利用することで、より柔軟なバリデーションを実行できます。
ここでは、バリデーションのタイミングを変え、さらにエラーメッセージをカスタマイズしてみましょう。

ここではReact用のインテグレーションを追加し、React Hook Form を利用したバリデーションを行います。

3-2-1. React用インテグレーションの追加

はじめに astro add コマンドを利用して、React用のインテグレーションを追加します。
詳細はAstroの @astrojs/react のドキュメントをご確認ください。
以下のどれかのコマンドを実行します。

npx astro add react
# or
yarn astro add react

コマンドを実行すると、以下の質問を聞かれるので、お好きな設定を選びましょう。

• @astrojs/react, @types/react-dom, @types/react, react-dom, react をインストールするか（ここでは yes を選択）
• astro.config.mjsの変更を許可するか（ここでは yes を選択）
• tsconfig.jsonの変更を許可するか（ここでは yes を選択）

yarnを利用した場合、以下のように表示されます。

$ yarn astro add react
✔ Resolving packages...

  Astro will run the following command:
  If you skip this step, you can always run it yourself later
 ╭─────────────────────────────────────────────────────╮
 │ yarn add @astrojs/react @types/react-dom@^18.0.6 @types/react@^18.0.21 react-dom@^18.0.0 react@^18.0.0  │
 ╰─────────────────────────────────────────────────────╯

✔ Continue? … yes
✔ Installing dependencies...

  Astro will make the following changes to your config file:
 ╭ astro.config.mjs ───────────────╮
 │ import { defineConfig } from 'astro/config';  │
 │                                               │
 │ // https://astro.build/config                 │
 │ import react from "@astrojs/react";           │
 │                                               │
 │ // https://astro.build/config                 │
 │ export default defineConfig({                 │
 │   integrations: [react()]                     │
 │ });                                           │
 ╰────────────────────────╯

✔ Continue? … yes
   success  Added the following integration to your project:
  - @astrojs/react

  Astro will make the following changes to your tsconfig.json:
 ╭ tsconfig.json  ─────────────╮
 │ {                                       │
 │   "extends": "astro/tsconfigs/strict",  │
 │   "compilerOptions": {                  │
 │     "jsx": "react-jsx",                 │
 │     "jsxImportSource": "react"          │
 │   }                                     │
 │ }                                       │
 ╰─────────────────────╯

✔ Continue? … yes
   success  Successfully updated TypeScript settings
✨  Done in 33.88s.

3-2-2. React Hook Formの追加

ここでは React Hook Form を利用してバリデーションを行います。react-hook-form をインストールします。

npm install react-hook-form
# or
yarn add react-hook-form

3-2-3. ContactFormコンポーネントの追加

続いて、ContactFormコンポーネントを追加します。
以下のように src/components/ContactForm.tsx を追加します。
※ fetch の リソースとして設定されている https://xxxxxx.form.newt.so/v1/xxxxxx の値については、1-2で確認したエンドポイントの値に置き換えてください。

// src/components/ContactForm.tsx

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

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

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

  const onSubmit = handleSubmit(async (data) => {
    const formData = new FormData()
    Object.entries(data).forEach(([key, value]) => {
      formData.append(key, value)
    })

    await fetch('https://xxxxxx.form.newt.so/v1/xxxxxx', {
      method: 'POST',
      body: formData,
      headers: {
        Accept: 'application/json',
      },
    })
  })

  return (
    <div>
      <h1>Contact us</h1>
      <form onSubmit={onSubmit}>
        <label htmlFor="name">Name*</label>
        <input
          id="name"
          {...register('name', { required: 'Name is required' })}
          aria-describedby="error-name-required"
        />
        {errors?.name && (
          <span id="error-name-required" aria-live="assertive">
            {errors.name.message}
          </span>
        )}
        <label htmlFor="email">Email</label>
        <input id="email" {...register('email')} />
        <label htmlFor="message">Message</label>
        <textarea id="message" {...register('message')}></textarea>
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

以下のことを行っています。

• 入力値の型として、FormValues を定義し、useForm にジェネリクスとして渡します
• useForm に mode という引数を渡しています。これはどのタイミングでバリデーションを行うか制御しています。ここでは onChange を指定し、変更のたびにバリデーションを実行します
• 入力されたフォームのデータは handleSubmit 関数で data として利用できます
• FormData を利用して、送信するデータ formData を作成します
• フェッチ API を利用して、1-2で確認したエンドポイントにデータを送ります。この時、Acceptヘッダーに 'application/json' を指定します

また、以下の部分で name がない場合に Name is required というエラーメッセージを出しています。
register メソッドを利用して、様々なバリデーションが設定できるので、ぜひお好きなバリデーションをお試しください。

<label htmlFor="name">Name*</label>
<input
  id="name"
  {...register('name', { required: 'Name is required' })}
  aria-describedby="error-name-required"
/>
{errors?.name && (
  <span id="error-name-required" aria-live="assertive">
    {errors.name.message}
  </span>
)}

3-2-4. 作成したContactFormコンポーネントの利用

最後に src/pages/contact.astro からContactFormコンポーネントをインポートして利用します。

// src/pages/contact.astro

---
import Layout from '../layouts/Layout.astro'
import ContactForm from '../components/ContactForm'
---

<Layout
  title="Newt・Astroフォーム"
  description="NewtとAstroを利用した問い合わせフォームです"
>
  <ContactForm client:load />
</Layout>

ContactFormコンポーネントをハイドレートするために clientディレクティブ を利用しています。client:load を設定することで、ページロード時に即座にハイドレートが実行されます。
これでバリデーションの設定ができました。以下のことを確認します。

• 入力変更があったタイミングでバリデーションが実行されること
• name が入力されていない場合に Name is required というエラーメッセージが出ること

4. スパム対策を実装する

続いて、スパム対策 として Google reCAPTCHA v3 の設置方法について説明します。

4-1. サイトキーとシークレットキーの取得

Google reCAPTHAのコンソール にアクセスし、新しいサイトを登録します。

reCAPTCHAタイプは reCAPTCHA v3 を選択します。
ここではローカル環境でのテストを行うので、ドメインには localhost を追加します。本番環境で設定したい場合は、reCAPTCHAを導入したいサイトのドメインを設定してください。

全ての項目を入力して「送信」をクリックすると、サイトキーとシークレットキーが表示されます。

4-2. シークレットキーの登録

Newtの管理画面にアクセスし、「App設定」を開きます。該当のフォームをクリックし、「フォーム設定」を選択します。
「スパム対策」のセクションより、「Google reCAPTCHA v3を有効にする」にチェックを入れ、4-1で取得したシークレットキーを貼り付けて保存します。

4-3. @types/grecaptchaのインストール

後述の処理で必要になるため、@types/grecaptcha をインストールしておきます。

npm install --save-dev @types/grecaptcha
# or
yarn add -D @types/grecaptcha

4-4. Astroでの設定

最後にAstroでの設定を行います。
3-1で作成した src/pages/contact.astro を以下のように修正します。

また、以下の箇所については、正しい値に置き換えるよう注意してください。

• https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key で指定してる reCAPTCHA_site_key には、4-1で取得したサイトキーを入力してください
• grecaptcha.execute で指定してる reCAPTCHA_site_key には、4-1で取得したサイトキーを入力してください
• sendRequest メソッドで送信している https://xxxxxx.form.newt.so/v1/xxxxxx は、1-2で確認したエンドポイントの値に置き換えてください

// src/pages/cotact.astro

---
import Layout from '../layouts/Layout.astro'
---

<Layout
  title="Newt・Astroフォーム"
  description="NewtとAstroを利用した問い合わせフォームです"
>
  <div>
    <h1>Contact us</h1>
    <form id="form">
      <label for="name">Name</label>
      <input id="name" name="name" />
      <label for="email">Email</label>
      <input id="email" name="email" type="email" />
      <label for="message">Message</label>
      <textarea id="message" name="message"></textarea>
      <button type="submit">Submit</button>
    </form>
  </div>
</Layout>

<script
  is:inline
  src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key&hl=ja"
></script>
<script>
  const form = document.getElementById('form')
  form?.addEventListener('submit', submitFormData)

  function submitFormData(event: Event) {
    event.preventDefault()
    grecaptcha.ready(() => {
      grecaptcha
        .execute('reCAPTCHA_site_key', { action: 'submit' })
        .then(async (token) => {
          const target = event.target as typeof event.target & {
            name: { value: string }
            email: { value: string }
            message: { value: string }
          }

          const data = {
            name: target.name.value,
            email: target.email.value,
            message: target.message.value,
            googleReCaptchaToken: token,
          }

          const formData = new FormData()
          Object.entries(data).forEach(([key, value]) => {
            formData.append(key, value)
          })

          await sendRequest(formData)
        })
    })
  }

  async function sendRequest(formData: FormData) {
    return await fetch('https://xxxxxx.form.newt.so/v1/xxxxxx', {
      method: 'POST',
      body: formData,
      headers: {
        Accept: 'application/json',
      },
    })
  }
</script>

以下のことを行っています。

• サイトキーを使用して、reCAPTCHAのJavaScript APIを読み込みます。外部スクリプトであるため、is:inline ディレクティブを含めます
• reCAPTCHAのJavaScript APIの読み込みでは hl クエリに ja を設定しているため、問い合わせフォームの右下に表示されるreCAPTCHAのバッジが日本語になります。他の言語で設定したい方は、Googleの Language Codes のドキュメントを参考に設定してください
• googleReCaptchaToken というフィールド名でトークンを送信します（他の名前で送信した場合、正しく動作しないので注意してください）

これでGoogle reCAPTCHA v3によるスパム対策が実装できました。

もし、バッジを非表示にしたい場合、.grecaptcha-badge { visibility: hidden; } を適用すると非表示になりますが、この操作はGoogle公式のガイドに従った場合のみ許可されます。
詳細は、Googleの reCAPTCHA バッジを非表示にします。どうすればよいですか？ のドキュメントをご確認ください。

5. リダイレクトをカスタマイズする

最後にフォーム送信後のリダイレクトをカスタマイズします。
送信が成功した場合のページと、失敗した場合のページを用意して、送信結果に応じてリダイレクトしてみましょう。

5-1. 送信成功ページ・送信失敗ページを用意する

送信成功ページとして、以下を用意します。
page/thanks.astro を作成します。

// pages/thanks.astro

---
import Layout from '../layouts/Layout.astro'
---

<Layout title="Thank you" description="問い合わせの送信が成功しました">
  <div>
    <h1>Thank you!</h1>
    <div>
      <a href="/contact">Back to Previous Page</a>
    </div>
  </div>
</Layout>

送信失敗ページとして、以下を用意します。
page/error.astro を作成します。

// page/error.astro

---
import Layout from '../layouts/Layout.astro'
---

<Layout title="Error" description="問い合わせの送信が失敗しました">
  <div class="Result">
    <h1>Error!</h1>
    <div>
      <a href="/contact">Back to Previous Page</a>
    </div>
  </div>
</Layout>

5-2. リダイレクトを設定する

page/contact.astro を以下のように修正します。
※ fetch の リソースとして設定されている https://xxxxxx.form.newt.so/v1/xxxxxx の値については、1-2で確認したエンドポイントの値に置き換えてください。

（省略）

  function submitFormData(event: Event) {
    event.preventDefault()
    grecaptcha.ready(() => {
      grecaptcha
        // .execute('reCAPTCHA_site_key', { action: 'submit' })
        .execute('6Lcl90UkAAAAAI7LVE8HL9S_xfmNnNkJ9nKgTvim', {
          action: 'submit',
        })
        .then(async (token) => {
          const target = event.target as typeof event.target & {
            name: { value: string }
            email: { value: string }
            message: { value: string }
          }

          const data = {
            name: target.name.value,
            email: target.email.value,
            message: target.message.value,
            googleReCaptchaToken: token,
          }

          const formData = new FormData()
          Object.entries(data).forEach(([key, value]) => {
            formData.append(key, value)
          })

-         await sendRequest(formData)
+         try {
+           const response = await sendRequest(formData)
+           if (response.ok) {
+             location.href = '/thanks'
+           } else {
+             location.href = '/error'
+           }
+         } catch (err) {
+           location.href = '/error'
+         }
        })
    })
  }
（省略）

送信が成功した場合（response.ok がtrueの場合）は /thanks にリダイレクトし、送信成功ページを表示しています。
送信が失敗した場合（response.ok がfalseの場合、またはエラーが発生した場合）は /error にリダイレクトし、送信失敗ページを表示しています。

これでリダイレクトをカスタマイズすることができました。

以上で、すべてのステップが終了となります。

Form Appでは、他にもさまざまな機能があるので、興味のある方はぜひ以下のドキュメントもご覧ください。

• ファイルアップロード
• 独自ドメイン設定
• Zapier連携