Cómo agregar etiquetas flotantes a campos de formulario en Divi

Agregar etiquetas flotantes a los campos de formulario en Divi puede impulsar el diseño y la experiencia de usuario de cualquier formulario Divi de una manera sutil pero poderosa. Cualquier formulario de sitio web (no solo Divi) generalmente incluye algún tipo de campo de entrada y una etiqueta para ese campo de entrada. Por ejemplo, un formulario puede tener un campo de entrada de texto para un nombre donde puede ingresar el texto (o nombre) y una etiqueta para el cuadro de entrada de ese campo (es decir, "Nombre"). Esta etiqueta puede estar visible u oculta según el estilo del formulario. Además de una etiqueta, los campos de entrada también pueden contener un pseudoelemento de marcador de posición que sirve como una especie de etiqueta temporal dentro del campo de entrada que permanece visible hasta que el usuario ingresa un valor de entrada. En Divi, el diseño predeterminado oculta el elemento de etiqueta y muestra solo el texto del marcador de posición. Agregar una etiqueta flotante a un formulario Divi permitirá a los diseñadores mantener la sensación elegante del estilo de formulario de "solo marcador de posición" y también revelar (o flotar) la etiqueta sobre el campo siempre que el usuario agregue un valor.

En este tutorial, le mostraremos cómo agregar etiquetas flotantes a un formulario de opción de correo electrónico Divi. Para hacer esto, usaremos el constructor Divi para diseñar el formulario de opción de correo electrónico. Luego, agregaremos CSS y JQuery personalizados para hacer flotar esas etiquetas ocultas a la vista cuando un usuario se concentre en el campo.

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.

Descarga el diseño GRATIS

Para poner sus manos sobre los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

https://youtu.be/j1m14XFztdc

Suscríbete a nuestro canal de Youtube

Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.

Haga clic en el botón Importar.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.

Luego haga clic en el botón Importar.

Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo ha hecho, instale y active Divi Theme.
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
3. Elija la opción "Construir desde cero".

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Agregar etiquetas flotantes a campos de formulario en Divi

Creación del formulario de opción de correo electrónico

Agregue una fila de una columna a la sección predeterminada en Divi Builder.

Agregue un formulario de Opción de correo electrónico a la columna.

Abra el modal de Configuración de Opción de correo electrónico. En la pestaña de contenido, actualice el texto del título y elimine el texto del cuerpo.

Asegúrese de vincular el proveedor de servicios de su cuenta de correo electrónico. De lo contrario, la opción de correo electrónico no aparecerá en una página en vivo.

A continuación, agregue el siguiente color de fondo a la opción de correo electrónico:

• Color de fondo: # 1f4b74

En la pestaña de diseño, actualice el diseño del formulario:

• Disposición: cuerpo en la parte superior, forma en la parte inferior

Luego actualice los estilos de campo de la siguiente manera:

• Color de fondo de los campos: transparente
• Color del texto de los campos: #ffffff
• Margen de campos: 1.5em superior
• Relleno de campos: 0.5em arriba, 0.5em abajo, 1em a la izquierda, 1em a la derecha
• Tamaño del texto de los campos: 1.2em
• Altura de la línea de campos: 2em

A continuación, actualice los estilos de borde de campo:

• Esquinas redondeadas de campos: 0px
• Ancho del borde inferior de los campos: 2px
• Color del borde inferior de los campos: #ffffff

Actualicemos también los estilos de fuente del título:

• Peso de la fuente del título: negrita
• Estilo de fuente del título: TT
• Alineación del texto del título: centro

Y ahora sigamos y diseñemos el botón.

• Usar estilos personalizados para el botón: SÍ
• Color del texto del botón: # 1f4b74
• Color de fondo del botón: #ffffff
• Espaciado de letras de botones: 0.1em
• Peso de la fuente del botón: negrita
• Estilo de fuente del botón: TT

Para nuestra última personalización de diseño, agreguemos un ancho máximo y un relleno al formulario de la siguiente manera:

• Ancho máximo: 500px
• Relleno: 5% arriba, 5% abajo, 3% izquierda 3% derecha

Finalmente, necesitamos agregar una clase CSS al módulo para que podamos apuntar con nuestro código CSS y JQuery en el siguiente paso.

Agregar el código personalizado

Para agregar CSS y JQuery personalizados, agregue un módulo de código en el módulo de formulario de suscripción de correo electrónico.

El CSS

En el cuadro de contenido del código, pegue el siguiente CSS asegurándose de envolver el CSS en las etiquetas de estilo necesarias:

.et-float-labels p {
  position: relative !important;
}

.et-float-labels .et_pb_contact_form_label {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 1em;
  padding: 0 1em;
  transform: translateY(0%);
  transform-origin: left;
  color: #ffffff;
  font-size: 1.2em;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 0;
}

.et-float-labels .et_pb_contact_form_label.active {
  visibility: visible;
  opacity: 0.6;
  top:0;
  transform: translateY(-100%) scale(0.9);
}

.et_pb_module.et-float-labels form p .input::-webkit-input-placeholder {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.et_pb_module.et-float-labels form p .input::-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-ms-input-placeholder {
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}  
.et_pb_module.et-float-labels form p .input::placeholder {
  transition: all 0.4s ease-in-out;
}

.et_pb_module.et-float-labels form p .input:focus::-webkit-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-ms-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::placeholder {
  color: transparent !important;
}

El JQuery

Debajo de la etiqueta de estilo final, pegue el siguiente JQuery y envuélvalo con las etiquetas de script necesarias.

jQuery(document).ready(function ($) {
  var $floatLabelInput = $(".et-float-labels .input");
  $floatLabelInput.on("focus", function (e) {
    $(e.target).prev().addClass("active");
    e.stopPropagation();
  });
  $floatLabelInput.on("blur", function (e) {
    if (!$(e.target).val()) {
      $(e.target).prev().removeClass("active");
    } else {
      $(e.target).prev().addClass("active");
    }
  });
});

Rompiendo el código

Sobre el CSS

Primero, apuntamos a los campos y les damos una posición relativa para que podamos darle al elemento de etiqueta una posición absoluta dentro del campo (o elemento p).

.et-float-labels p {
  position: relative !important;
}

A continuación, le damos el elemento de etiqueta en el formulario y la posición absoluta con otro estilo que coloca el texto de la etiqueta de modo que se superponga al texto de ubicación. El bloque display: anula la propiedad display: hidden predeterminada para que la etiqueta esté lista para mostrarse. Luego lo ocultamos con visibilidad oculta.

.et-float-labels .et_pb_contact_form_label {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 1em;
  padding: 0 1em;
  transform: translateY(0%);
  transform-origin: left;
  color: #ffffff;
  font-size: 1.2em;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 0;
}

Luego mostramos, escalamos y traducimos (movemos) la etiqueta con una animación de diapositiva hacia arriba una vez que recibe la clase "activa" controlada por JQeury.

.et-float-labels .et_pb_contact_form_label.active {
  visibility: visible;
  opacity: 0.6;
  top:0;
  transform: translateY(-100%) scale(0.9);
}

El resto del CSS trata de ocultar el marcador de posición con una transición. Hay muchas líneas para hacer esto porque cada navegador requiere diferentes prefijos para apuntar al pseudoelemento de marcador de posición. Pero la idea es simple: cambie el color del marcador de posición a transparente.

.et_pb_module.et-float-labels form p .input::-webkit-input-placeholder {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.et_pb_module.et-float-labels form p .input::-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-ms-input-placeholder {
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}  
.et_pb_module.et-float-labels form p .input::placeholder {
  transition: all 0.4s ease-in-out;
}

.et_pb_module.et-float-labels form p .input:focus::-webkit-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-ms-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::placeholder {
  color: transparent !important;
}

Acerca de JQuery

Primero, definimos la variable $ floatLabelInput como el elemento de entrada en cada campo de formulario.

  var $floatLabelInput = $(".et-float-labels .input");

Luego usamos el controlador de eventos de enfoque con una función para agregar una clase ("activa") al elemento de etiqueta (el hermano anterior del elemento de entrada) siempre que el elemento de entrada esté enfocado. Una vez que se agrega la clase "activa" a la etiqueta, la etiqueta se muestra, se escala y se coloca sobre la entrada con el CSS correspondiente.

  $floatLabelInput.on("focus", function (e) {
    $(e.target).prev().addClass("active");
    e.stopPropagation();
  });

Por último, usamos el controlador de eventos de desenfoque con una función que determina cuándo mantener la clase "activa" en la etiqueta. Si la entrada no tiene un valor, permanecerá activa incluso cuando el campo de entrada no esté enfocado. Si no tiene un valor, la clase se elimina y regresa el estado predeterminado del campo.

  $floatLabelInput.on("blur", function (e) {
    if (!$(e.target).val()) {
      $(e.target).prev().removeClass("active");
    } else {
      $(e.target).prev().addClass("active");
    }
  });

Agregar y eliminar la clase usando los controladores de eventos de "enfoque" y "desenfoque" (en lugar de "hacer clic") permite al usuario ver el efecto incluso cuando navega usando solo un teclado (es decir, presionando tabulador para recorrer los campos).

Resultado final

Aquí está el resultado final de nuestras etiquetas flotantes en campos de formulario en un formulario de opción de correo electrónico Divi.

Pensamientos finales

Agregar etiquetas flotantes a un formulario Divi no es tan difícil. Diseñar el formulario de opción de correo electrónico (o cualquier formulario Divi) es sorprendentemente fácil. Sin embargo, al agregar etiquetas flotantes, recuerde personalizar el tamaño y el espaciado de los campos del formulario para dejar la cantidad correcta de espacio para la etiqueta flotante. Después de eso, usamos CSS personalizado para ocultar o mostrar de manera efectiva el marcador de posición cuando el usuario se enfoca en el campo. Dado que cada navegador requiere diferentes prefijos para apuntar al pseudoelemento de marcador de posición, es importante utilizarlos correctamente. El JQuery que agregamos agrega y elimina una clase en el elemento de etiqueta que lo hará flotar a la vista cuando sea necesario. Considerándolo todo, es una microinteracción sólida que se suma a la experiencia del usuario.

No dude en utilizar este mismo proceso en otros formularios Divi (como un formulario de inicio de sesión o de contacto). No olvide agregar la clase personalizada en el formulario antes de agregar el código personalizado. Después de eso, es posible que deba modificar la configuración de diseño de los campos del formulario para asegurarse de que haya suficiente espacio para esas etiquetas flotantes.

Espero tener noticias tuyas en los comentarios.

¡Salud!