Resumen de IA
¿Te gustaría hacer que el mensaje de confirmación de tu formulario sea más atractivo? Al agregar una animación de confeti, puedes crear una experiencia emocionante y memorable cuando los usuarios envíen tu formulario correctamente.
Esta guía te mostrará cómo implementar animaciones de confeti y fuegos artificiales en tus mensajes de confirmación.
Configuración de tu formulario
Primero, necesitarás crear tu formulario. Para este tutorial, simplemente agregaremos un formulario de contacto simple con los campos de formulario Nombre, Correo electrónico y Texto de párrafo.
Una vez que hayas agregado tus campos, haz clic en la pestaña Ajustes y luego en Confirmaciones. Dentro de la ventana Mensaje de confirmación, simplemente agrega <canvas id="animateCanvas" />.
Agregar este elemento canvas y su ID significa que podemos controlar dónde aparecerá este confeti. Solo queremos que aparezca en el mensaje de confirmación, por lo que estamos agregando un elemento que podemos apuntar específicamente en nuestro fragmento de código.
Añadir estilos al Canvas
Agrega este CSS a tu sitio para posicionar correctamente la animación. Si no estás seguro de cómo agregar CSS personalizado, revisa nuestra guía sobre cómo agregar CSS a WordPress.
canvas#animateCanvas {
position: fixed;
top: 0;
left: 0;
z-index: 1000; /* ensure canvas is above other content */
pointer-events: none; /* allow clicks to pass through the canvas */
}
Añadir la animación de confeti
Ahora es el momento de agregar el fragmento de código que hará que suceda la magia. Si no estás seguro de cómo agregar código personalizado, revisa nuestra guía sobre cómo agregar fragmentos de código a WordPress.
Personalizar la animación
Puedes modificar estos valores en el código para personalizar la animación:
- SPRITE_WIDTH: Ancho de las piezas de confeti
- SPRITE_HEIGHT: Alto de las piezas de confeti
- PAPER_LENGTH: Cantidad de confeti
- ROTATION_RATE: Velocidad de rotación
- COLORS: Matriz de colores de confeti
- DURATION: Duración de la animación (en milisegundos)
- LENGTH: Cantidad total de piezas de confeti
Alternativa: Animación de fuegos artificiales
Para un efecto de fuegos artificiales en lugar de confeti, reemplaza el código de confeti con el código de animación de fuegos artificiales (ver el código completo en la documentación anterior). El proceso de configuración sigue siendo el mismo.
¡Y eso es todo lo que necesitas! Ahora has agregado con éxito una animación de confeti a tu mensaje de confirmación. ¿Te gustaría agregar algo de nieve en su lugar? Consulta nuestro tutorial sobre Cómo agregar animación de nieve cayendo a tu mensaje de confirmación.