Conviértete en el experto que quieres ser con esta oferta especial
¡Inscríbete hoy!
Aprende a hacer un formulario de contacto HTML con validación en JavaScript
JavaScript es uno de los lenguajes de programación más utilizados y la razón de su popularidad es sencilla: permite desarrollos web tanto simples como complejos. Dicho de otra manera, con él podemos desde desarrollar aplicaciones web, hasta validar formularios de contacto. Y justamente sobre este último punto profundizamos en este blog.
En este artículo aprenderás
Cursos de Desarrollo Web que te pueden interesar
Si te atrae el mundo de la programación o estás dando tus primeros pasos en esta área, ¡entonces sigue leyendo!, porque te contaremos cómo hacer un formulario HTML, validarlo con JavaScript y convertirlo con Google Analytics.
Papel de JavaScript en la validación de formularios
Tal y como asegura el youtuber ‘Fazt’ en su canal Fazt Code: con solo saber un poco de JavaScript se puede crear un mundo de desarrollos, como aplicaciones móviles, web, bases de datos y ¡hasta robots! Este lenguaje de programación “está en todas partes”, pero en este caso veremos una de las aplicaciones más sencillas.
Con JavaScript podemos hacer que el proceso de llenar un formulario en la web sea más fácil y rápido, con lo cual logramos que la experiencia del usuario sea más positiva y enriquecedora.
Imagina que un usuario deja vacío uno de los campos obligatorios de un formulario. Sin JavaScript, la información sería enviada al servidor, en este se procesaría y se comprobaría que hay un campo vacío y el servidor tendría que devolverle una respuesta al usuario solicitando completar los datos. Todo este proceso consumiría tiempo, causaría interrupciones y probablemente haría que la persona desistiera de llenar el formulario.
Con JavaScript lo anterior no sucede, debido a que este permite validar los formularios desde el navegador del usuario, por lo que la detección de cualquier error o dato faltante ocurre de forma instantánea, sin necesidad de comunicación con el servidor.
Una de las tantas ventajas de JavaScript es que permite una mayor interactividad de los usuarios en una página web, por lo tanto hace que la experiencia sea mejor y más enriquecedora.
Cómo hacer un formulario HTML
Tal y como lo explica HTML Quick, los formularios son herramientas para recolectar información sobre los visitantes de un sitio web, la cual posteriormente es enviada al servidor.
Si tienes un proyecto para el cual necesitas hacer un formulario HTML, aquí te contamos cómo crearlo de forma sencilla:
- Forma
Básicamente un formulario (‹Form›) es un contenedor para controles. Cada uno de los controles recolecta la información suministrada por los usuarios. Existen varias opciones de controles como líneas, fechas, contraseñas, subidas de archivos, etcétera.
Al momento de elaborar un formulario de contacto, debemos definir cómo y dónde será procesado. Esta información puede ser especificada con los siguientes atributos: ‘action’, que indica la ubicación del agente procesador; ‘method’, que determina el método utilizado para empaquetar el formulario antes de ser enviado al agente procesador; y ‘target’, que indica dónde serán mostrados los resultados del proceso.
En este ejemplo te mostramos el atributo ‘action’.
- Controles de texto
Los controles de texto permiten recolectar información textual, como nombres, direcciones, mensajes, contraseñas, etcétera.
Los dos controles de texto más utilizados son: los campos de texto de una sola línea y los campos de texto multilínea.
El campo de texto de una sola línea permite ingresar una información puntual, como nombre o correo electrónico. A continuación un ejemplo de cómo hacerlo y cómo lo verá el usuario:
El campo de texto multilíneas permite el ingreso de varias líneas de texto. Usualmente es representado como una caja que permite ingresar varios caracteres. Generalmente es utilizado para datos como la dirección o mensaje. A continuación un ejemplo de cómo hacerlo y cómo lo verá el usuario:
- Controles de opción
Estos controles permiten a los usuarios seleccionar una o más opciones dentro de un formulario de contacto. Pueden ser presentados con diferentes estilos como listas, botones, casillas de verificación, etcétera.
En este caso veremos los dos tipos más utilizados: las casillas de verificación y las listas.
Una casilla de verificación es un control de opción que puede ser seleccionado por el usuario simplemente haciendo clic. A continuación un ejemplo de cómo hacerla y cómo la verá el usuario:
Una lista, por su parte, es un control que permite elegir una opción dentro de un desplegable, generalmente esta es utilizada en los formularios para solicitar información como año de nacimiento, país o género. A continuación un ejemplo de cómo hacerla y cómo la verá el usuario:
- Botones de envío
El botón de envío es el que le permite al usuario registrar sus datos una vez que ha finalizado.
La presencia de este botón es necesaria si existe la intención de permitir a los usuarios enviar el formulario. A continuación un ejemplo de cómo hacerlo y cómo lo verá el usuario:
Cómo validar un formulario con JavaScript
Ahora que ya conoces los pasos y los controles básicos para realizar un formulario de contacto sencillo con HTML, veamos cómo funciona la validación con JavaScript.
Como sabemos que la mejor forma de aprender es a través de ejemplos, a continuación te mostramos un par:
La función de JavaScript lo que hace es devolver ‘false’ si alguno de los datos introducidos está errado y ‘true’ cuando la información está completa y correcta.
A continuación te explicamos ejemplos concretos de validaciones rápidas para que tengas idea de la función de JavaScript:
- Al principio de la función obtenemos el formulario. Para ello usamos document.getElementById(“theForm”) aprovechando el ‘id’ que pusimos al formulario. Una vez obtenido, con form.nombreCampo.value podemos acceder al valor introducido en cada uno de los campos.
- Verificamos el entero. Para ello, primero se comprueba que se ha introducido algo, es la parte if (!field.aInteger.value). Si el campo está vacío, la condición !field.aFloat.value será ‘true’. La otra condición es que parseInt() devuelva un valor válido, es decir, uno que haga que la función de javascript
isNaN() devuelva ‘false’. Con el ‘Float’ lo mismo, pero usando parseFloat(). - Para una cadena de 10 caracteres, simplemente miramos que su longitud es mayor que 10, usando el atributo ‘length’ que tienen los ‘string’ de JavaScript.
- La forma de comprobar que el texto casa con esa expresión regular es usar la función match() del texto escrito en el formulario pasando como parámetro la expresión regular.
- En cuanto al select, simplemente comprobar que el valor seleccionado no es el valor por defecto.
- Si ninguno de los ‘if’ se cumple, es que todos los campos son correctos, así que se llegará al final de la función y se devuelve ‘true’ para indicar que todo va bien.
Por qué medir tu formulario de contacto con Google Analytics
Una vez que tienes listo tu formulario y activa la validación de JavaScript, medir la conversión con Google Analytics te permitirá contar con mucha información sobre la experiencia de los usuarios con la página web.
Con esta herramienta, por ejemplo, puedes conocer cómo fue el proceso que siguió el usuario en el sitio web hasta llegar al formulario de contacto, información que resulta valiosa para la optimización y toma de decisiones.
Para hacer este seguimiento solo tienes que insertar el código de Google Analytics en la web y hacer la configuración para contar con las métricas de conversiones que proporciona la herramienta.
Uno de los principales beneficios de hacerle seguimiento a los formularios de contacto es saber desde dónde llegan los usuarios que convierten y qué pasos siguen hasta el envío de sus datos. Esto te permite tomar decisiones sobre dónde invertir más presupuesto o simplemente mayor esfuerzo.
¿Te gustó este tema? Con Next U puedes aprender mucho más sobre Desarrollo Web Front End y conocer más usos de JavaScript. ¡Regístrate ahora y conviértete en un experto!
