Volete rendere più coinvolgente il messaggio di conferma del vostro modulo? Aggiungendo un'animazione di coriandoli, potete creare un'esperienza emozionante e memorabile quando gli utenti inviano con successo il vostro modulo.
Questa guida vi mostrerà come implementare le animazioni di coriandoli e fuochi d'artificio nei vostri messaggi di conferma.
Impostazione del modulo
Per prima cosa, è necessario creare il modulo. Per questo tutorial, aggiungeremo un semplice modulo di contatto con i campi Nome, Email e Testo del paragrafo.
Una volta aggiunti i campi, fare clic sul pulsante Impostazioni e quindi fare clic su Conferme. All'interno del Messaggio di conferma è sufficiente aggiungere <canvas id="animateCanvas" />.
L'aggiunta dell'elemento canvas e dell'ID ci consente di controllare dove appariranno i coriandoli. Vogliamo che compaiano solo nel messaggio di conferma, quindi stiamo aggiungendo un elemento che possiamo indirizzare in modo specifico nel nostro frammento di codice.
Aggiunta di stili di tela
Aggiungete questo CSS al vostro sito per posizionare correttamente l'animazione. Se non siete sicuri di come aggiungere CSS personalizzati, consultate la nostra guida sull'aggiunta di CSS a 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 */
}
Aggiunta dell'animazione dei coriandoli
Ora è il momento di aggiungere lo snippet di codice che farà accadere la magia. Se non siete sicuri di come aggiungere un codice personalizzato, consultate la nostra guida sull'aggiunta di snippet di codice a WordPress.
Personalizzazione dell'animazione
È possibile modificare questi valori nel codice per personalizzare l'animazione:
- SPRITE_WIDTH: Larghezza dei pezzi di coriandoli
- SPRITE_HEIGHT: altezza dei pezzi di coriandoli
- CARTA_LUNGHEZZA: quantità di coriandoli
- ROTATION_RATE: Velocità di rotazione
- COLORI: Vasta gamma di colori di coriandoli
- DURATA: durata dell'animazione (in millisecondi)
- LUNGHEZZA: quantità totale di pezzi di coriandoli
Alternativa: Animazione di fuochi d'artificio
Per ottenere un effetto di fuochi d'artificio al posto dei coriandoli, sostituire il codice dei coriandoli con il codice dell'animazione dei fuochi d'artificio (vedere il codice completo nella documentazione precedente). La procedura di impostazione rimane la stessa.
E questo è tutto ciò che vi serve! Ora avete aggiunto con successo un'animazione di coriandoli al vostro messaggio di conferma. Volete invece aggiungere della neve? Date un'occhiata al nostro tutorial su Come aggiungere un'animazione di caduta della neve al vostro messaggio di conferma.