Modulo formulario Divi. Animar campos de un formulario de contacto

por | May 8, 2017 | css, Divi, Formularios, Tutoriales | 0 comentarios

Módulo formulario Divi. Un poco de animación

En esta microinteracción, vamos a agregar un poco de animación a los campos de entrada de un formulario de contacto con la ayuda del Módulo formulario Divi y un poquito de código CSS.

Así que el propósito de esta práctica será ayudar al visitante de nuestra web en el proceso de cumplimentar información en nuestro formulario. Al pasar el cursor por un campo de entrada de nuestro formulario, la banda vertical que hemos puesto a la izquierda de cada campo, se expande un poco (podemos configurar la anchura a nuestra conveniencia) y cambia de color. Además, el texto se escala aumentando de tamaño y manteniendo el tamaño mientras escribimos. Si quieres, puedes ver cómo va a quedar nuestro formulario pulsando aquí.

Verás además que es muy fácil de implementar.

Creamos el formulario

Primero, añadimos un módulo de formulario de contacto a una sección estándar con un diseño de 1 columna de tamaño completo. No es necesario editar nada de esta fila, aunque dependiendo de tus necesidades o gustos puedes configurar los ajustes hasta que te guste. Siempre es una buena idea experimentar.

Inserta ahora el módulo de formulario.

Módulo formulario Divi

Módulo formulario de contacto Divi

Si quieres, igual que hemos hecho para los ajustes de fila, puedes configurar los ajustes para el módulo para que se muestre el formulario como a tí te guste. No ostante, lo único que no debes hacer es activar los bordes porque inhabilitaría parte del css que vamos a introducir.

ajustes-generales-modulo-texto-2

Nosotros hemos configurado nuestro formulario de la siguiente manera:

  • Hemos activado Mostrar Captcha en ajustes generales.
  • En Ajustes avanzados de diseño, hemos habilitado Utilizar Estilos Personalizados para botón y hemos cambiado el color a #d8c686 y algunos ajustes básicos. No te cortes, haz pruebas y practica.

En cualquier caso, lo que sí es necesario que hagas es abrir la pestaña CSS personalizado de tu módulo formulario y añadas la clase border-left. (marcado en rojo en la imagen inferior)

clase-css-formulario

Copia el código CSS

Ahora copia el siguiente código CSS que pegaremos en alguno de los tres lugares que te indicaremos.

.border-left .et_pb_contact p input, .border-left .et_pb_contact p textarea {
height: 60px;
border-left: 4px solid #d8c686;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
  
}
.border-left .et_pb_contact p input:hover,
.border-left .et_pb_contact p textarea:hover, 
.border-left .et_pb_contact p input:focus, 
.border-left .et_pb_contact p textarea:focus {
border-left: 12px solid #ef5555;
font-size: 18px;
} 

Puedes cambiar algunos valores del código si quieres para personalizar colores, velocidad de animación, altura de campos, etc.

El primer bloque de código de refiere a el estado inicial de los campos del formulario.

height: 60px; ——————-> Altura de los campos de texto

border-left: 4px solid #d8c686;——-> anchura de la banda vertical al inicio; color inicial de la banda

El resto de código afecta a la velocidad de la animación.

El segundo bloque de código de refiere a el estado al pasar el cursos sobre los campos del formulario.

border-left: 12px solid #ef5555;——> anchura de la banda vertical al pasar; color al pasar de la banda

font-size: 18px; —-> El tamaño al que se escala el texto mientras posicionamos el cursor sobre los campos.

¿Donde pego el código CSS?

Una vez hayas copiado el código, puedes pegarlo en cualquiera de estos lugares:

Opción 1. En la página

Pulsa en los ajustes de página, arriba a la derecha y en la pestaña CSS, pégalo ahí.

ajustes-css-divi-builder-pagina

Opción 2. En opciones del tema Divi

Navega desde tu escritorio de WordPres, en el menú lateral hasta Divi > Opciones del tema >  CSS personalizado (abajo del todo). Pégalo donde se te indica con una flecha en la imagen inferior.

 

Opción 3. En la hoja sde estilos de tu tema hijo

Si estás usando un tema hijo, que es lo más recomendable, accede a tu hoja de estilo del tema hijo desde Apariencia > Editor. Puedes verlo en la imagen de abajo.

 

Guarda los cambios sea cual sea el método elegido.

¡Y ya lo tenemos! A continuación puedes ver el resultado.

 

Mi formulario