Resumo de IA
Gostaria de tornar a mensagem de confirmação do seu formulário mais envolvente? Ao adicionar uma animação de confetes, pode criar uma experiência excitante e memorável quando os utilizadores submeterem com sucesso o seu formulário.
Este guia irá mostrar-lhe como implementar animações de confetes e fogo de artifício nas suas mensagens de confirmação.
Configurar o Seu Formulário
Primeiro, terá de criar o seu formulário. Para efeitos deste tutorial, vamos apenas adicionar um formulário de contacto simples com os campos de formulário Nome, Email e Texto de Parágrafo.
Depois de adicionar os seus campos, clique no separador Definições e depois clique em Confirmações. Dentro da janela Mensagem de Confirmação, adicione simplesmente <canvas id="animateCanvas" />.
Adicionar este elemento canvas e ID significa que podemos controlar onde estes confetes irão aparecer. Só queremos que apareçam na mensagem de confirmação, por isso estamos a adicionar um elemento que podemos direcionar especificamente no nosso trecho de código.
Adicionar Estilos de Canvas
Adicione este CSS ao seu site para posicionar corretamente a animação. Se não tem a certeza de como adicionar CSS personalizado, por favor reveja o 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 */
}
Adicionar a Animação de Confetes
Agora é hora de adicionar o trecho de código que fará a magia acontecer. Se não tem a certeza de como adicionar código personalizado, por favor reveja o nosso guia sobre como adicionar trechos de código ao WordPress.
Personalizar a Animação
Pode modificar estes valores no código para personalizar a animação:
- LARGURA_SPRITE: Largura das peças de confete
- ALTURA_SPRITE: Altura das peças 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 peças de confete
Alternativa: Animação de Fogo de Artifício
Para um efeito de fogo de artifício em vez de confetes, substitua o código de confetes pelo código de animação de fogo de artifício (veja o código completo na documentação acima). O processo de configuração permanece o mesmo.
E é tudo o que precisa! Agora adicionou com sucesso uma animação de confetes à sua mensagem de confirmação. Gostaria de adicionar neve em vez disso? Veja o nosso tutorial sobre Como Adicionar Animação de Neve a Cair à Sua Mensagem de Confirmação.