Gatsby + Netlify + React Hook Formでお問い合わせページを作成する。

import React from "react";
import { useForm } from "react-hook-form";

// データのエンコード処理
function encode(data) {
  return Object.keys(data)
    .map((key) => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
    .join("&");
}

export const Contact = () => {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm();
  const onSubmit = (data) => {
    //　　データの送信処理、form-nameをformのnameと合わせる。
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({ "form-name": "contact", ...data })
    })
      .then(() => {
        // 成功時の処理
      })
      .catch((error) => {
        // 失敗時の処理
      });
  };
  return (
    // name属性とdata-netlify="true"が必要ここのデータをもとにFormが登録される。
    <form
      noValidate
      name="contact"
      data-netlify="true"
      onSubmit={handleSubmit(onSubmit)}
    >
      // formの内容は任意
      <p>
        名前: <input type="text" {...register("name", { required: true })} />
      </p>
      {errors.name && errors.name.type === "required" && (
        <p style={{ color: "red" }}>必須です。</p>
      )}
      <p>
        メールアドレス:{" "}
        <input type="email" {...register("email", { required: true })} />
        {errors.email && errors.email.type === "required" && (
          <p style={{ color: "red" }}>必須です。</p>
        )}
      </p>
      <p>
        件名:
        <input type="text" {...register("title", { required: true })} />
        {errors.title && errors.title.type === "required" && (
          <p style={{ color: "red" }}>必須です。</p>
        )}
      </p>
      <p>
        お問い合わせ内容:{" "}
        <textarea type="text" {...register("message", { required: true })} />
        {errors.message && errors.message.type === "required" && (
          <p style={{ color: "red" }}>必須です。</p>
        )}
      </p>
      <button type="submit">送信する</button>
    </form>
  );
};

export default Contact;