Forms

Contenido del curso

Introducción, instalación y ambiente de desarrollo

Conceptos básicos

Utilerías

Proyecto: PlatziFood

Conclusiones

29
Conclusiones y qué sigue
00:54 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:02

Forms

Curso de Tailwind CSS 1

Clase 23 de 29

Clase 23 / 29

Recursos

¿Cómo crear un formulario de contacto atractivo?

Crear un formulario de contacto atractivo y funcional es fundamental para captar la atención de los usuarios y garantizar una interacción satisfactoria. En esta guía, aprenderás cómo diseñar un formulario que incluya controles de entrada para el nombre y un mensaje, mejorando su estética y usabilidad.

¿Cómo iniciar el diseño del formulario?

Para empezar, abre tu editor de texto y crea un formulario básico. El objetivo es incluir campos para el nombre y el mensaje del usuario. Sigue estos pasos para estructurar el formulario:

Campo Nombre: Comienza creando un control para el campo nombre.
Campo Mensaje: De manera similar, añade un campo de texto para que los usuarios puedan ingresar sus mensajes.

¿Cómo mejorar la apariencia del formulario?

Un buen diseño visual hace que el formulario sea más fácil de usar y estéticamente agradable. Aquí te mostramos cómo puedes lograrlo:

Diseño del campo de texto

Fondo: Cambia el fondo del control a un color gris claro (grey-200), pero ajusta según sea necesario para que el contraste sea adecuado.
Borde: Añade un borde suave para distinguir el campo sobre el fondo.
Espaciado y fuente: Utiliza padding para crear espacio entre el texto y el borde del campo. Ajusta el tamaño de la fuente para que sea legible y atractivo.

Redondeo y color del texto

Haz que los bordes sean redondeados para un aspecto más moderno.
Cambia el color del texto a un gris oscuro como text-gray-800 para que contraste adecuadamente con el fondo.

¿Cómo implementar el modo responsivo?

Cuando diseñes para dispositivos móviles, es crucial que el control ocupe toda la anchura disponible para maximizar la usabilidad. Utiliza clases como w-full en Tailwind CSS para asegurar que hace esto correctamente.

¿Cómo añadir funcionalidad al formulario?

Después de diseñar los campos de entrada, es momento de añadir un botón para enviar el formulario.

Configuración del botón de envío

Texto y estilo: Inserta un botón con el texto "Enviar" y cambia su tipo a block para que se alinee correctamente en el contenedor.
Colores: Utiliza un color de fondo gris medio (bg-gray-500) para el botón y un efecto de sombra (shadow-lg) para que destaque como un botón presionable.
Interacción: Asegúrate de que el botón reaccione adecuadamente al hover y al focus cambiando la sombra o el color de fondo para dar retroalimentación visual al usuario.

¿Cómo manejar y destacar el focus en los controles?

El estado focus resalta el campo que el usuario está editando actualmente, mejorando la experiencia de uso al hacer más evidente en cuál campo está trabajando. Aplica estilos diferentes para focus:

Focus en el campo: Elimina bordes grises predeterminados y añade márgenes azules para un enfoque más moderno.
Borde y sombra: Cambia focus:ring o focus:border para la personalización.

Prácticas recomendadas para mantener el compromiso de los estudiantes

Presentación visual clara y atractiva: Un diseño limpio anima a completar el formulario.
Funcionalidad robusta: Asegúrate de que los campos funcionen correctamente en todos los navegadores y dispositivos.
Proporcionar retroalimentación visual: Los usuarios deben recibir indicaciones visuales claras sobre si sus acciones han sido reconocidas y procesadas.

Al implementar estos principios, estarás bien encaminado a crear un formulario de contacto que no solo sea funcional, sino que también ofrezca una experiencia de usuario positiva y atractiva. Recuerda seguir experimentando y aprendiendo nuevas técnicas para seguir mejorando tu diseño. ¡Nos vemos en el siguiente aprendizaje!