Next.js integration

An App Router (Next.js 15) client component that submits the form to Farvane with 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>
  );
}

The "use client" directive is required because the component uses useState and a browser event handler. The rest of the flow is identical to the React example: botcheck as the honeypot, access_key appended to the FormData before sending.

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