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 ist die Installation von WPForms. Es ist das beste WordPress-Kontaktformular-Plugin auf dem Markt, mit dem Sie ganz einfach alle Arten von Formularen auf Ihrer WordPress-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 Formularvorlagen sehen, von denen viele bereits das Feld für die Datumsauswahl 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: Fügen Sie ein Datumsauswahlfeld zu Ihrem WordPress-Formular hinzu

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 das Datumsauswahlfeld zu Ihrem WordPress-Formular hinzufügen. Wenn Ihre Vorlage bereits über ein solches Feld 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 Feld für die Datumsauswahl in Ihrem WordPress-Formular ein Kalender mit einem Dropdown-Menü neben der Uhrzeit.

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 Bereich Datum können Sie dann die Datumsauswahl von einem Kalender in ein 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 die Nutzer keinen Termin außerhalb Ihrer Geschäftszeiten vereinbaren.

Darüber hinaus können Sie einen CSS-Klassennamen für das Datumsauswahlfeld 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 Formular zufrieden sind, können Sie es speichern, indem Sie auf die Schaltfläche „Speichern“ in der oberen rechten Ecke des Bildschirms 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 die Schaltfläche „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 führen 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 nicht in eine Seite, sondern in einen Beitrag einfügen möchten, können Sie einen neuen Beitrag erstellen oder einen bestehenden Beitrag im Blockeditor ö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 zuvor erstellt haben. In der Seitenleiste der Blockeinstellungen 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-Blogposts 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

Nun, da Sie wissen, wie Sie ein WordPress-Formular mit einer Datumsauswahl erstellen, lassen Sie uns die besten Tipps behandeln, 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.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie man ein WordPress-Formular mit einer Datumsauswahl erstellt. Vielleicht möchten Sie auch unseren Artikel über die Erstellung eines E-Mail-Newsletters und unsere ultimative Liste der besten WordPress-Umfrage-Plugins lesen.

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.