Framer

Los formularios de Framer no pueden enviar a una URL de action externa, pero sí pueden mandar cada envío a un webhook. Eso da dos opciones: conservar el formulario de Framer y añadir Ikiform como su webhook, o colocar un pequeño code component que envía desde el navegador del visitante.

Formulario de Framer con un webhook

1. Ponles nombre a los inputs

   Framer envía JSON con el nombre de cada input como clave, así que los nombres que les des a los inputs se convierten en los nombres de campo en Ikiform. Usa ids en minúsculas como email y message, y haz que coincidan con tu definición de campos si tienes una.

2. Añade Ikiform como webhook

   Selecciona el formulario en el lienzo. Junto a Send To, en la barra lateral derecha, elige Add… > Webhook y pega tu endpoint. Framer exige una URL https://, y el endpoint ya lo es.

   https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx

   Framer puede firmar las peticiones con un secreto. Ikiform no comprueba la cabecera Framer-Signature, así que aquí el secreto es opcional.

3. Ajusta la configuración del formulario de Ikiform

   • Deja Allowed domains vacío. Framer envía desde sus servidores sin cabecera Origin, así que con dominios configurados cada envío se marca como spam con origin_mismatch, o se rechaza con Reject.
   • Deja desactivada la verificación antispam. Un envío JSON sin token recibe 403 challenge_required, y Framer no tiene forma de ejecutar la verificación.
   • Elige el límite de frecuencia Relaxed. Ikiform cuenta los envíos por dirección IP y formulario, y todos los envíos vienen de los servidores de Framer, no de tus visitantes.

Framer trata cualquier respuesta que no sea 2xx como un fallo y reintenta hasta 5 veces. Ikiform responde 201 en cuanto guarda el envío. Un envío que Ikiform rechaza, como 422 validation_failed, falla igual en cada reintento, así que corrige la causa en lugar de esperar.

Code component

Un code component renderiza un formulario real en tu página, así que lo envía el navegador e Ikiform ve tu sitio como origen. En el panel Assets, abre Code, crea un archivo de código y pega:

import { addPropertyControls, ControlType } from "framer";
import { type CSSProperties, type FormEvent, useState } from "react";

const field: CSSProperties = {
  font: "inherit",
  padding: "10px 12px",
  borderRadius: 8,
  border: "1px solid rgba(0, 0, 0, 0.15)",
};

export default function IkiformContact({ formId, successText }: { formId: string; successText: string }) {
  const [status, setStatus] = useState<"idle" | "sending" | "sent" | "error">("idle");
  const [message, setMessage] = useState("");

  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setStatus("sending");
    try {
      const response = await fetch(`https://ikiform.com/f/${formId}`, {
        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>{successText}</p>;

  return (
    <form onSubmit={onSubmit} style={{ display: "grid", gap: 12, width: "100%" }}>
      <input name="email" type="email" placeholder="Email" autoComplete="email" required style={field} />
      <textarea name="message" placeholder="Message" rows={4} style={field} />
      <input name="_gotcha" type="text" tabIndex={-1} autoComplete="off" hidden />
      {status === "error" ? <p role="alert">{message}</p> : null}
      <button type="submit" disabled={status === "sending"} style={field}>
        {status === "sending" ? "Sending" : "Send"}
      </button>
    </form>
  );
}

addPropertyControls(IkiformContact, {
  formId: { type: ControlType.String, title: "Form ID", defaultValue: "frm_xxxxxxxxxxxxxxxx" },
  successText: { type: ControlType.String, title: "Success text", defaultValue: "Thanks, we got it." },
});

• Arrastra el componente a la página y define Form ID en el panel de propiedades. Dale estilo a los inputs editando field, o sustituye los elementos por los tuyos.
• Accept: application/json hace que Ikiform responda con JSON, para que el componente pueda mostrar el resultado en su sitio.
• El componente envía con fetch, así que deja desactivada la verificación antispam del formulario. El honeypot y la puntuación de spam siguen funcionando.

Dominios permitidos

Esto solo aplica al code component y al embed. Deja vacíos los dominios permitidos para el webhook.

• Nunca añadas framer.app ni framer.website solos. Coincidiría cualquier sitio de ese host, incluidos los de otras personas.

Lista de pruebas

1. Publica el sitio. Framer solo envía webhooks de los formularios del sitio publicado.
2. Envía el formulario y comprueba el envío en Ikiform. Con el webhook, los campos deberían coincidir exactamente con los nombres de tus inputs.
3. Para el code component, activa los dominios permitidos, envía desde el dominio publicado y confirma que no se marca como spam.

Solución de problemas

Relacionado

• ReactEstados de carga, error y éxito.
• Creadores de sitiosEl embed que funciona en cualquier creador.
• Límites de frecuenciaLos presets y cómo se recargan.
• Protección antispamHoneypot, puntuación y verificación humana.