Riassunto AI
Vuoi rendere il messaggio di conferma del tuo modulo più coinvolgente? Aggiungendo un'animazione di coriandoli, puoi creare un'esperienza emozionante e memorabile quando gli utenti inviano correttamente il tuo modulo.
Questa guida ti mostrerà come implementare animazioni di coriandoli e fuochi d'artificio nei tuoi messaggi di conferma.
Configurazione del tuo modulo
Innanzitutto, 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 <canvas id="animateCanvas" />.
Aggiungere 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; /* ensure canvas is above other content */
pointer-events: none; /* allow clicks to pass through the canvas */
}
Aggiunta dell'Animazione di 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.
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)
- LENGTH: Quantità totale di pezzi di coriandolo
Alternativa: Animazione Fuochi d'Artificio
Per un effetto fuochi d'artificio invece di coriandoli, sostituisci il codice dei coriandoli con il codice dell'animazione dei fuochi d'artificio (vedi il codice completo nella documentazione sopra). Il processo di configurazione rimane lo stesso.
E questo è tutto ciò che ti serve! Ora hai aggiunto con successo un'animazione di coriandoli al tuo messaggio di conferma. Vuoi aggiungere un po' di neve invece? Dai un'occhiata al nostro tutorial su Come Aggiungere un'Animazione di Neve che Cade al Tuo Messaggio di Conferma.