### [Cómo crear un formulario de alternancia animado](https://wpforms.com/developers/how-to-create-an-animated-toggle-form/)
**Publicado:** 21 de junio de 2023
**Autor:** Equipo Editorial
**Extracto:** ¡Este tutorial te mostrará cómo crear un formulario de alternancia animado usando solo un poco de CSS!
**Contenido:**
## Introducción
¿Te gustaría crear un formulario de alternancia animado? Es muy simple y fácil de hacer usando solo un poco de CSS. En este tutorial, te guiaremos exactamente sobre cómo hacerlo utilizando la [Plantilla de formulario de admisión de clientes para preparación de impuestos](https://wpforms.com/templates/tax-preparation-client-intake-form-template/ "Plantilla de formulario de admisión de clientes para preparación de impuestos de WPForms").
## Creación del formulario
Primero, comenzaremos creando un nuevo formulario basado en la plantilla de formulario **Plantilla de formulario de admisión de clientes para preparación de impuestos**. Para lograr esto, desde tu administrador de WordPress, navega a **WPForms » Plantillas de formulario** y en el campo **Buscar plantillas** ingresa **impuestos** y la plantilla se mostrará. Cuando pases el cursor sobre esta plantilla, haz clic en **Crear formulario**.
Esta plantilla ya está configurada con lógica condicional para mostrar y ocultar secciones del formulario cuando se hace clic en cada una de las secciones principales de **Casilla de verificación**. A estas es a las que aplicaremos animación para que la transición sea más fluida cuando se active la lógica condicional.
## Añadir el CSS
Ahora es el momento de añadir algo de CSS que aplicará una transición. Si necesitas ayuda sobre cómo y dónde añadir CSS personalizado, [por favor revisa este tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Cómo añadir estilos CSS personalizados para WPForms").
```
#wpforms-form-3342 .wpforms-conditional-show {
display: block;
animation: fade-in 1s;
}
#wpforms-form-3342 .wpforms-conditional-hide {
display: block;
animation: fade-out 1s;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
```
En el CSS, estamos apuntando al ID del formulario **3342**. Necesitarás actualizar este ID para que coincida con el ID de tu propio formulario. Si necesitas ayuda para encontrar el ID de tu formulario, [por favor revisa esta útil guía](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "Cómo localizar el ID del formulario y el ID del campo").
¡Y eso es todo! Ahora has creado un formulario de alternancia animado utilizando la [Plantilla de formulario de admisión de clientes para preparación de impuestos](https://wpforms.com/templates/tax-preparation-client-intake-form-template/ "Plantilla de formulario de admisión de clientes para preparación de impuestos de WPForms"). ¿También te gustaría añadir una animación de confeti cuando se envía el formulario? Echa un vistazo a nuestro tutorial sobre [Cómo añadir animación de confeti al mensaje de confirmación](https://wpforms.com/developers/how-to-add-confetti-animation-to-confirmation-message/ "Cómo añadir animación de confeti al mensaje de confirmación").
**Categorías:** Tutoriales
**Etiquetas:** CSS
---