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 le faire en utilisant le modèle de formulaire d'accueil pour les clients des services de préparation des impôts.

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, à partir de votre administration WordPress, naviguez vers WPForms " Form Templates et dans le champ Search Templates, entrez tax et le modèle s'affichera. Lorsque vous survolez ce modèle, cliquez sur Créer un formulaire.

Ce modèle est déjà configuré avec une logique conditionnelle qui permet d'afficher et de masquer des sections du formulaire lorsque l'on clique sur chacune des cases à cocher principales. C'est à ces sections que nous allons appliquer l'animation afin d'obtenir une transition plus douce lorsque la logique conditionnelle est déclenchée.

Ajouter le CSS

Il est maintenant temps d'ajouter du CSS qui appliquera une transition. Si vous avez besoin d'aide pour savoir 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 de formulaire 3342. Vous devrez mettre à jour cet identifiant pour qu'il corresponde à votre propre identifiant de formulaire. Si vous avez besoin d'aide pour trouver l'identifiant de votre formulaire, veuillez consulter ce guide utile.

Et voilà ! Vous avez maintenant créé un formulaire à bascule animé à l'aide du modèle de formulaire de prise en charge des clients des services de préparation de déclarations de revenus. Aimeriez-vous ajouter une animation de confettis lorsque le formulaire est soumis ? Jetez un coup d'œil à notre tutoriel sur la façon d'ajouter une animation de confettis au message de confirmation.