Der Formular-Designer #

Schön, dass du dich mit dem Formular-Designer beschäftigst! Mit ihm baust du dir in wenigen Minuten eigene Formulare – vom einfachen Kontaktformular bis zur ausführlichen Umfrage – ganz ohne eine Zeile Code zu schreiben. In dieser Anleitung zeige ich dir Schritt für Schritt, wie alles funktioniert.

Was ist der Formular-Designer? #

Der Formular-Designer ist dein Baukasten für Formulare in Bobaro. Du ziehst Felder per Drag & Drop in dein Formular, passt das Aussehen an und entscheidest, was mit den eingehenden Nachrichten passieren soll. Am Ende bekommst du einen kurzen Code ({formular:ID}), den du überall in deinen Artikeln, Seiten oder im Kontaktformular einsetzen kannst.

Ein neues Formular anlegen #

Öffne den Formular-Designer über dein Dashboard. Dort siehst du eine Übersicht aller bisher angelegten Formulare, jeweils mit der Anzahl ihrer Felder und eingegangenen Einsendungen. Über den Button "Neues Formular" legst du ein frisches Formular an. Gib ihm direkt oben im Titel-Feld einen aussagekräftigen Namen – das hilft dir später, wenn du mehrere Formulare verwaltest.

Die Felder-Palette #

Auf der linken Seite findest du alle verfügbaren Feldtypen, unterteilt in zwei Gruppen:

Eingabefelder #

• Textfeld – für kurze Texteingaben wie Namen
• E-Mail – mit eingebauter Format-Prüfung
• Textarea – für längere Nachrichten
• Zahl – nur numerische Eingaben
• Telefon – für Telefonnummern
• Datum – ein Datumsauswahlfeld
• Uhrzeit – ein Uhrzeit-Auswahlfeld
• Dropdown – eine Auswahlliste mit mehreren Optionen
• Optionsfelder – Radio-Buttons für eine einzige Auswahl aus mehreren
• Checkboxen – für Mehrfachauswahl
• Akzeptieren – ein Zustimmungsfeld, ideal für die Datenschutzerklärung. Hier darf sogar HTML rein, zum Beispiel ein Link zu deiner Datenschutzseite
• Datei-Upload – lässt Besucher Dateien hochladen, mit einstellbaren erlaubten Dateitypen und einer Maximalgröße
• Captcha (Mathe) – eine kleine Rechenaufgabe gegen Spam-Bots

Inhalt und Aktionen #

• Text / Label – für erklärende Texte zwischen den Feldern, HTML ist hier erlaubt
• Trennlinie – eine optische Trennung
• Senden-Button, Reset-Button, Abbrechen-Button, Drucken-Button – die Aktionsschaltflächen für dein Formular

Felder anordnen und bearbeiten #

Jede Feldkarte hat links einen kleinen Ziehpunkt – daran kannst du das Feld einfach per Drag & Drop an eine andere Stelle im Formular verschieben. Über das Stift-Symbol öffnest du die Detaileinstellungen eines Feldes: Bezeichnung, Platzhaltertext, ob das Feld ein Pflichtfeld ist, und je nach Feldtyp weitere Optionen wie erlaubte Dateiformate beim Upload oder die Auswahlmöglichkeiten bei Dropdown und Optionsfeldern. Über das Mülleimer-Symbol entfernst du ein Feld wieder.

Aussehen anpassen #

Im Bereich Darstellung stellst du das Erscheinungsbild deines Formulars ein:

• Eckenradius – wie stark die Ecken von Eingabefeldern und Buttons abgerundet sind
• Schriftgröße – die Textgröße im gesamten Formular
• Innenabstand – wie viel Platz in den Eingabefeldern ist
• Schatten – ein dezenter Schatten für mehr Tiefe
• Layout – Felder untereinander oder, wo es passt, nebeneinander

Speicherung der Einsendungen #

Im Bereich Speicherung entscheidest du, ob eingehende Nachrichten zusätzlich zur E-Mail auch auf deinem Server gespeichert werden. Ist das aktiviert, kannst du Einsendungen später jederzeit im Formular-Designer nachlesen. Denk in diesem Fall daran, deine Nutzer im Akzeptieren-Feld und in deiner Datenschutzerklärung entsprechend zu informieren – ein Hinweis dazu erscheint dir direkt im Designer.

Ist die Speicherung deaktiviert, werden hochgeladene Dateianhänge trotzdem kurzzeitig zwischengespeichert, damit sie per E-Mail verschickt werden können. Diese Dateien räumt Bobaro automatisch nach sieben Tagen auf – du kannst sie aber auch jederzeit selbst über "Anhänge verwalten" in der Formular-Übersicht einsehen und sofort löschen.

Einsendungen verwalten #

Hast du die Speicherung aktiviert, findest du bei jedem Formular einen Link zu seinen Einsendungen. Dort siehst du jede eingegangene Nachricht mit allen ausgefüllten Feldern, angehängten Dateien und Datum. Für jede Nachricht stehen dir folgende Möglichkeiten zur Verfügung:

• Als gelesen / ungelesen markieren – damit du den Überblick behältst, welche Nachrichten du dir schon angeschaut hast. Das ist unabhängig davon, ob du bereits geantwortet hast
• Antworten – schreib direkt aus dem Designer heraus eine Antwort-E-Mail an den Absender
• Löschen – entfernt die Einsendung inklusive eventueller Dateianhänge vollständig

Formulare überprüfen lassen #

Über die Diagnose-Funktion deines Blogs kannst du jederzeit checken lassen, ob all deine angelegten Formulare auch wirklich irgendwo verwendet werden. Unbenutzte Formulare fallen dir dort sofort auf, sodass du aufräumen kannst, falls mal eines übrig bleibt.

Formulare im Editor verwenden #

Sobald dein Formular fertig eingerichtet ist, kannst du es überall einsetzen. Öffne dazu im Artikel-Editor das Menü Inhalt in der Werkzeugleiste und klick auf "Formular einfügen…". Hast du nur ein Formular angelegt, wird es direkt eingefügt. Bei mehreren Formularen erscheint eine kleine Auswahlliste, aus der du das gewünschte anklickst. Im Hintergrund fügt Bobaro dabei den Kurzbefehl {formular:ID} in deinen Text ein – den kannst du übrigens auch von Hand eintippen, wenn du die ID deines Formulars schon kennst.

Über das Menü Verwalten in der Werkzeugleiste findest du außerdem jederzeit den Punkt "Formulare verwalten", der dir direkten Zugriff auf den Formular-Designer gibt, ganz ohne den Editor verlassen zu müssen.

Formulare im Kontaktformular verwenden #

Du musst dich nicht mit dem eingebauten Standard-Kontaktformular begnügen. In den Einstellungen, im Bereich Kontaktformular, kannst du unter Formular-Typ zwischen "Standard-Formular" und "Eigenes Formular" wählen. Entscheidest du dich für ein eigenes Formular, wählst du direkt darunter aus, welches deiner im Formular-Designer angelegten Formulare eingesetzt werden soll. Titel und Untertitel deines Kontaktformulars bleiben dabei erhalten – nur der eigentliche Formularteil wird durch dein selbst gestaltetes Formular ersetzt. Beachte dabei, dass Danke-Titel und Danke-Untertitel dann nicht mehr greifen, weil dein eigenes Formular seine eigene Erfolgsmeldung mitbringt.

Über den Button "Zum Formulardesigner" direkt neben der Formular-Auswahl kommst du übrigens blitzschnell dorthin, falls du erst noch ein passendes Formular anlegen möchtest.

Und jetzt: leg los! #

Das war schon alles, was du über den Formular-Designer wissen musst. Fang am besten mit einem einfachen Formular an – zum Beispiel einem kurzen Feedback-Formular – und taste dich von dort aus an komplexere Formulare mit Datei-Upload und eigenem Design heran. Viel Freude damit!