### [Come Aggiungere l'Animazione della Neve che Cade al Tuo Messaggio di Conferma](https://wpforms.com/developers/how-to-add-falling-snow-animation-to-your-confirmation-message/)
**Pubblicato:** 5 novembre 2021
**Autore:** Team Editoriale
**Estratto:** Questo tutorial ti mostrerà come utilizzare JavaScript e PHP per creare un effetto di caduta della neve sul tuo messaggio di conferma.
**Contenuto:**
## Introduzione
Vorresti aggiungere un'animazione di neve che cade al tuo messaggio di conferma? Puoi facilmente aggiungere un'animazione al messaggio di conferma che avrebbe un effetto più interattivo utilizzando PHP e JavaScript. In questo tutorial, analizzeremo ogni passaggio su come ottenere questo risultato.
## Creazione del tuo modulo
Per prima cosa, dovrai creare il tuo modulo. Ai fini di questo tutorial, abbiamo creato un modulo d'ordine. Una volta completato l'ordine, verrà visualizzato un messaggio di conferma su cui apparirà la nostra animazione della neve che cade.
Se hai bisogno di aiuto nella creazione del tuo modulo, [visita questa documentazione](https://wpforms.com/docs/creating-first-form/ "Creazione del tuo primo modulo").
Una volta aggiunti i tuoi campi, fai clic sulla scheda **Impostazioni** e quindi fai clic su **Conferme**. All'interno della finestra **Messaggio di conferma**, aggiungeremo un elemento canvas HTML con un ID di **canvas** in modo da poter individuare esattamente dove cadranno i coriandoli.
Una volta nella scheda **Conferme**, ricorda di fare clic sulla scheda **Testo** nella casella del messaggio. Dovrai farlo per aggiungere HTML puro in quest'area del messaggio.
Basta aggiungere ``
Aggiungere questo elemento canvas e ID significa che possiamo controllare dove cadrà questa neve. Vogliamo che appaia solo nel messaggio di conferma, quindi stiamo aggiungendo un elemento che possiamo specificamente indirizzare nel nostro snippet di codice.
Questo snippet viene eseguito solo sui moduli non AJAX. Dovresti disattivare le impostazioni AJAX all'interno del modulo. Per disabilitare questa impostazione, vai alla scheda **Impostazioni** all'interno del modulo e, sotto l'impostazione **Avanzate**, **disabilita** l'impostazione **Abilita invio modulo AJAX**.
## Aggiunta del CSS per il wrapper del canvas
Dobbiamo anche aggiungere un po' di CSS personalizzato per il wrapper ``. Se hai bisogno di aiuto su come e dove aggiungere CSS personalizzato, [dai un'occhiata a questo tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Come aggiungere stili CSS personalizzati per WPForms"). Copia e incolla semplicemente questo CSS sul tuo sito.
```
canvas#canvas {
position: absolute;
top: 0;
left: 0;
}
```
## Aggiunta dello snippet di codice per creare la neve
Ora è il momento di aggiungere lo snippet di codice che farà accadere la magia. Per qualsiasi assistenza nell'aggiunta di uno snippet al tuo sito, [vedi questo tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Come aggiungere PHP o JavaScript personalizzato per WPForms").
```
/**
* Aggiunge la neve che cade all'elemento canvas sul messaggio di conferma
*
* @link https://wpforms.com/developers/how-to-add-falling-snow-animation-to-your-confirmation-message/
*/
function wpf_dev_winter_scene_animation() {
?>
**Categorie:** Tutorial
**Tag:** Javascript, JS, PHP
---