Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Forms
Webdesign

Crea un elegante formulario de contacto oscuro con HTML, CSS y JavaScript

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Adriana Obregón (you can also view the original English article)

En este tutorial, veremos el proceso de diseño de elementos básicos de un formulario de contacto. Examinaremos diferentes formas de hacer que un formulario sea hermoso y completamente funcional al mismo tiempo. 

Este es el formulario que vamos a crear: 

Nota: ¡Este formulario de contacto es perfecto para cualquier interfaz de usuario de modo oscuro! Obtén más información sobre cómo puedes cambiar entre el modo oscuro y claro usando nada más que CSS: 

1. Comienza por el marcado de página

Comenzaremos desde cero con un elemento de formulario que contiene un encabezado y una lista desordenada. Utilizaremos un contenedor para establecer un ancho máximo para el formulario y centrar horizontalmente su contenido: 

Dentro de la lista colocaremos los elementos del formulario. 

El primer elemento de la lista, por ejemplo, contendrá un elemento de selección con cuatro opciones. Por defecto, la primera opción está seleccionada, pero deshabilitada: 

En el segundo elemento de la lista, colocaremos dos campos de entrada obligatorios: 

El tercer elemento de la lista incluye un campo de entrada obligatorio y uno opcional: 

El cuarto elemento en la lista contiene un área de texto:

El quinto elemento de la lista contiene una casilla de verificación junto con su etiqueta: 

Finalmente, el sexto elemento de la lista contiene un elemento div y dos botones (Escrito enviar y restablecer): 

2. Definir algunos estilos básicos

Antes de echar un vistazo más de cerca a los elementos de formulario individuales, definamos primero algunos estilos CSS. Estos incluyen algunas variables personalizadas para darnos nuestro esquema de color y algunas reglas de reinicio: 

Nota: Por simplicidad no voy a mencionar todas las reglas CSS en el tutorial. Puedes verificar el resto haciendo clic en la pestaña CSS del proyecto de demostración. 

3. Crea el diseño del formulario

En pantallas pequeñas, todos nuestros elementos de formulario se apilarán: 

The form layout on small screens

Sin embargo, en ventanas de 600 píxeles de ancho y más, el diseño del formulario cambiará. Más específicamente: 

  • Organizaremos los elementos de la segunda y tercera lista en dos columnas del mismo ancho. 
  • Los elementos de la sexta lista de elementos se organizarán en tres columnas.
The form layout on screens 600 pixels wide and above

Gracias a CSS Grid, podemos construir fácilmente el diseño deseado de varias columnas. Comenzamos declarando nuestro contenedor .grid .grid como una cuadrícula, luego definimos las columnas en los elementos de la cuadrícula que necesitamos cambiar: 

Todas estas reglas se colocan dentro de una consulta de medios, por lo que solo surten efecto en ventanas de 600px de ancho y superiores. 

4. Dale estilo a los elementos del formulario 

Con nuestra estructura ordenada, a continuación agregamos algunos estilos estéticos iniciales a todos los elementos de la forma: 

Nota: alternativamente, para configurar el ancho y la altura del área de texto, podríamos haber usado sus atributos cols y row respectivamente. 

Agrega estilos enfocados

Cada vez que un elemento de formulario está enfocado, me gustaría que cambie su color de fondo. Además, algunos elementos se amplían un poco, solo por énfasis: 

Así es como se hace:

Agregar iconos personalizados 

Todos los elementos requeridos contienen un icono (asterisco) ubicado en la esquina central derecha: 

All required elements contain an asterisk

Del mismo modo, la selección también contiene un icono personalizado (flecha) ubicado en la esquina central derecha: 

The select contains a custom arrow

Esto lo logramos aplicando un icono SVG como imagen de fondo: 

Dar estilo a los botones

Como ya se ha mencionado antes, en nuestro formulario tenemos dos tipos de botones: un botón de envío y un botón de reinicio. Si vuelves a visitar el marcado del formulario, notarás que cada uno de esos botones contiene dos elementos: el elemento .back y el elemento .front

Por defecto solo aparece .front:

By default the front button child appears

Cuando pasamos el cursor sobre un botón, o cuando está enfocado, suceden cosas mágicas. Específicamente, su color de fondo cambia, el elemento secundario .front desaparece y, al mismo tiempo, el elemento secundario .back aparece con una animación deslizante: 

Estos son los estilos responsables de ese comportamiento: 

5. Crear una casilla de verificación personalizada 

Si vuelves a mirar el marcado dentro del quinto elemento de la lista, verás que el valor de id de la casilla de verificación coincide con el valor for de la etiqueta. Eso crea una asociación entre los dos elementos que nos da la capacidad de construir una casilla de verificación personalizada. 

Como primer paso, ocultamos visualmente la casilla de verificación predeterminada: 

Luego, aprovechamos las etiquetas de los pseudo-elementos :: before y :: after  para generar nuestra propia casilla de verificación. 

Entonces, primero usamos el pseudo-elemento :: before para configurar su estado no verificado: 

The uncheched state of our custom checkbox

Y luego el pseudo-elemento :: after junto con la pseudo-clase: check para implementar su estado verificado: 

The checked state of our custom checkbox

Como hicimos con los otros elementos de formulario, agregamos un estilo adicional cuando la casilla de verificación está enfocada. Por último, es aconsejable asegurarse de que los usuarios puedan acceder a nuestro formulario a través de la navegación por teclado. 

Echa un vistazo a los estilos asociados a continuación: 

Vale la pena mencionar que también podríamos haber usado algunos iconos personalizados para crear la casilla de verificación deseada. 

6. Alternar el estado de los botones 

Inicialmente, los botones del formulario están deshabilitados. Eso significa que no podemos hacer clic en ellos o seleccionarlos: 

Initially the form buttons are disabled

En nuestro CSS agregamos algunos estilos específicamente dirigidos a estos elementos deshabilitados, dejando en claro al usuario que no pueden interactuar con ellos: 

Los botones se activan tan pronto como se marca la casilla de verificación: 

The buttons become active as soon as the checkbox is checked

El código JavaScript que maneja esta funcionalidad se muestra a continuación: 

Conclusión 

¡Eso es todo amigos! ¡Esto es lo que hemos creado! 

En este tutorial, cubrimos muchos consejos y trucos diferentes para diseñar elementos de formulario de contacto. Aunque nos concentramos en un diseño de modo oscuro, puedes aplicar cualquier tipo de diseño de interfaz de usuario utilizando estos mismos principios. 

Esperamos que hayas disfrutado el formulario de contacto que hemos creado y lo uses como inspiración para desarrollar tus propios formularios. ¡Como siempre, gracias por leer! 

Obtén más información sobre el diseño de formularios web 

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.