Möchten Sie ein WordPress-Formular mit einer Datumsauswahl erstellen?
Es ist ganz einfach, einen WordPress-Datumsbereichspicker hinzuzufügen, mit dem Besucher Datum und Uhrzeit in einem Formular auswählen können.
In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach ein Datum/Uhrzeit-Picker-Formularfeld in WordPress hinzufügen können, und geben Ihnen einige Tipps, wenn Sie es anpassen möchten.
Erstellen Sie jetzt Ihr WordPress-Formular
In diesem Artikel
- Schritt 1: Ein WordPress-Formular erstellen
- Schritt 2: Fügen Sie die Datumsauswahl zu Ihrem WordPress-Formular hinzu
- Schritt 3: Erweiterte WPForms Date Picker Anpassungen
- Schritt 4: Erweiterte WPForms Zeitfeld Anpassungen
- Schritt 5: Konfigurieren Sie die Einstellungen des Datumsauswahlformulars
- Schritt 6: Konfigurieren Sie Ihre Formularbenachrichtigungen
- Schritt 7: WordPress Date Picker Form zu Ihrer Website hinzufügen
Wie man ein WordPress-Formular mit Datumsauswahl erstellt
Mit WPForms ist es ganz einfach, ein Feld hinzuzufügen, in dem die Benutzer ein bestimmtes Datum, eine Uhrzeit oder beides auswählen können.
Hier finden Sie eine Schritt-für-Schritt-Anleitung zur Erstellung eines WordPress-Formulars mit einem Date/Time Picker:
Wenn Sie eine schriftliche Anleitung zum Hinzufügen einer WordPress-Datumsauswahl zu Ihren Formularen bevorzugen, lesen Sie die folgenden Schritte:
Schritt 1: Ein WordPress-Formular erstellen
Als Erstes müssen Sie das WPForms-Plugin installieren und aktivieren. Sie benötigen eine kostenpflichtige Version des Plugins, da das Date/Time Picker-Feld in der kostenlosen Version nicht verfügbar ist. Weitere Einzelheiten finden Sie in dieser Schritt-für-Schritt-Anleitung zur Installation eines Plugins in WordPress.
Sobald Sie das WPForms-Plugin gekauft und installiert haben, gehen Sie zu WPForms " Add New, um ein neues Formular zu erstellen.
Auf dem Einrichtungsbildschirm benennen Sie Ihr Formular und wählen die gewünschte Formularvorlage aus, die Sie verwenden möchten. Das Tolle ist, dass WPForms mit mehr als 2.000 WordPress-Formularvorlagen kommt.
In unserem Beispiel verwenden wir die Vorlage "Einfaches Kontaktformular".
Passen wir nun dieses Formular an und fügen das Datumswahlfeld hinzu.
Schritt 2: Fügen Sie die Datumsauswahl zu Ihrem WordPress-Formular hinzu
Sie können zusätzliche Felder zu Ihrer ausgewählten Formularvorlage hinzufügen, indem Sie den einfachen Drag-and-Drop-Editor von WPForms verwenden.
Ziehen Sie also das Feld Datum/Uhrzeit auf Ihr Formular, wo immer Sie es haben möchten.
Sobald es sich in Ihrem Formular befindet, können Sie es nach oben und unten ziehen, um es an einer anderen Stelle zu platzieren, und erneut auf das Feld klicken, um seine Einstellungen zu öffnen und es anzupassen.
Wenn Sie auf das Formularfeld Datum/Uhrzeit klicken, werden die folgenden Optionen angezeigt:
- Bezeichnung: Dies ist der Titel des Feldes, den die Besucher Ihrer Website in Ihrem Formular sehen werden.
- Format: Wählen Sie, ob dieses Feld sowohl das Datum als auch die Uhrzeit, nur das Datum oder nur die Uhrzeit enthalten soll.
- Beschreibung: Fügen Sie eine Beschreibung für das Feld hinzu. Dies ist ein guter Platz, um Anweisungen oder Details für Ihre Benutzer hinzuzufügen.
- Erforderlich: Aktivieren Sie diese Schaltfläche, um zu verhindern, dass Benutzer das Formular abschicken, bevor dieses Feld ausgefüllt ist.
Wenn Sie nach unten scrollen und auf Erweiterte Optionen klicken, können Sie das Datum/Uhrzeit-Picker-Feld noch weiter anpassen, wie wir weiter unten zeigen werden.
Schritt 3: Erweiterte WPForms Date Picker Anpassungen
Standardmäßig ist das Datumsauswahlfeld in WPForms auf das Format der Kalenderansicht eingestellt.
Die Formate für das Datum/Uhrzeit-Feld sind in WPForms leicht zu ändern. Klicken Sie dazu zunächst auf die Registerkarte Erweitert unter Feldoptionen. Dann können Sie die folgenden Optionen anpassen:
- Typ: Sie können zwischen Date Picker (der Standard-Kalenderansicht) oder Date Dropdown (fügt separate Dropdown-Felder für den Monat, das Datum und das Jahr hinzu) wählen.
- Format: Hier können Sie verschiedene Datumsformate auswählen (m/d/y oder t/m/y).
- Tage begrenzen: Schalten Sie diese Option ein, um festzulegen, welche Wochentage die Benutzer auswählen dürfen.
- Vergangene Daten deaktivieren: Mit dieser Option können Sie verhindern, dass Benutzer vergangene Daten auswählen.
Als Nächstes werden wir uns die Anpassungsoptionen für den Zeitabschnitt des Datum/Zeit-Feldes in WPForms ansehen.
Schritt 4: Erweiterte WPForms Zeitfeld Anpassungen
Ähnlich wie bei den Einstellungen für die Datumsauswahl können Sie auch die Optionen für den Zeitabschnitt des Feldes Datum/Uhrzeit anpassen.
Standardmäßig ist das Zeitformat auf eine 12-Stunden-Uhr mit 30-Minuten-Intervallen eingestellt:
Wie bisher können Sie die Einstellungen für das Feld "Zeit" ändern, indem Sie unter "Feldoptionen" auf die Registerkarte " Erweitert" gehen. So sehen diese Einstellungen aus:
- Intervall: WPForms lässt Sie zwischen 15-Minuten-, 30-Minuten- und 1-Stunden-Intervallen für das Zeitfeld wählen.
- Format: Sie können zwischen einer 12-Stunden-Uhr und einer 24-Stunden-Uhr wählen.
- Stunden begrenzen: Legen Sie die Zeitspanne fest, die Benutzer auswählen können.
Welches Format Sie auch immer wählen, Sie sollten wissen, dass das Date/Time Picker-Feld eine großartige Möglichkeit ist, um genaue Daten in Ihren Formularen zu erhalten. Das Datum wird immer validiert und im richtigen Format in das Datum/Uhrzeit-Auswahlfeld eingegeben.
Möchten Sie, dass jemand Ihr Datum/Uhrzeit-Picker-Formular nur einmal ausfüllt? Wenn Sie wissen möchten, wie Sie die Anzahl der Einträge für Benutzer begrenzen können, sehen Sie sich dieses Tutorial an, in dem beschrieben wird, wie Sie die Anzahl der WordPress-Formulareinträge begrenzen können.
Wenn Sie mit der Anpassung Ihrer Einstellungen fertig sind, klicken Sie auf Speichern.
Schritt 5: Konfigurieren Sie die Einstellungen des Datumsauswahlformulars
Formularbestätigungen sind Nachrichten, die den Benutzern angezeigt werden, sobald sie Ihr Formular ausgefüllt haben. Die Bestätigungen teilen den Personen mit, dass ihr Formular bearbeitet wurde, und bieten Ihnen die Möglichkeit, ihnen mitzuteilen, welche Schritte sie als nächstes unternehmen müssen.
WPForms hat 3 Bestätigungsarten zur Auswahl:
- Nachricht: Dies ist der Standard-Bestätigungstyp in WPForms. Wenn ein Website-Besucher Ihr Formular abschickt, wird eine einfache Nachricht angezeigt, die ihn darüber informiert, dass sein Formular verarbeitet wird.
- Seite anzeigen: Dieser Bestätigungstyp leitet Ihre Kunden zu einer bestimmten Webseite auf Ihrer Website weiter, auf der Sie ihnen für das Ausfüllen des Datums-/Zeitauswahlformulars danken und ihnen mitteilen, was sie als Nächstes tun müssen. Hilfe dazu finden Sie in unserem Tutorial zur Weiterleitung von Kunden auf eine Dankeseite.
- Gehe zu URL (Umleitung): Diese Option wird verwendet, wenn Sie Besucher zu einer bestimmten Seite mit verwandten Informationen auf einer anderen Website weiterleiten möchten.
So lassen Sie uns sehen, wie man eine einfache Form Bestätigung in WPForms, so dass Sie die Nachricht Leute sehen, wenn sie ihre Datum / Uhrzeit Picker Form senden anpassen können eingerichtet.
Klicken Sie zunächst im Formulareditor unter Einstellungen auf die Registerkarte Bestätigung.
Passen Sie dann die Bestätigungsnachricht nach Ihren Wünschen an und klicken Sie auf Speichern.
Hilfe zu anderen Bestätigungsarten finden Sie in unserer Dokumentation zum Einrichten von Formularbestätigungen.
Lassen Sie uns nun Ihre Formularbenachrichtigungen einrichten.
Schritt 6: Konfigurieren Sie Ihre Formularbenachrichtigungen
Möchten Sie das Datum und die Uhrzeit, zu der jemand Ihre Formulare ausfüllt, sofort in einer E-Mail erhalten? Lassen Sie uns Ihre Formularbenachrichtigungen so einrichten, dass sie genau das tun.
Mit Benachrichtigungen können Sie sich selbst, Ihre Mitarbeiter und die Person, die Ihr Formular ausgefüllt hat, automatisch per E-Mail benachrichtigen.
Wenn Sie diese Funktion nicht deaktivieren, erhalten Sie jedes Mal, wenn jemand ein Formular auf Ihrer Website ausfüllt, eine Benachrichtigung darüber.
Wenn Sie Smart Tags verwenden, können Sie sich auch nur das Datum und die Uhrzeit in Ihren Formularbenachrichtigungen zusenden lassen.
Fügen Sie dazu einfach einen Zeitstempel in Ihre Benachrichtigungs-E-Mail ein, indem Sie diesen Smart Tag verwenden - {date format="m/d/Y"}
Gut gemacht! Sie sind nun bereit, Ihr Datum/Uhrzeit-Picker-Formular in Ihre Website einzufügen.
Schritt 7: WordPress Date Picker Form zu Ihrer Website hinzufügen
WPForms ermöglicht es Ihnen, Ihre Formulare an verschiedenen Stellen in Ihrem Blog Beiträge, Seiten, Fußzeile und Ihre Seitenleiste hinzuzufügen.
Schauen wir uns die gängigste Option an: das Einbetten Ihres Formulars in einen Beitrag oder eine Seite.
Klicken Sie auf die Schaltfläche Einbetten oben rechts im Formularersteller.
Klicken Sie dann auf Neue Seite erstellen.
Geben Sie Ihrer Seite einen Namen und wählen Sie dann Los geht's.
Dies führt Sie zu Ihrem WordPress-Block-Editor für eine neue Seite, in die Ihr Formular bereits eingebettet ist. Klicken Sie auf " Veröffentlichen", um Ihr neues WordPress-Datumspicker-Formular live zu schalten.
Herzlichen Glückwunsch! Ihr Formular mit einer Datumsauswahl ist nun veröffentlicht.
Und da haben Sie es! Sie wissen jetzt, wie Sie ein WordPress-Formular mit Datumsauswahl zu Ihrer Website hinzufügen können.
Versuchen Sie es als nächstes mit Vorlagen für Geschäftsformulare
Wenn Sie Ihren Formularerstellungsprozess beschleunigen möchten, finden Sie hier einige Vorlagen für Geschäftsformulare, die Ihnen dabei helfen können.
Lesen Sie auch unsere Anleitung zum Anpassen des WordPress-Passwortrücksetzungsformulars.
Erstellen Sie jetzt Ihr WordPress-Formular
Also, worauf warten Sie noch? Starten Sie noch heute mit dem leistungsstärksten WordPress-Formular-Plugin.
Und vergessen Sie nicht: Wenn Ihnen dieser Artikel gefällt, dann folgen Sie uns bitte auf Facebook und Twitter.
Aber wie kann man eine einmal gewählte Zeit nicht mehr verfügbar machen? Ich habe eine Datumsauswahl für ein Formular erstellt, und mehrere Personen können das gleiche Datum und die gleiche Uhrzeit auswählen.
Hallo Sabrina,
Wir haben keine Funktion, die eine Übersicht über die bereits gewählten Termine bietet und die nicht gewählten Termine anzeigt. Ich bin vorgegangen und habe Ihre Stimme hinzugefügt, um diese Funktionsanfrage für zukünftige Verbesserungen zu berücksichtigen.
Aber danke für die Anregung 🙂 .
Ich brauche diese Option!
An keiner Stelle erwähnen Sie, dass wir $49 benötigen, um überhaupt eine Datumsoption zu verwenden. Danke für die Verschwendung von jedermanns Zeit
Hallo Derek - Entschuldigen Sie bitte die Verwirrung, aber das ist im ersten Schritt eindeutig erwähnt . Hier ist ein Screenshot für Ihre Referenz.
Wenn Sie weitere Fragen haben, können Sie uns diese gerne stellen. Danke 🙂
Ist es möglich, die Auswahl zukünftiger Termine einzuschränken?
z.B. 1. Erlauben Sie keine Termine am Weihnachtstag "5. Dezember
z.B. 2 Das ausgewählte Datum muss mindestens 2 Tage vor dem heutigen Datum liegen?
Danke
Hey Mark - Sicher, für die erste, können Sie diese Code-Schnipsel verwenden und anpassen, wie pro Ihre Bedürfnisse.
Für die sedond ein, können Sie diese Code-Schnipsel verwenden. Ändern Sie einfach die +1), zu sein, wie viele Tage (in Ihrem Fall können Sie +2) aus Sie den Picker beschränken möchten.
Ich hoffe, das hilft. Danke 🙂
Ich habe ein Feld für das Ankunftsdatum und ein Feld für das Abreisedatum hinzugefügt. Das Problem ist, dass ein Benutzer ein Ankunftsdatum in der Zukunft, aber ein Abfahrtsdatum vor dem Ankunftsdatum wählen kann. Gibt es eine bedingte Logik, mit der ich das Abreisedatum auf ein Datum NACH dem Ankunftsdatum begrenzen kann?
Ich danke Ihnen,
Tony
Hallo Tony- es ist möglich, dies mit WPForms zu erreichen. Sie können ein PHP-Snippet verwenden, um zwei Daten innerhalb desselben Formulars zu vergleichen, um sicherzustellen, dass das Abreisedatum gleich oder größer als das Ankunftsdatum ist. Das Snippet prüft, ob das zweite Datum kleiner oder gleich dem ersten Datum ist, und gibt in diesem Fall eine Fehlermeldung aus. Diese Funktionalität kann mit jeder WPForms-Lizenz implementiert werden
Sehen Sie sich bitte dieses Tutorial mit Details und dem benutzerdefinierten PHP-Code an, den Sie in Ihre Website eingeben müssen.
Falls es Ihnen weiterhilft, finden Sie hier unser Tutorial mit den gängigsten Methoden zum Hinzufügen von benutzerdefiniertem Code wie diesem.
Ich hoffe, das hilft. Danke 🙂