Animiertes Toggle-Formular erstellen

Einleitung

Möchten Sie ein animiertes Toggle-Formular erstellen? Dies ist sehr einfach und unkompliziert mit ein wenig CSS zu machen. In diesem Tutorial führen wir Sie genau durch, wie Sie dies mit der Vorlage für das Aufnahmeformular für Steuerzahler tun können.

Erstellung des Formulars

Zuerst erstellen wir ein neues Formular, das auf der Vorlage Vorlage für das Aufnahmeformular für Steuerzahler basiert. Um dies zu erreichen, navigieren Sie in Ihrem WordPress-Admin zu WPForms » Formularvorlagen und geben Sie im Feld Vorlagen suchen Steuer ein, und die Vorlage wird angezeigt. Wenn Sie mit der Maus über diese Vorlage fahren, klicken Sie auf Formular erstellen.

Diese Vorlage ist bereits mit bedingter Logik eingerichtet, um Abschnitte des Formulars ein- und auszublenden, wenn auf jeden der Hauptabschnitte Kontrollkästchen geklickt wird. Auf diese werden wir Animationen anwenden, um einen sanfteren Übergang zu erzielen, wenn die bedingte Logik ausgelöst wird.

Hinzufügen des CSS

Jetzt ist es an der Zeit, etwas CSS hinzuzufügen, das einen Übergang anwendet. Wenn Sie Hilfe benötigen, wie und wo Sie benutzerdefiniertes CSS hinzufügen können, lesen Sie bitte dieses 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;
  }
}

Im CSS zielen wir auf die Formular-ID 3342 ab. Sie müssen diese ID aktualisieren, um Ihre eigene Formular-ID anzugeben. Wenn Sie Hilfe beim Finden Ihrer Formular-ID benötigen, lesen Sie bitte diese hilfreiche Anleitung.

Und das ist alles! Sie haben jetzt ein animiertes Toggle-Formular mit der Vorlage für das Aufnahmeformular für Steuerzahler erstellt. Möchten Sie auch eine Konfetti-Animation hinzufügen, wenn das Formular gesendet wird? Sehen Sie sich unser Tutorial an So fügen Sie dem Bestätigungsnachricht eine Konfetti-Animation hinzu.