React Hook Form + Denorly

npm i react-hook-form axios

import { useForm } from "react-hook-form";
import axios from "axios";

const TOKEN = "8f3b2c1a-9d4e-4f7a-b6c2-1e5a7d9c0b3f";

export default function ContactForm() {
  const {
    register,
    handleSubmit,
    setError,
    formState: { errors, isSubmitting, isSubmitSuccessful },
  } = useForm();

  const onSubmit = async (data) => {
    try {
      const res = await axios.post(`https://denorly.com/f/${TOKEN}`, data, {
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
      });

      // Denorly puede responder 200 con success:false en algunos casos.
      if (res.data.success === false) {
        setError("root", { message: res.data.error });
      }
    } catch (err) {
      // No-2xx: el motivo viene en err.response.data.error (un único string).
      setError("root", {
        message: err.response?.data?.error ?? "No se pudo enviar. Reintenta.",
      });
    }
  };

  if (isSubmitSuccessful && !errors.root) {
    return <p className="success">✅ ¡Enviado! Te respondemos pronto.</p>;
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate>
      <input
        placeholder="Nombre"
        {...register("nombre", { required: "El nombre es obligatorio" })}
      />
      {errors.nombre && <span>{errors.nombre.message}</span>}

      <input
        placeholder="Email"
        {...register("email", {
          required: "El email es obligatorio",
          pattern: { value: /^[^@\s]+@[^@\s]+\.[^@\s]+$/, message: "Email inválido" },
        })}
      />
      {errors.email && <span>{errors.email.message}</span>}

      <textarea placeholder="Mensaje" {...register("mensaje")} />

      {/* Error a nivel de formulario (lo que devuelve Denorly) */}
      {errors.root && <p className="error">{errors.root.message}</p>}

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "Enviando…" : "Enviar"}
      </button>
    </form>
  );
}