Résumé IA
Souhaitez-vous rendre le message de confirmation de votre formulaire plus attrayant ? En ajoutant une animation de confettis, vous pouvez créer une expérience excitante et mémorable lorsque les utilisateurs soumettent avec succès votre formulaire.
Ce guide vous montrera comment implémenter des animations de confettis et de feux d'artifice dans vos messages de confirmation.
Configuration de votre formulaire
Tout d'abord, vous devrez créer votre formulaire. Aux fins de ce tutoriel, nous allons simplement ajouter un formulaire de contact simple avec les champs de formulaire Nom, E-mail et Texte de paragraphe.
Une fois que vous avez ajouté vos champs, cliquez sur l'onglet Paramètres, puis sur Confirmations. Dans la fenêtre Message de confirmation, ajoutez simplement <canvas id="animateCanvas" />.
L'ajout de cet élément canvas et de cet ID signifie que nous pouvons contrôler où ces confettis apparaîtront. Nous voulons qu'ils n'apparaissent que dans le message de confirmation, nous ajoutons donc un élément que nous pouvons cibler spécifiquement dans notre extrait de code.
Ajout de styles de toile
Ajoutez ce CSS à votre site pour positionner correctement l'animation. Si vous n'êtes pas sûr de la manière d'ajouter du CSS personnalisé, veuillez consulter notre guide sur l'ajout de CSS à 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 */
}
Ajout de l'animation de confettis
Il est maintenant temps d'ajouter l'extrait de code qui fera la magie. Si vous n'êtes pas sûr de la manière d'ajouter du code personnalisé, veuillez consulter notre guide sur l'ajout d'extraits de code à WordPress.
Personnalisation de l'animation
Vous pouvez modifier ces valeurs dans le code pour personnaliser l'animation :
- SPRITE_WIDTH : Largeur des confettis
- SPRITE_HEIGHT : Hauteur des confettis
- PAPER_LENGTH : Quantité de confettis
- ROTATION_RATE : Vitesse de rotation
- COLORS : Tableau des couleurs des confettis
- DURATION : Durée de l'animation (en millisecondes)
- LENGTH : Quantité totale de confettis
Alternative : Animation de feux d'artifice
Pour un effet de feux d'artifice au lieu de confettis, remplacez le code des confettis par le code de l'animation de feux d'artifice (voir le code complet dans la documentation ci-dessus). Le processus d'installation reste le même.
Et c'est tout ce dont vous avez besoin ! Vous avez maintenant ajouté avec succès une animation de confettis à votre message de confirmation. Souhaitez-vous ajouter de la neige à la place ? Consultez notre tutoriel sur Comment ajouter une animation de neige tombante à votre message de confirmation.