Incrusta un formulario en tu propio sitio web con el componente generado

Un formulario no necesita una página de FormFlow. Si ya tienes un sitio web, puedes pegar en él el componente generado del formulario y mantener a tus visitantes en tus propias páginas. Este tutorial cubre la copia, el pegado y las dos cosas que más suelen sorprender después: dónde aterriza un visitante tras pulsar Enviar y qué pasa cuando más adelante cambias los campos del formulario. La inserción forma parte de FormFlow desde la v1.0.0.

Qué necesitas

Un formulario con al menos un campo y una página tuya donde puedas pegar HTML, o un archivo Blade, Vue o React. No necesitas una página alojada, que solo está disponible en un plan de pago. Nada en Obtener código comprueba tu plan, así que un equipo con el plan Free también puede incrustar un formulario. La cuota de envíos del plan se sigue aplicando a lo que recibe el formulario.

Copia el componente generado

1. Abre el formulario en el panel. En la cabecera del editor, pulsa Obtener código. En un formulario que nunca ha recibido un envío es el botón resaltado. En cualquier otro formulario está en Herramientas. La lista de formularios también tiene una acción Obtener código en cada fila.

2. La ventana se titula Componente listo para pegar. Su primera línea dice "Apunte su formulario a" seguido del endpoint del formulario, que termina en el token del formulario. Ese endpoint es la única dirección que necesita tu página.

3. Elige un Estilo. Un solo Estilo rige todas las pestañas y la Vista previa, y Minimal es el predeterminado. El Estilo se escribe en la copia, así que cambiar de Estilo más adelante implica copiar de nuevo.

4. Elige la pestaña de tu stack: HTML, Blade, Vue o React. La pestaña Vista previa dibuja la versión HTML dentro del panel para que puedas comprobarla antes de pegar nada.

5. Pulsa la insignia Copiar al portapapeles en la parte superior de la pestaña y pega el resultado en tu página, donde quieras que aparezca el formulario.

Qué contiene la copia HTML

La pestaña HTML es un formulario normal que envía los datos al endpoint de tu formulario. Este es un ejemplo abreviado para un formulario con un campo Correo electrónico. YOUR_FORM_TOKEN ocupa el lugar del token y, en la copia real, primero va un elemento style con el CSS del Estilo.

<form action="https://formflow.digital/api/v1/f/YOUR_FORM_TOKEN" class="ff-form" lang="en" dir="ltr" method="post">
    <div class="ff-group">
        <label class="ff-label" for="ff-email" dir="auto">Email<span aria-hidden="true"> *</span></label>
        <input class="ff-input" id="ff-email" name="email" type="email" dir="auto" autocomplete="email" required>
    </div>
    <!-- ...one group per field... -->

    <div aria-hidden="true" class="ff-honeypot">
        <label for="ff-ff_xxxxxxxx">Leave this field empty</label>
        <input autocomplete="off" id="ff-ff_xxxxxxxx" name="ff_xxxxxxxx" tabindex="-1" type="text">
    </div>

    <button class="ff-button" type="submit">Send</button>
</form>

Dos partes merecen una palabra. Los nombres de los campos, como name="email", son los que aparecen como respuestas en tus envíos, así que cámbialos en el formulario y no en tu página. El campo fuera de pantalla es una trampa para el spam que las personas nunca ven y que los bots suelen rellenar. Su nombre se genera para cada formulario y aquí aparece como ff_xxxxxxxx. Déjalo en su sitio.

Decide dónde aterrizan los visitantes

Las copias HTML y Blade son formularios nativos. Cuando alguien pulsa Enviar, el navegador envía los datos a FormFlow y muestra lo que FormFlow responda. Sin redirección, esa respuesta es un mensaje JSON corto. Es correcto, pero no es lo que quieres que lea un visitante. El panel lo dice junto al ajuste: "Los remitentes del formulario HTML simple obtendrán una respuesta JSON sin formato."

1. En el editor del formulario, abre la pestaña Entrega.

2. En Dónde acaba quien envía, rellena Redirigir a los remitentes a con una página de agradecimiento de tu propio sitio. Debe ser una dirección http o https.

3. Guarda el formulario.

Las copias de React y Vue funcionan de otra forma. Envían los datos en segundo plano y muestran su propio mensaje de confirmación en el sitio, así que la redirección solo importa para HTML y Blade.

Limita de dónde pueden llegar los envíos

De forma predeterminada, un formulario acepta un envío desde cualquier origen. En la pestaña Seguridad, en De dónde pueden llegar los envíos, Orígenes permitidos admite solo nombres de host, sin esquema ni ruta. Su texto de ayuda dice que una lista vacía permite cualquier origen. Añade el nombre de host de tu sitio, por ejemplo example.com, y los envíos desde otros orígenes se rechazan. El interruptor que hay debajo, Rechazar envíos sin encabezado de origen, también rechaza los envíos que no llevan ningún origen.

Si se rechaza un envío de prueba desde tu página, la causa habitual es un nombre de host mal escrito. FormFlow conserva los envíos rechazados sobre los que puedes actuar, así que corrige la lista y luego busca en Rechazado, en el panel, para recuperarlos.

Turnstile y tu Política de seguridad de contenido

Otras dos cosas solo se aplican si las usas. Primero, el interruptor Requerir un desafío de Turnstile en la pestaña Seguridad. La clave de Turnstile integrada de FormFlow solo cubre las páginas que sirve FormFlow, así que en tu propio sitio necesitas tu propia clave de Cloudflare Turnstile, introducida en Configuración del equipo. Sin ella, la copia lleva el marcador YOUR_TURNSTILE_SITE_KEY y cada envío desde tu página se puntúa como spam.

Segundo, si tu sitio envía una Política de seguridad de contenido, Obtener código imprime las directivas que debes añadir, en la línea que empieza por "Si su sitio utiliza una Política de seguridad de contenido (CSP)". Para la copia simple, eso es un script-src que permite 'self' y challenges.cloudflare.com, un frame-src para challenges.cloudflare.com y un connect-src para el origen del endpoint de tu formulario. Copia la línea de la ventana y no de aquí, porque se construye para tu formulario.

Comprueba que funciona

1. Abre tu página y envía una entrada de prueba con el formulario pegado.

2. Confirma que aterrizas donde esperas: tu página de agradecimiento o el mensaje de confirmación en una copia de React o Vue.

3. Abre Envíos en el panel y busca la entrada. Si falta, revisa Rechazado antes de cambiar nada.

Límites que conviene conocer

• Una copia pegada no sigue los cambios posteriores en los campos del formulario, salvo que uses Representación en vivo o copies de nuevo.

• El Estilo queda fijado al copiar. Después no se puede cambiar desde el formulario.

• La redirección se aplica solo a los formularios nativos.

• Orígenes permitidos acota el tráfico del navegador. No autentica a nadie.