### [Comment ajouter une animation de neige qui tombe à votre message de confirmation](https://wpforms.com/developers/how-to-add-falling-snow-animation-to-your-confirmation-message/)
**Publié :** 5 novembre 2021
**Auteur :** Équipe éditoriale
**Extrait :** Ce tutoriel vous montrera comment utiliser JavaScript et PHP pour créer un effet de neige tombante sur votre message de confirmation.
**Contenu :**
## Introduction
Souhaitez-vous ajouter une animation de neige tombante à votre message de confirmation ? Vous pouvez facilement ajouter une animation au message de confirmation qui aurait un effet plus interactif en utilisant PHP et JavaScript. Dans ce tutoriel, nous allons détailler chaque étape pour y parvenir.
## Création de votre formulaire
Tout d'abord, vous devrez créer votre formulaire. Aux fins de ce tutoriel, nous avons créé un formulaire de commande. Une fois la commande terminée, un message de confirmation s'affichera sur lequel notre animation de neige tombante apparaîtra.
Si vous avez besoin d'aide pour créer votre formulaire, veuillez [consulter cette documentation](https://wpforms.com/docs/creating-first-form/ "Créer votre premier formulaire").
Une fois que vous avez ajouté vos champs, cliquez sur l'onglet **Paramètres**, puis sur **Confirmations**. Dans la fenêtre **Message de confirmation**, nous allons ajouter un élément de canevas HTML avec l'ID **canvas** afin de pouvoir cibler exactement où les confettis tomberont.
Une fois dans l'onglet **Confirmations**, n'oubliez pas de cliquer sur l'onglet **Texte** de la zone de message. Vous devrez le faire afin d'ajouter du HTML pur dans cette zone de message.
Ajoutez simplement ``
L'ajout de cet élément de canevas et de cet ID signifie que nous pouvons contrôler où cette neige apparaîtra. Nous voulons seulement qu'elle apparaisse dans le message de confirmation, nous ajoutons donc un élément que nous pouvons cibler spécifiquement dans notre extrait de code.
Cet extrait ne s'exécute que sur les formulaires non AJAX. Vous devrez désactiver vos paramètres AJAX dans le constructeur de formulaires. Pour désactiver ce paramètre, accédez à l'onglet **Paramètres** dans le constructeur de formulaires et, sous le paramètre **Avancé**, **désactivez** le paramètre **Activer la soumission de formulaire AJAX**.
## Ajout du CSS pour l'enveloppe du canevas
Nous devons également ajouter un CSS personnalisé pour l'enveloppe ``. Si vous avez besoin d'aide sur comment et où ajouter du CSS personnalisé, [veuillez consulter ce tutoriel](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Comment ajouter des styles CSS personnalisés pour WPForms"). Copiez et collez simplement ce CSS sur votre site.
```
canvas#canvas {
position: absolute;
top: 0;
left: 0;
}
```
## Ajout de l'extrait de code pour créer la neige
Il est maintenant temps d'ajouter l'extrait de code qui fera la magie. Pour toute aide sur l'ajout d'un extrait à votre site, [veuillez consulter ce tutoriel](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Comment ajouter du PHP ou du JavaScript personnalisé pour WPForms").
```
/**
* Ajouter une animation de neige tombante à l'élément canvas sur le message de confirmation
*
* @link https://wpforms.com/developers/how-to-add-falling-snow-animation-to-your-confirmation-message/
*/
function wpf_dev_winter_scene_animation() {
?>
**Catégories :** Tutoriels
**Tags :** Javascript, JS, PHP
---