Wie man ein WordPress-Formular mit einer Datumsauswahl erstellt (einfacher Weg)

Möchten Sie ein WordPress-Formular mit einer Datumsauswahl erstellen?

Ein Datumsauswahlfeld ist eine bequeme Möglichkeit, datumsbezogene Informationen in Ihren WordPress-Formularen zu erfassen. Sie müssen zum Beispiel das Geburtsdatum Ihrer Nutzer kennen oder möchten, dass sie über Ihre Formulare ganz einfach einen Termin für Ihre Dienstleistungen vereinbaren können.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach ein WordPress-Formular mit einer Datumsauswahl erstellen können.

Warum ein WordPress-Formular mit einer Datumsauswahl erstellen?

Ein Datumsauswahlfeld in einem WordPress-Formular ist nützlich, wenn Sie möchten, dass Benutzer Daten eingeben. Übliche Beispiele sind:

• Registrierungsformulare, in denen die Benutzer aufgefordert werden, ihr Geburtsdatum einzugeben.
• Bestellformulare für die Auswahl eines Lieferdatums und einer Lieferzeit für eine Bestellung.
• Formulare für Mietgegenstände zur Auswahl eines Abhol- oder Abgabedatums für einen Mietgegenstand.
• Formulare für Rückrufanfragen, damit die Nutzer Ihnen mitteilen können, wann sie über Ihre Produkte oder Dienstleistungen informiert werden möchten.
• Urlaubsantragsformulare, die es den Mitarbeitern ermöglichen, das Anfangs- und Enddatum ihrer Abwesenheit einzugeben.
• Termin- oder Buchungsformulare für Unterkunfts- oder Dienstleistungswebsites.

Ein Datumseingabefeld ist für die Benutzer eine viel einfachere Möglichkeit, Daten einzufügen, als sie manuell einzutippen. Es stellt sicher, dass das Datumsformat bei allen Formularübertragungen konsistent bleibt, wodurch Fehler reduziert und die Benutzerfreundlichkeit verbessert werden.

Sehen wir uns nun an, wie man ein WordPress-Formular mit einer Datumsauswahl erstellen kann. Sie können diese Quicklinks verwenden, um durch diesen Artikel zu navigieren:

Schritt 1: Installieren Sie das WPForms Plugin und wählen Sie eine Vorlage

Der erste Schritt besteht darin, WPForms zu installieren. Es ist das beste Plugin für WordPress-Kontaktformulare auf dem Markt, mit dem Sie ganz einfach alle Arten von WordPress-Formularen auf Ihrer Website erstellen können, einschließlich Formularen mit Datumsauswahlfeldern.

Eine detaillierte Anleitung finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Sie können unsere vollständige WPForms Überprüfung für weitere Details zu sehen.

Rufen Sie nach der Aktivierung die Seite WPForms “ Add New in Ihrem WordPress-Dashboard auf.

Dadurch werden Sie auf die Seite „Vorlage auswählen“ weitergeleitet.

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

Wenn Sie nach unten blättern, werden Sie eine Reihe von vorgefertigten Templates sehen, von denen viele bereits das Feld für den Datumsbereich enthalten.

Als Beispiel verwenden wir die Vorlage „Einfaches Kontaktformular“ und fügen das Feld für die Datumsauswahl hinzu. Sie können aber gerne eine Vorlage wählen, die Ihnen am besten gefällt.

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

Schritt 2: Datumsauswahlfeld zum WordPress-Formular hinzufügen

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

Bei der Vorlage für ein einfaches Kontaktformular werden standardmäßig nur die Felder Name, E-Mail-Adresse und Kommentare zum Formular hinzugefügt.

Zu Demonstrationszwecken zeigen wir Ihnen, wie Sie ein Datumsfeld zu Ihrem WordPress-Formular hinzufügen. Wenn Ihr Template bereits über ein Datumsfeld verfügt, können Sie den Bearbeitungsteil dieses Schritts überspringen.

Scrollen Sie dazu in der linken Spalte zum Abschnitt „Ausgefallene Felder“, wo Sie das Feld „Datum/Uhrzeit“ sehen.

Ziehen Sie das Feld einfach per Drag & Drop an die gewünschte Stelle in Ihrem Formular. In diesem Tutorial haben wir es direkt unter dem E-Mail-Feld platziert.

Klicken Sie anschließend auf das Feld „Datum/Uhrzeit“, um es zu bearbeiten. Daraufhin öffnet sich die Registerkarte „Feldoptionen“ auf der linken Seite Ihres Bildschirms.

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

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

Ansonsten können Sie den Beschreibungstext ausfüllen, um dem Benutzer mehr Informationen darüber zu geben, was er in das Feld eingeben muss.

Schließlich können Sie das Kästchen „Erforderlich“ markieren, wenn Sie dieses Feld zu einem Pflichtfeld machen wollen. Das bedeutet, dass der Benutzer ein Datum und eine Uhrzeit auswählen muss, bevor er das Formular abschicken kann.

Klicken Sie anschließend oben auf die Schaltfläche „Speichern“, um Ihre Formulareinstellungen zu speichern.

Schritt 3: Konfigurieren Sie die erweiterten Optionen für die Datums- und Zeitauswahl

Standardmäßig ist das Auswahlfeld für den Datumsbereich in Ihrem WordPress-Formular ein Kalender mit einem Dropdown-Menü daneben.

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

Die Dropdown-Liste für die Uhrzeit ist standardmäßig auf eine 12-Stunden-Uhr mit 30-Minuten-Intervallen eingestellt.

Die Nutzer können dann ein Zeitfenster wählen, das für sie am besten geeignet ist.

In manchen Fällen möchten Sie vielleicht die Einstellungen für die Datumsauswahl ändern. Zum Beispiel kann es sein, dass Ihr Land die Formate Tag/Monat/Jahr oder 24-Stunden-Datum und -Zeit verwendet, anstatt die Standardformate.

Dazu müssen Sie auf die Registerkarte „Erweitert“ oben auf der linken Seite des Fensters wechseln.

Hier können Sie die Größe des Datumsauswahlfeldes anpassen. Im Abschnitt „Datum“ können Sie dann den Datumsbereich von einem Kalender zu einem Dropdown-Menü ändern.

Es ist eine gute Idee, die Datumsauswahl in ein Dropdown-Menü umzuwandeln, wenn der Platz im Formular begrenzt ist 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 (31.1.2024) auf Tag/Monat/Jahr (31.1.2024) oder Monat-Tag-Jahr (31.1.2024) ändern.

Wenn Sie die Datumsauswahl des Kalenders wählen, können Sie auch einen Platzhaltertext in das Feld „Datum“ einfügen. Sie können ihn 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 den Wochentagen anbieten.

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

Als Nächstes gehen wir in den Bereich „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 sinnvoll, hier einen Platzhaltertext einzugeben, um zu zeigen, welches Zeitformat Sie verwenden.

Die Zeitauswahl ist standardmäßig auf eine 12-Stunden-Uhr eingestellt, aber Sie können diese auf eine 24-Stunden-Uhr umstellen, wenn Sie dies wünschen.

Aktivieren Sie auch die Einstellung „Stunden begrenzen“, um die Anfangs- und Endzeiten Ihrer Dienste festzulegen. Auf diese Weise können Benutzer keinen Termin außerhalb Ihrer Geschäftszeiten vereinbaren.

Darüber hinaus können Sie einen CSS-Klassennamen für das Datumsfeld eingeben. Dies ist eine erweiterte und optionale Funktion, aber Sie können diese verwenden, um den Stil des Formulars später mit Code zu überschreiben.

Zu guter Letzt können Sie bei Bedarf die Beschriftung des Formularfeldes und/oder die Unterbeschriftung ausblenden.

Wenn Sie mit Ihrem neuen Formular zufrieden sind, können Sie es speichern, indem Sie auf den Button „Speichern“ in der oberen rechten Ecke der Ansicht klicken.

Schritt 4: Binden Sie das WordPress-Formular auf Ihrer Website ein

Jetzt können Sie Ihr neues Formular mit der Datumsauswahl zu Ihrer WordPress-Website hinzufügen. Klicken Sie dazu einfach auf den Button „Einbetten“ im oberen Teil des Formularerstellers.

Es erscheint ein Popup-Fenster, in dem Sie aufgefordert werden, eine bestehende Seite auszuwählen, der das Formular hinzugefügt werden soll, oder eine neue Seite für das Formular von Grund auf zu erstellen. Beide Optionen verwenden den Block-Editor, so dass die Schritte ziemlich ähnlich sind.

Hinzufügen des WPForms-Blocks zu einer vorhandenen oder neuen Seite

Um das Formular in eine bestehende Seite einzufügen, klicken Sie auf die Schaltfläche „Vorhandene Seite auswählen“. Wählen Sie dann eine der Seiten aus, die Sie bereits in 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 Methoden bringen Sie zum Block-Editor, wo Sie einige Anweisungen zum Hinzufügen des WPForms-Blocks finden.

Klicken Sie zunächst auf die Schaltfläche „+“, um einen Block hinzuzufügen.

Geben Sie dann „WPForms“ in die Blocksuchleiste ein.

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

Jetzt müssen Sie nur noch auf das Dropdown-Menü klicken.

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

In der Seitenleiste der Blockeinstellungen können Sie die Stile der Formularfelder, Beschriftungen und Schaltflächen anpassen, damit sie besser zu Ihrem WordPress-Theme passen.

Sie können die Größe, den Radius der Umrandung und die Farben der einzelnen Elemente ändern.

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

Auf Ihrer WordPress-Website sollte es in etwa so aussehen:

Wenn Sie das Formular-Widget nicht in eine Seite, sondern in einen Beitrag einfügen möchten, können Sie einen neuen Beitrag erstellen oder einen bestehenden Beitrag im Block-Editor öffnen.

Danach folgen Sie einfach den gleichen Schritten, um den WPForms-Block zu einer Seite hinzuzufügen, wie in dieser Methode.

Hinzufügen des WPForms-Blocks zu einem Widget-bereiten Bereich

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

Hinweis: Wenn Sie ein Block-Theme verwenden, wird diese Methode für Ihre Website nicht funktionieren.

Gehen Sie dazu im WordPress-Verwaltungsbereich auf Darstellung „ Widgets . Navigieren Sie dann zu Ihrem gewünschten Widget-Bereich und klicken Sie auf die weiße Schaltfläche „+“ zum Hinzufügen von Blöcken in diesem Bereich. Danach können Sie nach dem WPForms-Block suchen.

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

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

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

Das war’s!

So sieht unser Formular am Ende eines WordPress-Blogbeitrags aus:

Ihr WordPress-Formular mit einem Shortcode einbetten

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

Klicken Sie im Popup-Fenster „In eine Seite einbetten“ einfach auf den Link „Einen Shortcode verwenden“. Daraufhin wird ein Shortcode angezeigt, den Sie kopieren und in eine Seite, einen Beitrag oder einen Widget-bereiten Bereich einfügen können.

Weitere Informationen über die Verwendung von Shortcodes finden Sie in unserem Artikel über das Hinzufügen eines Shortcodes in WordPress.

Ultimative Tipps zum Optimieren Ihres WordPress-Formulars

Nachdem Sie nun wissen, wie Sie ein Datumsauswahlfeld zu Ihren Formularen hinzufügen können, folgen nun die besten Tipps, um Ihre Formulare auf die nächste Stufe zu bringen:

• Senden Sie Bestätigungs-E-Mails an die Einsender Ihrer Formulare – Auf diese Weise erhalten die Nutzer eine Benachrichtigung, dass Sie ihren Eintrag erfolgreich erhalten haben, und sie werden nicht vergessen, welches Datum oder welche Uhrzeit sie gewählt haben.
• Akzeptieren Sie Online-Zahlungen in Ihren Formularen – WPForms unterstützt beliebte Zahlungsgateways wie Stripe, PayPal, Square und Authorize.net. Sie können einmalige oder wiederkehrende Zahlungen sammeln, und es fallen keine zusätzlichen Transaktionsgebühren an.
• Gestalten Sie Ihre längeren Formulare unterhaltsam – Wenn Sie ein Veranstaltungs- oder Benutzerregistrierungsformular haben, in dem viele Informationen erfasst werden müssen, kann eine unterhaltsame Gestaltung die Ausfüllrate des Formulars erhöhen.
• Verhindern Sie Kontakt-Formular-Spam – Sie können aktivieren WPForms ‚eingebauten Anti-Spam-Schutz und reCAPTCHA Kontrollkästchen, um unsere spammy Form Einträge zu filtern.
• Erstellen Sie mehrsprachige Formulare – Erreichen Sie ein vielfältiges Publikum und verbessern Sie die Zugänglichkeit Ihrer Website mit Formularen, die in mehreren Sprachen angezeigt werden.
• Folgen Sie unserer Liste mit den besten Praktiken für die Gestaltung von Kontaktformularen – Dieser Leitfaden führt Sie durch die Gestaltung des besten WordPress-Formulars, um regelmäßige Besucher in Leads oder Kunden zu verwandeln.
• Lesen Sie unseren Expertenleitfaden zum Erstellen interaktiver Formulare – WPForms-Mitbegründer Jared Atchison gibt Ihnen Hinweise, wie Sie Formulare ansprechender gestalten können, von der Verwendung bedingter Logik bis zum Hinzufügen von Rich-Media-Inhalten.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie man ein WordPress-Formular mit einer Datumsauswahl erstellt. Vielleicht interessiert Sie auch unser Artikel über das Erstellen eines mehrseitigen Formulars in WordPress und unsere ultimative Liste der besten Plugins für Befragungen in WordPress.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.