Resumo de IA
Gostaria de tornar a mensagem de confirmação do seu formulário mais envolvente? Ao adicionar uma animação de confete, você pode criar uma experiência emocionante e memorável quando os usuários enviarem seu formulário com sucesso.
Este guia mostrará como implementar animações de confete e fogos de artifício em suas mensagens de confirmação.
Configurando Seu Formulário
Primeiro, você precisará criar seu formulário. Para fins deste tutorial, adicionaremos apenas um formulário de contato simples com os campos de formulário Nome, Email e Texto de Parágrafo.
Depois de adicionar seus campos, clique na aba Configurações e depois em Confirmações. Dentro da janela Mensagem de Confirmação, simplesmente adicione <canvas id="animateCanvas" />.
Adicionar este elemento canvas e ID significa que podemos controlar onde este confete aparecerá. Queremos que ele apareça apenas na mensagem de confirmação, então estamos adicionando um elemento que podemos direcionar especificamente em nosso trecho de código.
Adicionando Estilos ao Canvas
Adicione este CSS ao seu site para posicionar corretamente a animação. Se você não tem certeza de como adicionar CSS personalizado, por favor, revise nosso guia sobre como adicionar CSS ao 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 */
}
Adicionando a Animação de Confete
Agora é hora de adicionar o trecho de código que fará a mágica acontecer. Se você não tem certeza de como adicionar código personalizado, por favor, revise nosso guia sobre como adicionar trechos de código ao WordPress.
Personalizando a Animação
Você pode modificar esses valores no código para personalizar a animação:
- LARGURA_SPRITE: Largura dos pedaços de confete
- ALTURA_SPRITE: Altura dos pedaços de confete
- COMPRIMENTO_PAPEL: Quantidade de confete
- TAXA_ROTACAO: Velocidade de rotação
- CORES: Array de cores de confete
- DURACAO: Duração da animação (em milissegundos)
- COMPRIMENTO: Quantidade total de pedaços de confete
Alternativa: Animação de Fogos de Artifício
Para um efeito de fogos de artifício em vez de confete, substitua o código do confete pelo código da animação de fogos de artifício (veja o código completo na documentação acima). O processo de configuração permanece o mesmo.
E é tudo que você precisa! Agora você adicionou com sucesso uma animação de confete à sua mensagem de confirmação. Gostaria de adicionar neve em vez disso? Confira nosso tutorial sobre Como Adicionar Animação de Neve Caindo à Sua Mensagem de Confirmação.