### [Cómo agregar animación de confeti al mensaje de confirmación](https://wpforms.com/developers/how-to-add-confetti-animation-to-confirmation-message/)
**Publicado:** 12 de marzo de 2021
**Autor:** Umair Majeed
**Extracto:** Este tutorial te mostrará cómo agregar animación de confeti a tu mensaje de confirmación usando JavaScript y PHP.
**Contenido:**
¿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ían tu formulario con éxito.
Esta guía te mostrará cómo implementar animaciones de confeti y fuegos artificiales en tus mensajes de confirmación.
Nota importante: Estas animaciones solo funcionan con formularios no AJAX. Deberás deshabilitar el envío de formularios AJAX en **Configuración** » **Avanzado** antes de implementar esta funció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 **Configuración** y luego en **Confirmaciones**. Dentro de la ventana **Mensaje de confirmación**, simplemente agrega ``.
Agregar este elemento canvas y 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 al que podemos apuntar específicamente en nuestro fragmento de código.
### Agregar 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; /* asegura que el canvas esté por encima del otro contenido */
pointer-events: none; /* permite que los clics pasen a través del canvas */
}
```
## Agregar 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](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/).
## 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 (consulta 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](https://wpforms.com/developers/how-to-add-falling-snow-animation-to-your-confirmation-message/ "Cómo agregar animación de nieve cayendo a tu mensaje de confirmación").
## Acción de referencia
[wpforms_wp_footer_end](https://wpforms.com/developers/wpforms_wp_footer_end/ "Usando la acción wpforms_wp_footer_end")
**Categorías:** Extensión
**Etiquetas:** Javascript, JS, PHP
---