Introdução
Está interessado em adicionar folhas de outono em queda à sua mensagem de confirmação quando um formulário é submetido? Podemos guiá-lo através do processo neste tutorial!
Num tutorial anterior, demonstrámos como adicionar confettis e fogo de artifício em queda quando o formulário é submetido. Este tutorial segue uma abordagem semelhante com alguns passos adicionais.
Criar o formulário
Para começar, comece por criar um novo formulário e adicionar os campos pretendidos. Se precisar de ajuda nesta etapa, consulte esta documentação.
Configurar as definições de Confirmação
Para obter a animação das folhas de outono a cair, temos de efetuar algumas alterações à nossa mensagem de confirmação. Para tal, clique em Definições e, em seguida, selecione Confirmações. Uma vez lá, clique no separador Texto, uma vez que o passo seguinte será adicionar alguns elementos HTML à mensagem de confirmação.
Adicionar HTML à sua mensagem de confirmação
Agora que está preparado para incluir HTML na sua mensagem de confirmação, basta copiar e colar o seguinte código na sua caixa de mensagem:
<p>Thanks for your feedback!</p> <canvas id="canvas" /> <img id="leaf" src="http://mysite.com/path-to-image" />
Para o nosso tutorial, estamos a utilizar uma única folha que irá cair continuamente em áreas aleatórias da nossa tela área.
Terá de alterar a fonte da imagem para corresponder ao local onde carregou a folha.
Adicionar o snippet de folhas de outono caindo
Agora é hora de adicionar o código que vai começar a juntar tudo isso. Se precisar de ajuda para adicionar trechos de código ao seu site, consulte este tutorial.
/** * Add falling autumn leaves to the canvas element on the confirmation message * * @link https://wpforms.com/developers/how-to-add-falling-autumn-leaves-to-your-confirmation-message/ * */ function wpf_falling_autumn_leaves_animation() { ?> <script type="text/javascript"> let canvas = document.querySelector('canvas'); let ctx = canvas.getContext('2d'); canvas.width = document.body.clientWidth; canvas.height = document.body.clientHeight; let width = canvas.width; let height = canvas.height; let centerX = canvas.width / 2; let centerY = canvas.height / 2; let leaf = document.querySelector('#leaf'); let leafs = []; let count = 200; for (let i = 0; i < count; i++) { let angle = 15 + Math.random() * 30 let dir = [-1,1][Math.floor(Math.random() * 2)]; leafs.push({ x: Math.random() * width, y: Math.random() * height, w: 30, h: 30 * (leaf.height / leaf.width), v: 20 / angle, a: angle, d: dir, anim: true }); } function update(dt) { for (let i = 0; i < leafs.length; i++) { if (leafs[i].anim) { leafs[i].y += leafs[i].v; if (leafs[i].y > height) { leafs[i].y = -120; leafs[i].x = Math.random() * width; } } } } function draw(dt) { requestAnimationFrame(draw); update(dt); ctx.clearRect(0, 0, width, height); for (let i = 0; i < leafs.length; i++) { ctx.save(); if (leafs[i].anim) { ctx.translate(leafs[i].x, leafs[i].y); ctx.rotate( leafs[i].d * Math.sin(dt * 0.002 * i * 0.01) * (leafs[i].a) * Math.PI / 180 ); } ctx.globalAlpha = Math.max(0, leafs[i].y * 0.1); ctx.drawImage(leaf, -leafs[i].w / 2, 70, leafs[i].w, leafs[i].h); ctx.restore(); } } draw(); </script> <?php } add_action( 'wpforms_wp_footer_end', 'wpf_falling_autumn_leaves_animation', 1);
A definição crítica a ter em conta no excerto acima é let count = 200;
. Esta definição determina a quantidade de folhas de outono em queda apresentadas no ecrã. Se aumentar este número, aparecerão mais folhas, enquanto que se o diminuir, aparecerão menos folhas.
Adicionar o seu CSS
Para este tutorial, vamos adicionar uma única regra CSS à nossa tela.
Poderão ser necessários mais CSS, dependendo do seu sítio. Se precisar de ajuda ou tiver mais perguntas, pode sempre juntar-se à nossa comunidade do Facebook para fazer perguntas ou obter assistência.
canvas { display: block; position: absolute !important; top: 0; left: 0; }
Se precisar de ajuda sobre onde ou como adicionar o CSS, consulte este tutorial.
Quando estas etapas estiverem concluídas e o utilizador preencher o formulário, verá folhas de outono a cair por cima da mensagem de confirmação.
E é isso! Se ainda não viu o nosso tutorial sobre como adicionar confettis à sua mensagem de confirmação, não se esqueça de verificar o tutorial sobre Como adicionar animação de confettis à mensagem de confirmação.
Relacionadas
Referência da ação: wpforms_wp_footer_end