Wie man ein animiertes Toggle-Formular erstellt

Einführung

Möchten Sie ein animiertes Umschaltformular erstellen? Das ist sehr einfach und mit ein wenig CSS leicht zu bewerkstelligen. In diesem Tutorial werden wir Ihnen genau zeigen, wie Sie dies mit der Vorlage für das Formular zur Aufnahme von Kunden in der Steuererklärung erreichen.

Erstellen des Formulars

Zunächst erstellen wir ein neues Formular auf der Grundlage der Formularvorlage Tax Preparation Client Intake Form Template. Navigieren Sie dazu in Ihrer WordPress-Verwaltung zu WPForms " Form Templates und geben Sie in das Feld Search Templates den Begriff tax ein, um die Vorlage anzuzeigen. Wenn Sie den Mauszeiger über diese Vorlage bewegen, klicken Sie auf Formular erstellen.

Diese Vorlage ist bereits mit bedingter Logik eingerichtet, um Abschnitte des Formulars ein- und auszublenden, wenn einer der wichtigsten Checkbox-Abschnitte angeklickt wird. Diese sind, was wir gehen, um Animation zu gelten, so dass es einen reibungsloseren Übergang, wenn die bedingte Logik ausgelöst wird.

Hinzufügen des CSS

Jetzt ist es an der Zeit, ein CSS hinzuzufügen, das einen Übergang anlegt. Wenn Sie Hilfe benötigen, wie und wo Sie benutzerdefinierte CSS hinzufügen können, sehen Sie sich bitte dieses Tutorial an.

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

Im CSS zielen wir auf die Formular-ID 3342 ab. Sie müssen diese ID aktualisieren, damit sie mit Ihrer eigenen Formular-ID übereinstimmt. Wenn Sie Hilfe bei der Suche nach Ihrer Formular-ID benötigen, lesen Sie bitte diesen hilfreichen Leitfaden.

Und das war's! Sie haben jetzt ein animiertes Formular mit der Vorlage für das Formular zur Aufnahme von Steuerberatern erstellt. Möchten Sie auch eine Konfetti-Animation hinzufügen, wenn das Formular abgeschickt wird? Werfen Sie einen Blick auf unsere Anleitung zum Hinzufügen einer Konfetti-Animation zur Bestätigungsnachricht.