Cómo crear un formulario desplegable animado

Introducción

¿Te gustaría crear un formulario desplegable animado? Es muy simple y fácil de hacer usando solo un poco de CSS. En este tutorial, te guiaremos paso a paso sobre cómo hacerlo usando la Plantilla de formulario de admisión del cliente para la preparación de impuestos.

Creación del formulario

Primero, comenzaremos creando un nuevo formulario basado en la plantilla de formulario Plantilla de formulario de admisión del cliente para la preparación de impuestos. Para lograr esto, desde tu panel de administración de WordPress, navega a WPForms » Plantillas de formularios y en el campo Buscar plantillas introduce impuestos y se mostrará la plantilla. 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, consulta este tutorial.

#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 tu propio ID de formulario. Si necesitas ayuda para encontrar tu ID de formulario, revisa esta útil guía.

¡Y eso es todo! Ahora has creado un formulario desplegable animado usando la Plantilla de formulario de admisión del cliente para la preparación de impuestos. ¿Te gustaría también añadir una animación de confeti cuando se envíe el formulario? Echa un vistazo a nuestro tutorial sobre Cómo añadir animación de confeti al mensaje de confirmación.