Gatsby

Gatsby merender setiap halaman menjadi HTML saat build. Beri formulir action yang sungguhan, maka formulir mengirim sebelum React terhidrasi, atau jika bundle gagal dimuat; setelah terhidrasi, komponen mengirim dengan fetch dan menampilkan hasilnya di tempat.

Kirim dari browser

1. Tambahkan ID formulir

   GATSBY_IKIFORM_FORM_ID=frm_xxxxxxxxxxxxxxxx

   Gatsby hanya mengekspos variabel yang diawali GATSBY_ ke kode browser, dan menanamnya saat build. Tambahkan baris yang sama ke .env.development untuk gatsby develop.

2. Tambahkan komponen

   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>
     );
   }

   Render dari halaman mana pun, misalnya src/pages/contact.js, dan tambahkan src/pages/thanks.js untuk redirect tanpa JavaScript. Untuk error field dan pemeriksaan manusia dari SDK, kembangkan seperti di panduan React.

Kirim dari Gatsby Function

Gatsby Function bisa meneruskan kiriman dengan secret key, yang melewati domain yang diizinkan dan pemeriksaan manusia. Function hanya berjalan di host yang mendukung Gatsby Functions, seperti Netlify dengan adapter Gatsby; host statis murni seperti GitHub Pages tidak bisa menjalankannya. Simpan IKIFORM_FORM_ID dan secret key dengan scope submissions:write sebagai IKIFORM_SECRET_KEY, tanpa awalan GATSBY_ agar tidak pernah sampai ke browser.

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 mengurai body JSON dan form-encoded ke req.body, jadi halaman bisa mengirim ke /api/contact dengan cara mana pun. Semua kiriman lalu berbagi alamat IP function Anda untuk rate limit; lihat Dari server.

Domain yang diizinkan

Ini berlaku untuk kiriman dari browser. Kiriman dari Gatsby Function memakai secret key dan melewati pemeriksaan ini.

• Jangan pernah menambahkan netlify.app atau pages.dev saja. Setiap situs di host itu akan cocok, termasuk milik orang lain.

Daftar periksa pengujian

1. Jalankan gatsby build dan buka public/contact/index.html. action formulir seharusnya berakhir dengan ID formulir Anda, bukan undefined.
2. Jalankan gatsby serve dengan localhost di domain yang diizinkan, lalu kirim. Pesan terima kasih seharusnya menggantikan formulir.
3. Matikan JavaScript, muat ulang, lalu kirim. Anda seharusnya melihat halaman terima kasih Ikiform secara lokal, atau /thanks/ di domain https: Anda.
4. Jika Anda memakai function, kirim ke /api/contact di deploy preview dan pastikan kirimannya muncul di Ikiform.

Pemecahan masalah

Terkait

• ReactState pending, error, dan sukses.
• Dari serverKirim dengan secret API key.
• Domain yang diizinkanCara origin dicocokkan, dan apa akibat ketidakcocokan.
• ErrorSetiap kode error, beserta penyebab dan solusinya.