Parce que même vos applications méritent un peu de magie de Noël…
Et si vous pouviez leur appliquer un thème Noël pour formulaires K2 sans effort ?
Dans cet article, je vous partage un thème CSS pur (sans JavaScript !) qui transforme n’importe quel formulaire K2 en carte postale de Noël. Au programme : neige qui tombe, guirlandes lumineuses animées, et titre de page scintillant.
Le tout en 5 minutes chrono.
Ce que contient ce thème
Neige qui tombe
30 flocons animés avec différentes tailles, vitesses et trajectoires. Un mix de flocons blancs (avec halo bleu pour la visibilité) et de flocons bleus pour un effet givré même sur fond clair.
Guirlande lumineuse
Une guirlande suspendue en haut de page avec un fil en courbe naturelle (effet « swooping »). 25 ampoules multicolores (rouge, vert, bleu, jaune, orange) avec une animation séquentielle en vague comme les vraies !
Titre festif
Votre titre de page s’illumine avec un effet scintillant doré, encadré par un sapin 🎄 et un Père Noël 🎅 qui flottent doucement.
NB : Cette mise en forme ne s’applique que sur les Labels avec le style Page Title
Intégration dans K2 (4 étapes)
Pas besoin de toucher au code source ou de déployer quoi que ce soit. Tout passe par une astuce simple avec un Data Label.
Étape 1 : Créer un Data Label
Dans votre Formulaire, ajoutez un contrôle Data Label n’importe où sur le formulaire.
Dans les propriétés :
- Cochez « Literal » pour permettre le rendu HTML
- Décochez « Prevent XSS » pour autoriser les balises style
Étape 2 : Créer une Expression
Allez dans l’éditeur d’expression (FX) et créez une nouvelle expression. Collez-y l’intégralité du code CSS + HTML fourni ci-dessous.
Étape 3 : Associer l’expression au Data Label
Toujours dans les propriétés du Data Label, associez votre expression au champ « Expression » ou créez une règle qui assigne l’expression au Data Label au chargement du formulaire avec un transfer data.
Étape 4 : Enjoy ! 🎉
Enregistrez, publiez, et admirez la magie opérer !
Le code complet
Copiez-collez ce code dans votre expression K2 :
Points techniques à noter
- 100% CSS : Aucun JavaScript, donc aucun impact sur les performances ou les règles K2
- position: fixed : Les éléments restent visibles même en scrollant
- pointer-events: none : La neige et les guirlandes ne bloquent pas les clics sur le formulaire
- z-index élevé : Les animations passent au-dessus de tous les contrôles
Personnalisation
Quelques variables faciles à modifier :
- Couleur du titre : Changez
--vert-sapin: #228B22dans:root - Vitesse de la neige : Modifiez les durées dans les
animation(ex: pour ralentir)10s → 15s - Nombre de flocons : Ajoutez ou supprimez des
- Couleurs des ampoules : Modifiez les classes
.rouge et .vert, etc.
Conclusion
Voilà ! En 5 minutes, vos utilisateurs auront le sourire en ouvrant leurs formulaires K2. Ce thème Noël pour formulaires K2 est simple, festif, et ne casse rien.
N’hésitez pas à adapter les couleurs à votre charte graphique ou à désactiver certains éléments (neige seule, guirlande seule…) selon vos besoins.
Joyeuses fêtes et bon dev ! 🎅🎄❄️
- Couleurs des ampoules : Modifiez les classes
