Si has trabajado con Drupal Webform y configurado la confirmación como Modal, probablemente te hayas encontrado con un problema de reenvío: cuando el usuario presiona F5 o refresca la página después de enviar el formulario, se crea un nuevo submission. Este problema de resubmit en Webform con confirmación Modal puede generar duplicados y afectar la integridad de tus datos.
Exploraremos por qué ocurre este issue y cómo implementar la solución recomendada.
El Problema
Escenario
- Configuras un webform con confirmación tipo "Modal (reloads the current page/form and displays the confirmation message in a modal dialog)"
- El usuario completa y envía el formulario
- Aparece el modal de confirmación
- El usuario presiona F5 (refresh)
- El navegador pregunta si desea reenviar los datos del formulario
- Resultado: Se crea un nuevo submission duplicado
Este ciclo puede repetirse indefinidamente, generando múltiples submissions idénticos.
¿Por qué ocurre?
A diferencia de otras opciones de confirmación que utilizan redirecciones (como "Message" o "Page"), la opción Modal recarga la página actual sin redirección. Esto significa que el navegador mantiene en memoria el último POST realizado, y al presionar F5, reenvía automáticamente los datos del formulario.
Posición del Mantenedor de Webform
Este comportamiento está documentado en el issue #3165992 de Drupal.org.
Jacob Rockowitz, mantenedor principal de Webform, cerró el issue como "Won't fix" indicando que:
"To do this, you would need to alter the confirmation page's response and/or form for modal dialogs. This is not a feature or behavior that needs to be included in the core Webform module."
Sin embargo, reconoce que el problema existe y sugiere soluciones alternativas. En su último comentario del issue, menciona que habilitar AJAX en el webform podría eliminar el problema de submissions duplicadas al presionar reload.
La Solución Oficial
Webform proporciona una solución documentada en su página oficial: How to prevent browser reload from resubmitting a webform.
Implementación Paso a Paso
1. Accede a la Configuración de Librerías
Tienes dos opciones dependiendo del alcance que necesites:
Opción A - Aplicar a TODOS los webforms (Global):
/admin/structure/webform/config/librariesOpción B - Aplicar a UN webform específico:
/admin/structure/webform/manage/[machine_name_webform]/settings/assetsReemplaza [machine_name_webform] con el machine name de tu formulario.
2. Agrega el JavaScript
En la sección de JavaScript (Custom), agrega el siguiente código:
// Prevent ctrl+r from resubmitting this form.
// https://stackoverflow.com/questions/6320113/how-to-prevent-form-resubmission-when-page-is-refreshed-f5-ctrlr
if (window.history.replaceState) {
window.history.replaceState(null, null, window.location.href);
}3. Guarda y Limpia Caché
drush crO desde la UI en /admin/config/development/performance
¿Cómo Funciona?
El método window.history.replaceState() reemplaza el estado actual del historial del navegador. Al hacerlo, elimina el POST del historial, de modo que cuando el usuario presiona F5, el navegador simplemente recarga la página actual (GET) en lugar de reenviar el formulario (POST).
Consideraciones Importantes
Efecto Secundario
Al implementar esta solución, el mensaje de confirmación desaparecerá si el usuario recarga la página. Esto es un trade-off aceptable en la mayoría de los casos:
- ✅ Evita submissions duplicados
- ⚠️ El modal de confirmación no persiste al recargar
Conclusión
El problema de resubmisión al refrescar la página con confirmación Modal es un comportamiento conocido de Webform que no se considera un bug, sino una consecuencia de cómo funciona el modal (sin redirección).
La solución mediante window.history.replaceState() es simple, efectiva, y está oficialmente documentada. El único trade-off es que el modal desaparece al refrescar, lo cual en la mayoría de casos es preferible a tener submissions duplicados.
Referencias
Me pareció interesante el artículo
Añadir nuevo comentario