### [Como Adicionar Animação de Neve Caindo à Sua Mensagem de Confirmação](https://wpforms.com/developers/how-to-add-falling-snow-animation-to-your-confirmation-message/)
**Publicado:** 5 de novembro de 2021
**Autor:** Equipe Editorial
**Resumo:** Este tutorial mostrará como usar JavaScript e PHP para criar um efeito de neve caindo em sua mensagem de confirmação.
**Conteúdo:**
## Introdução
Gostaria de adicionar uma animação de neve caindo à sua mensagem de confirmação? Você pode facilmente adicionar alguma animação à mensagem de confirmação que teria mais um efeito interativo usando PHP e JavaScript. Neste tutorial, detalharemos cada etapa de como conseguir isso.
## Criando seu formulário
Primeiro, você precisará criar seu formulário. Para fins deste tutorial, criamos um formulário de pedido. Assim que o pedido for concluído, uma mensagem de confirmação será exibida na qual nossa animação de neve caindo aparecerá.
Se precisar de ajuda para criar seu formulário, [visite esta documentação](https://wpforms.com/docs/creating-first-form/ "Criando Seu Primeiro Formulário").
Depois de adicionar seus campos, clique na aba **Configurações** e depois em **Confirmações**. Dentro da janela **Mensagem de Confirmação**, vamos adicionar um elemento de tela HTML com um ID de **canvas** para que possamos direcionar exatamente onde os confetes cairão.
Uma vez dentro da aba **Confirmações**, lembre-se de clicar na aba **Texto** na caixa de mensagem. Você precisará fazer isso para adicionar HTML puro a esta área de mensagem.
Simplesmente adicione ``
Adicionar este elemento de tela e ID significa que podemos controlar onde esta neve aparecerá. Só queremos que ela apareça na mensagem de confirmação, então estamos adicionando um elemento que podemos direcionar especificamente em nosso trecho de código.
Este trecho só é executado em formulários não AJAX. Você precisaria desativar suas configurações AJAX dentro do construtor de formulários. Para desativar esta configuração, vá para a aba **Configurações** dentro do construtor de formulários e, em **Avançado**, **desative** a configuração **Ativar envio de formulário AJAX**.
## Adicionando o CSS para o wrapper do canvas
Também precisamos adicionar algum CSS personalizado para o wrapper ``. Se precisar de ajuda sobre como e onde adicionar CSS personalizado, [consulte este tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Como Adicionar Estilos CSS Personalizados para WPForms"). Simplesmente copie e cole este CSS em seu site.
```
canvas#canvas {
position: absolute;
top: 0;
left: 0;
}
```
## Adicionando o trecho de código para criar a neve
Agora é hora de adicionar o trecho de código que fará a mágica acontecer. Para qualquer assistência na adição de um trecho ao seu site, [consulte este tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Como Adicionar PHP ou JavaScript Personalizado para WPForms").
```
/**
* Adiciona neve caindo ao elemento canvas na mensagem de confirmação
*
* @link https://wpforms.com/developers/how-to-add-falling-snow-animation-to-your-confirmation-message/
*/
function wpf_dev_winter_scene_animation() {
?>
**Categorias:** Tutoriais
**Tags:** Javascript, JS, PHP
---