Platzhaltertext zu Ihren WordPress-Formularen hinzufügen

Möchten Sie Platzhaltertext für Formulare in WordPress hinzufügen? Platzhalter erleichtern es Ihren Besuchern, jedes Feld korrekt auszufüllen.

Er sitzt in einem Feld und zeigt den Leuten genau, was sie eingeben sollen, bevor sie es tun, was Rätselraten und die darauf folgenden E-Mails reduziert.

In diesem Artikel führe ich Sie durch das Hinzufügen von Platzhaltertext zu jedem Feld auf Ihrem WordPress-Kontaktformular, indem ich die einfachste verfügbare Lösung mit WPForms verwende!

Erstellen Sie jetzt Ihr WordPress-Formular! :)

Was ist Platzhaltertext?

Platzhaltertext ist der Text innerhalb eines Formularfelds, der dem Benutzer anzeigt, was er eingeben soll. Er wurde in der HTML5-Spezifikation eingeführt, daher wird er manchmal auch als 'HTML5-Platzhalterattribut' bezeichnet.

Platzhalter sind hilfreich für jedes Feld mit einem bestimmten Format, wie z. B. einer E-Mail-Adresse. Sie zeigen Ihrem Besucher, wie er seine Eingabe formatieren soll, was sehr wichtig ist, um sicherzustellen, dass jedes Feld gültig ist.

Das bedeutet, dass die Wahrscheinlichkeit eines Formularabbruchs geringer ist, da der Besucher nicht immer wieder zurückgehen und das Eingegebene korrigieren muss. Dies ist besonders hilfreich für Felder wie:

• URLs: Sie können https://example.com als Platzhaltertext hinzufügen, um dem Besucher zu zeigen, wie er seine Website-Adresse korrekt eingibt.
• Telefonnummern: Wenn Sie beispielsweise die Ländervorwahl des Benutzers zusammen mit seiner normalen Nummer erhalten möchten, können Sie Platzhaltertext hinzufügen, um ihm zu zeigen, wie er sie eingeben soll.
• Social-Media-Benutzernamen: Platzhaltertext kann den Leuten zeigen, wie sie ihren Benutzernamen richtig eingeben. Wenn Sie beispielsweise @example als Platzhaltertext für ein Twitter-Feld hinzufügen, zeigt dies an, dass Sie möchten, dass sie das führende @ eingeben.

Sie können sich wahrscheinlich andere Möglichkeiten vorstellen, Platzhaltertext zu verwenden, um Ihren Besuchern zu helfen. Platzhaltertext unterscheidet sich geringfügig von einem Standardwert.

Wenn der Benutzer beginnt, in ein Feld mit Platzhaltertext zu tippen, verschwindet der Platzhaltertext. Im Gegensatz dazu wird ein Standardwert zusammen mit der Formulareingabe übermittelt, es sei denn, der Benutzer ändert ihn.

So fügen Sie Platzhaltertext zu WordPress-Formularen hinzu

Sobald Ihr Formular existiert, benötigt der Platzhaltertext ein paar Klicks pro Feld, und Sie müssen keine einzige Zeile Code oder CSS anfassen, um dies zu tun. Befolgen Sie die nachstehenden Schritte, um loszulegen:

Schritt 1: Installieren Sie das WPForms-Plugin

WPForms ist ein Drag-and-Drop-Formularersteller für WordPress mit über 2.100 Formularvorlagen, sodass Sie mit einem fertigen Kontaktformular beginnen können, anstatt es von Grund auf neu zu erstellen.

Jedes Feld, das Sie per Drag & Drop einfügen, hat sein eigenes Optionsfeld, und der Platzhaltertext befindet sich bei allen an derselben Stelle. Was mir an WPForms für diese spezielle Aufgabe am besten gefällt, ist, dass die Platzhaltervorschau live aktualisiert wird.

Alle Versionen von WPForms ermöglichen das Hinzufügen von Platzhaltern zu Formularfeldern, einschließlich WPForms Lite. Beachten Sie, dass die Pro-Version das Hinzufügen erweiterter Felder zu Ihren Formularen ermöglicht, sodass sie wesentlich leistungsfähiger ist als die kostenlose Version.

Laden Sie die Zip-Datei aus dem Tab "Downloads" in Ihrem WPForms-Konto herunter und laden Sie sie auf Ihre WordPress-Website hoch. Hier ist eine Schritt-für-Schritt-Anleitung, wie man ein WordPress-Plugin installiert, falls Sie Hilfe bei diesem Schritt benötigen.

Starten Sie noch heute mit WPForms

Schritt 2: Erstellen Sie Ihr Kontaktformular

In WPForms können Sie dank seiner Bibliothek von über 2.100 Formularvorlagen und fortschrittlichen KI-Funktionen zum Erstellen von Formularen in weniger als 5 Minuten ein Formular erstellen und einbetten.

Sie können beginnen, indem Sie zu WPForms » Neu hinzufügen gehen und die Vorlage Einfaches Kontaktformular auswählen oder die WPForms-KI bitten, das Formular für Sie zu erstellen.

Sobald Sie eine Vorlage ausgewählt oder Ihr Formular mit WPForms AI erstellt haben, werden Sie zum Formularersteller weitergeleitet. Hier sehen Sie links eine Liste der hinzuzufügenden Felder und rechts eine Live-Vorschau Ihres Formulars.

Es ist einfach, Ihr Formular anzupassen und beliebige Felder hinzuzufügen, die Sie benötigen. Sie können sogar eine DSGVO-Einwilligung hinzufügen, indem Sie das DSGVO-Feld einfach in die Formularvorschau ziehen.

Benötigen Sie weitere Hilfe? Wir haben eine detaillierte Anleitung, die zeigt, wie man ein einfaches Kontaktformular in WordPress erstellt. Wenn Ihr Formular fertig ist, klicken Sie oben im Formularersteller auf Speichern, um Ihren bisherigen Fortschritt zu sichern.

Schritt 3: Fügen Sie einem Text- oder E-Mail-Feld Platzhaltertext hinzu

Nun sind wir bereit, Platzhaltertext zu Ihrem WordPress-Formular hinzuzufügen. Wir zeigen Ihnen 2 nützliche Möglichkeiten, diese Funktion zu nutzen, um Ihre Formulare einfacher ausfüllbar zu machen.

Nehmen wir das E-Mail-Feld als erstes Beispiel. Klicken Sie im Formularersteller auf das E-Mail-Feld auf der rechten Seite, um die Einstellungen zu öffnen.

Erweitern Sie dann auf der linken Seite das Untermenü Erweiterte Optionen. Dort sehen Sie ein Feld für den Platzhaltertext.

Geben Sie den Platzhaltertext ein, den Sie verwenden möchten. Während Sie tippen, sehen Sie denselben Text in der Formularvorschau auf der rechten Seite erscheinen, sodass Sie sehen können, wie er in Ihrem WordPress-Formular aussehen wird.

Wenn Sie möchten, können Sie auch das Kontrollkästchen Label ausblenden aktivieren. Dadurch wird das Label über dem Feld ausgeblendet, um das Formular kompakter zu gestalten.

Beachten Sie jedoch, dass Screenreader das HTML5-Platzhalterattribut nicht lesen können. Daher möchten Sie möglicherweise das Feld-Label aus Gründen der Barrierefreiheit beibehalten.

Vorerst deaktivieren wir Label ausblenden, sodass wir sowohl das Label als auch den Platzhaltertext haben. Wiederholen Sie dies für jedes Feld, das einen Hinweis benötigt.

Schritt 4: Fügen Sie einem Dropdown-Feld Platzhaltertext hinzu

Sie können Platzhaltertext für jedes Feld verwenden, aber das Dropdown ist besonders praktisch. Standardmäßig wird eine Dropdown-Liste mit der ersten Option in der Liste vorausgewählt. Wir können jedoch einen Platzhalter verwenden, um dies zu verhindern.

Wenn Sie unseren Vergleich von WPForms Lite vs. Contact Form 7 gelesen haben, wissen Sie, dass Contact Form 7 es Ihnen ermöglicht, eine leere Zeile am Anfang eines Dropdowns hinzuzufügen.

Es zeigt jedoch nur 3 Bindestriche ( – – – ) als Platzhalter an, und Sie können den eigentlichen Platzhaltertext nicht anpassen. WPForms gibt Ihnen also mehr Kontrolle über das Aussehen Ihrer Platzhalter.

Beginnen wir mit einem Dropdown-Beispiel. Wir haben 3 Antwortmöglichkeiten zu diesem Dropdown hinzugefügt. Wenn wir das Formular veröffentlichen, ist die 1. Option die Standardauswahl.

Dies kann bei jedem Formular ein Problem sein, insbesondere bei Umfrageformularen und Fragebögen. Bei jeder Art von Umfrage möchten Sie sicherstellen, dass Ihr Besucher bewusst eine Antwort wählt.

Wir können dieses Problem leicht lösen, indem wir dem Dropdown-Feld einen Platzhalter hinzufügen. Unter Erweiterte Optionen haben wir den Platzhaltertext links eingegeben. Die Änderung wird sofort in der Vorschau auf der rechten Seite angezeigt.

Nun zeigt das Formular den Platzhalter anstelle der 1. Option an.

Wenn die Liste erweitert wird, sehen Sie, dass der Platzhaltertext ausgegraut ist, um anzuzeigen, dass es sich nicht um eine gültige Auswahl handelt.

Wenn Sie keinen Platzhaltertext verwenden möchten, aber eine leere Zeile am Anfang des Dropdowns wünschen, können Sie den Platzhalter leer lassen.

Drücken Sie einfach die Leertaste im Feld Platzhaltertext. Dadurch wird das Dropdown-Feld als leer angezeigt, bis der Besucher eine Auswahl trifft.

Alle WPForms-Felder, die Platzhaltertext unterstützen

Nicht jedes Feld kann Platzhaltertext enthalten, und zu wissen, welche das können, erspart Ihnen die Suche nach Einstellungen, die nicht vorhanden sind.

Für die vollständige Referenz zu jedem Feldtyp bietet WPForms eine Platzhaltertext-Dokumentation, die die Details abdeckt.

Feld	Notizen
Einzeiliger Text	Standard-Platzhalter
Absatztext	Standard-Platzhalter
Name	Separater Platzhalter pro Unterfeld (Vorname, Mitte, Nachname)
E-Mail	Separater Platzhalter für das Bestätigungsfeld
Website / URL	Standard-Platzhalter
Telefon	Standard-Platzhalter
Nummer	Standard-Platzhalter
Dropdown	Dient auch dazu, zu verhindern, dass die erste Wahl vorausgewählt wird
Adresse	Separater Platzhalter pro Zeile, Stadt, Bundesland, PLZ und Land
Datum / Uhrzeit	Separater Platzhalter für Datums- und Zeitauswahl
Passwort	Separater Platzhalter für das Bestätigungsfeld
Benutzerdefinierte Captcha	Standard-Platzhalter

Alles, worauf der Leser klickt, anstatt hineinzuschreiben, hat keine Platzhalteroption, da es keine leere Textbox gibt, in die man einen Hinweis eingeben könnte. Dies betrifft Kontrollkästchen, Multiple Choice, Bewertung, Unterschrift, Datei-Upload, Nummern-Schieberegler und Rich Text.

Sechs der oben genannten Felder werden mit dem kostenlosen WPForms Lite geliefert, darunter Einzeiliger Text, Name, E-Mail, Absatztext, Dropdown und Zahl. Telefon, Adresse, Datum/Uhrzeit und benutzerdefinierter Captcha sind erweiterte Felder, die eine kostenpflichtige Lizenz benötigen.

Umzug von Contact Form 7 zu WPForms

Wenn Sie von Contact Form 7 hierher gekommen sind, wissen Sie bereits warum. Platzhalter bedeuten dort, dass Sie den Tab Formular öffnen und manuell ein placeholder-Attribut in den Formular-Tag-Shortcode für jedes einzelne Feld eingeben oder die Box „Diesen Text als Platzhalter verwenden“ unter Standardwert aktivieren.

In beiden Fällen bearbeiten Sie Markup, und jedes neue Feld bedeutet, dass Sie wieder in den Shortcode zurückkehren müssen. Dropdowns stoßen an eine härtere Grenze, da Contact Form 7 Ihnen zwar eine leere erste Zeile geben kann, diese aber als drei Bindestriche anzeigt, ohne eine Einstellung, um zu ändern, was sie sagt.

Sie können nicht „Abteilung wählen“ oder „Budget auswählen“ schreiben, und keine Shortcode-Bearbeitung ändert das. Unser Vergleich WPForms Lite vs. Contact Form 7 geht auf die restlichen Unterschiede ein, wenn Sie das Gesamtbild sehen möchten.

Diese Lücke ist der ehrliche Grund, sich für diesen speziellen Job zu entscheiden. Platzhaltertext in WPForms ist eine Box, in die Sie tippen, mit einer Live-Vorschau, bei jedem Feld, das einen unterstützt.

Sie können Ihre vorhandenen Contact Form 7-Formulare importieren, anstatt sie neu zu erstellen, was WPForms zu einer einfachen Alternative zu Contact Form 7 macht, wenn die Shortcode-Bearbeitung ermüdend geworden ist.

FAQs zu Platzhaltertext in Kontaktformularen

Platzhaltertext kommt bei WordPress-Benutzern, die Kontaktformulare einrichten, häufig vor. Hier sind die Fragen, die am häufigsten auftreten.

Was ist Platzhaltertext?

Es ist der Hinweistext in einem Formularfeld, der anzeigt, was eingegeben werden soll und verschwindet, sobald jemand mit der Eingabe beginnt.

Er stammt vom HTML5-Platzhalterattribut, und in WPForms fügen Sie ihn im Erweitert-Tab jedes unterstützten Feldes hinzu.

Was ist der Unterschied zwischen Platzhaltertext und einem Standardwert?

Platzhaltertext ist nur ein visueller Hinweis, daher wird er nie mit dem Formular übermittelt. Ein Standardwert ist tatsächlicher Inhalt, der im Feld steht, und er wird übermittelt, es sei denn, die Person ändert ihn zuerst.

Verwenden Sie einen Platzhalter, um das gewünschte Format anzuzeigen, und einen Standardwert, wenn Sie eine tatsächliche Antwort vorausfüllen möchten.

Können Screenreader Platzhaltertext lesen?

Nicht zuverlässig, weshalb Platzhaltertext niemals die einzige Beschreibung sein sollte, die ein Feld hat.

Halten Sie die Feldbezeichnung sichtbar, anstatt Bezeichnung ausblenden anzukreuzen, und platzieren Sie alles wirklich Wichtige in der Feld-Beschreibung, wo es auf dem Bildschirm bleibt.

Warum wählt meine Dropdown-Liste automatisch die erste Option aus?

Da es auf den klassischen Stil eingestellt ist, der immer die erste Wahl vorauswählt.

Fügen Sie Platzhaltertext im Erweitert-Tab hinzu, und das hört auf, oder wechseln Sie den Stil zu Modern im Allgemein-Tab, da moderne Dropdowns überhaupt nicht vorauswählen.

Kann ich Platzhaltertext in Contact Form 7 hinzufügen?

Das können Sie, indem Sie ein placeholder-Attribut in den Formular-Tag-Shortcode eingeben oder die Checkbox für den Standardwert verwenden.

Dropdowns sind die Grenze, da Contact Form 7 nur eine leere Zeile anbietet, die als drei Bindestriche angezeigt wird, ohne Möglichkeit, die Formulierung anzupassen.

Nächster Schritt: Gestalten Sie Ihren Platzhaltertext

Standardmäßig ist der Platzhaltertext Ihres WordPress-Kontaktformulars grau.  Wenn Sie etwas Kontrast hinzufügen möchten, können Sie CSS verwenden, um ihn zu gestalten.

Sehen Sie sich die Code-Snippets in unserer Dokumentation an: Platzhaltertext gestalten. Wir haben auch einige großartige Beispiele für Kontaktseiten, wenn Sie etwas Design-Inspiration wünschen.

Erstellen Sie jetzt ein besseres Kontaktformular

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 dieser Artikel Ihnen geholfen hat, folgen Sie uns bitte auf Facebook und  X (Twitter) für weitere kostenlose WordPress-Tutorials und Anleitungen.