Wie man ein Akkordeon-Formular in WordPress gestaltet

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

Akkordeonformulare bieten eine intuitive und zugängliche Möglichkeit, komplexe Daten zu präsentieren und gleichzeitig ein sauberes, organisiertes Aussehen zu bewahren.

Erstellen Sie jetzt Ihr WordPress-Akkordeonformular

In diesem Artikel zeigen wir Ihnen, wie Sie am einfachsten ein Akkordeon-Formular gestalten können, um die Funktionalität Ihrer Website und die Benutzerfreundlichkeit zu verbessern.

Wie man ein Akkordeon-Formular in WordPress gestaltet

Um ein Formular im Akkordeon-Design in WordPress zu erstellen, können Sie sich auf die Einfachheit und Funktionalität von WPForms verlassen. Folgen Sie den folgenden Schritten, um loszulegen:

1. Installieren und Aktivieren von WPForms

Das erste, was wir tun werden, ist zu installieren und zu aktivieren WPForms.

WPForms ist ein fortschrittliches und benutzerfreundliches Formularerstellungs-Plugin für alle Arten von Formularen. Es kommt mit mehr als 2.000 WordPress-Formularvorlagen und einer Vielzahl von Funktionen, um die Funktionalität Ihrer Website zu verbessern.

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

Brauchen Sie Hilfe bei der Installation von WPForms auf Ihrer Website? Sehen Sie sich diese Anleitung zur Installation von WordPress-Plugins an.

Wenn Sie das Plugin installiert haben, vergessen Sie nicht, es zu aktivieren!

Sobald Sie mit diesem Schritt fertig sind, installieren wir WPCode und fügen das Codeschnipsel hinzu, das den Akkordeonstil zusammensetzt.

2. Installieren Sie WPCode und fügen Sie das Akkordeon-Code-Snippet hinzu

Damit die Magie des Akkordeonformulars funktioniert, müssen wir das WPCode-Plugin installieren, das mit WPForms zusammenarbeitet. Bitte stellen Sie sicher, dass Sie beide Teile dieses Schrittes ausführen: die Installation von WPCode und das Hinzufügen des Akkordeon-Codefragments.

Wenn Sie das WPCode-Plugin auf WordPress installieren, erhalten Sie Zugang zu einer speziellen Code-Snippet-Bibliothek nur für WPForms-Benutzer. Vergessen Sie nicht, das Plugin zu aktivieren, nachdem Sie es installiert haben!

Nachdem Sie WPCode aus dem WordPress-Plugin-Repository installiert haben, 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 die Registerkarte für Code Snippets.

Beachten Sie, dass Sie die Option Code Snippets nicht sehen, wenn Sie WPCode nicht installiert haben.

Blättern Sie durch oder verwenden Sie die Suchfunktion, um das Snippet"Accordion Template Helper" zu finden.

Klicken Sie auf die Schaltfläche Snippet installieren .

Nachdem Sie auf "Installieren" geklickt haben, wird eine Seite mit dem Code-Snippet geöffnet. 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. Ein neues Formular erstellen

Navigieren Sie in Ihrem WordPress-Admin-Dashboard zu WPForms und klicken Sie in der Liste der Optionen auf Add New .

Als nächstes geben Sie Ihrem Formular einen Namen. Sie können eine bestehende Vorlage auswählen, die Ihren spezifischen Anforderungen entspricht, aber für die Zwecke dieses Tutorials werden wir mit einem leeren Formular beginnen. So erhalten Sie eine bessere Vorstellung davon, wie Sie das Akkordeonformat erstellen können.

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

Auf der rechten Seite sehen Sie eine bearbeitbare Vorschau Ihres Formulars. Wenn Sie ein leeres Formular ausgewählt haben, brauchen Sie sich keine Sorgen zu machen, dass es am Anfang nichts gibt. Ziehen Sie Ihre Formularelemente dorthin, und es wird nicht lange leer bleiben!

Erstellen Sie Ihr Formular mit Abschnittsteilern

Wenn Sie mit der Erstellung Ihres Formulars beginnen, sollten Sie sich überlegen, wie Sie die Informationen zusammenfassen wollen. Das heißt, welche Informationen sollen in das Dropdown-Menü aufgenommen werden, wenn das Formular-Akkordeon geöffnet wird?

Für jeden dieser Abschnitte müssen Sie ein Feld zur Abschnittsaufteilung hinzufügen. Benennen Sie das Feld so, wie Sie diesen Informationsabschnitt nennen möchten.

In unserem Beispiel handelt es sich um ein Bewerbungsformular, daher beginnen wir mit den Kontaktinformationen am Anfang.

Sobald Sie die Abschnittsunterteilung platziert haben, können Sie alle gewünschten Formularelemente per Drag & Drop in beliebiger Weise darunter platzieren.

Seitenumbrüche hinzufügen

Wenn alle Felder vorhanden sind, fügen Sie am Ende jedes Formularabschnitts ein Feld für den Seitenumbruch 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 an der Fortschrittsanzeige vornehmen können. Wählen Sie Keine. Sie müssen dies nur einmal pro Formular tun.

Wenn Sie diesen Schritt auslassen, funktioniert das Akkordeon trotzdem, aber es wird ein inaktiver Fortschrittsbalken am oberen Rand des Formulars angezeigt, wenn es live ist.

Nachdem Sie den Seitenumbruch hinzugefügt haben, wiederholen Sie den Vorgang für so viele Abschnitte, wie Ihr Formular haben soll.

Wenn Sie sich jetzt eine Vorschau ansehen, wird es wie ein mehrseitiges Formular aussehen und nicht wie ein Akkordeon. Keine Sorge, wir fügen gleich die magische Zutat hinzu: eine CSS-Klasse!

4. Hinzufügen der CSS-Klasse

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

Sie haben das 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 das Ganze zusammenführt.

Speichern Sie zunächst Ihr Formular. Wenn der Formularersteller noch geöffnet ist, navigieren Sie im linken Menü zur Option Einstellungen. Es wird die Seite Allgemein angezeigt. Scrollen Sie ganz nach unten und klicken Sie auf Erweitert.

Als nächstes geben Sie ein wpf-accordion-form in das Feld Formular-CSS-Klasse ein.

Nachdem Sie den Code eingegeben haben, klicken Sie auf die Schaltfläche Speichern . Wenn wir schon bei den Einstellungen sind, sollten wir auch unsere Formularbenachrichtigungen und Bestätigungen aktualisieren.

5. Benachrichtigungen und Bestätigungen konfigurieren

Es ist wichtig, die Nachrichten und Benachrichtigungen einzurichten, die erscheinen, nachdem ein Benutzer das Formular ausgefüllt und abgeschickt hat.

Dies ist einfach zu bewerkstelligen. Navigieren Sie zur Registerkarte " Einstellungen" und wählen Sie " Benachrichtigungen".

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

Wählen Sie anschließend auf 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 Bestätigungsart-Einstellung in WPForms verwenden, um eine Nachricht anzuzeigen, einen Link zu einer anderen Seite zu erstellen oder den Benutzer umzuleiten.

Veröffentlichen Sie Ihr Akkordeonformular

Nachdem Sie Ihre Formularbestätigungen und -benachrichtigungen aktualisiert haben, können Sie sie veröffentlichen!

Es gibt verschiedene Möglichkeiten, ein Formular in WordPress einzubetten. Für unser Tutorial werden wir die Schaltfläche "Einbetten" verwenden. Wenn Sie jedoch eine andere Möglichkeit ausprobieren möchten, lesen Sie unseren Beitrag über die 3 Möglichkeiten zum Einbetten eines Formulars in Ihre WordPress-Website.

Wenn Ihr Formular im Form Builder geöffnet ist, klicken Sie einfach auf die Schaltfläche Einbetten oben rechts.

In einem modalen Fenster werden Sie gefragt, ob Sie das Formular in eine bestehende Seite einbetten oder eine neue Seite erstellen möchten.

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

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

Jetzt können Sie Ihre Seite veröffentlichen und Ihr Akkordeonformular in die Welt hinaus tragen.

Nachdem Sie das Akkordeonformular veröffentlicht haben, müssen Sie nur noch sicherstellen, dass es wie geplant funktioniert, indem Sie das eingebettete Formular testen.

Herzlichen Glückwunsch zur Fertigstellung Ihres Akkordeonformulars!

FAQs zum Akkordeonformular

Die Erstellung von Akkordeonformularen ist ein beliebtes Thema bei unseren Lesern. Hier finden Sie einige kurze Antworten auf die am häufigsten gestellten Fragen:

Was sind die Vor- und Nachteile von Akkordeonformularen gegenüber mehrseitigen Formularen?

Ein Akkordeon-Formular ermöglicht es Ihnen, mehr Inhalt auf kleinem Raum unterzubringen, kann aber überwältigend sein, wenn es nicht gut gestaltet ist.

Was sind die besten Praktiken für Akkordeonformular-Etiketten?

Verwenden Sie knappe und klare Beschriftungen. Verwenden Sie Überschriften und verzichten Sie auf Bezeichnungen wie "Abschnitt 1".

Wie gestaltet man Akkordeonformulare für Desktop und Mobile?

Um Akkordeon-Formulare zu entwerfen, die reaktionsfähig sind und sowohl auf dem Desktop als auch auf dem Handy reibungslos funktionieren, sollten Sie sich bei WPForms anmelden!

Erfahren Sie als Nächstes, wie Sie eine E-Mail-Adresse für Dateidownloads benötigen

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

Erstellen Sie jetzt Ihr WordPress-Akkordeonformular

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

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