El usuario hace clic en enviar. ¿Qué pasa después? El navegador envía los datos al servidor. El servidor los procesa. ¿Y luego? ¿Se recarga la página? ¿Aparece algo en la página? ¿Se redirige al usuario a otro sitio?
La gestión del envío de formularios es el puente entre el frontend y el backend. Si la haces mal, el usuario se confunde. Si la haces bien, la experiencia resulta fluida y con sentido. Este artículo explica las distintas formas de gestionar el envío de formularios.
Envío tradicional de formularios
En un envío tradicional, el navegador manda los datos del formulario al servidor usando los atributos action y method del formulario.
<form action="/submit" method="POST">
<input type="text" name="email">
<button type="submit">Send</button>
</form>
Cuando el usuario hace clic en el botón, el navegador codifica los datos del formulario y los envía a /submit. El servidor los procesa y responde con una página nueva. El navegador carga esa página. El usuario ve una URL nueva y contenido nuevo.
El envío tradicional es simple, funciona en todas partes y funciona sin JavaScript. Su principal desventaja es que la página se recarga, lo que parece lento aunque no lo sea, hace que el usuario pierda su posición de desplazamiento y borra los campos del formulario.
Envío de formularios con redirecciones
Después de procesar un formulario, el servidor normalmente redirige al usuario a una página de éxito o de vuelta al formulario.
En el servidor, tras procesar el formulario, se usa return redirect('/thank-you'), que envía una respuesta de redirección HTTP 303 para que el navegador la siga y cargue la página /thank-you, donde el usuario ve contenido nuevo en una URL nueva. La ventaja es que el usuario sabe que el formulario se procesó y una página nueva deja claro que ha pasado algo. La desventaja es que la página se recarga, lo que exige dos peticiones al servidor (una por el envío del formulario y otra por el destino de la redirección), y eso hace que la experiencia parezca más lenta de lo necesario.
Envío de formularios con AJAX
AJAX (JavaScript y XML asíncronos) permite enviar los datos del formulario sin recargar la página con form.addEventListener('submit', async (e) => { e.preventDefault(); const data = new FormData(form); const response = await _blocked_('/submit', { method: 'POST', body: data }); if (response.ok) { showMessage('Form submitted successfully'); form.reset(); } });. El navegador envía los datos con _blocked_, el servidor los procesa y responde, y el JavaScript recibe la respuesta y actualiza la página sin recarga ni redirección. El usuario se queda en la misma página, pero ve una confirmación. La ventaja es que es rápido, ofrece una experiencia fluida, no recarga la página y te da control total sobre lo que pasa después. La desventaja es que requiere JavaScript, y si el JavaScript falla, el formulario no se envía, el historial no se actualiza (la URL se mantiene) y tienes que gestionar tú toda la respuesta al usuario.
Mejora progresiva con AJAX
La mejora progresiva significa que el formulario funciona sin JavaScript, pero funciona mejor con él. Empieza con un formulario tradicional que funcione sin JavaScript, en el que el formulario se envía y la página redirige a un agradecimiento. Después, si hay JavaScript disponible, intercepta el evento submit con addEventListener usando if (supportsJavaScript) { form.addEventListener('submit', handleAjaxSubmission); } para enviar con AJAX y mostrar un mensaje en la misma página. Ahora el formulario funciona en los dos escenarios. Con JavaScript, se envía con AJAX y el usuario se queda en la página. Sin JavaScript, se envía de forma tradicional y redirige. La ventaja es que el formulario funciona para todos: quienes tienen JavaScript disfrutan de la experiencia fluida y quienes no lo tienen siguen pudiendo usar el formulario. La desventaja es que hay más código, porque tienes que mantener los dos caminos de envío.
Gestionar los errores de envío
Cuando el servidor rechaza un envío (falla la validación, error de base de datos, etc.), tienes dos enfoques. En el envío tradicional, el servidor vuelve a mostrar el formulario con mensajes de error y se los muestra al usuario. En el envío con AJAX, el servidor responde con un código de estado de error (400, 422) y mensajes de error, y el JavaScript muestra los errores en la página usando _blocked_('/submit', { method: 'POST', body: data }).then(response => { if (!response.ok) { return response.json().then(data => { showErrors(data.errors); }); } return response.json(); });. Muestra siempre los errores junto a los campos que los causaron, en lugar de esconderlos en un resumen, para que el usuario vea exactamente qué falló y dónde corregirlo.
Gestionar los estados de carga
Cuando se envía el formulario, desactiva el botón de enviar para que el usuario no haga clic dos veces y muestra un indicador o un mensaje de carga con form.addEventListener('submit', async (e) => { e.preventDefault(); button.disabled = true; button.textContent = 'Sending...'; const response = await _blocked_('/submit', { method: 'POST', body: data }); button.disabled = false; button.textContent = 'Send'; });. Desactiva el botón de inmediato, porque si la petición tarda 5 segundos, el usuario podría hacer clic otra vez pensando que no funcionó.
Qué hacer tras un envío correcto
Cuando el formulario se envía con éxito, tienes varias opciones. Puedes borrar los campos, mostrar un mensaje de agradecimiento, redirigir a una página de agradecimiento, enviar un email al usuario, devolverlo a la página anterior o dejarlo en el formulario para que pueda enviar otro. Elige según el propósito de tu formulario. Un formulario de contacto debería mostrar un mensaje de agradecimiento, uno de reservas debería redirigir a la confirmación de la reserva y una suscripción a la newsletter debería devolver al usuario a la página donde estaba.
Cómo gestiona WEMASY el envío de formularios
Los formularios de WEMASY admiten tanto el envío tradicional como AJAX. Configura qué pasa tras el envío: mostrar un mensaje, redirigir a una URL o enviar una notificación por email. WEMASY valida tanto en el cliente como en el servidor.
Consulta las opciones de envío de formularios en tu plan de WEMASY.