### [Come aggiungere l'animazione coriandoli al messaggio di conferma](https://wpforms.com/developers/how-to-add-confetti-animation-to-confirmation-message/)
**Pubblicato:** 12 marzo 2021
**Autore:** Umair Majeed
**Estratto:** Questo tutorial ti mostrerà come aggiungere l'animazione coriandoli al tuo messaggio di conferma utilizzando JavaScript e PHP.
**Contenuto:**
Vorresti rendere il messaggio di conferma del tuo modulo più coinvolgente? Aggiungendo un'animazione coriandoli, puoi creare un'esperienza emozionante e memorabile quando gli utenti inviano con successo il tuo modulo.
Questa guida ti mostrerà come implementare animazioni coriandoli e fuochi d'artificio nei tuoi messaggi di conferma.
Nota importante: queste animazioni funzionano solo con moduli non AJAX. Dovrai disabilitare l'invio del modulo AJAX in **Impostazioni** » **Avanzate** prima di implementare questa funzionalità.
## Configurazione del tuo modulo
Per prima cosa, dovrai creare il tuo modulo. Ai fini di questo tutorial, aggiungeremo solo un semplice modulo di contatto con i campi modulo **Nome**, **Email** e **Testo Paragrafo**.
Una volta aggiunti i campi, fai clic sulla scheda **Impostazioni** e quindi fai clic su **Conferme**. All'interno della finestra **Messaggio di conferma**, aggiungi semplicemente ``.
L'aggiunta di questo elemento canvas e ID significa che possiamo controllare dove appariranno questi coriandoli. Vogliamo che appaiano solo nel messaggio di conferma, quindi stiamo aggiungendo un elemento che possiamo selezionare specificamente nel nostro snippet di codice.
### Aggiunta degli stili Canvas
Aggiungi questo CSS al tuo sito per posizionare correttamente l'animazione. Se non sei sicuro di come aggiungere CSS personalizzato, consulta la nostra guida su come aggiungere CSS a WordPress.
```
canvas#animateCanvas {
position: fixed;
top: 0;
left: 0;
z-index: 1000; /* assicurati che il canvas sia sopra gli altri contenuti */
pointer-events: none; /* consenti ai clic di passare attraverso il canvas */
}
```
## Aggiunta dell'animazione coriandoli
Ora è il momento di aggiungere lo snippet di codice che farà accadere la magia. Se non sei sicuro di come aggiungere codice personalizzato, consulta la nostra [guida su come aggiungere snippet di codice a WordPress](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/).
## Personalizzazione dell'animazione
Puoi modificare questi valori nel codice per personalizzare l'animazione:
- SPRITE\_WIDTH: Larghezza dei pezzi di coriandolo
- SPRITE\_HEIGHT: Altezza dei pezzi di coriandolo
- PAPER\_LENGTH: Quantità di coriandolo
- ROTATION\_RATE: Velocità di rotazione
- COLORS: Array di colori dei coriandoli
- DURATION: Durata dell'animazione (in millisecondi)
## Alternativa: Animazione fuochi d'artificio
Per un effetto fuochi d'artificio invece di coriandoli, sostituisci il codice coriandoli con il codice animazione fuochi d'artificio (vedi il codice completo nella documentazione sopra). Il processo di configurazione rimane lo stesso.
E questo è tutto ciò che ti serve! Hai ora aggiunto con successo un'animazione coriandoli al tuo messaggio di conferma. Vorresti aggiungere un po' di neve invece? Dai un'occhiata al nostro tutorial su [Come aggiungere l'animazione neve che cade al tuo messaggio di conferma](https://wpforms.com/developers/how-to-add-falling-snow-animation-to-your-confirmation-message/ "Come aggiungere l'animazione neve che cade al tuo messaggio di conferma").
## Azione di riferimento
[wpforms\_wp\_footer\_end](https://wpforms.com/developers/wpforms_wp_footer_end/ "Utilizzo dell'azione wpforms_wp_footer_end")
**Categorie:** Estensione
**Tag:** Javascript, JS, PHP
---