¿Le gustaría que los campos de Casilla de verificación y Opción múltiple de su formulario fueran más atractivos? Añadiendo transiciones suaves cuando se seleccionan las opciones, puede mejorar el atractivo visual de sus formularios y mejorar la interacción del usuario.
Esta guía le mostrará cómo implementar transiciones con estilo utilizando CSS.
Configuración del formulario
En primer lugar, cree un formulario con campos de Casilla de verificación y/o Selección múltiple. Si necesitas ayuda para crear tu formulario, consulta nuestra guía para crear tu primer formulario.
Anote el ID del formulario y el ID del campo, ya que los necesitará para el CSS. Si no estás seguro de cómo encontrar estos ID, consulta nuestra guía sobre cómo encontrar los ID de formulario y de campo.
Añadir estilos de transición
Para implementar las transiciones, necesitarás añadir CSS a tu sitio. Si no estás seguro de cómo añadir CSS personalizado, consulta nuestra guía sobre cómo añadir CSS a un sitio WordPress.
El CSS anterior se aplicará sólo al ID de formulario 999. Tendrá que cambiarlo para que coincida con el ID de su formulario. Los ID de campo de field_27 y field_3 también deberán actualizarse para que coincidan con los ID de campo de los campos Casilla de verificación y Opción múltiple de su formulario.
Cada casilla de verificación y campo de opción múltiple tiene su propio ID por lo que si usted tiene más de dos en su forma, que acaba de duplicar el CSS, cambiar el número de ID de campo y separar cada uno con una coma.
Y eso es todo, has añadido con éxito el CSS para crear una transición para Checkbox y Multiple Choice a tu formulario.
¿Te gustaría añadir algo de CSS que haga que los campos de formulario de texto salgan de la página cuando el visitante esté escribiendo dentro de ellos? Echa un vistazo a nuestro tutorial sobre Cómo añadir CSS al enfoque de los campos de formulario.