弊社のコーポレートサイトは、現代のウェブ開発に適したアーキテクチャであるJamstackを採用しています。Jamstackの利点を最大限に活用するために、ホスティングサービスとしてNetlifyを選択しました。Netlifyの特徴の一つは、お問い合わせフォームの実装が容易であることです。
特に、弊社のコーポレートサイトではNext.jsフレームワークを使用しており、以下のライブラリを組み合わせてお問い合わせフォームを実装しています。

• react-hook-form
• axios

これらのライブラリを利用することで、シンプルかつ効率的にお問い合わせフォームを実装することが可能です。

react-hook-formとは

react-hook-formは、Reactアプリケーション向けの軽量で効果的なフォームバリデーションライブラリです。フックを使用して状態を管理するため、クラスコンポーネントを使わずにフォーム状態を管理できます。また、再レンダリングの最適化により、パフォーマンスが向上します。

axiosとは

axiosは、PromiseベースのHTTPクライアントで、ブラウザとNode.jsの両方で動作します。シンプルなAPIと高い柔軟性を提供し、RESTful APIとのやり取りが簡単になります。また、インターセプター機能やリクエスト/レスポンスの変換など、機能が豊富です。

実際の実装例

以下は、Next.js、react-hook-form、axiosを使用してお問合せフォームを実装する例です。

必要なライブラリをインストールします。

npm install react-hook-form axios

お問合せフォームコンポーネントを作成します（例：components/ContactForm.tsx）

import React from 'react';
import { useForm } from 'react-hook-form';
import axios from 'axios';

export type FormValues = {
  name: string
  companyName: string
  email: string
  description: string
  'form-name': string
  'bot-field': string
}

const defaultValues = {
  name: '',
  companyName: '',
  email: '',
  description: '',
  'form-name': 'contact',
  'bot-field': ''
}

export const ContactForm: React.FC = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (values: FormValues) => {
    const params = new FormData()

    setSubmit(false)
    params.append('form-name', 'contact')
    params.append('name', values.name)
    params.append('email', values.email)
    params.append('message', values.message)

    axios({
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      data: params,
      url: '/'
    })
      .then(() => {
				alert('送信しました。')
      })
      .catch(() => {
        alert('送信に失敗しました。')
      })
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="text"
        placeholder="お名前"
        {...register('name', { required: 'お名前を入力してください。' })}
      />
      {errors.name && <p>{errors.name.message}</p>}

      <input
        type="email"
        placeholder="メールアドレス"
        {...register('email', { required: 'メールアドレスを入力してください。' })}
      />
      {errors.email && <p>{errors.email.message}</p>}

      <textarea
        placeholder="お問い合わせ内容"
        {...register('message', { required: 'お問い合わせ内容を入力してください。' })}
      />
      {errors.message && <p>{errors.message.message}</p>}

      <button type="submit">送信</button>
    </form>
  );
};

解説

下記のようにformタグに data-netlify="true" を付与するとNetlify サイトの管理パネルで送信の受信を開始できます。

<form name="contact" method="POST" data-netlify="true">

headers: { 'Content-Type': 'application/x-www-form-urlencoded' } は、HTTPリクエストのヘッダーにコンテンツタイプを指定しています。このコードは、リクエストの本文（ペイロード）が application/x-www-form-urlencoded フォーマットでエンコードされていることを伝える役割があります。
application/x-www-form-urlencoded は、フォームデータをエンコードする際に一般的に使用されるコンテンツタイプです。このフォーマットでは、キーと値がURLエンコードされ、& で区切られます。例えば、以下のような形式になります。

headers: { 'Content-Type': 'application/x-www-form-urlencoded' },

下記についてはNetlify側でformを受け取るために必要な設定です。

params.append('form-name', 'contact')

// 下記でもOK
<input type="hidden" name="form-name" value="contact">

まとめ

こんな感じでNetlifyを使えば簡単にお問い合わせを実装することができます。弊社のコーポレートや今まで制作させていただいたお客様のホームページでも同じような実装をしています。