Wie man ein WordPress-Formular mit einem Datumsauswahlfeld erstellt (einfache Methode)

Inkonsistente Datumseingaben können ein einfaches WordPress-Formular in ein frustrierendes Durcheinander verwandeln. Schrägstriche, Bindestriche, vollständige Monatsnamen – wenn Benutzer Daten eingeben, wie sie wollen, ist es unvermeidlich, sich mit einem unübersichtlichen Daten-Albtraum auseinanderzusetzen, dessen Bereinigung Stunden dauert.

Deshalb ist das Hinzufügen eines Datumsfeld-Auswahlwerkzeugs zu Ihren Formularen ein so kluger Schachzug.

Anstatt die Formatierung dem Benutzer zu überlassen, bietet ein Datumsauswahlfeld eine übersichtliche Kalenderschnittstelle, wodurch jede Eingabe einheitlich und einfach zu verwalten ist.

In dieser Anleitung teilen wir Ihnen den einfachsten Weg mit, ein WordPress-Formular mit einem Datumsauswahlfeld zu erstellen. Egal, ob Sie Buchungsformulare, Veranstaltungsregistrierungen oder Terminplaner erstellen, dieses kleine Upgrade kann Ihnen und Ihren Website-Besuchern helfen. 🙌

Warum ein WordPress-Formular mit Datumsauswahl erstellen?

Nach der Verwaltung Tausender Online-Formulare in WordPress haben wir festgestellt, dass datumsbezogene Formularfelder oft die Ursache für Probleme sind. Tatsächlich sind falsche Datumsformate einer der Hauptgründe, warum Formulareinreichungen fehlschlagen oder zu Verwirrung führen.

Ein Datumsfeld löst diese häufigen Frustrationen und verbessert Ihre Benutzererfahrung. Wir haben gesehen, dass es effektiv eingesetzt wird für:

• Registrierungsformulare, die Benutzer auffordern, ihre Geburtsdaten einzugeben.
• Bestellformulare zur Auswahl eines Lieferdatums und einer Lieferzeit für eine Bestellung.
• Formulare für Mietartikel zur Auswahl eines Abhol- oder Rückgabedatums für einen Mietartikel.
• Rückruf-Anfrageformulare, damit Benutzer Sie wissen lassen können, wann sie bezüglich Ihrer Produkte oder Dienstleistungen kontaktiert werden möchten.
• Urlaubsantragsformulare, damit Mitarbeiter die Start- und Enddaten für ihre freie Zeit eingeben können.
• Termin- oder Buchungsformulare für Unterkunfts- oder Service-Websites.

Das Beste daran? Ein Datumsauswahlfeld sorgt für Konsistenz bei allen Einreichungen. Kein Rätselraten mehr, ob 03/04/2024 den 4. März oder den 3. April bedeutet, ein Kopfzerbrechen, das wir bei der manuellen Dateneingabe viel zu oft erlebt haben.

Wir zeigen Ihnen, wie Sie ganz einfach ein WordPress-Formular mit einem Datumsfeld erstellen können. Hier sind die Schritte, die wir behandeln werden, und Sie können die Links unten verwenden, um durch sie zu navigieren:

• Schritt 1: Installieren Sie das WPForms-Plugin
• Schritt 2: Wählen Sie eine Formularvorlage
• Schritt 3: Datumsfeld zu Ihrem WordPress-Formular hinzufügen
• Schritt 4: Konfigurieren Sie die Einstellungen für den Datums- und Zeitauswähler
• Schritt 5: Betten Sie das WordPress-Formular auf Ihrer Website ein
• 🎁 Bonusschritt: Terminbenachrichtigungen aktivieren
• FAQs: So erstellen Sie ein WordPress-Formular mit Datumsauswahl
• Ultimative Tipps zur Optimierung Ihres WordPress-Formulars

Fangen wir an.

Schritt 1: Installieren Sie das WPForms-Plugin

Wir haben im Laufe der Jahre Dutzende von Formular- und Datumsfeld-Plugins getestet, darunter beliebte Optionen wie Ninja Forms und Gravity Forms.

Aber für das Hinzufügen von Datumsauswahlen haben wir festgestellt, dass WPForms die benutzerfreundlichste Lösung ist, insbesondere für Anfänger, die professionell aussehende Formulare erstellen möchten, ohne Code anfassen zu müssen.

Neben einem Datumsfeld bietet WPForms Premium-Funktionen wie bedingte Logik, um Felder basierend auf Benutzerauswahlen ein- oder auszublenden, und intelligente Rechner, um Preisabschätzungen automatisch zu verarbeiten.

Bei WPBeginner verwenden wir tatsächlich WPForms, um die meisten unserer Formulare zu erstellen, und wir können es nicht genug empfehlen. Sie können unsere vollständige WPForms-Bewertung für weitere Details einsehen.

Zuerst müssen Sie WPForms auf Ihrer Website installieren. Detaillierte Anweisungen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installieren eines WordPress-Plugins.

Schritt 2: Wählen Sie eine Formularvorlage

Nach der Aktivierung gehen Sie auf Ihrem WordPress-Dashboard zur Seite WPForms » Neu hinzufügen.

Dies leitet Sie zur Seite 'Vorlage auswählen'.

Bevor Sie eine Vorlage auswählen, ist es eine gute Idee, Ihrem WordPress-Formular einen Namen zu geben, damit Sie es später leicht identifizieren können.

Als Nächstes wählen Sie aus, wie Sie Ihr Formular erstellen möchten – mit WPForms AI, einer vorgefertigten Vorlage oder von Grund auf neu.

Wenn Sie den KI-Formularersteller verwenden möchten, müssen Sie nur eine einfache Eingabeaufforderung schreiben. Die KI generiert dann sofort das Formular für Sie.

Für dieses Beispiel verwenden wir die Vorlage „Simple Contact Form“ und fügen dann das Datumsfeld hinzu. Sie können aber auch eine Vorlage wählen, die am besten zu Ihnen passt.

Wenn Sie auf der Einrichtungsseite nach unten scrollen, sehen Sie hier über 2.000 vorgefertigte Formularvorlagen. Sie können die Suchleiste verwenden, um die Auswahl einzugrenzen.

Sobald Sie Ihre Wahl getroffen haben, klicken Sie einfach auf die Schaltfläche „Vorlage verwenden“.

Schritt 3: Datumsfeld zu Ihrem WordPress-Formular hinzufügen

Nun gelangen Sie zum WPForms-Formular-Builder. Sie werden die Feldoptionen in der linken Spalte und eine Formularvorschau auf der rechten Seite des Bildschirms bemerken.

Standardmäßig hat die Vorlage „Einfaches Kontaktformular“ nur die Felder Name, E-Mail-Adresse und Kommentare im Formular enthalten.

Zur Demonstration zeigen wir Ihnen, wie Sie Ihrem WordPress-Formular ein Datumsfeld hinzufügen. Aber wenn Ihre Vorlage es bereits hat, können Sie zum Bearbeitungsteil dieses Schritts springen.

Sie müssen im linken Spaltenbereich zum Abschnitt „Fancy Fields“ scrollen, wo Sie das Feld „Date / Time“ sehen.

Ziehen Sie dieses Feld einfach per Drag & Drop dorthin, wo Sie es in Ihrem Formular haben möchten. In diesem Tutorial haben wir es direkt unter dem E-Mail-Feld platziert.

Sobald Sie dies getan haben, klicken Sie auf das Feld „Datum/Uhrzeit“, um es zu bearbeiten. Dies öffnet den Tab „Feldoptionen“ auf der linken Seite Ihres Bildschirms.

Von hier aus können Sie die Beschriftung des Feldes ändern, die standardmäßig auf „Date / Time“ gesetzt ist. Wir werden für unser Feld „Bevorzugte Zeit für Anruf“ verwenden.

Sie können das Datumsformat des Feldes auch über das Dropdown-Menü Format ändern. Die Optionen sind Datum und Uhrzeit, Datum oder nur Uhrzeit. Dies kann nützlich sein, wenn Sie nur ein Datum ohne Zeitfeld verwenden möchten, um Geburtsdaten von Benutzern zu erfassen.

Darüber hinaus können Sie den Beschreibungstext ausfüllen, um mehr Kontext darüber zu geben, was der Benutzer in das Feld eingeben muss.

Schließlich können Sie das Kontrollkästchen 'Erforderlich' aktivieren, wenn Sie dieses Feld zu einem Pflichtfeld machen möchten. Das bedeutet, dass der Benutzer ein Datum und eine Uhrzeit auswählen muss, bevor er das Formular absenden kann.

Sobald Sie dies getan haben, klicken Sie einfach auf die Schaltfläche „Speichern“ oben, um Ihre Formulareinstellungen zu speichern.

Schritt 4: Konfigurieren Sie die Einstellungen für den Datums- und Zeitauswähler

Standardmäßig ist das Datumsbereichsauswahlfeld in Ihrem WordPress-Formular ein Kalender mit einem Zeit-Dropdown-Menü daneben.

Das aktuelle Datum wird ausgewählt, aber der Benutzer kann es ändern, um ein anderes Datum auszuwählen. Das Datumsformat ist Monat/Tag/Jahr.

In der Zwischenzeit ist die Zeitauswahl standardmäßig auf eine 12-Stunden-Uhr mit 30-Minuten-Intervallen eingestellt.

Benutzer können dann einen für sie passenden Zeit-Slot auswählen.

In einigen Fällen möchten Sie möglicherweise die Einstellungen des Datumsfelds ändern. Zum Beispiel folgt Ihr Land möglicherweise dem Tag/Monat/Jahr- oder 24-Stunden- Datums- und Zeitformat anstelle der Standardformate.

Um dies zu tun, müssen Sie zum Tab „Erweitert“ oben im linken Bedienfeld wechseln.

Hier können Sie die Größe des Datumsfelds anpassen. Im Abschnitt 'Datum' können Sie dann den Datumsbereich von einem Kalender zu einem Dropdown-Menü für das Datum ändern.

Das Umschalten des Datums-Kalender-Auswahlfelds zu einem Datums-Dropdown-Menü ist eine gute Idee, wenn das Formular nur begrenzten Platz hat und der Kalender eher klein aussieht.

So sieht das Dropdown-Menü für das Datum aus:

Darunter können Sie das Datumsformat von Monat/Tag/Jahr (1/31/2024) auf Tag/Monat/Jahr (31/1/2024) oder Monat Tag, Jahr (31. Januar 2024) ändern.

Wenn Sie den Kalender-Datums-Picker wählen, können Sie auch Platzhaltertext in das Feld „Datum“ einfügen. Sie können es mit Ihrem Datumsformat füllen, damit die Benutzer wissen, welches Format Sie verwenden, damit sie nicht verwirrt werden.

Zusätzlich können Sie den Schalter 'Tage begrenzen' aktivieren, um den auswählbaren Datumsbereich anzupassen. Dies ist nützlich, wenn Sie Ihre Dienste nur an Wochentagen anbieten.

Sie können auch vergangene Daten deaktivieren, um zu verhindern, dass frühere Daten ausgewählt werden.

Als Nächstes gehen wir zum Abschnitt „Zeit“, um die Zeitauswahl zu ändern.

Hier können Sie das Intervall auf 15 Minuten oder 1 Stunde anstelle von 30 Minuten ändern. Es ist auch gut, hier Platzhaltertext einzugeben, um das verwendete Zeitformat anzuzeigen.

Die Zeitauswahl verwendet standardmäßig eine 12-Stunden-Uhr, aber Sie können diese auf eine 24-Stunden-Uhr umstellen, wenn Sie möchten.

Sie können auch die Einstellung 'Stunden begrenzen' aktivieren, um die Start- und Endzeiten Ihrer Dienste festzulegen. So können Benutzer keinen Termin außerhalb Ihrer Geschäftszeiten vereinbaren.

Ansonsten können Sie einen CSS-Klassen-Namen für das Datumsbereichsfeld eingeben. Dies ist eine fortgeschrittene und optionale Funktion, die Sie verwenden können, um den Stil des Formulars später mit Code zu überschreiben.

Zu guter Letzt können Sie bei Bedarf das Feldlabel und/oder Sublabel ausblenden.

Wenn Sie mit Ihrem neuen Formular zufrieden sind, können Sie es speichern, indem Sie oben rechts auf dem Bildschirm auf die Schaltfläche „Speichern“ klicken.

Schritt 5: Betten Sie das WordPress-Formular auf Ihrer Website ein

Sie sind nun bereit, Ihr neues Formular mit dem Datumsfeld zu Ihrer WordPress-Website hinzuzufügen. Klicken Sie dazu einfach auf die Schaltfläche „Einbetten“ oben im Formular-Generator.

Ein Popup wird angezeigt, in dem Sie aufgefordert werden, eine vorhandene Seite auszuwählen, zu der das Formular hinzugefügt werden soll, oder eine neue Seite für das Formular von Grund auf neu zu erstellen. Beide Optionen verwenden den Block-Editor, daher sind die Schritte ziemlich ähnlich.

Fügen Sie den WPForms-Block zu einer bestehenden oder neuen Seite hinzu

Um das Formular in eine vorhandene Seite einzufügen, klicken Sie auf die Schaltfläche 'Vorhandene Seite auswählen'. Wählen Sie danach eine der Seiten aus, die Sie bereits auf Ihrem WordPress-Blog oder Ihrer Website haben, und klicken Sie auf 'Los geht's!'

Wenn Sie das Formular zu einer neuen Seite hinzufügen möchten, klicken Sie einfach auf die Schaltfläche 'Neue Seite erstellen'.

Geben Sie dann Ihrer neuen Seite einen Namen und klicken Sie auf „Los geht’s!“

Beide dieser Methoden führen Sie zum Block-Editor, wo Sie Anweisungen zum Hinzufügen des WPForms-Blocks sehen.

Klicken Sie zuerst auf die Schaltfläche '+ Block hinzufügen'.

Geben Sie dann „WPForms“ in die Block-Suchleiste ein.

Ziehen Sie den Block einfach per Drag & Drop dorthin, wo er auf der Seite am besten aussieht.

Alles, was Sie jetzt tun müssen, ist auf das Dropdown-Menü zu klicken.

Wählen Sie dann das Formular aus, das Sie gerade erstellt haben.

In der Seitenleiste der Blockeinstellungen können Sie die Stile des Formularfelds, der Beschriftung und der Schaltfläche anpassen, um sie besser zu Ihrem WordPress-Theme passen zu lassen.

Sie können die Größe, den Radius und die Farben jedes Elements ändern.

Sie können nun auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“ klicken, um das Formular auf Ihrer Website live zu schalten.

Es sollte auf Ihrer WordPress-Website ungefähr so aussehen:

Wenn Sie das Formular-Widget in einem Beitrag anstelle einer Seite einfügen möchten, können Sie einen neuen Beitrag erstellen oder einen vorhandenen im Block-Editor öffnen.

Befolgen Sie danach einfach dieselben Schritte, um den WPForms-Block wie in dieser Methode zu einer Seite hinzuzufügen.

Fügen Sie den WPForms-Block zu einem Widget-fähigen Bereich hinzu

Wenn Sie ein klassisches WordPress-Theme verwenden, möchten Sie Ihr Formular möglicherweise in einem Widget-fähigen Header-, Footer- oder Sidebar-Bereich anzeigen. Dies kann eine gute Idee sein, wenn Ihr Formular ziemlich kurz ist und nicht zu viel Platz einnimmt.

Um dies zu tun, gehen Sie einfach im WordPress-Adminbereich zu Darstellung » Widgets. Navigieren Sie dann zu Ihrem gewünschten Widget-Bereich und klicken Sie auf den weißen „+“-Button zum Hinzufügen eines Blocks darin. Danach können Sie nach dem WPForms-Block suchen.

Wenn Sie zwei Optionen sehen, können Sie eine davon wählen, da beide dasselbe tun.

Wie in der vorherigen Methode wählen Sie einfach das Formular aus, das Sie gerade erstellt haben. In der Blockeinstellungen-Seitenleiste können Sie das Design so konfigurieren, dass es besser zu Ihrem WordPress-Theme passt.

Sobald Sie mit den Änderungen zufrieden sind, klicken Sie einfach auf die Schaltfläche „Aktualisieren“.

Das war's!

Hier ist, wie unser Formular am Ende eines WordPress-Blogbeitrags aussieht:

Betten Sie Ihr WordPress-Formular mit einem Shortcode ein

Wenn der WPForms-Block oder das Widget nicht funktioniert, können Sie Ihr WordPress-Formular auch über einen Shortcode hinzufügen.

Klicken Sie im Popup 'In eine Seite einbetten' einfach auf den Link 'Shortcode verwenden'. Sie sehen dann einen Shortcode, den Sie kopieren und auf einer Seite, einem Beitrag oder einem für Widgets geeigneten Bereich einfügen können.

Weitere Informationen zur Verwendung von Shortcodes finden Sie in unserem Artikel „So fügen Sie einen Shortcode in WordPress ein“.

🎁 Bonusschritt: Terminbenachrichtigungen aktivieren

Wenn Sie Ihr Formular für Terminvereinbarungen oder Buchungen verwenden, können automatisierte Erinnerungen einen großen Unterschied machen.

Die Verbindung Ihres Formulars mit Ihrem E-Mail-Marketing-Dienst ermöglicht es Ihnen, Terminerinnerungen zu versenden, was hilft, Nichterscheinen zu reduzieren und die Organisation zu wahren.

Es versichert den Benutzern auch, dass ihre Einreichung erfolgreich war und ihr Platz bestätigt ist.

Um dies einzurichten, können Sie unserer Schritt-für-Schritt-Anleitung folgen, wie Sie Ihren Formular-Einreichern Bestätigungs-E-Mails senden können. Mit nur wenigen Klicks können Sie sicherstellen, dass Benutzer eine rechtzeitige Erinnerung an ihr ausgewähltes Datum oder ihre ausgewählte Uhrzeit erhalten. ⏰

FAQs: So erstellen Sie ein WordPress-Formular mit Datumsauswahl

Denken Sie darüber nach, einen Datums-Picker zu Ihren WordPress-Formularen hinzuzufügen? Hier sind einige häufig gestellte Fragen, die Ihnen den Einstieg erleichtern.

Was ist eine Datumsauswahl in WordPress-Formularen?

Ein Datumsauswahl lässt Benutzer ein Datum aus einem Kalender auswählen. Es hilft sicherzustellen, dass Daten konsistent formatiert sind und reduziert Eingabefehler.

Wie füge ich einen Zeitgeber in WordPress hinzu?

Wenn Sie einen Formularersteller wie WPForms verwenden, ziehen Sie einfach das Feld 'Datum / Uhrzeit' in Ihr Formular. Wählen Sie dann in den Einstellungen die Option 'Uhrzeit' aus.

Wie zeige ich das Datum auf meiner WordPress-Website an?

Sie können Daten über ein Widget, einen Shortcode oder ein benutzerdefiniertes PHP-Code-Snippet anzeigen.

WPCode ist eines der besten Code-Snippet-Plugins für WordPress. Es macht das Hinzufügen von benutzerdefiniertem Code, einschließlich des Codes zum Anzeigen des heutigen Datums, zu Ihrer Website sehr sicher und einfach.

Wie füge ich einen Datumsselektor mit HTML ein?

In reinem HTML können Sie verwenden: <input type="date">. Aber in WordPress ist es einfacher, ein Formular-Plugin für bessere Kompatibilität und Kontrolle zu verwenden.

Ultimative Tipps zur Optimierung Ihres WordPress-Formulars

Jetzt, da Sie wissen, wie Sie ein Datumsfeld-Auswahlwerkzeug in WordPress-Formularen hinzufügen, lassen Sie uns die besten Tipps behandeln, um Ihre Formulare auf die nächste Stufe zu heben:

• Akzeptieren Sie Online-Zahlungen in Ihren Formularen – WPForms unterstützt beliebte Zahlungs-Gateways wie Stripe, PayPal, Square und Authorize.net. Sie können einmalige oder wiederkehrende Zahlungen einziehen, und es fallen keine zusätzlichen Transaktionsgebühren an.
• Machen Sie Ihre längeren Formulare konversationell – Wenn Sie ein Veranstaltungs- oder Benutzerregistrierungsformular haben, das viele Informationen erfassen muss, kann die Konversation des Formulars die Abschlussrate erhöhen.
• Kontaktformular-Spam verhindern – Sie können den integrierten Spam-Schutz von WPForms und das reCAPTCHA-Kontrollkästchen aktivieren, um spammy Formulareinträge herauszufiltern.
• Mehrsprachige Formulare erstellen – Erreichen Sie ein vielfältiges Publikum und erhöhen Sie die Zugänglichkeit Ihrer Website mit Formularen, die in mehreren Sprachen angezeigt werden.
• Folgen Sie unserer Liste der Best Practices für das Design von Kontaktformularen – Diese Anleitung führt Sie durch die Gestaltung des besten WordPress-Formulars, um normale Besucher in Leads oder Kunden umzuwandeln.
• Lesen Sie unseren Expertenratgeber zum Thema Erstellen interaktiver Formulare – WPForms-Mitbegründer Jared Atchison gibt Ihnen Tipps, wie Sie Formulare ansprechender gestalten können, von der Verwendung bedingter Logik bis hin zum Hinzufügen von Rich-Media-Inhalten.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie ein WordPress-Formular mit einem Datumsauswahlfeld erstellen. Möglicherweise möchten Sie auch unseren Artikel über die Erstellung eines mehrseitigen Formulars in WordPress und unsere ultimative Liste der besten WordPress-Umfrage-Plugins lesen.

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.