### [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/)
**Publicado:** 5 de noviembre de 2021
**Autor:** Equipo Editorial
**Extracto:** Este tutorial te mostrará cómo usar JavaScript y PHP para crear un efecto de nieve cayendo en tu mensaje de confirmación.
**Contenido:**
## Introducción
¿Te gustaría agregar una animación de nieve cayendo a tu mensaje de confirmación? Puedes agregar fácilmente una animación al mensaje de confirmación que tendría un efecto más interactivo usando PHP y JavaScript. En este tutorial, desglosaremos cada paso sobre cómo lograr esto.
## Creando tu formulario
Primero, necesitarás crear tu formulario. Para el propósito de este tutorial, hemos creado un formulario de pedido. Una vez que el pedido esté completo, se mostrará un mensaje de confirmación en el que aparecerá nuestra animación de nieve cayendo.
Si necesitas ayuda para crear tu formulario, por favor [visita esta documentación](https://wpforms.com/docs/creating-first-form/ "Creando tu primer formulario").
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**, vamos a agregar un elemento de lienzo HTML con un ID de **canvas** para que podamos apuntar exactamente dónde caerá el confeti.
Una vez dentro de la pestaña **Confirmaciones**, recuerda hacer clic en la pestaña **Texto** en el cuadro del mensaje. Deberás hacer esto para poder agregar HTML puro en esta área del mensaje.
Simplemente agrega ``
Agregar este elemento de lienzo y ID significa que podemos controlar dónde aparecerá esta nieve. 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.
Este fragmento solo se ejecuta en formularios que no son AJAX. Necesitarías desactivar tu configuración AJAX dentro del constructor de formularios. Para desactivar esta configuración, ve a la pestaña **Configuración** dentro del constructor de formularios y, en la configuración **Avanzada**, **desactiva** la configuración **Habilitar envío de formularios AJAX**.
## Agregando el CSS para el contenedor del lienzo
También necesitamos agregar algo de CSS personalizado para el contenedor ``. Si necesitas ayuda sobre cómo y dónde agregar CSS personalizado, [consulta este tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Cómo agregar estilos CSS personalizados para WPForms"). Simplemente copia y pega este CSS en tu sitio.
```
canvas#canvas {
position: absolute;
top: 0;
left: 0;
}
```
## Agregando el fragmento de código para crear la nieve
Ahora es el momento de agregar el fragmento de código que hará que la magia suceda. Para cualquier ayuda al agregar un fragmento a tu sitio, [consulta este tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Cómo agregar PHP o JavaScript personalizado para WPForms").
```
/**
* Agrega nieve cayendo al elemento canvas en el mensaje de confirmación
*
* @link https://wpforms.com/developers/how-to-add-falling-snow-animation-to-your-confirmation-message/
*/
function wpf_dev_winter_scene_animation() {
?>
**Categorías:** Tutoriales
**Etiquetas:** Javascript, JS, PHP
---