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

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

En este tutorial, veremos el proceso de diseño de elementos bá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:

Please accept marketing cookies to load this content.

Nota: ¡Este formulario de contacto es perfecto para cualquier interfaz de usuario de modo oscuro! Obtén más información sobre cómo puedes cambiar entre el modo oscuro y claro usando nada más que CSS:

CSS

Consejo rápido: Cómo implementar el modo oscuro en tu sitio web utilizando consultas de medios

Adi Purdila

1. Comienza por el marcado de página

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

1	<form class="my-form">
2	<div class="container">
3	<h1>Get in touch!</h1>
4	<ul>
5	<li>...</li>
6	<li>...</li>
7	<li>...</li>
8	<li>...</li>
9	<li>...</li>
10	<li>...</li>
11	</ul>
12	</div>
13	</form>

Dentro de la lista colocaremos los elementos del formulario.

El primer elemento de la lista, por ejemplo, contendrá un elemento de selección con cuatro opciones. Por defecto, la primera opción está seleccionada, pero deshabilitada:

<select>
  <option selected disabled>-- Please choose an option --</option>
  <option>Request Quote</option>
  <option>Send Resume</option>
  <option>Other</option>      
</select>

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

1	<div class="grid grid-2">
2	<input type="text" placeholder="Name" required>
3	<input type="text" placeholder="Surname" required>
4	</div>

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

1	<div class="grid grid-2">
2	<input type="email" placeholder="Email" required>
3	<input type="tel" placeholder="Phone">
4	</div>

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

1	<textarea placeholder="Message"></textarea>

El quinto elemento de la lista contiene una casilla de verificación junto con su etiqueta:

1	<input type="checkbox" id="terms">
2	<label for="terms">...</label>

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

<div class="grid grid-3">
  <div class="required-msg">REQUIRED FIELDS</div>
  <button class="btn-grid" type="submit" disabled>
    <span class="back">
      <img src="IMG_SRC" alt="">
    </span>
    <span class="front">SUBMIT</span>
  </button>
  <button class="btn-grid" type="reset" disabled>
    <span class="back">
      <img src="IMG_SRC" alt="">
    </span>
    <span class="front">RESET</span>
  </button> 
</div>

2. Definir algunos estilos básicos

Antes de echar un vistazo má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:

:root {
  --white: #afafaf;
  --red: #e31b23;
  --bodyColor: #292a2b;
  --borderFormEls: hsl(0, 0%, 10%);
  --bgFormEls: hsl(0, 0%, 14%);
  --bgFormElsFocus: hsl(0, 7%, 20%);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  outline: none;
}

a {
  color: inherit;
}

input,
select,
textarea,
button {
  font-family: inherit;
  font-size: 100%; 
}

button,
label {
  cursor: pointer;
}

select {
  appearance: none;
}

select::-ms-expand {
  display: none;
}

select:-moz-focusring {
  color: transparent !important;
  text-shadow: 0 0 0 var(--white);
}

textarea {
  resize: none;
}

ul {
  list-style: none;
}

Nota: Por simplicidad no voy a mencionar todas las reglas CSS en el tutorial. Puedes verificar el resto haciendo clic en la pestaña CSS del proyecto de demostración.

3. Crea el diseño del formulario

En pantallas pequeñas, todos nuestros elementos de formulario se apilarán:

Sin embargo, en ventanas de 600 píxeles de ancho y más, el diseño del formulario cambiará. Más especí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 organizarán en tres columnas.

The form layout on screens 600 pixels wide and above

Gracias a CSS Grid, podemos construir fácilmente el diseño deseado de varias columnas. Comenzamos declarando nuestro contenedor .grid .grid como una cuadrícula, luego definimos las columnas en los elementos de la cuadrícula que necesitamos cambiar:

@media screen and (min-width: 600px) {
  .my-form .grid {
    display: grid;
    grid-gap: 1.5rem;
  }
  
  .my-form .grid-2 {
    grid-template-columns: 1fr 1fr;   
  }

  .my-form .grid-3 {
    grid-template-columns: auto auto auto;
    align-items: center;
  }
}

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 continuación agregamos algunos estilos estéticos iniciales a todos los elementos de la forma:

/*CUSTOM VARIABLES HERE*/

.my-form select,
.my-form input,
.my-form textarea,
.my-form button {
  width: 100%;
  line-height: 1.5;
  padding: 15px 10px;
  border: 1px solid var(--borderFormEls);
  color: var(--white);
  background: var(--bgFormEls);
  transition: background-color 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25),
    transform 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);
}

.my-form textarea {
  height: 170px;
}

.my-form ::placeholder {
  color: inherit;
  opacity: 1;
}

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

Agrega estilos enfocados

Cada vez que un elemento de formulario está enfocado, me gustaría que cambie su color de fondo. Además, algunos elementos se amplían un poco, solo por énfasis:

Así es como se hace:

/*CUSTOM VARIABLES HERE*/

.my-form select:focus,
.my-form input:focus,
.my-form textarea:focus,
.my-form button:focus {
  background: var(--bgFormElsFocus);
}

.my-form select:focus,
.my-form input:focus,
.my-form textarea:focus {
  transform: scale(1.02);
}

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 selección también contiene un icono personalizado (flecha) ubicado en la esquina central derecha:

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

.my-form *:required,
.my-form select {
  background-repeat: no-repeat;
  background-position: center right 12px;
  background-size: 15px 15px;
}

.my-form *:required {
  background-image: url(asterisk.svg);  
}

.my-form select {
  background-image: url(down.svg);
}

Dar estilo a los botones

Como ya se ha mencionado antes, en nuestro formulario tenemos dos tipos de botones: un botón de envío y un botón de reinicio. Si vuelves a visitar el marcado del formulario, notará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 botón, o cuando está enfocado, suceden cosas mágicas. Específicamente, su color de fondo cambia, el elemento secundario .front desaparece y, al mismo tiempo, el elemento secundario .back aparece con una animación deslizante:

Please accept marketing cookies to load this content.

Estos son los estilos responsables de ese comportamiento:

/*CUSTOM VARIABLES HERE*/

.my-form .btn-grid {
  position: relative;
  overflow: hidden;
  transition: filter 0.2s;
}

.my-form button:enabled:hover,
.my-form button:focus {
  background: var(--bgFormElsFocus);
}

.my-form button > * {
  display: inline-block;
  width: 100%;
  transition: transform 0.4s ease-in-out;
}

.my-form button .back {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-110%, -50%);
}

.my-form button:enabled:hover .back,
.my-form button:focus .back {
  transform: translate(-50%, -50%);
}

.my-form button:enabled:hover .front,
.my-form button:focus .front {
  transform: translateX(110%);
}

5. Crear una casilla de verificación personalizada

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

Como primer paso, ocultamos visualmente la casilla de verificación predeterminada:

1	.my-form input[type="checkbox"] {
2	position: absolute;
3	left: -9999px;
4	}

Luego, aprovechamos las etiquetas de los pseudo-elementos :: before y :: after para generar nuestra propia casilla de verificació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 verificación está enfocada. Por último, es aconsejable asegurarse de que los usuarios puedan acceder a nuestro formulario a través de la navegación por teclado.

Echa un vistazo a los estilos asociados a continuación:

/*CUSTOM VARIABLES HERE*/

.my-form input[type="checkbox"] + label {
  position: relative;
  display: inline-block;
  padding-left: 2rem;
  transition: background 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);
}

.my-form input[type="checkbox"]:focus + label {
  background: var(--bgFormElsFocus);
}

.my-form input[type="checkbox"] + label::before,
.my-form input[type="checkbox"] + label::after {
  content: '';
  position: absolute;
}

.my-form input[type="checkbox"] + label::before {
  left: 0;
  top: 6px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--white);
}

.my-form input[type="checkbox"]:checked + label::before {
  background: var(--red);
}

.my-form input[type="checkbox"]:checked + label::after {
  left: 7px;
  top: 7px;
  width: 6px;
  height: 14px;
  border-bottom: 2px solid var(--white);
  border-right: 2px solid var(--white);
  transform: rotate(45deg);
}

@media screen and (min-width: 541px) {
  .my-form input[type="checkbox"] + label::before {
    top: 50%;
    transform: translateY(-50%);
  }
  
  .my-form input[type="checkbox"]:checked + label::after {
    top: 3px;
  }
}

Vale la pena mencionar que también podríamos haber usado algunos iconos personalizados para crear la casilla de verificación deseada.

6. Alternar el estado de los botones

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

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

1	.my-form *:disabled {
2	cursor: default;
3	filter: blur(2px);
4	}

Los botones se activan tan pronto como se marca la casilla de verificación:

The buttons become active as soon as the checkbox is checked

El código JavaScript que maneja esta funcionalidad se muestra a continuación:

const checkbox = document.querySelector('.my-form input[type="checkbox"]');
const btns = document.querySelectorAll(".my-form button");

checkbox.addEventListener("change", function() {
  const checked = this.checked;
  for (const btn of btns) {
    checked ? (btn.disabled = false) : (btn.disabled = true);
  }
});

Conclusión

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

Please accept marketing cookies to load this content.

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

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

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

1. Comienza por el marcado de página

2. Definir algunos estilos básicos

3. Crea el diseño del formulario

4. Dale estilo a los elementos del formulario

Agrega estilos enfocados

Agregar iconos personalizados

Dar estilo a los botones

5. Crear una casilla de verificación personalizada

6. Alternar el estado de los botones

Conclusión

Obtén más información sobre el diseño de formularios web