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

Agregar etiquetas flotantes para formar campos en Divipuede impulsar el diseño y la UX de cualquier forma 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 la etiqueta y muestra solo el texto del marcador de posición.

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

¡Empecemos!

Vistazo

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

Descarga el diseño GRATIS

Para poner sus manos en 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

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 has hecho, instala y activa el tema Divi .
  2. Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
  3. Elija la opción «Construir desde cero».

Después de eso, tendrás 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 suscripción por correo electrónico

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

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

Abra el modal Configuración de opciones 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 su proveedor de servicios de cuenta de correo electrónico. De lo contrario, la opción de correo electrónico no aparecerá en una página activa.

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:

  • Diseño: cuerpo en la parte superior, formulario 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,5 em superior
  • Relleno de campos: 0,5 em arriba, 0,5 em abajo, 1 em izquierda, 1 em derecha
  • Tamaño del texto de los campos: 1,2 em
  • Altura de línea de campos: 2em

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

  • Campos Esquinas redondeadas: 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 adelante 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 entre letras de botones: 0,1 em
  • 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 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 orientarlo con nuestro código CSS y JQuery en el siguiente paso.

Agregar el código personalizado

Para agregar el CSS personalizado y JQuery, agregue un módulo de código debajo del 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:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
.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.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
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");
    }
  });
});

Desglosando 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).

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

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
.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 deslizamiento hacia arriba una vez que recibe la clase «activa» controlada por JQeury.

01
02
03
04
05
06
.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 se 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 marcador de posición. Pero la idea es simple: cambie el color del marcador de posición a transparente.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.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 elemento de entrada en cada campo de formulario.

01
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 mueve a su lugar sobre la entrada con el CSS correspondiente.

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

Por último, utilizamos 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 vuelve el estado predeterminado del campo.

01
02
03
04
05
06
07
$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 «foco» y «desenfoque» (en lugar de «hacer clic») permite al usuario ver el efecto incluso cuando navega usando solo un teclado (es decir, presionando la tecla Tab para desplazarse por los campos).

Resultado final

Aquí está el resultado final de nuestras etiquetas flotantes en los 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, cuando agregue etiquetas flotantes, recuerde personalizar el tamaño y el espaciado de los campos del formulario para dejar la cantidad adecuada 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 marcador de posición, es importante hacerlo bien. El JQuery que agregamos agrega y elimina una clase en el elemento de la etiqueta que lo hará flotar cuando sea necesario. Con todo, es una microinteracción sólida que se suma a la experiencia del usuario.

Siéntase libre de usar este mismo proceso en otros formularios Divi (como un formulario de inicio de sesión o contacto) también. Simplemente 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 escuchar de usted en los comentarios.

¡Salud!

Publicaciones relacionadas:

  1. Cómo mostrar funciones en pestañas flotantes con Divi
  2. Cómo agregar un mensaje antes de los campos de comentarios de WordPress
  3. Cómo agregar etiquetas Meta en Shopify
  4. Cómo configurar su formulario de contacto Divi