Webflow

El Form Block de Webflow puede enviar a cualquier URL. Apunta su action a tu endpoint de Ikiform y el formulario conserva el diseño y los estilos que creaste en el Designer, mientras Ikiform valida, filtra el spam, guarda, envía emails y manda webhooks.

Qué cambia un action personalizado

• Webflow solo procesa un formulario cuando es el destino. Con un action personalizado, el navegador envía directamente a Ikiform, así que el envío no aparece en los envíos de formularios de Webflow y Webflow no manda ningún email de notificación.
• Los destinos propios de Webflow no pueden funcionar junto a un action personalizado. Quítalos en Send to antes de añadir Ikiform.
• Los bloques de éxito y error de Webflow (.w-form-done y .w-form-fail) y el ajuste de redirección del propio formulario dejan de funcionar, porque Webflow nunca ve el resultado. Los visitantes llegan a la página de agradecimiento de Ikiform o a tu URL de Redirect after submit. El paso 4 recupera los bloques de Webflow.

Configura el formulario

1. Apunta el formulario a Ikiform

   Selecciona el formulario dentro del Form Block y abre el panel Settings. En Send to, elige un action personalizado, pega tu endpoint en Action y pon Method en POST.

   https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx

   Si dejas el método en GET, el navegador abre el endpoint como una página, que responde 404 not_found. Ikiform solo acepta envíos.

2. Ponles nombre a los campos

   El ajuste Name de cada input se convierte en el nombre del campo en Ikiform. Webflow lo rellena a partir de la etiqueta, así que obtienes nombres como Name, Email y Field 2. Cámbialos por los ids que quieres ver, como name, email y message.

   • Si defines campos en el formulario de Ikiform, los nombres deben coincidir exactamente con sus ids. Los ids van en snake_case en minúsculas, así que Email y email son campos distintos.
   • Quita cualquier elemento reCAPTCHA del formulario. Ikiform no lo verifica y su valor g-recaptcha-response llegaría como un campo extra. Usa en su lugar la verificación antispam de Ikiform.

3. Añade un honeypot

   Añade un Input al formulario, pon su Name en _gotcha y ocúltalo con Display: none en el panel Style. En Custom attributes, añade tabindex con el valor -1 y autocomplete con el valor off para que los teclados y los gestores de contraseñas lo ignoren. Con un plan de sitio de pago, puedes pegar esto en un Code Embed dentro del formulario:

   <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />

4. Elige qué pasa después del envío

   La opción más sencilla es una página de agradecimiento. Créala en Webflow, publícala y pega su URL completa en Redirect after submit, en los ajustes del formulario de Ikiform.

   Conserva los bloques de éxito y error de Webflow

   Para quedarte en la página, envía con fetch y alterna tú los bloques de Webflow. Pega esto en Page settings > Custom code > Before </body> tag, o en el código del pie del sitio para cubrir todos los formularios. Muestra el mensaje de error de Ikiform dentro del bloque de error y usa el Waiting text del botón mientras envía.

   <script>
     document.querySelectorAll('form[action^="https://ikiform.com/f/"]').forEach((form) => {
       const wrapper = form.closest(".w-form");
       const done = wrapper?.querySelector(".w-form-done");
       const fail = wrapper?.querySelector(".w-form-fail");
       const button = form.querySelector('[type="submit"]');
   
       form.addEventListener("submit", async (event) => {
         event.preventDefault();
         const label = button?.value;
         if (button) {
           button.disabled = true;
           button.value = button.dataset.wait || label;
         }
         try {
           const response = await fetch(form.action, {
             method: "POST",
             headers: { Accept: "application/json" },
             body: new FormData(form),
           });
           const result = await response.json();
           if (result.ok) {
             form.style.display = "none";
             if (fail) fail.style.display = "none";
             if (done) done.style.display = "block";
             return;
           }
           const text = fail?.querySelector("div") ?? fail;
           if (text) text.textContent = result.error.message;
           if (fail) fail.style.display = "block";
         } catch {
           if (fail) fail.style.display = "block";
         } finally {
           if (button) {
             button.disabled = false;
             button.value = label;
           }
         }
       });
     });
   </script>

   El código personalizado y el elemento Code Embed necesitan un plan de sitio de pago o un plan Workspace, y ninguno de los dos se ejecuta en el Designer. Publica para verlos funcionar.

El script envía con fetch, así que un formulario con la verificación antispam en Ikiform responde 403 challenge_required en lugar de mostrar la página de verificación. Usa el script con la verificación desactivada, o prescinde del script y deja que el navegador envíe de forma normal, lo que ejecuta la verificación sin código extra.

Dominios permitidos

Si configuras dominios permitidos, incluye todas las direcciones donde se publica el formulario. Los subdominios de un dominio de la lista ya coinciden.

• Nunca añadas webflow.io solo. Coincidiría cualquier sitio de ese host, incluidos los de otras personas.

Lista de pruebas

1. Publica en tu dominio de staging webflow.io. Los formularios con un action personalizado solo envían desde el sitio publicado.
2. Envía el formulario y abre los envíos del formulario en Ikiform. El nuevo envío debería aparecer como recibido, no como spam.
3. Comprueba que los nombres de campo coinciden con los que pusiste en el paso 2 y que el honeypot no aparece: los nombres que empiezan con _ nunca se guardan.
4. Confirma que llegas a tu página de agradecimiento, o que ves el bloque de éxito de Webflow si añadiste el script.
5. Publica en tu dominio propio y vuelve a enviar una vez desde ahí.

Solución de problemas

Relacionado

• Creadores de sitiosEl embed que funciona en cualquier creador.
• Formularios HTMLRedirecciones, campos reservados y el honeypot.
• Dominios permitidosCómo se comparan los orígenes y qué pasa cuando no coinciden.
• ErroresCada código de error, con su causa y su solución.