Comment créer un formulaire à bascule animé

Introduction

Souhaitez-vous créer un formulaire à bascule animé ? C'est très simple et facile à faire en utilisant juste un peu de CSS. Dans ce tutoriel, nous allons vous expliquer exactement comment faire cela en utilisant le modèle de formulaire de prise en charge des clients pour la préparation des impôts Tax Preparation Client Intake Form Template.

Création du formulaire

Tout d'abord, nous allons commencer par créer un nouveau formulaire basé sur le modèle de formulaire Tax Preparation Client Intake Form Template. Pour ce faire, depuis votre administration WordPress, accédez à WPForms » Modèles de formulaires et dans le champ Rechercher des modèles, entrez tax et le modèle s'affichera. Lorsque vous passez la souris sur ce modèle, cliquez sur Créer un formulaire.

Ce modèle est déjà configuré avec une logique conditionnelle pour afficher et masquer des sections du formulaire lorsque chacune des sections principales de cases à cocher est cliquée. C'est à cela que nous allons appliquer une animation pour une transition plus fluide lorsque la logique conditionnelle est déclenchée.

Ajout du CSS

Il est maintenant temps d'ajouter du CSS qui appliquera une transition. Si vous avez besoin d'aide sur comment et où ajouter du CSS personnalisé, veuillez consulter ce tutoriel.

#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;
  }
}

Dans le CSS, nous ciblons l'ID du formulaire 3342. Vous devrez mettre à jour cet ID pour qu'il corresponde à votre propre ID de formulaire. Si vous avez besoin d'aide pour trouver votre ID de formulaire, veuillez consulter ce guide utile.

Et voilà ! Vous avez maintenant créé un formulaire à bascule animé en utilisant le modèle de formulaire de prise en charge des clients pour la préparation des impôts Tax Preparation Client Intake Form Template. Souhaitez-vous également ajouter une animation de confettis lorsque le formulaire est soumis ? Jetez un œil à notre tutoriel sur Comment ajouter une animation de confettis au message de confirmation.