Gatsby

Gatsby はビルド時にすべてのページを HTML に描画します。フォームに本物の action を付ければ、React がハイドレーションする前や、バンドルの読み込みに失敗した場合でも送信できます。ハイドレーション後は、コンポーネントが fetch で送信し、結果をその場に表示します。

ブラウザーから送信する

1. フォーム ID を追加する

   GATSBY_IKIFORM_FORM_ID=frm_xxxxxxxxxxxxxxxx

   Gatsby がブラウザーのコードに公開するのは GATSBY_ で始まる変数だけで、ビルド時に埋め込まれます。gatsby develop 用に、同じ行を .env.development にも追加してください。

2. コンポーネントを追加する

   import * as React from "react";
   
   const endpoint = `https://ikiform.com/f/${process.env.GATSBY_IKIFORM_FORM_ID}`;
   
   export default function ContactForm() {
     const [status, setStatus] = React.useState("idle");
     const [message, setMessage] = React.useState("");
   
     async function onSubmit(event) {
       event.preventDefault();
       setStatus("sending");
       try {
         const response = await fetch(endpoint, {
           method: "POST",
           headers: { Accept: "application/json" },
           body: new FormData(event.currentTarget),
         });
         const result = await response.json();
         if (result.ok) return setStatus("sent");
         setMessage(result.error.message);
       } catch {
         setMessage("Couldn't reach the server. Try again.");
       }
       setStatus("error");
     }
   
     if (status === "sent") return <p>Thanks, we got it.</p>;
   
     return (
       <form action={endpoint} method="post" onSubmit={onSubmit}>
         <label>
           Email
           <input name="email" type="email" autoComplete="email" required />
         </label>
         <label>
           Message
           <textarea name="message" rows={5} />
         </label>
         <input type="hidden" name="_redirect" value="https://example.com/thanks/" />
         <input name="_gotcha" type="text" tabIndex={-1} autoComplete="off" hidden />
         {status === "error" ? <p role="alert">{message}</p> : null}
         <button disabled={status === "sending"}>Send</button>
       </form>
     );
   }

   src/pages/contact.js など任意のページから描画し、JavaScript なしの場合のリダイレクト用に src/pages/thanks.js を追加します。フィールドエラーや SDK の人間確認を使うには、React のガイドのように拡張してください。

Gatsby Function から送信する

Gatsby Function はシークレットキーを付けて送信を転送できるので、許可ドメインと人間確認をスキップできます。動くのは、Gatsby のアダプターを使った Netlify など、Gatsby Functions に対応したホストだけです。GitHub Pages のような完全な静的ホストでは動きません。IKIFORM_FORM_ID と、submissions:write スコープを持つシークレットキーを IKIFORM_SECRET_KEY として保存します。ブラウザーに届かないよう、GATSBY_ は付けないでください。

export default async function handler(req, res) {
  if (req.method !== "POST") return res.status(405).end();
  const response = await fetch(`https://ikiform.com/f/${process.env.IKIFORM_FORM_ID}`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
      Authorization: `Bearer ${process.env.IKIFORM_SECRET_KEY}`,
    },
    body: JSON.stringify(req.body),
  });
  res.status(response.status).json(await response.json());
}

Gatsby は JSON とフォームエンコードのボディを req.body に解析するので、ページからはどちらの形式でも /api/contact に送信できます。その場合、すべての送信がレート制限上は Function の IP アドレスを共有します。サーバーから送信するを参照してください。

許可ドメイン

これはブラウザーからの送信に当てはまります。Gatsby Function からの送信はシークレットキーを使うので、チェックをスキップします。

• netlify.app や pages.dev だけを追加しないでください。他の人のサイトも含め、そのホスト上のすべてのサイトが一致してしまいます。

テストのチェックリスト

1. gatsby build を実行し、public/contact/index.html を開きます。フォームの action が undefined ではなく、フォーム ID で終わっているはずです。
2. 許可ドメインに localhost を入れて gatsby serve を実行し、送信します。お礼のメッセージがフォームに置き換わるはずです。
3. JavaScript をオフにし、再読み込みして送信します。ローカルでは Ikiform のサンクスページが、https: のドメインでは /thanks/ が表示されるはずです。
4. Function を使う場合は、デプロイプレビューで /api/contact に送信し、送信データが Ikiform に表示されることを確認します。

トラブルシューティング

関連ページ

• React送信中、エラー、成功の状態。
• サーバーから送信するシークレット API キーで送信します。
• 許可ドメインオリジンの照合方法と、一致しない場合の動作。
• エラーすべてのエラーコードと、その原因と対処。