Praxistest: Terminbuchungen Einrichten mit Open-Source WordPress-Plugin «Simply Scheduled Appointments» in 30 Minuten

Gelingt es uns, in dreissig Minuten eine brauchbare Open-Source-Terminbuchungslösung für WordPress einzurichten? Wir haben nicht alle passenden Plugins im offiziellen Plugin-Verzeichnis auf WordPress.org angeschaut, aber mit 40’000 aktiven Installationen ist «Simply Scheduled Appointments» unsere erste Wahl für diesen Test.

Die Plugin-Seite:

Auf unserer Test-Site suchen wir das Plugin über die Installationsseite für neue Plugins. Wir geben das Stichwort «simply» ein und finden das Plugin sofort:

Simply Schedule Appointments einrichten

Links in der Admin-Leiste gibt es unterhalb von Einstellungen einen Eintrag Termine. Wenn du den das erste Mal klickst, öffnet sich der Einrichtungsassistent:

Ja, wir lassen uns gerne helfen. Wir sehen, dass wir die Kontaktinformationen für Termine später noch ändern werden, wollen aber mit dem Einrichten des Plugins fortfahren.

Offenbar kann man für jede Terminart, also Dienstleistungen zum Buchen, ein individuelles Layout wählen. Wir vermuten, das ist eine Art Kalender. Monatlich, ist unsere Wahl.

Das gefällt uns: Termine können in Schritten von 10 bis 60 Minuten ausgewählt werden und die täglichen Zeitblöcke kann man mit der Maus (wie oben gezeigt) einzeichnen.

Weiter geht es zu den Kundeninformationen:

Das sind die Eingabefelder im Buchungsformular im Frontend der Website. Für uns reichen die vorerst. Falls du weitere willst, und den Button Feld Hinzufügen klickst, erscheint der folgende Popup:

Um nutzerdefinierte Felder anlegen zu können, braucht es eine kostenpflichtige Version des Plugins (nach letztem Stand kostet eine Einzellizenz USD 99 im Jahr).

Wir sind fertig mit dem Einrichten dieser Dienstleistung oder Terminart. Bevor wir Done (Fertigstellen) klicken, werden wir mit eingestellten Infos präsentiert:

Wir mögen die Meldung, die wir am Ende dieses Einrichtungassistenten sehen:

Da wir nur eine Seite für die Buchung dieser einzelnen Dienstleistung einrichten, kopieren wir den Shortcode oben unter Buchungsinformationen in die Zwischenablage und schauen uns zuerst die Einstellungen an:

Unter Allgemeine Einstellungen aktualisieren die Infos zum Kontakt für Termine und fügen auch die Firmenbezeichnung ein. Die anderen Einstellungen werden wir noch später anschauen.

Wir kehren zurück zur Testseite für das Buchungsformular und nutzen den Shortcode-Block und fügen den folgenden Shortcode ein:

Erste Version des Frontend-Buchungsformulars: Es funktioniert!

Der Kalender ist etwas zusammengepresst. Bei diesem ersten Versuch war noch die voreingestellte Seitenleiste in WordPress aktiv (nicht unten im Bildschirmfoto sichtbar). Da es bei dem Test auf Ende Oktober zuging, gab es nur noch vier Tage, die buchbar und somit sichbar waren.

Uns gefällt nicht, dass der Titel Steuerberatung etwas einsam links ist, während darunter rechts der Vermerk Ihre Zeitzone steht, den wir nicht benötigen. Leider gibt es keine Einstellung, um diesen zu deaktivieren. Wir werden ihn jedoch auf eine andere Weise loswerden. Davon später mehr.

Der Kontrast zwischen dem grünlichen Hintergrund und dem Schwarzton der Schrift überzeugt nicht. Wir werden sehen, ob wir die Farben einfach ändern können.

Als nächsten Schritt wählen ein verfügbares Datum aus: den 29. Oktober:

Der Grünton als Schrift- und Randfarbe der Zeitboxen wirkt sehr dünn. Ansonsten gefällt uns die Trennung von Vormittag und Nachmittag in zwei Spalten.

Wir wählen das Zeitfenster 10:00 bis 10:30 aus. Jetzt fällt auf, dass die Datums und Zeitangabe etwas unterhalb des Titels untergeht, zu dicht am Titel und zu klein ist.

Die Farben des Buttons – Hintergrund und Text – kollidieren eindeutig. Wir klicken Diesen Termin Buchen:

Die Bestätigung kommt sofort im Browser:

Und hier ist die Bestätigung per E-Mail:

Alles funktioniert in weniger als 30 Minuten. Doch wie können wir das Buchungsformular und die E-Mails stylen?

Wir gehen zurück in die Einstellungen und wählen Stile:

Was uns hier besonders gefällt, ist dass das Kontrastverhältnis angezeigt wird. Wir wählen als Akzentfarbe die Hexfarbe #000000, oder ganz einfach schwarz. Die Hintergrundfarbe ist weiss:

Massgeschneidertes CSS direkt in Simply Schedule Appointments nutzen

Das Plugin bietet auf der offiziellen Produkt-Website eine umfangreiche Dokumentation an, auch für Entwickler, die mit CSS (Cascading Style Sheets) das Design von Buchungsformularelementen ändern wollen.

Das Link: https://simplyscheduleappointments.com/help-center/features/developers/developer-css/.

Nachdem wir den Hintergrund und die Textfarbe geändert haben, wollen wir die Struktur des Buchungsformulars anpassen. Zuerst muss der Vermerk zur Zeitzone weg.

Weiter möchten wir den Termintitel Steuerberatung prominenter darstellen, vor allem einmitten und den Font grösser setzen.

Damit ist aber noch nicht Schluss: Wir hätten gerne, wenn die Tage etwas sichtbarer wären, auch jene, die bereits in der Vergangenheit liegen.

So sieht es vor den Anpassungen aus (Farben sind bereits geändert, siehe oben):

Und beim letzten Schritt, vor der Bestätigung des Termins, möchten wir die Datums- und Zeitangabe ebenfalls herausstechender machen:

Es gäbe viele WordPress-Plugins, mit denen man ohne Zugriff auf sensitive Dateien, wie das CSS-Stylesheet der Website, massgeschneidertes CSS für einzelne Bereiche hinzufügen kann.

Wir mögen es, dass «Simply Scheduled Appointments» in den Einstellungen (Stile) ein Feld für solchen CSS-Code implementiert hat:

Unser Code-Snippet (Schnipsel) für das Buchung-Styling

Damit Entwickler weltweit mit Code wie CSS arbeiten können, beschreiben wir die einzelnen Elemente, also wo der Code Anwendung findet, immer in English. In CSS macht man das mit Kommentare im Stil: /* für den Anfang des Kommentars und */ am Ende. Alles zwischen dieser Kennzeichnung wird im Webbrowser nicht angezeigt.

Wenn für dich CSS neu ist, empfehlen wir auf Deutsch die kurze Übersicht auf Wikipedia: https://de.wikipedia.org/wiki/Cascading_Style_Sheets

Für eine Einführung direkt mit Beispielen zum Ausprobieren empfehlen wir w3schools.com: https://www.w3schools.com/css/css_intro.asp. Direkt im Browser, ohnen irgendwas installieren zu müssen, kannst du mit CSS experimentieren. So lernt man CSS ganz schnell.

Hier unser Code-Vorschlag, den wir in das Feld Individuelles CSS eingefügt und gespeichert haben:

/*Hide the timezone on the appointment selection screens*/
body .booking .booking-header .timezone {
  display: none;
}
.md-layout.md-alignment-top-space-between {
  display: block;
}
body .booking-header {
  text-align: center;
  padding-bottom: 25px;
}
.md-title.ssa-type-header {
  font-size: 1.5rem;
}
/*Styling Calendar*/
.monthly .book-day button.md-whiteframe.md-whiteframe {
  border-radius: 10%;
  border: 1px solid lightgrey;
}
.monthly .book-day {
  padding-top: 2px;
  padding-bottom: 2px;
}
.monthly .book-day button.md-whiteframe.selectable.md-elevation-2.md-whiteframe-2dp {
  box-shadow: none;
  border: 1px solid #333 !important;
}
/*Styling Booking Form Submit*/
.mdc-card .md-subhead {
  font-weight: 400;
  line-height: 3;
  opacity: 1;
  font-size: 1.1rem;
}
.small.appointment-timezone {
  display: none;
}
span.appointment-start-d::after {
  content: " | ";
}
/*Responsive Monthly Calendar - Days limited to 4 per row*/
@media (max-width: 600px) {
  body.wp-embed-responsive {
    padding: 0;
  }
  ul.week {
    display: none;
  }
  .calendar-days.monthly>div {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 25%;
    flex-wrap: wrap;
  }
}

Ansicht endgültiges Buchung-Styling

Das ist unsere Version für das Styling das monatlichen Kalenders in der Breite für Deskop-Grösse (also je nach Theme etwas 1000 Pixel Breite und grösser):

Sieben Tage, d.h. sieben Spalten in die Bildschirmbreite bei mobilen Telefonen (meistens so um die 400 Pixel, hängt vom Modell ab) zu pressen, macht die Reihe der Wochentage zu eng. Mit Fingern könnte man kaum die Tage über Touch auswählen.

Wir haben uns deshalb für ein Design mit maximal vier Tagen pro Reihe entschieden und die Beschriftung der Wochentage ausgeblendet:

Beim letzten Schritt haben wir das Datum und die Zeitangabe grösser und sichtbarer gemacht und eine Trennung eingefügt:

E-Mail Styling mit dem Plugin Email Templates

«Simply Scheduled Appointments» könnte vielleicht in der Zukunft HTML Mail-Vorlagen ins Plugin einbauen. Im Moment sind in der Open-Source-Version nur die einzelnen Texte, also keine Möglichkeit z.B. einen Header mit Logo usw. einzubauen.

Wir finden es in Ordnung, dass «Simply Scheduled Appointments» ein Plugin empfiehlt, mit dem man selbst E-Mail-Benachrichtungen gestalten kann: «Custom Email Styles for Notifications».

Das Plugin heisst Email Templates (den Rest des Plugin-Namens lassen wir mal weg):

Das Plugin hat leider keine wirklichen Vorlagen. Dafür braucht man im Gegensatz zu anderen Plugins, die das Layout von WordPress-Mails gestalten können, keine HTML-Kenntnisse, um am Design von allgemeinen E-Mails in WordPress (also die innerhalb WordPress ausgelöst werden) etwas zu ändern.

Wir haben für den Test ganz einfach das Logo eingefügt und den Footer etwas angepasst:

Die empfangene Mail:

Selbstverständlich muss der Text und auch die Betreffzeile der Mails noch geändert werden. Falls du dieses Plugin für deine Website nutzen willst, findest du die Einstellungen dafür unter Einstellungen > Benachrichtungen:

Damit wären wir am Ende dieses Praxistests. Wir haben es unter dreissig Minuten geschafft, eine funktionierende Online-Lösung in WordPress für Terminbuchungen einzurichten. Das richtige Styling zu finden, – geben wir gerne zu -, benötigte etwas mehr Zeit.

«Simply Schedule Appointments» überzeugt in der kostenlosen und quelloffenen Version. Die kommerzielle Version bietet ein Haufen zusätzlicher Möglichkeiten, z.B. Zahlungsmöglichkeit beim Buchen, Anbindung an Mailchimp, Zoom usw.

Wenn du Fragen oder Meinungen zu diesem Plugin hast, schreib uns gerne im Kommentarfeld unten. Danke!