WP Fluent Forms für Hotels

Das WordPress-Plugin WP Fluent Forms bietet schon in der kostenlosen Version jede Menge Optionen, um sehr einfach sehr schöne Formulare zu entwerfen.

Neben dem hervorragenden Online-Formulareditor gibts viele weitere Einstell- und Anpassungsmöglichkeiten und Funktionen, die andere Formular-Plugins entweder gar nicht oder nur in der Pro-Version anbieten.

Top Support

Doch damit nicht genug: Wenns mal klemmt, hilft der kompetente, schnelle und freundliche Support weiter. Selbst dann, wenns um eine individuelle „Custom“-Anpassung geht. Und selbst dann, wenn man (noch) kein zahlender Kunde ist.

WP Fluent Forms für Buchungsanfrage-Formular

Aktuell hatte ich die Anforderung, in einem Buchungsanfrage-Formular für ein Hotel ein Datumsfeld für die An- und eins für die Abreise einzubauen.

Dabei sollte die Anreise natürlich erst ab dem heutigen Datum gebucht werden können. Und das Abreisedatum sollte mindestens einen Tag nach dem Anreisedatum liegen.

Außerdem sollen die Daten im Datumsformat d.m.Y eingetragen werden. Der Datepicker liefert das Datum nämlich standardmäßig im Format Y-m-d.

Alex Sanchez von wpmanageninja.com war so nett, mir die Lösung zu programmieren – nochmal herzlichen Dank dafür!

Anleitung

  1. Datumsfelder Anreisedatum und Abreisedatum ins Formular einfügen
  2. Unter Input Customization -> Advanced Options -> Elementklasse dem Feld Anreisedatum die Elementklasse in-date und dem Feld Abreisedatum die Elementklasse out-date zuweisen.
  3. Im Formulareditor oben auf Einstellungen & Integrationen -> Formular Einstellungen -> Benutzerdefiniertes CSS/JS
  4. Ins Feld Custom Javascript diesen Code einfügen:
// booking date check in > check out
$( document ).ready(function() {
var Anreisedatum = flatpickr(".in-date", { minDate: "today" ,dateFormat: "d.m.Y"});
var Abreisedatum = flatpickr(".out-date", { minDate: "today" ,dateFormat: "d.m.Y"});
Anreisedatum.element.addEventListener("change", function(){ Abreisedatum.set( "minDate" , Anreisedatum.element.value ); Abreisedatum.set( "disable" , [Anreisedatum.element.value] ); }); Abreisedatum.element.addEventListener("change", function(){ Anreisedatum.set( "maxDate" , Abreisedatum.element.value ); });
});

Save CSS and JS -> fertig!