WordPress: Kontaktformulare erstellen mit optionaler Kopie für Absender

Mailto oder Kontaktformular - oft ist das die Frage

Soll ich für die Kontaktseite meiner Homepage ein schickes Kontaktformular anbieten oder doch nur eine Mailadresse, die der Besucher anklicken kann, um das lokal installierte Mailprogramm aufzurufen? Für die Beantwortung der Frage stellt man sich in die Position des Besuchers: was mag man mehr? Welche Erfahrungen hat man bisher gemacht?

Mailto - Web 1.0

Mailto steht für den Parameter des href-Attributs im Anchor-Tag <a href="mailto:mail@domain.tld">Mailadresse</a> mit dem der Browser angewiesen wird, den Standard Mailclient aufzurufen und das To: Feld mit der angegebenen Adresse vorauszufüllen. Es ist sogar möglich weitere Felder vorzudefinieren wie zum Beispiel die Betreffzeile oder sogar Text für den Inhalt der Mail.
Beispiel: <a href="mailto:mail@domain.tld?subject=Dies%20ist%20der%Betreff&body=Mailinhalt">Mailadresse mit vorausgefüllten Felder</a>. Weil in dem href-Bereich Leer- und andere Sonderzeichen nicht erlaubt sind, müssen diese mit HEX-Codes (%20) ersetzt werden.
Was man da alles machen klingt super, aber es gibt auch Kritik bzw. Probleme:

  • Wenn kein Mailprogramm auf dem Gerät installiert ist, passiert nichts (ggf. wird der Browser geöffnet, wenn man z. B. Gmail Nutzer ist). Immerhin kann man die Adresse aufschreiben und zu einem späteren Zeitpunkt eine Nachricht schicken.
  • Bösartige Crawler scannen alle Seiten von Websites nach Mailadressen und nutzen diese dann um Spam zu schicken (an die Adresse, oder als Absender). Das stimmt zwar, aber oftmals wird eh nur die info@-Mailadresse angegeben und diese Mailadresse wird so oder so von Spammern benutzt, da sie in den meisten Fällen einfach existiert.
  • Möchte man von Personen, bestimmte Informationen etwa für eine weitere Kontaktaufnahme oder sicherstellen, dass die Person Kunde ist, kommt man mit dem Mailto-Link nicht besonders weit.

Kontaktformular 1.0

Kontaktformulare gibt es nicht erst seit gestern. Die Qualität der Formulare hat sich aber im Durchschnitt deutlich verbessert, wohl deshalb, dass immer mehr Website-Betreiber ein CMS nutzen (die meisten WordPress) und dabei Erweiterungen einsetzen, die nur diese eine Funktion beherrschen, diese aber sehr gut.

Aber zurück zu den alten Formularen: oftmals waren diese nicht nur Buggy und ohne Validierung (man konnte sie ggf. sogar leer abschicken) weshalb man schon Zweifel hegte, dass die Nachrichten jemanden erreichen. Hinzu kam, dass der Absender selten eine Kopie seiner Nachricht erhalten hat, sodass ggf. wichtige Informationen für eine spätere Kommunikation einfach gefehlt haben.

Nutzerfreundliche Kontaktformulare mit Gravity Forms erstellen

Für WordPress gibt es zahlreiche Formular-Plugins, darunter auch kostenfreie wie Contact Form 7. Contact Form 7 ist sehr populär (mehrere Millionen aktive Installationen) und vertrauenswürdig.

Wir werden das Beispiel-Kontaktformular aber mit Gravity Forms erstellen, ein besonders ergonomisches Formular-Plugin, allerdings kostenpflichtig. Ich erwähne hier vielleicht mal, dass die Nutzung von Gravity Forms in den Managed WordPress Hosting Tarifen von SaaS Web kostenfrei ist.

Was können moderne Formulare...

.. oder was sollten sie können.

Zunächst für die Anwenderseite:

  • Responsive Layout, das Formular soll auf allen Endgeräten nutzbar sein
  • Klar beschriftete Felder, auch ob Pflichtfeld oder optional
  • Speicherung von bereits eingegebenen Daten bei Validierung, ggf. dynamische Validierung ohne Möglichkeit, das Formular abzuschicken bevor die benötigten Felder alle korrekt ausgefüllt wurden

Für die Barrierefreundlichkeit könnte man sich noch wünschen, dass:

  • Die einzelnen Formularfelder sollten in der richtigen Reihenfolge per Tab angesteuert werden
  • Die Felder sollten mit den wichtigen Attributen beschrieben werden, die z. B. Screenreader

Nun aus der Betreiberseite:

  • Einfache Erstellung des Formulars, z. B.
    • Felder mit vorgefertigten Funktionen zur Auswahl (Text, E-Mail, Telefon, Mehrfach-Auswahl...) und entsprechender Validierung
    • Validierung individuell anpassen, z. B. Pflichtfeld ja/nein
    • Konditionallogik: bestimmtes Feld anzeigen, wenn ein anderes ausgefüllt/angehakt wird
    • Felder per Drag & Drop zusammenstellen
  • Formulardaten an Betreiber oder weitere Personen schicken
  • Absender nach Abschicken der Daten über erfolgreichen Versand informieren, eventuell auf eine bestimmte Seite weiterleiten
  • Absender die Möglichkeit geben, eine Kopie der eingegebenen Daten zu erhalten

Für Designer und Admins ganz praktisch:

  • Formularfelder können mit selbstdefinierten CSS-Klassen erweitert werden
  • Optionale Honeypot- oder Captcha-Funktion

Formular Grundstruktur erstellen

Nach der Installation von Gravity Forms, kann man ein erstes Formular erstellen - dafür muss lediglich ein Name vergeben werden. Anschließend kann man die Felder bestimmen.

  • Schritt 1: wir erstellen eine Checkbox, die der Nutzer anhaken kann, falls er die Kopie per E-Mail bekommen möchte
  • Schritt 2: wir erstellen die Benachrichtigung inklusive der Logik, dass diese nur geschickt wird, wenn das Feld angehakt wurde

Option einbauen um als Absender Kopie der Daten zu erhalten

Schritt 1 wird einfach in der Formularerstellungsseite durchgeführt. Checkbox-Feld von rechts an die gewünschte Stelle mit der Maus schieben. Auch können wir die Checkbox als Default anhaken.

Für den zweiten Schritt muss man die Option "Einstellungen" > "Benachrichtigung" innerhalb des ausgewählten Formulars anklicken. Hier haben wir folgende Einstellungen vorgenommen:

  • Name: es ist ein Pflichtfeld, aber eigentlich unwichtig
  • Senden an festgelegt: "Wähle Feld aus" > "E-Mail" aus dem Dropdown-Feld ausgewähl; wenn Sie das E-Mail Feld anders benannt haben, tauch in der Auswahlliste natürlich ein anderer Name auf. Bitte beachten Sie, dass das E-Mail Feld auch ein Pflichtfeld ist, sonst funktioniert es natürlich nicht...
  • Von-Name: das sieht der Nutzer des Formulars als Absender der E-Mail
  • Absender E-Mail: kann geändert werden; habe ich so gelassen wie voreingestellt
  • Betreff: das ist die Betreffzeile der E-Mail
  • Nachricht: hier gibt es die Möglichkeit die ausgefüllten Felder als Funktion einzufügen. Dazu klicken Sie auf das Symbol rechts neben visuellen Editor. Sie können natürlich auch eine persönliche Begrüßung einbauen oder anderen Text hinzufügen.
  • Bedingte Logik: Häkchen um die Logik zu aktivieren. Anschließend, das Feld auswählen, welches als Kondition dienen soll und welcher Zustand erfüllt sein soll

So einfach geht's mit Gravity Forms

Prinzipiell kann man sich die Auswahlmöglichkeit für den Versand der eingegebenen Daten an den Absender auch sparen und immer eine Mail schicken.. aber gerade Personen, die in der Vergangenheit schlechte Erfahrungen gemacht haben, könnten so darauf aufmerksam gemacht werden, dass es passieren wird.

Um die ganz oben angefangene Diskussion abzuschließen: warum nicht beides anbieten? Die Mailadresse anzeigen und ein Formular anzeigen.. dann kann ein Besucher selbst entscheiden und wird das nutzen, was ihm am Besten liegt.

WordPress: individuelle Layouts mit dem SiteOrigin Page Builder

WordPress braucht Erweiterungen

Ein bisschen Background

WordPress war vor einigen Jahren noch ein einfaches Blogsystem, daher waren komplexe Layouts für Seiten und Artikel nicht wirklich von Bedeutung. WordPress ist inzwischen aber das verbreiteste System für die Erstellung von privaten und geschäftlichen Websites, sogar von Online-Shops.

WordPress bietet daher standardmäßig immer nur ein Inhaltsfeld pro Seite oder Artikel, den man mit dem visuellen Editor bearbeiten kann. Darin lassen sich bekannterweise auch Medien integrieren, beispielsweise Bilder oder Videos. Ergänzend dazu können Shortcodes verwendet werden um andere Inhalte, etwa von anderen Plugins erstellte, in den Content-Bereich zu platzieren.

SiteOrgin ist DIE Erweiterung

Kostenlos aber wertvoll

SiteOrigin ist ein Page Builder Plugin, das die Funktionalität von WordPress im Bereich der Inhaltsverwaltung (extrem) erweitert. Mit dem Page Builder lassen sich im Prinzip Theme-unabhängig, soweit das Theme den Nutzer nicht schon zwangsbeglückt, beliebige Inhalte einfügen und Inhaltsstrukturen erstellen. Wichtig zu wissen ist, dass SiteOrigin eine Struktur erstellt, die sich responsive verhält - sofern die Widgets mitspielen (die Widgets aus dem Bundle sind alle responsive).

Es gibt eine Premium Erweiterung für den SiteOrigin Page Builder, mit der zusätzliche Widgets zur bestehenden Auswahl hinzugefügt werden können. Ehrlich gesagt kommt aber ohne "Premium" aber sehr gut aus.

Individuelle Struktur erstellen

Einmal installiert und aktiviert, bietet WordPress neben dem visuellen und dem Text-Editor einen Tab, "Page Builder". Im Page Builder Modus ändert sich der Editor komplett. Es kann nicht mehr direkt Text eingegeben werden, sondern man muss zuerst die Inhaltsstruktur vorgeben: dazu erstellt man Zeilen, die in Spalten aufgeteilt werden können. Zu jedem erstellten Bereich kann man ein oder mehrere Widgets einfügen - die Widgets sind dann letztendlich die tatsächlichen Inhalte.

Interessant ist auch die Möglichkeit den Page Builder selbst zu verschachteln: der Page Builder lässt sich als Widget einfügen und darin kann man eine neue Struktur erstellen.

Inhalte werden via Widgets eingefügt

Mit dem Page Builder lassen sich beliebige Widgets einfügen also auch die, die mit WordPress bereits, oder solche die von installierten Plugins zur Verfügung gestellt werden. Besonders interessant sind die Widget-Plugins, die man sich zusätzlich installieren kann, z. B. vom SiteOrigin Widgets Bundle. Wenn man Effekte mag, gibt es auch Erweiterungen für Spezialeffekte wie z. B. mit dem Plugin SO Page Builder Animate.

Inhalte über die volle Bildschirmbreite anzeigen

In der Strukturübersicht lassen sich für jede Zeile individuelle Einstellungen setzen - praktisch ist zum Beispiel eine Row ID (CSS ID für die Zeile), wenn man sich mit CSS auskennt - und somit das Seitenlayout für sein Projekt pixelgenau definieren. Eine besondere Einstellung in der Sektion "Layout" ist die Option "Gesamte Breite". Damit lässt sich die Zeile über die gesamte Bildschirmbreite strecken. Die Inhalte bleiben jedoch mit den anderen bündig (meist ist der Inhaltsbereich ein zentrierter Bereich im Browserfenster); wird die Option "Gesamte Breite gestreckt" genommen, wird auch der Inhalt über die gesamte Bildschirmbreite gestreckt - diese Option wird meist für Slider oder Headerbilder genutzt.

Etwas Fine Tuning

Die Grundstruktur einmal angelegt, die Inhalte via Widgets eingefügt, ist eigentlich alles gut. Es gibt jedoch noch Stellschrauben mit denen sich verschiedene Parameter individuell drehen lassen. Ein wichtiger Punkt wären die Breakpoints - die Breite des Browsers in Pixel zu der, die Spalten "zusammenfließen", um beispielsweise zweispaltige Inhalte mobil einspaltig anzuzeigen.

SiteOrigin im Vergleich zu anderen Page Builder

Natürlich gibt es nicht nur den Page Builder von SiteOrigin. Hier sind weitere gelistet:

  • Divi Builder, Elegant Themes (kostenpflichtig).
  • Elementor, Elementor (Freemium)
  • Virtual Composer, WP Bakery (kostenpflichtig)

Diese Page Builder gehören mit Sicherheit zu den Verbreitetsten, es gibt aber noch andere... Jeder Page Builder hat seine eigene UI, seine eigenen Funktionen, die der eine oder andere Nutzer besonders schätzt. Meines Erachtens hat aber der Page Builder von SiteOrigin einen entscheidenden Vorteil: die Inhaltselemente, die man in die selbst geschaffenen Content-Blöcken hinzufügt sind Widgets, ganz normale Widgets. Somit ist die Flexibilität besonders groß und die Erweiterbarkeit quasi unbegrenzt.

OpenProject – Schnellanleitung – Teil 2

Nachdem die elementaren Funktionen von OpenProject wie das Anlegen eines Projektes oder das Zuteilen bzw. Ändern des Status von Arbeitspaketen vorgestellt wurden, geht es nun weiter mit der Beschreibung anderer Funktionalitäten -  im Schnelldurchlauf.

Dashboard: die Projektübersicht

Damit die wichtigsten Eckdaten des Projektes auf einen Blick erfasst werden können, lassen sich die gewünschten Kenndaten  in der Projektübersicht (Dashboard) individuell zusammenlegen. Über das Zahnrad-Symbol oben rechts, kann man aus den vorgeschlagenen Funktionen auswählen welche in welches vorgegebene Feld angezeigt wird.

Der Aktivitäten Stream

Für die Visualisierung des chronologischen Ablaufs der Aktivitäten im Projekt gibt es den Activity-Stream. Hier werden alle Aktionen von der neuesten zur ältesten gelistet. Durch Verlinkung kann man von dort in die entsprechenden Arbeitspaketen springen.

Scrum - Agiles Projektmanagement

OpenProject eignet sich hervorragend für agiles Projektmanagement (Scrum). Erstellen Sie User Stories, Backlogs für die verschiedenen Sprints, evaluieren Sie die Aufwände in Story Points und organisieren Sie die Arbeit in Story Boards.

Zeiterfassung, Besprechungen, ...

Funktionen wie die Zeiterfassung, mit der Mitarbeiter zu Arbeitspaketen bzw. Backlogs ermöglichen ein detailliertes Monitoring der Aufwände. Die aufgewendete Zeit lässt sich in individuellen Zeiträumen zusammenfassen und daraus unterschiedliche Reports generieren.

Mit dem Besprechungsmodul lassen sich Meetings planen und Mitarbeiter einladen. Agenda und Protokoll können direkt in OpenProject erstellt werden.

Erfolgreich mit OpenProject und SaaS Web

Als eine in der Schweiz führende Anbieterin von Pumpen- und Systemtechnik begrüßen wir die Möglichkeit, Software zu nutzen, ohne sie auch pflegen zu müssen. Mit OpenProject managed by SaaS Web sind wir stets auf dem neuesten Stand und können unsere Projekte unter besten Bedingungen planen und ausführen.

Häny AG - Christian Vetterli, Leiter Technik und Logistik, Mitglied der Geschäftsleitung