So erstellen Sie WordPress-Formulare mit Dropdown-Feldern (einfache Methode)

Besucher beginnen mit dem Ausfüllen Ihres Kontaktformulars und brechen es dann plötzlich auf halbem Weg ab. Es ist eine der frustrierendsten Erfahrungen für jeden Website-Besitzer, besonders wenn Sie wissen, dass diese Leads Ihr Geschäft verändern könnten.

Die Wahrheit ist, dass lange Formulare Benutzer einschüchtern und unnötige Reibung in Ihrem Konversionsprozess verursachen.

Nach Jahren der Unterstützung von WordPress-Website-Besitzern bei der Optimierung ihrer Formulare haben wir festgestellt, dass die Verwendung von Dropdown-Feldern Ihre Formularabschlussraten verbessern kann.

Außerdem sparen diese einfachen Elemente nicht nur wertvollen Bildschirmplatz, sondern leiten die Benutzer auch dazu an, genau die Informationen anzugeben, die Sie über sie wissen müssen.

In diesem Tutorial zeigen wir Ihnen den einfachsten Weg, WordPress-Formulare mit Dropdown-Feldern zu erstellen, die Besucher tatsächlich ausfüllen möchten.

Was sind Dropdown-Felder und warum sollten Sie sie verwenden?

Ein Dropdown-Feld ermöglicht es Benutzern, eine Option aus einer vordefinierten Liste verschiedener Varianten auszuwählen. Benutzer können einfach auf das Feld klicken, um alle Dropdown-Auswahlen anzuzeigen.

Als Website-Besitzer können Sie Dropdown-Felder verwenden, um Webformulare zu erstellen, wie z. B. Kontaktformulare, Anmeldeformulare für Veranstaltungen, E-Mail-Newsletter-Anmeldungen oder Produktbestellformulare.

Dropdown-Felder können die Effektivität Ihres Formulars verbessern. Hier sind einige Vorteile:

• Konsistenz. Die vordefinierte Liste von Optionen sorgt für konsistente gesammelte Daten und verhindert ungültige Eingaben. Dies macht die Datenanalyse genauer.
• Dynamische Felder. Dropdown-Felder erleichtern das Festlegen von bedingter Logik. Die festgelegte Liste von Optionen ermöglicht es Ihnen, zusätzliche Felder basierend auf der Benutzerauswahl ohne unnötige Hürden anzuzeigen.
• Reduzierte Formularlänge. Die Kombination mehrerer Optionen in einem kompakten Dropdown-Menü lässt Ihr Formular weniger einschüchternd wirken. Dies kann zu einer besseren Benutzererfahrung führen.

Das gesagt, schauen wir uns an, wie man Formulare mit Dropdown-Feldern in WordPress erstellt. Hier ist eine kurze Übersicht über die Schritte, die wir in diesem Tutorial behandeln werden:

• Schritt 1: Installieren des besten Kontaktformular-Plugins
• Schritt 2: Erstellen eines neuen Formulars mit WPForms
• Schritt 3: Hinzufügen des Dropdown-Feldes zu Ihrem Formular
• Schritt 4: Dropdowns mit Optionen und bedingter Logik konfigurieren
• Schritt 5: Personalisieren Ihrer Formularbenachrichtigungen und -bestätigungen
• Schritt 6: Einbetten Ihres Formulars in WordPress
• Schritt 7: Veröffentlichen des neuen Formulars auf Ihrer WordPress-Website
• Bonus-Tipp: Kreative Möglichkeiten zur Verwendung von Dropdown-Feldern
• FAQs: Dropdown-Felder in WordPress-Formularen verwenden
• Zusätzliche Ressourcen: Meistern Sie Ihre WordPress-Formulare

Lass uns anfangen!

Schritt 1: Installieren Sie das beste Kontaktformular Plugin

WPForms ist das beste Kontaktformular-Plugin für WordPress. Es verfügt über KI-Tools und mehr als 2.000 Vorlagen, mit denen Sie Formulare mit nur wenigen Klicks erstellen können.

Bei WPBeginner verwenden wir WPForms, um unsere Kontaktformulare, jährlichen Benutzerumfragen und Migrationsanfragen zu erstellen, und wir könnten nicht zufriedener sein!

Erfahren Sie mehr über alle Funktionen in unserem vollständigen WPForms-Testbericht.

Lassen Sie uns also das WPForms Plugin installieren und aktivieren. Sie können von Ihrem WordPress-Dashboard aus zu Plugins » Neues Plugin hinzufügen navigieren.

Auf dem nächsten Bildschirm können Sie die Suchschaltfläche verwenden, um das WPForms-Plugin zu finden. Sobald es gefunden wurde, können Sie auf „Plugin installieren“ und dann auf „Aktivieren“ klicken.

Detaillierte Anweisungen finden Sie in unserem Leitfaden zur Installation eines WordPress-Plugins.

Schritt 2: Erstellen eines neuen Formulars mit WPForms

Nach der Aktivierung sollten Sie in Ihrem WordPress-Adminbereich ein WPForms-Menü wie dieses sehen:

Jetzt können Sie auf die WPForms-Builder-Oberfläche zugreifen und Formulare mit Dropdown-Feldern erstellen.

Um mit der Erstellung eines neuen Formulars zu beginnen, gehen Sie zu WPForms » Neu hinzufügen.

Jetzt sehen Sie das „Einrichtungs“-Panel im WPForms-Formular-Builder. In diesem Panel müssen Sie als Erstes Ihrem Formular einen Namen geben.

Sie können zum Beispiel 'Einfaches Kontaktformular' oder einfach 'Kontaktformular' in das Feld 'Benennen Sie Ihr Formular' eingeben.

Sobald das erledigt ist, ist es an der Zeit zu wählen, wie Sie Ihr WordPress-Formular erstellen möchten.

Mit WPForms können Sie von Grund auf neu erstellen, eine vorgefertigte Vorlage auswählen oder den KI-gestützten Formularersteller verwenden.

Wenn Sie den KI-Formularersteller verwenden möchten, müssen Sie lediglich eine einfache Eingabeaufforderung eingeben. Die KI generiert dann das Formular in wenigen Sekunden für Sie.

Für diese Anleitung verwenden wir jedoch das „Einfache Kontaktformular“.

Um eine Formularvorlage zu verwenden, müssen Sie nur mit der Maus über die gewünschte Vorlage fahren und auf 'Vorlage verwenden' klicken.

Schritt-für-Schritt-Anleitungen finden Sie in unserem detaillierten Leitfaden zur Erstellung eines Kontaktformulars in WordPress.

Schritt 3: Hinzufügen des Dropdown-Feldes zu Ihrem Formular

Nach Abschluss des Einrichtungsvorgangs werden Sie zum Formular-Builder weitergeleitet, wo sich links eine Liste von Feldern und rechts eine Live-Vorschau befindet.

Nun möchten wir unserem Kontaktformular ein Dropdown-Feld hinzufügen.

Ziehen Sie einfach 'Dropdown' und legen Sie es auf der rechten Seite des Formulars ab.

Rechts neben dem Panel sehen Sie ein Dropdown-Feld in Ihrem Kontaktformular. Sie können mit der Maus über das Feld fahren, um auf seine Einstellungen zuzugreifen, darunter:

• Eine Schaltfläche zum Kopieren
• Eine Löschschaltfläche
• Eine Anweisung „Zum Bearbeiten klicken“
• Eine Anweisung 'Ziehen zum Neuordnen'

Mit der Drag-and-Drop-Funktion verschieben wir das Dropdown-Feld über „Kommentar oder Nachricht“.

Indem Sie das Absatzfeld „Kommentar oder Nachricht“ direkt vor der Schaltfläche „Senden“ platzieren, bieten Sie einen besseren Ablauf für den Abschluss des Formulars. Es macht auch Ihr Dropdown-Feld sichtbarer, damit Benutzer es nicht übersehen.

Schritt 4: Dropdowns mit Optionen und bedingter Logik konfigurieren

In diesem Schritt legen Sie die Bezeichnung, die Optionen und die Beschreibung Ihres Dropdown-Feldes fest. Ihre Optionsliste sollte mit Ihrem Formular-Typ übereinstimmen. Da wir ein Kontaktformular erstellen, bieten wir eine Newsletter-Anmeldeoption an.

Klicken Sie auf Ihr Dropdown-Feld und gehen Sie dann zu 'Feldoptionen'.

Füllen Sie auf der Registerkarte „Allgemein“ die erforderlichen Details aus:

• Beschriftung. Bei Dropdown-Feldern sind Beschriftungen normalerweise Fragen. Wir verwenden als Beispiel: 'Möchten Sie unseren Newsletter abonnieren?'
• Auswahlen. Fügen wir 'Ja, bitte.' und 'Nein, danke.' hinzu.
• Beschreibung. Sie können in diesem Feld 'Sie können sich jederzeit abmelden.' belassen.
• Erforderlich. Schalten Sie diese Option um, um Besucher zu zwingen, dieses Feld auszufüllen.

Als Nächstes richten wir die bedingte Logik ein.

Bedingte Logik bedeutet, Entscheidungen mit 'Wenn' und 'Dann'-Anweisungen zu treffen. Wenn sie in Formularen verwendet wird, entscheidet sie, was als Nächstes geschieht, basierend auf der Antwort, die ein Benutzer gibt.

Die Einrichtung von bedingter Logik erleichtert das Ausfüllen von Formularen. Indem nur relevante Optionen basierend auf früheren Auswahlen angezeigt werden, überfordert Ihr Formular die Benutzer nicht mit unnötigen Entscheidungen.

In diesem Beispiel möchten wir ein zusätzliches Feld anzeigen, wenn Benutzer die Option 'Ja, bitte' wählen. Wir werden den Abonnenten erlauben zu wählen, wie oft sie Werbe-E-Mails erhalten möchten.

Zuvor müssen Sie ein neues Feld vorbereiten. Gehen Sie zurück zum Tab 'Felder hinzufügen' und klicken Sie auf 'Dropdown' oder einen anderen Feldtyp. Vervollständigen Sie dann die Details des neuen Feldes.

Hier ist ein Beispiel:

Jetzt, da das neue Feld bereit ist, klicken Sie darauf und navigieren Sie zur Registerkarte „Smart Logic“.

Von hier aus können Sie bedingte Logik aktivieren, indem Sie die Option „Bedingte Logik aktivieren“ umschalten.

Nach der Aktivierung können Sie bedingte Logik für Ihr neues Feld konfigurieren.

Beginnen Sie mit der Auswahl, ob das neue Feld 'Anzeigen' oder 'Ausblenden' werden soll. Wählen Sie dann ein vorhandenes Feld und eine Benutzereingabe aus.

Hier ist unsere Konfiguration als Referenz: 'Zeigen' Sie dieses Feld an, wenn 'Möchten Sie unseren Newsletter abonnieren' 'Ja, bitte' ist.

Schritt 5: Personalisieren Ihrer Formularbenachrichtigungen und -bestätigungen

Es ist Zeit, Ihr neues Formular zu personalisieren.

Sie können damit beginnen, jedes Mal E-Mail-Benachrichtigungen einzurichten, wenn ein neuer Benutzer ein Formular übermittelt. Gehen Sie zu Einstellungen » Benachrichtigungen und aktivieren Sie die Option „Benachrichtigungen aktivieren“.

Gehen Sie dann die Standardbenachrichtigungsdetails Ihres Formulars unter dem Schalter durch.

Einige Einträge im Feld „Standardbenachrichtigung“ enthalten ein „Smart Tag“. Dieses Tag geht davon aus, wohin Formularübermittlungsbenachrichtigungen gesendet werden sollen, unter anderem. Sie können die Einstellungen jedoch an Ihre Bedürfnisse anpassen.

Zum Beispiel hat das Feld „An E-Mail-Adresse senden“ den „Smart Tag“ {admin_email}. Standardmäßig ist dies die Administrator-E-Mail Ihrer WordPress-Website. Jede Benachrichtigung über das Absenden des Formulars geht also an den Posteingang der Administrator-E-Mail.

Sie können weitere Empfänger hinzufügen, z. B. Ihren E-Mail-Marketing-Spezialisten. Trennen Sie einfach jede E-Mail mit einem Komma.

Wenn Sie erfahren möchten, wie Sie Ihre Formular-E-Mails an mehrere Personen oder verschiedene Abteilungen senden, lesen Sie unseren Leitfaden zum Erstellen eines Kontaktformulars mit mehreren Empfängern.

Als Nächstes lautet der Standardtext für Ihre 'Betreffzeile der E-Mail' 'Neue Eingabe: Ihr Formularname'. Sie können die Betreffzeile jedoch nach Belieben ändern, solange sie leicht zu identifizieren ist.

Benutzer, die ein Formular übermitteln, sollten eine Benachrichtigung per E-Mail erhalten. Das Feld „Absendername“ informiert die Benutzer darüber, wer die Benachrichtigungs-E-Mail sendet.

Das nächste Feld ist 'Von E-Mail', und der 'Smart Tag' für dieses Feld ist {admin_email}.

Mit dieser Standardeinstellung erhalten Benutzer Benachrichtigungs-E-Mails von der Admin-E-Mail Ihrer Website.

Der hervorgehobene Teil informiert Sie darüber, dass die E-Mail-Adresse Ihres Website-Administrators auf einer anderen Domain liegt, z. B. @gmail.com. Dies kann zu Zustellungsproblemen führen, z. B. dass E-Mails im 'Spam'-Ordner landen.

Sie können unseren Leitfaden zum Einrichten von WP Mail SMTP lesen, um sicherzustellen, dass Ihre E-Mails im Posteingang der Leser landen.

Für jede gesendete Benachrichtigungs-E-Mail hat der Empfänger auch die Möglichkeit, darauf zu antworten.

Im Feld 'Antworten an' können Sie festlegen, an welche E-Mail-Adresse Benutzerantworten gesendet werden. Der 'Smart Tag' dieses Feldes ist {field_id= "1"}. Das bedeutet, dass die Antworten der Benutzer an dieselbe E-Mail-Adresse gesendet werden wie die im Feld 'Von E-Mail'.

Schließlich hat das Feld „E-Mail-Nachricht“ den „Smart Tag“ {all_fields}. Ihre E-Mail-Nachricht enthält also Ihre Formularfelder zusammen mit den Antworten des Benutzers.

Sobald Sie Ihre Benachrichtigungen angepasst haben, navigieren Sie zu „Bestätigungen“. In diesem Abschnitt legen Sie fest, wie Sie eine Bestätigung nach dem Absenden des Formulars anzeigen möchten.

Zuerst können Sie 'Nachrichten', 'Seite anzeigen' oder 'Zur URL gehen (Weiterleitung)' als Bestätigungstyp wählen.

Wenn Sie „Nachricht“ als Bestätigungstyp wählen, wird eine Bestätigungsnachricht angezeigt, die die Benutzer darüber informiert, dass ihre Formularübermittlungen empfangen wurden.

Mit diesem Bestätigungstyp können Sie die Standardnachricht bearbeiten, um sie an Ihre Marke anzupassen. Gehen Sie zum Feld „Bestätigungsnachricht“ und geben Sie Ihre benutzerdefinierte Nachricht in das Textfeld ein.

Wenn Sie 'Seite anzeigen' wählen, müssen Sie eine vorhandene Seite auf Ihrer WordPress-Website auswählen. Und wenn Sie sich für 'URL aufrufen (Weiterleitung)' entscheiden, fügen Sie eine Seiten-URL ein.

Bevor Sie mit dem nächsten Schritt fortfahren, klicken Sie auf „Speichern“, damit Sie Ihren Fortschritt nicht verlieren.

Wenn das erledigt ist, können Sie Ihr neues Formular auf Ihrer WordPress-Website anzeigen.

Schritt 6: Einbetten Ihres Formulars in WordPress

Um Ihr neues Formular anzuzeigen auf Ihrer WordPress-Seite können Sie den 'Embed'-Assistenten im WPForms-Formularersteller verwenden.

Dies löst das Pop-up-Fenster „In eine Seite einbetten“ aus. Dort können Sie „Vorhandene Seite auswählen“ oder „Neue Seite erstellen“ wählen, je nachdem, was für Sie relevant ist.

In diesem Beispiel wählen wir „Vorhandene Seite auswählen“.

Der nächste Schritt ist die Auswahl der Seite, auf der Sie Ihr neues Formular anzeigen möchten.

Klicken Sie einfach auf das Dropdown-Menü und wählen Sie eine vorhandene Webseite aus. Sobald Sie das getan haben, klicken Sie auf 'Los geht's!'.

Dies leitet Sie zum WordPress Block-Editor weiter.

Von hier aus müssen Sie auf die Schaltfläche „+“ klicken, um einen WPForms-Block hinzuzufügen.

Sie können 'WPForms' in die Suchleiste eingeben, und Sie sollten den WPForms-Block in den Suchergebnissen sehen.

Klicken Sie einfach darauf, um es hinzuzufügen.

Nachdem Sie den WPForms-Block hinzugefügt haben, sehen Sie ein Dropdown-Menü auf Ihrer Seite.

Klicken Sie einfach auf das Dropdown-Menü und wählen Sie ein Formular aus der Liste aus. Wählen wir „Kontaktformular“, da dies das Formular ist, das wir gerade erstellt haben.

Schritt 7: Veröffentlichen des neuen Formulars auf Ihrer WordPress-Website

In dieser letzten Phase lassen Sie uns das Formular vor der Veröffentlichung in der Vorschau anzeigen, um sicherzustellen, dass alles perfekt aussieht. Klicken Sie im WordPress-Inhaltseditors auf Anzeigen » Vorschau in neuem Tab.

Wenn Sie möchten, können Sie auch eine Vorschau darauf anzeigen, wie das Formular auf Tablets und Mobilgeräten aussieht. Klicken Sie dazu einfach auf Anzeigen » Tablet oder Mobilgerät » Vorschau in neuem Tab.

Wenn schließlich keine weiteren Anpassungen erforderlich sind, können Sie auf „Aktualisieren“ klicken.

Herzlichen Glückwunsch! Sie haben Ihr neues Kontaktformular mit Dropdown-Feldern erfolgreich auf Ihrer WordPress-Website hinzugefügt.

So sah es auf unserer Demowebsite aus:

Bonus-Tipp: Kreative Möglichkeiten zur Verwendung von Dropdown-Feldern

Wissen Sie, was das Erstaunliche an Dropdown-Feldern ist? Sie sind vielseitiger, als die meisten Leute denken!

Nach Jahren des Erstellens von Websites haben wir einige wirklich clevere Möglichkeiten entdeckt, Dropdowns zu verwenden, die über die üblichen Kontaktformulare hinausgehen. Hier sind einige unserer bevorzugten kreativen Anwendungsfälle, von denen Sie sich inspirieren lassen können:

🛍️ Produktkonfiguratoren – Dies ermöglicht es Benutzern, Produkte anzupassen, z. B. 'Farbe wählen', 'Größe auswählen' oder 'Oberfläche wählen'. Dies ist perfekt für WooCommerce-Produktseiten oder benutzerdefinierte Bestellformulare.

📅 Terminplanung – Kleine Unternehmen oder Service-Websites können Dropdown-Menüs für Datums- und Zeitschlitze nutzen. Dies ist besonders großartig für Buchungssysteme oder Beratungsanfragen.

🗺️ Standortbasierte Dienste – Sie können Dropdowns für die Auswahl von Land, Bundesland und Stadt hinzufügen, während Sie Karten in Ihre Formulare einbetten. Dies kann für Lieferdienste oder lokale Branchenverzeichnisse sehr nützlich sein.

✏️ Quiz-Formulare – Dropdowns eignen sich auch perfekt für Multiple-Choice-Fragen. Wenn Sie einen Online-Kurs betreiben, können Sie diese Felder verwenden, um alles ordentlich und organisiert zu halten!

Vor allem können Sie Ihre WordPress-Formulare jederzeit weiter anpassen und gestalten, damit sie zu Ihrem Website-Design passen.

FAQs: Dropdown-Felder in WordPress-Formularen verwenden

Hier sind Antworten auf einige der häufigsten Fragen zur Verwendung von Dropdown-Feldern in WordPress.

Was ist das beste Plugin zum Erstellen von Formularen mit Dropdown-Feldern?

Wir empfehlen WPForms als beste Option. Seine KI-Tools beschleunigen den Prozess, der Drag-and-Drop-Builder ist super einfach zu bedienen und das Dropdown-Feld ist selbst in der kostenlosen WPForms Lite-Version enthalten.

Für erweiterte Funktionen wie bedingte Logik ist die WPForms Pro-Version ein großartiges Upgrade.

Kann ich meinen Formularen kostenlos Dropdown-Felder hinzufügen?

Ja! Das kostenlose WPForms Lite-Plugin enthält das Standard-Dropdown-Feld, mit dem Sie organisierte und benutzerfreundliche Formulare erstellen können, ohne einen Cent auszugeben.

Sind Dropdown-Felder mobilfreundlich?

Auf jeden Fall. Wenn Sie ein qualitativ hochwertiges Plugin wie WPForms verwenden, sind alle Formularfelder vollständig responsiv. Das bedeutet, dass sich Dropdown-Menüs automatisch anpassen, um auf Desktops, Tablets und Smartphones gut auszusehen und reibungslos zu funktionieren.

Kann ich Bilder als Auswahlmöglichkeiten in meinen Formularfeldern verwenden?

WPForms Pro enthält eine Funktion 'Bildauswahl' für Radio-Buttons und Kontrollkästchen. Obwohl dies für Dropdowns nicht verfügbar ist, ermöglicht es Benutzern, aus visuellen Optionen zu wählen, was perfekt für Produktauswahl und ähnliche Formulare ist.

Zusätzliche Ressourcen: Meistern Sie Ihre WordPress-Formulare

Wir hoffen, dieser Leitfaden hat Ihnen geholfen zu lernen, wie Sie WordPress-Formulare mit Dropdown-Feldern erstellen. Wenn Sie dies hilfreich fanden, finden Sie hier einige handverlesene Anleitungen, die Ihnen helfen, mehr daraus zu machen:

• So passen Sie Ihre WordPress-Formulare an und gestalten sie
• So verwenden Sie ein Kontaktformular, um Ihre E-Mail-Liste zu erweitern
• So blockieren Sie Spam in Kontaktformularen in WordPress 
• Formularabbrüche in WordPress verfolgen und reduzieren
• Ultimativer Leitfaden zur Verwendung von WordPress-Formularen

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.