formulario de contacto

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. 

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. 

Etiqueta html de formulario form

Código que muestra la estructura de un formulario, con sus etiquetas de apertura y cierre encerrando un conjunto de controles.

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’.

Atributo action en etiqueta form

Ejemplo de envío de formulario a través de un botón.

  • 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: 

controles de texto

Ejemplo de un campo de texto de una sola línea.

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: 

Ejemplo de un campo de texto multilínea

Ejemplo de un campo de texto multilínea. 

  • 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: 

Ejemplo de una casilla de verificación

Ejemplo de una casilla de verificación.

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: 

Ejemplo de una lista

Ejemplo de una lista. 

  • 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: 

Ejemplo de un botón de envío

Ejemplo de un botón de envío.

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: 

Código de un formulario

Código de un formulario.

Código de la función de JavaScript.

Código de la función de JavaScript.

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!