Como Criar um Formulário com Toggle Animado

Introdução

Gostaria de criar um formulário de alternância animado? Isso é 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 de Impostos.

Criando o 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 de Impostos. Para conseguir isso, no seu painel do 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 essas seções que vamos aplicar animação para uma transição mais suave quando a lógica condicional for acionada.

Adicionando o CSS

Agora é hora de adicionar algum CSS que aplicará uma transição. Se precisar de ajuda sobre como e onde adicionar CSS personalizado, por favor, confira 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 segmentando o ID do formulário 3342. Você precisará atualizar este ID para corresponder ao seu próprio ID de formulário. Se precisar de ajuda para encontrar seu ID de formulário, por favor, revise este guia útil.

E é isso! Você criou um formulário de alternância animado usando o Modelo de Formulário de Admissão de Cliente para Preparação de Impostos. Você também gostaria de adicionar uma animação de confete quando o formulário for enviado? Dê uma olhada em nosso tutorial sobre Como Adicionar Animação de Confete à Mensagem de Confirmação.