So gestalten Sie ein Akkordeon-Formular in WordPress

Suchen Sie nach einer einfachen Möglichkeit, ein Akkordeon-Formular-Design zu Ihrer WordPress-Website hinzuzufügen?

Akkordeon-Formulare bieten eine intuitive und zugängliche Möglichkeit, komplexe Daten darzustellen und gleichzeitig ein sauberes, organisiertes Erscheinungsbild zu wahren.

In diesem Artikel zeige ich Ihnen den einfachsten Weg, ein Akkordeon-Formular zu entwerfen, um die Funktionalität und Benutzererfahrung Ihrer Website zu verbessern.

Erstellen Sie jetzt Ihr WordPress-Akkordeon-Formular! :)

So gestalten Sie ein Akkordeon-Formular in WordPress

Um ein Akkordeon-Designformular in WordPress zu erstellen, können Sie sich auf die Einfachheit und Funktionalität von WPForms verlassen. Befolgen Sie die nachstehenden Schritte, um loszulegen:

1. WPForms installieren und aktivieren

Als Erstes installieren und aktivieren wir WPForms, ein fortschrittliches und benutzerfreundliches Formular-Builder-Plugin zum Erstellen aller Arten von Formularen.

Es enthält über 2.100 WordPress-Formularvorlagen und eine Menge Funktionen, um die Funktionalität Ihrer Website zu verbessern.

Um loszulegen, gehen Sie zu WPForms und registrieren Sie sich für ein Konto. Bitte beachten Sie, dass wir für dieses Tutorial eine Pro-Lizenz verwenden, aber Sie können jede beliebige Lizenzstufe verwenden.

Benötigen Sie Hilfe bei der Installation von WPForms auf Ihrer Website? Sehen Sie sich dieses Tutorial zur Installation von WordPress-Plugins an. Sobald Sie das Plugin installiert haben, vergessen Sie nicht, es zu aktivieren!

Nachdem Sie diesen Schritt abgeschlossen haben, installieren wir WPCode und fügen den Code-Snippet hinzu, der den Akkordeon-Stil vervollständigt.

2. Fügen Sie den Akkordeon-Code-Snippet hinzu

Damit die Akkordeon-Formular-Magie funktioniert, müssen wir das WPCode-Plugin installieren, das mit WPForms funktioniert. Bitte stellen Sie sicher, dass Sie beide Teile dieses Schritts abschließen: die Installation von WPCode und das Hinzufügen des Akkordeon-Code-Snippets.

Wenn Sie das WPCode-Plugin auf WordPress installieren, erhalten Sie Zugriff auf eine spezielle Code-Snippet-Bibliothek nur für WPForms-Benutzer. Vergessen Sie nicht, das Plugin nach der Installation zu aktivieren!

Nach der Installation von WPCode aus dem WordPress-Plugin-Repository kehren Sie zu WPForms zurück. Jetzt aktivieren wir ein Code-Snippet in WPForms.

Navigieren Sie in Ihrem WordPress-Dashboard zu WPForms » Tools in der linken Navigationsleiste. Wählen Sie auf dieser Seite den Tab Code Snippets.

Beachten Sie, dass die Option Code Snippets nicht angezeigt wird, wenn Sie WPCode nicht installiert haben. Scrollen Sie durch oder verwenden Sie die Suchfunktion, um das Accordion Template Helper-Snippet zu finden.

Klicken Sie auf die Schaltfläche Snippet installieren .

Nachdem Sie auf Installieren geklickt haben, öffnet sich eine Seite mit dem Code-Snippet. Das Einzige, was Sie auf dieser Seite tun müssen, ist, das Snippet zu aktivieren und auf Aktualisieren zu klicken.

Jetzt können Sie Ihr Formular erstellen!

3. Erstellen Sie ein neues WordPress-Formular

Navigieren Sie in Ihrem WordPress-Admin-Dashboard zu WPForms und klicken Sie in der Optionsliste auf Neu hinzufügen .

Geben Sie Ihrem Formular als Nächstes einen Namen. Sie können eine vorhandene Vorlage basierend auf Ihren spezifischen Anforderungen auswählen, aber für unsere Zwecke in diesem Tutorial beginnen wir mit einem leeren Formular. Dies gibt Ihnen eine bessere Vorstellung davon, wie Sie das Akkordeon-Format erstellen.

Sie werden nun zum Bildschirm Felder weitergeleitet, wo die verfügbaren Felder im linken Bereich angezeigt werden. Diejenigen, auf die Sie Zugriff haben, hängen von Ihrer Lizenzstufe ab.

Im rechten Bereich sehen Sie eine bearbeitbare Vorschau Ihres Formulars. Wenn Sie ein leeres Formular ausgewählt haben, machen Sie sich keine Sorgen, dass noch nichts da ist. Sie werden Ihre Formularelemente per Drag & Drop dorthin ziehen, und es wird nicht lange leer bleiben!

Erstellen Sie Ihr Formular mit Abschnittstrennlinien

Denken Sie beim Erstellen Ihres Formulars darüber nach, wie Sie Informationen gruppieren möchten. Das heißt, welche Informationen sollen beim Öffnen des Akkordeons im Dropdown-Menü enthalten sein?

Für jeden dieser Abschnitte müssen Sie ein Abschnittstrennlinien-Feld hinzufügen. Benennen Sie das Feld, wie auch immer dieser Informationsabschnitt heißen soll. Unser Beispiel ist ein Bewerbungsformular, daher beginnen wir oben mit Kontaktinformationen.

Sobald Sie die Abschnittstrennlinie platziert haben, können Sie alle gewünschten Formularelemente darunter nach Belieben per Drag & Drop verschieben.

Seitenumbrüche hinzufügen

Sobald alle Ihre Felder platziert sind, fügen Sie am Ende jedes Ihrer Formularabschnitte ein Seitenumbruch-Feld hinzu.

Hinweis: Wenn Sie den ersten Seitenumbruch hinzufügen, klicken Sie darauf, um die Feldoptionen zu öffnen. Auf der linken Seite sehen Sie ein Dropdown-Menü, in dem Sie Änderungen am Fortschrittsanzeiger vornehmen können. Wählen Sie Keine. Dies müssen Sie nur einmal pro Formular tun.

Wenn Sie diesen Schritt verpassen, funktioniert das Akkordeon trotzdem, aber es wird eine inaktive Fortschrittsleiste oben im Formular angezeigt, wenn es live ist. Wiederholen Sie nach dem Hinzufügen des Seitenumbruchs den Vorgang für so viele Abschnitte, wie Ihr Formular haben wird.

Wenn Sie es jetzt in der Vorschau anzeigen, sieht es aus wie ein mehrseitiges Formular und nicht wie ein Akkordeon.  Keine Sorge; wir werden gleich die magische Zutat hinzufügen: eine CSS-Klasse!

4. Fügen Sie die CSS-Klasse zu Ihrem Formular hinzu

An diesem Punkt sollten Sie Ihr gesamtes Formular erstellt haben. Jeder Abschnitt Ihres Formulars sollte mit einem Abschnittstrenner beginnen und mit einem Seitenumbruch enden. Diese Abschnitte werden zu den Dropdowns im Akkordeon.

Sie haben den Code-Snippet bereits vor dem Start des Formulars aktiviert. Es gibt nur noch eine super einfache Sache zu tun. Sie müssen die CSS-Klasse hinzufügen, die alles zusammenbringt.

Speichern Sie zuerst Ihr Formular. Während der Formular-Builder noch geöffnet ist, navigieren Sie im linken Menü zur Option Einstellungen. Es wird standardmäßig die Seite Allgemein angezeigt. Scrollen Sie ganz nach unten und klicken Sie auf Erweitert.

Geben Sie als Nächstes wpf-accordion-form in das Feld Formular-CSS-Klasse ein. Nachdem Sie diesen Code eingegeben haben, klicken Sie auf die Schaltfläche Speichern . Während wir in den Einstellungen sind, aktualisieren wir unsere Formularbenachrichtigungen und -bestätigungen.

5. Konfigurieren Sie Benachrichtigungen & Bestätigungen

Es ist entscheidend, die Nachrichten und Benachrichtigungen einzurichten, die erscheinen, nachdem ein Benutzer das Formular ausgefüllt und gesendet hat. Dies ist einfach zu tun. Navigieren Sie zur Registerkarte Einstellungen und wählen Sie Benachrichtigungen.

Administratoren erhalten automatisch Benachrichtigungen. Der Titel, der Text und die Empfängerliste der E-Mail können jedoch bei Bedarf geändert werden.

Wählen Sie als Nächstes unter der Registerkarte Einstellungen die Option Bestätigungen, um die Nachricht zu ändern, die Ihre Kunden nach dem Ausfüllen des Formulars erhalten.

Sie können auch die Einstellung Bestätigungstyp in WPForms verwenden, um eine Nachricht anzuzeigen, auf eine andere Seite zu verlinken oder den Benutzer weiterzuleiten.

Veröffentlichen Sie Ihr Akkordeon-Formular

Nachdem Sie Ihre Formularbestätigungen und -benachrichtigungen aktualisiert haben, sind Sie bereit zur Veröffentlichung! Es gibt verschiedene Möglichkeiten, ein Formular in WordPress einzubetten.

Wir werden für unser Tutorial die Einbettungsschaltfläche verwenden, aber wenn Sie einen anderen Weg ausprobieren möchten, lesen Sie unseren Beitrag über die 3 Möglichkeiten, ein Formular auf Ihrer WordPress-Website einzubetten.

Klicken Sie mit geöffnetem Formular im Formular-Builder einfach oben rechts auf die Schaltfläche Einbetten. Ein modales Fenster fragt Sie, ob Sie das Formular auf einer vorhandenen Seite einbetten oder eine neue Seite erstellen möchten.

Wenn Sie eine vorhandene Seite auswählen möchten, können Sie auswählen, welche. Wenn Sie eine neue Seite erstellen, werden Sie aufgefordert, ihr einen Namen zu geben.

Sobald Sie Ihre Wahl getroffen haben, öffnet sich Ihr Formular in WordPress als Entwurf der von Ihnen ausgewählten oder erstellten Seite. Wenn es hier immer noch wie ein mehrseitiges Formular aussieht, machen Sie sich keine Sorgen. Klicken Sie auf Vorschau der Seite, und Sie sollten Ihr Akkordeon-Formular sehen.

Jetzt sind Sie bereit, Ihre Seite zu veröffentlichen und Ihr Akkordeon-Formular in die Welt zu bringen. Nachdem Sie das Akkordeon-Formular veröffentlicht haben, müssen Sie nur noch sicherstellen, dass es wie geplant funktioniert, indem Sie das eingebettete Formular testen.

FAQs zum Erstellen eines Akkordeon-Formulars in WordPress

Das Erstellen von Akkordeon-Formularen ist ein beliebtes Thema der Benutzerfreundlichkeit bei unseren Lesern. Hier sind einige schnelle Antworten auf einige der am häufigsten gestellten Fragen:

Was ist ein Akkordeon-Formular?

Ein Akkordeon-Formular ist ein Formular mit mehreren Abschnitten, wobei jeder Abschnitt durch Klicken auf die Abschnittsüberschriften erweitert oder reduziert werden kann.

Anstatt alle Felder auf einmal anzuzeigen (was bei langen Formularen überwältigend sein kann), zeigen Akkordeon-Formulare jeweils nur einen Abschnitt an, wodurch komplexe Formulare besser zu handhaben sind.

Benutzer klicken sich im Grunde sequenziell durch Abschnitte, ähnlich wie bei Tabs oder mehrseitigen Formularen, aber alles auf einer einzigen Seite.

Wie erstelle ich ein Akkordeon-Formular in WordPress?

Installieren Sie WPForms Pro und das WPCode-Plugin. Aktivieren Sie in WPCode den Accordion Template Helper Snippet.

Erstellen Sie dann Ihr Formular in WPForms, organisieren Sie Felder in Abschnitte mit Section Divider Feldern, fügen Sie Page Break Felder nach jedem Abschnitt hinzu und fügen Sie die CSS-Klasse wpf-accordion-form in den Erweiterten Einstellungen Ihres Formulars hinzu.

Die Akkordeon-Formatierung wird automatisch auf Ihr Formular angewendet.

Was ist der Unterschied zwischen Akkordeon-Formularen und mehrseitigen Formularen?

Akkordeon-Formulare zeigen alle Abschnitte auf einer Seite mit Erweiterungs-/Reduzierungsfunktionalität an, sodass Benutzer leicht zwischen den Abschnitten wechseln und den Gesamtfortschritt auf einen Blick sehen können.

Mehrseitige Formulare zeigen jeweils einen Abschnitt auf separaten Seiten mit Vorwärts-/Rückwärtsnavigation an. Akkordeon-Formulare eignen sich besser, wenn Benutzer frühere Abschnitte referenzieren müssen, während mehrseitige Formulare die kognitive Belastung bei sehr langen Formularen reduzieren, indem sie nur relevante Felder anzeigen.

Wann sollte ich ein Akkordeon-Formulardesign verwenden?

Verwenden Sie Akkordeon-Formulare für Bewerbungen, detaillierte Registrierungen oder Umfragen mit 15+ Feldern, die in 4-7 logische Abschnitte unterteilt sind.

Sie eignen sich perfekt für Bewerbungen (Kontaktinformationen, Berufserfahrung, Referenzen), Veranstaltungsregistrierungen (Teilnehmerdetails, Essenspräferenzen, Zahlung) oder umfassende Aufnahmeformulare.

Vermeiden Sie das Akkordeon-Design für einfache Kontaktformulare mit 5 Feldern, bei denen die reduzierbaren Abschnitte unnötige Komplexität hinzufügen.

Wie füge ich meinem WordPress-Site ein Akkordeon hinzu?

Verwenden Sie für Akkordeon-Formulare speziell WPForms mit dem Akkordeon-Code-Snippet, wie in dieser Anleitung beschrieben.

Verwenden Sie für Akkordeon-Inhalte (wie FAQs) ein spezielles Akkordeon-Plugin oder das Akkordeon-Modul Ihres Page Builders. Die WPForms-Akkordeon-Methode funktioniert nur für Formulare, nicht für allgemeine Seiteninhalte.

Kann ich Akkordeon-Formulare in WPForms Lite verwenden?

Die Akkordeon-Formulartechnik funktioniert mit jeder WPForms-Lizenzstufe, einschließlich Lite, solange Sie das WPCode-Plugin installiert und den Accordion Template Helper-Snippet aktiviert haben.

WPForms Pro bietet Ihnen jedoch Zugriff auf erweiterte Funktionen wie bedingte Logik und Zahlungsintegration, die Akkordeon-Formulare erheblich verbessern.

Was sind die Best Practices für Akkordeon-Formularbeschriftungen?

Verwenden Sie klare, beschreibende Abschnittstitel, die den Benutzern genau sagen, welche Informationen dieser Abschnitt enthält. Gute Beispiele: „Ihre Kontaktinformationen“, „Berufserfahrung“, „Bildungshintergrund“.

Vermeiden Sie vage Beschriftungen wie „Abschnitt 1“ oder „Details“. Machen Sie Abschnittstitel übersichtlich, damit Benutzer den Abschnitt, den sie überprüfen oder bearbeiten müssen, schnell finden und erweitern können.

Funktionieren Akkordeon-Formulare auf Mobilgeräten?

Ja, Akkordeon-Formulare funktionieren auf Mobilgeräten und verbessern die Benutzererfahrung auf Mobilgeräten für lange Formulare.

Anstatt mehr als 30 Felder auf einem kleinen Bildschirm zu durchscrollen, sehen die Benutzer aufklappbare Abschnitte, die sie einzeln erweitern können.

Testen Sie Ihr Akkordeon-Formular jedoch immer auf tatsächlichen Mobilgeräten, um sicherzustellen, dass sich die Abschnitte reibungslos erweitern und nicht übermäßiges Scrollen innerhalb jedes Abschnitts erfordern.

Erfahren Sie als Nächstes, wie Sie eine E-Mail-Adresse für den Download von Dateien verlangen

Wäre es nicht großartig, wenn Benutzer ihre E-Mail-Adressen angeben müssten, bevor sie eine Datei von Ihrer WordPress-Website herunterladen? Erfahren Sie, wie Sie Benutzer dazu ermutigen können, ihre E-Mail-Adressen für den Download einer Datei von Ihrer WordPress-Website anzugeben.

Erstellen Sie jetzt Ihr Akkordeon-Formular! :)

Bereit, Ihr Formular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formularersteller-Plugin.  WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.

Wenn Ihnen dieser Artikel geholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials und Anleitungen.