Tu propio formulario sobre FluentForm
Cuando la página necesita un formulario rápido y con tu diseño, pero los avisos por email, las entradas y los adjuntos tienen que seguir llegando exactamente donde llegan hoy.
Tienes un formulario en FluentForm que funciona: te avisa por email, guarda cada inscripción en Entradas, recibe los adjuntos y, al terminar, manda a la persona a pagar. No quieres tocar nada de eso.
Pero ese formulario, tal como lo pinta el plugin, arrastra ocho ficheros y jQuery a la página. En móvil eso se nota: la página tarda más en poder usarse y Google lo penaliza.
El puente resuelve las dos cosas a la vez: la página lleva tu formulario, con tu diseño y tu texto, y por detrás sigue alimentando el mismo FluentForm de siempre.
Qué NO cambia
Los emails a tu equipo, el email de confirmación al alumno, la fila en Entradas, los adjuntos y la página a la que rediriges al terminar. Todo eso lo sigue haciendo FluentForm exactamente igual. El puente solo cambia cómo se ve el formulario.
Cómo se activa
En la landing, marca la casilla FluentForm bridge. Con eso la página carga un fichero de 8 KB, sin jQuery.
Después, el formulario de la landing necesita tres datos:
| Atributo | Dónde va | Qué es |
|---|---|---|
data-alloop-ff | en el <form> | El número del formulario de FluentForm (lo ves en su URL de edición) |
data-alloop-ff-origin | en el <form> | La ruta de la página donde vive el formulario original |
data-ff | en cada campo | El nombre que ese campo tiene dentro de FluentForm |
<form data-alloop-ff="4" data-alloop-ff-origin="/inscripcion/">
<input name="nombre" data-ff="names[first_name]" required>
<input name="email" data-ff="email" type="email" required>
<input type="file" name="adjunto" data-ff="file-upload">
<button type="submit">Enviar</button>
</form>Un campo sin data-ff no viaja: sirve solo para la experiencia de la página. Y un
campo que esté oculto tampoco se envía, igual que hace FluentForm con sus campos
condicionales.
Los adjuntos
Funcionan solos. Si el formulario tiene un <input type="file"> con su data-ff, el
puente sube el fichero antes de enviar y lo deja adjunto a la entrada, donde tu
equipo lo abre como siempre.
Qué pasa al enviar
El puente avisa a la página de cómo ha ido, por si quieres hacer algo tuyo:
| Evento | Cuándo |
|---|---|
alloop:ff:success | Se ha guardado. Trae el número de entrada y la redirección que pidió FluentForm |
alloop:ff:error | FluentForm ha rechazado algo. Trae qué campo y por qué |
alloop:ff:progress | Va por la subida del fichero o por el envío |
Si no haces nada, el puente sigue la redirección que tenga configurada FluentForm. Esto importa más de lo que parece: si cada opción de tu formulario manda a un enlace de pago distinto, sigue funcionando igual, sin que tengas que repetir esa lista en ningún sitio. Cambias el enlace en FluentForm y la página nueva lo respeta.
Un campo obligatorio oculto sí se valida
Si un campo es obligatorio y su condición se cumple, FluentForm lo exige aunque el visitante no lo haya visto. Cuando muestres un campo condicional, márcalo como obligatorio en tu formulario también: si no, el envío se rechaza y la persona no entiende por qué.
Cuándo NO usar esto
- Si la página no tiene problemas de velocidad: usa el formulario de FluentForm y ya.
- Si el formulario tiene varios pasos, pago integrado o cálculos: eso lo gestiona el propio plugin y el puente no lo replica.
Y de paso: el banner de cookies
En una landing servida por el renderer hay una segunda casilla, Defer the consent banner script. El banner de cookies suele ser lo que más retrasa que tu página se vea: carga antes que nada y bloquea el dibujado.
Con la casilla marcada el banner se sigue cargando y se sigue viendo igual, pero después de la página en vez de antes. En la inscripción de Aptis de Go!British eso bajó el primer pintado de 2,0 s a 1,1 s.
Antes de marcarla, una comprobación
Algunas webs usan el banner para retener los píxeles hasta que la persona acepta. Si esa es tu web, deja la casilla sin marcar: retrasarías el momento en que se liberan. Lo detectamos solos —si la página tiene scripts retenidos, la opción no hace nada aunque esté marcada—, pero conviene saberlo.
HTML y otras plataformas
El fragmento de alloop antes de cerrar el head, en cualquier web donde puedas editar la plantilla. Webflow, Framer, Astro, Next.js o HTML a mano.
Tus propios eventos
alloop mide solo lo importante de cualquier academia. Si tu negocio tiene un paso que nadie más tiene, lo mides con una línea de código y a partir de ahí vale igual que los nuestros.