React integration

A function component that submits the form with fetch and FormData, no extra dependencies.

import { useState } from "react";

const ACCESS_KEY = "YOUR_ACCESS_KEY_HERE";

export default function ContactForm() {
  const [status, setStatus] = useState("idle");

  async function handleSubmit(event) {
    event.preventDefault();
    setStatus("sending");

    const formData = new FormData(event.target);
    formData.append("access_key", ACCESS_KEY);

    try {
      const response = await fetch("https://api.farvane.com/api/v1/submit", {
        method: "POST",
        headers: { Accept: "application/json" },
        body: formData,
      });
      const result = await response.json();
      setStatus(result.success ? "success" : "error");
    } catch (error) {
      setStatus("error");
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="checkbox" name="botcheck" style={{ display: "none" }} tabIndex={-1} autoComplete="off" />
      <label>
        Nombre
        <input type="text" name="name" required />
      </label>
      <label>
        Email
        <input type="email" name="email" required />
      </label>
      <label>
        Mensaje
        <textarea name="message" required />
      </label>
      <button type="submit" disabled={status === "sending"}>
        {status === "sending" ? "Enviando..." : "Enviar"}
      </button>
      {status === "success" && <p>¡Gracias! Hemos recibido tu mensaje.</p>}
      {status === "error" && <p>Algo falló. Inténtalo de nuevo.</p>}
    </form>
  );
}

The hidden botcheck field is still required as the anti-spam honeypot, just like in the plain HTML example. access_key is appended to the FormData right before sending.

Next step: create your account and copy your real access_key.