Resumen de IA
¿Te gustaría dar a tus formularios un aspecto moderno e interactivo con etiquetas flotantes? Las etiquetas flotantes ofrecen una forma elegante de mostrar las etiquetas de los campos que se animan cuando los usuarios interactúan con los campos de tu formulario.
Esta guía te mostrará cómo implementar esta función utilizando WPForms.
Creación de su formulario
Comenzaremos creando un formulario de contacto sencillo. Si necesitas ayuda para crear un formulario, consulta esta documentación.
Si hay un campo Teléfono en el formulario, deberás establecer el formato en EE. UU. o Internacional. Este fragmento no funcionará con el formato Inteligente.
También deberás añadir texto Marcador de posición a cada campo. Este texto se puede añadir seleccionando el campo y haciendo clic en la pestaña Avanzado para añadir el texto.
Si necesitas ayuda sobre cómo hacer esto, consulta nuestra guía sobre cómo añadir texto marcador de posición a un campo.
Añadir clases CSS
A continuación, vamos a añadir una clase CSS de floating a los campos para los que deseamos tener etiquetas flotantes.
Selecciona cada campo uno por uno y haz clic en la pestaña Avanzado y añade floating dentro del campo Clases CSS.
Etiquetas flotantes – Fragmento PHP
Vamos a añadir un par de pequeños fragmentos PHP que eliminarán la etiqueta de la parte superior de los campos del formulario para colocarla justo debajo de los campos del formulario.
Si necesitas ayuda sobre cómo y dónde añadir fragmentos a tu sitio, consulta este tutorial.
Lo que hace este fragmento es eliminar la posición de la etiqueta del campo de mostrarse antes del campo y colocarla después del campo.
Etiquetas flotantes – Fragmento CSS
Ahora que nuestro formulario está creado y nuestros fragmentos están en su lugar, necesitamos añadir el CSS personalizado a nuestro sitio para unir todo esto.
Para obtener ayuda sobre cómo y dónde añadir CSS personalizado, consulta este tutorial.
Preguntas frecuentes
P: ¿La validación del campo seguirá mostrándose?
R: ¡Absolutamente! Los errores de validación mantendrán el mismo estilo.
P: ¿Por qué no me funciona?
A: Asegúrate de repasar los pasos anteriores; si omitiste colocar el texto Placeholder en los campos, las etiquetas no parecerían tener el efecto flotante cuando un usuario hace clic dentro del campo.
¡Y eso es todo! Ahora has creado un formulario con etiquetas flotantes que suben cuando el usuario empieza a escribir en el campo. A continuación, ¿quieres cambiar el color del mensaje de confirmación o simplemente eliminarlo por completo? Echa un vistazo a nuestro artículo sobre Cómo eliminar el estilo de la caja del mensaje de confirmación.