WordPress Contact Form 7 integrierte Fallback Lösung für Date Fields

Folgendes war mein Problem:

Ich hatte das Contact Form 7 Plugin im Einsatz und wollte für eine Terminangabe den Datepicker einsetzen.
Ohne den Datepicker sind die Nutzer gezwungen, im Date Field des Formulares die Datumsangabe nach dem Schema YYY-MM-DD einzugeben, also 2015-09-01 für den 1. September 2015. So füllt natürlich nur ein Programmierer ein Datumsfeld aus, aber kein normaler Mensch.

Früher gab es für so etwas das Datepicker Plugin, ein Add-on für CF7. Da poppte dann ein jquery erzeugtes GUI auf, über das man einfach graphisch das Datum auswählen konnte. Soweit , so schön. Der Datepicker hatte leider die Angewohnheit, dass er nur bis zu einem CF7- oder WordPress Update funktionierte. Auch machten ihm manche neuen Browserversionen einen Strich durch die Rechnung.

Das date field mit Datumsauswahl bei Contact Form 7

Datepicker CF 7

Nun gibt es die tollen HTML5 Input Felder wie date, number, email usw., die alles viel bequemer handhaben. Beim date field braucht man nun kein zusätzliches Datepicker Add-on mehr, um aus einer graphischen Kalenderübersicht einen Termin auszuwählen. Auch CF7 kann mit diesen HTML5 input Typen umgehen und erzeugt einfache Auswahlkalender beim Klicken in das Feld.
Doch leider, leider …

Leider beherrscht der Firefox Browser den Umgang mit HTML5 Feldern nicht oder nur unzureichend. Das date field fällt auf ein stinknormales text field zurück und der Formularausfüller muss den Termin wieder in der gewünschten Notation eingeben.

Fallback Lösung via functions.php

Ergänzt eure functions.php im Themeordner um diese Zeile Code:

add_filter( 'wpcf7_support_html5', '__return_false' );

Danach ist auch der Firefox in der Lage, beim date field in einem Contact Form 7 Formular eine Kalender GUI anzuzeigen.

Ihr müsst natürlich bedenken, dass bei einem nächsten Theme Update die functions.php mit all euren Anpassungen überschrieben werden kann. Entweder, ihr erstellt euch ein Child Theme oder ihr benutzt das tolle Code Snippets Plugin, das ich schon einmal vorgestellt habe. Das rettet echt Menschenleben!

Angabe von relativen Minimum und Maximum Werten

Ach nochwas: Beim date field in CF7 kann man Minimum und Maximum Werte bei den Terminen angeben. Und zwar nicht nur absolute Daten sondern auch relative. Zum Beispiel kann man sagen, dass Termine frühestens mit einem Vorlauf von 5 Tagen eingetragen werden können. Diese relativen Angaben kann man wiederum nicht in der Bearbeitungsansicht des CF7 Formulas eintragen, weil der sie nicht akzeptiert. Ganz schön clever, was? Diese Angaben müsst ihr händisch hinzufügen. Erstellt also den Shortcode für dieses Feld, setzt ihn in das Formular ein und ändert ihn dann per Hand ab. Mit unserem Beispiel von 5 Tagen ab heute gerechnet, würde das dann so aussehen:

[date date-0815 min:today+5days]

Dann kann man als frühesten Termin nur ein Datum 5 Tage ab heute eintragen. In der Kalender-GUI Übersicht sind dann die ersten 4 Tage auch ausgegraut und nicht wählbar. Praktisch, oder?
Das geht natürlich auch mit dem Maximum Wert und dazu können auch Tages- oder Wochenangaben gemacht werden.

Ein Kommentar:

  1. Hallo, das einzige Problem ist nun, dass der Kalender auf Englisch ist (in FireFox). Mit den HTML5 Input Felder ist es in Chrome halt multilingual.

    Kann man die Sprache für Deutsch anpassen?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.