Como Criar um Formulário de Alternância Animado

Introdução

Gostaria de criar um formulário de alternância animado? É muito simples e fácil de fazer usando apenas um pouco de CSS. Neste tutorial, vamos guiá-lo exatamente sobre como fazer isso usando o Modelo de Formulário de Admissão de Cliente para Preparação Fiscal.

Criação do formulário

Primeiro, vamos começar criando um novo formulário com base no modelo de formulário Modelo de Formulário de Admissão de Cliente para Preparação Fiscal. Para conseguir isso, a partir do seu painel WordPress, navegue até WPForms » Modelos de Formulário e no campo Pesquisar Modelos digite tax e o modelo será exibido. Ao passar o mouse sobre este modelo, clique em Criar Formulário.

Este modelo já está configurado com lógica condicional para mostrar e ocultar seções do formulário quando cada uma das seções principais de Caixa de Seleção é clicada. É a estas que vamos aplicar animação para que a transição seja mais suave quando a lógica condicional for acionada.

Adicionar o CSS

Agora é hora de adicionar algum CSS que aplicará uma transição. Se precisar de ajuda sobre como e onde adicionar CSS personalizado, consulte este 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;
  }
}

No CSS, estamos a direcionar o ID do formulário 3342. Precisará de atualizar este ID para corresponder ao seu próprio ID de formulário. Se precisar de ajuda para encontrar o seu ID de formulário, reveja este guia útil.

E é isso! Criou agora um formulário de alternância animado usando o Modelo de Formulário de Admissão de Cliente para Preparação Fiscal. Gostaria também de adicionar alguma animação de confetes quando o formulário for enviado? Dê uma olhada no nosso tutorial sobre Como Adicionar Animação de Confetes à Mensagem de Confirmação.