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

Cómo crear un formulario SVG responsivo hecho a mano

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

En tutoriales anteriores, te he enseñado cómo crear un formulario responsivo con flexbox además de cómo estilizar los elementos de un formulario. Hoy continuaremos el viaje por el mundo de los "formularios" y aprenderemos a crear un formulario SVG responsivo hecho a mano desde cero.

Este es el formulario que vamos a crear:

1. Comienza con el marcado de la página

Vamos a comenzar con un SVG y un elemento form:

Sprites de SVG

Para nuestro formulario vamos a necesitar una serie de ilustraciones hechas a mano. Afortunadamente, Ian Yates, el editor de diseño web aquí en Tuts+, creó algunas bonitas ilustraciones para nosotros. Gracias, Ian.

De manera similar a como lo hicimos en un tutorial anterior, vamos a crear un sprite de SVG e incrustaremos todos los dibujos en su interior. Después, dentro del formulario, mostraremos el icono en cuestión cada vez que lo necesitemos llamando al elemento use.

Este es el marcado para el sprite de SVG:

Toma en cuenta el atributo preserveAspectRatio="none" que agregamos a la mayoría de las ilustraciones. Hicimos esto porque, como veremos más adelante, la escala de nuestros iconos cambiará y estos perderán sus dimensiones iniciales.

Formulario

El formulario estará compuesto por un encabezado y una lista desordenada. Además, utilizaremos un .container para establecer un ancho máximo para el formulario y para centrar horizontalmente su contenido:

Como puedes ver, cada uno de los elementos de la lista anterior contiene una o más clases. Alternativamente, por razones de legibilidad, pudimos haber creado un elemento hijo adicional para  enviarle esas clases, de esta manera:

Vamos a colocar los SVGs y los elementos del formulario en el interior de la lista.

El primer elemento de la lista incluirá dos campos de entrada obligatorios junto con sus SVGs:

De la misma manera, el segundo elemento de la lista también tendrá dos campos de entrada junto con sus SVGs:

Dentro del tercer elemento de la lista, colocaremos un textarea y su ilustración asociada:

El cuarto elemento de la lista incluirá un elemento fieldset. En su interior colocaremos un elemento legend, una lista con dos botones de radio junto con sus SVGs, y su SVG relacionado.

Finalmente, el quinto elemento de la lista contendrá los botones para enviar y restablecer junto con sus SVGs:


2. Define algunos estilos básicos

Antes de analizar más a detalle los elementos individuales del formulario, definamos primero algunos estilos básicos de CSS. Entre estos se encontrará una fuente personalizada tomada de Envato Elements, algunas variables personalizadas y algunas reglas de restablecimiento:

SUMMER - FONT PACK
SUMMER - PAQUETE DE FUENTES

Nota: por simplicidad, no voy a mencionar todas las reglas de CSS en este tutorial. Puedes echar un vistazo al 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 los elementos de nuestro formulario estarán apilados:

The form layout on small screens
El diseño del formulario en pantallas pequeñas

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

  • Vamos a acomodar los inputs de las dos primeras filas en dos columnas del mismo ancho.
  • Cada botón cubrirá un tercio del ancho de la fila padre.
The form layout on large screens
El diseño del formulario en pantallas grandes

Gracias al Grid (Cuadrícula) de CSS, podemos construir fácilmente el diseño de múltiples columnas que deseamos. Para empezar, configuraremos el contenedor .handmade-form .grid para que sea un grid. Después, usaremos las clases auxiliares grid-2 y grid-3 para definir la cantidad de columnas del grid:

Todas estas reglas se colocan dentro de una consulta de medios, por lo que solo surtirán efecto en ventanas con un ancho de 600px o más.

4. Estiliza los elementos del formulario

Ya teniendo establecida nuestra estructura, nuestro siguiente paso es designar algunos estilos estéticos iniciales para todos los elementos del formulario:

Colocando las ilustraciones

La siguiente parte de este ejercicio, que es la más desafiante, es colocar las ilustraciones de acuerdo a sus elementos asociados en el formulario. Para hacer esto, usaremos la propiedad position. Una implementación alternativa podría ser establecer los dibujos como imágenes de fondo. Sin embargo, no soy un gran defensor de esta implementación, porque necesita una manipulación adicional para hacer que las imágenes se adapten a varias pantallas.

Positioning the SVGs

Tomemos nota de nuestro plan:

  • Los SVGs serán elementos con una posición absoluta.
  • Estos se encontrarán en la misma posición que sus controles en el formulario y tendrán las mismas dimensiones. Es por eso que anteriormente establecimos sus valores de preserveAspectRatio en none.
  • Deberemos poder asignar el foco a los controles del formulario, así que les daremos un mayor z-index.

Estos son los estilos que se requieren para este comportamiento:


5. Crea botones de radio personalizados

Para crear nuestros propios botones de radio personalizados, una vez más vamos a aprovechar la "técnica del truco con las casillas de verificación en CSS".

Si echas un vistazo de nuevo a la sección de marcado, notarás que el elemento fieldset contiene la lista .checkbox-list. Existen dos SVGs dentro de cada etiqueta. La primera describe el estado sin seleccionar del botón de radio asociado, mientras que la otra es el estado seleccionado.

Los botones de radio deben caber en una sola fila, por lo que convertiremos la .checkbox-list en un contenedor flex. Además, los colocaremos en una posición absoluta con respecto a sus etiquetas y les asignaremos dimensiones fijas (20px x 20px).

Cuando un botón de radio cambie su estado, el SVG que describe su estado de selección será animado. Para lograr este efecto, vamos a trabajar con las propiedades stroke-dasharray y stroke-dashoffset que hemos cubierto ampliamente en un tutorial reciente.

Estos son los estilos correspondientes:

Nota: A pesar de que he vinculado las propiedades stroke-* al SVG padre en vez de a su path, el efecto aún funcionará ya que estas propiedades se heredan.

Conclusión

¡Eso es todo, amigos! En este tutorial logramos crear un formulario SVG responsivo hecho a mano desde cero. Espero que este ejercicio te haya ayudado a aprender algo nuevo y te haya inspirado a usarlo en algún proyecto futuro.

Aquí tienes un recordatorio de lo que creamos:

En un futuro tutorial, iremos un paso más adelante y discutiremos cómo hacer que este formulario sea dinámico al incorporarlo en un popular complemento de formularios de contacto de WordPress. ¡Mantente atento!

Como siempre, ¡muchas gracias por leer!

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.