Come creare un modulo a scorrimento animato

Introduzione

Vuoi creare un modulo a scorrimento animato? È molto semplice e facile da fare usando solo un po' di CSS. In questo tutorial ti guideremo esattamente su come farlo usando il Modello di modulo di acquisizione clienti per la preparazione delle tasse.

Creazione del modulo

Per prima cosa, inizieremo creando un nuovo modulo basato sul modello di modulo Modello di modulo di acquisizione clienti per la preparazione delle tasse. Per fare ciò, dalla tua bacheca di WordPress, vai su WPForms » Modelli di modulo e nel campo Cerca modelli inserisci tax e il modello verrà visualizzato. Passando il mouse su questo modello, fai clic su Crea modulo.

Questo modello è già impostato con la logica condizionale per mostrare e nascondere sezioni del modulo quando viene fatto clic su ciascuna delle sezioni principali Casella di controllo. È a queste che applicheremo l'animazione, in modo che la transizione sia più fluida quando viene attivata la logica condizionale.

Aggiunta del CSS

Ora è il momento di aggiungere un po' di CSS che applicherà una transizione. Se hai bisogno di aiuto su come e dove aggiungere CSS personalizzato, dai un'occhiata a questo tutorial.

#wpforms-form-3342 .wpforms-conditional-show {
  display: block;
  animation: fade-in 1s;
}

#wpforms-form-3342 .wpforms-conditional-hide {
  display: block;
  animation: fade-out 1s;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

Nel CSS, stiamo prendendo di mira l'ID del modulo 3342. Dovrai aggiornare questo ID per corrispondere al tuo ID modulo. Se hai bisogno di aiuto per trovare il tuo ID modulo, consulta questa utile guida.

E questo è tutto! Ora hai creato un modulo a scorrimento animato utilizzando il Modello di modulo di acquisizione clienti per la preparazione delle tasse. Vuoi anche aggiungere un'animazione a coriandoli quando il modulo viene inviato? Dai un'occhiata al nostro tutorial su Come aggiungere animazione a coriandoli al messaggio di conferma.