Platzhaltertext zu Ihren WordPress-Formularen hinzufügen

Möchten Sie Platzhaltertext in WordPress-Formularen hinzufügen?

Platzhalter erleichtern es Ihren Besuchern, jedes Feld korrekt auszufüllen. Das hilft Ihnen, die richtigen Informationen zu erhalten und Frustration bei Ihren Besuchern zu reduzieren.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach Platzhaltertext zu jeder Art von Formular hinzufügen können.

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, das ein bestimmtes Format hat, wie z. B. eine E-Mail-Adresse. Sie zeigen Ihrem Besucher, wie er seine Eingabe formatieren soll.

Platzhaltertext ist äußerst wichtig, 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 korrigieren muss, was er eingegeben hat.

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 weitere 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 einem Platzhalter zu tippen, verschwindet der Platzhaltertext. Im Gegensatz dazu wird ein Standardwert zusammen mit der Formulareingabe übermittelt, es sei denn, der Benutzer ändert ihn.

Nachdem wir nun wissen, wie das HTML5-Platzhalterattribut verwendet wird, zeigen wir Ihnen, wie Sie es ganz einfach zu Ihren Formularen hinzufügen können.

So fügen Sie Platzhaltertext zu WordPress-Formularen hinzu

Wir zeigen Ihnen in den folgenden Schritten, wie Sie ganz einfach Platzhaltertext hinzufügen.

Beginnen wir mit der Installation des besten Formular-Builder-Plugins für WordPress.

1. Installieren Sie das WPForms-Plugin

Installieren und aktivieren Sie zuerst das WPForms-Plugin.

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.

2. Erstellen Sie ein einfaches Kontaktformular

Als Nächstes möchten Sie ein einfaches Kontaktformular erstellen. In WPForms können Sie ein Formular in weniger als 5 Minuten erstellen und einbetten.

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 Sie ein einfaches Kontaktformular in WordPress erstellen.

Wenn Ihr Formular fertig ist, klicken Sie oben im Formular-Generator auf Speichern, um Ihren bisherigen Fortschritt zu sichern.

3. Fügen Sie Platzhaltertext zum E-Mail-Feld 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 Formular-Generator 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.

Sie sehen 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. Möglicherweise möchten Sie das Feld-Label aus Gründen der Barrierefreiheit beibehalten.

Vorerst werden wir Label ausblenden deaktivieren, damit wir sowohl das Label als auch den Platzhaltertext haben.

4. Fügen Sie Platzhaltertext zu einem Dropdown-Feld 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 diesem Dropdown 3 Antwortmöglichkeiten hinzugefügt.

Wenn wir das Formular veröffentlichen, ist die 1. Option die Standardauswahl. Ihr Besucher könnte dieses Formular absenden, ohne auf das Dropdown zu klicken, um es zu ändern.

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 auf der linken Seite 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. Dies zeigt das Dropdown-Feld als leer an, bis der Besucher eine Auswahl getroffen hat.

Und das ist alles! Jetzt wissen Sie, wie Sie Ihren WordPress-Formularen nützlichen Platzhaltertext hinzufügen.

Erstellen Sie jetzt Ihr WordPress-Formular

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.

Sie wissen nicht, wie Sie CSS in WordPress hinzufügen? Lesen Sie diese Anleitung zum Hinzufügen von Code-Snippets, ohne Ihre Website zu beschädigen.

Bereit, Ihr Formular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formular-Builder-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.