Integración con Next.js

Client component del App Router (Next.js 15) que envía el formulario a Farvane con fetch.

"use client";

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.currentTarget);
    formData.append("access_key", ACCESS_KEY);

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

  return (
    <form onSubmit={handleSubmit}>
      <input type="checkbox" name="botcheck" style={{ display: "none" }} tabIndex={-1} autoComplete="off" />
      <input type="text" name="name" placeholder="Nombre" required />
      <input type="email" name="email" placeholder="Email" required />
      <textarea name="message" placeholder="Mensaje" required />
      <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>
  );
}

La directiva "use client" es obligatoria porque el componente usa useState y un manejador de evento en el navegador. El resto del flujo es idéntico al ejemplo de React: botcheck como honeypot, access_key añadido al FormData antes de enviarlo.

Siguiente paso: crea tu cuenta y copia tu access_key real.