Inhaltselement: Formular

Das Inhaltselement Formulare bietet dir sehr viele Möglichkeiten, individuelle Formulare auf deiner Webseite zu platzieren. Dieses Element ist so eingestellt, dass beim Anlegen ein Kontaktformular erzeugt wird, welches drei Eingabefelder enthält. Im Gegensatz zu Inhaltselementen, die beim Anlegen komplett leer sind, wird also ein neu angelegtes Formular sofort auf deiner Seite angezeigt. Möchtest du in Ruhe ein Formular bauen ohne dass deine Besucher etwas davon sehen, dann kannst du entweder eine unsichtbare Seite benutzen oder die Ablage.

Wie im Artikel Inhaltselemente ausführlich beschrieben, kannst du dass Formular einfach aus der Palette auf die Seite ziehen oder über die Toolbar und das Pluszeichen anlegen. Ein neues Formular besteht immer aus drei Feldern. Eines für den Namen, eines für die Email und ein mehrzeiliges Feld für die Nachricht. Das Nachrichtenfeld ist ein Pflichtfeld, kenntlich gemacht durch einen Stern rechts neben der Beschriftung (Label). Unter dem Nachrichtenfeld ist ein Button „Nachricht versenden“ angelegt. Wenn du so ein neues Kontaktformular unbearbeitet läßt, wird jede Nachricht, die ein Besucher darüber verschickt, an deine bei uns hinterlegte Email geschickt. Wenn du mit den Dialog zum Bearbeiten aufrufst, siehst du je nach Bildschirm bis zu 4 Bereiche, nämlich den Bereich „Optionen“, „Felder“, „Allgemein“ und „Eingabefeld“. Unter „Allgemein“ ist ein Feld, wo du eine Email eintragen kannst. Dieses Feld ist bei einem neu angelegten Inhaltselement leer. Wie erwähnt, wird trotzdem eine Nachricht verschickt. Daher solltest du dir folgendes merken: Wenn du möchtest, dass Nachrichten immer an die bei uns hinterlegte Email geschickt werden, dann lasse dieses Feld bitte leer. Du kannst zwar auch die bei uns hinterlegte Email eintragen. Der Nachteil dabei ist aber, wenn du diese Email ändern läßt, weil die bisherige Email nicht mehr benutzt werden soll, schickt das Formular solange Nachrichten an deine alte Adresse bis du diese manuell änderst. Läßt du das Feld dagegen frei, wird automatisch immer die aktuelle, bei uns hinterlegte Email verwendet, auch wenn du diese ändern läßt. Bevor wir erklären, wie man neue Felder anlegt, lass uns einen Blick auf die weiteren Optionen und Einstellungen werfen.

Hiermit stellst du das allgemeine Aussehen deines Formulars ein, also wie breit es ist, welche Schrift verwendet werden soll usw Breite Du kannst eine Breite zwischen 300 und 800 px einstellen. Auch das Inhaltselement Formular ist natürlich responsive „kompatibel“ was letztlich bedeutet, die Breite passt sich an, wenn die Spalte, in der das Element eingebaut ist, schmaler wird oder schmaler ist als die hier eingestellte Breite. Wenn du möchtest, dass das Formular immer den verfügbaren Platz ausnutzt, dann setze die Breite ruhig auf 800 px oder zumindest auf die Breite, welche die Spalte hat, in der das Formular eingebunden wird. Das Vorschaufeld, in dem du auch die Felder anlegst, ist in der Lage, diese 800 px in Originalgröße anzuzeigen. Wenn das Formular auf der Seite mit 500 px Breite auskommen muss, sieht es natürlich in der Vorschau anders aus, wenn du die Breite größer eingestellt hast. Labelposition Label nennt man die Beschriftung der einzelnen Felder. Alle nachfolgenden Einstellungen beziehen sich auf die Darstellung dieser Label. Du kannst 4 Positionen auswählen: Links, Rechts, Oben und Unten. Die Position bezieht sich immer im Bezug auf das dazugehörige Eingabe-Element. Wenn du die Position auf Unten stellst, dann wird das Label unter dem Feld platziert, für das es vorgesehen ist. Diese Einstellung wird in der Vorschau auch sofort dargestellt. Labelbreite Manchmal ist es notwendig, ein Feld etwas ausführlicher zu beschriften. Wenn ein Text nicht mehr in den verfügbaren Platz passt, dann wird der Text vom Label in zwei Zeilen dargestellt. Mit der Option „Labelbreite“ kannst du bestimmen, wie viel vom verfügbaren Platz soll für das Label reserviert werden, bevor der Text in zwei Zeilen umbricht. Du kannst Werte zwischen 10 und 60% eingeben. Weniger macht keinen Sinn, denn einen gewissen Platz brauchst du immer für ein Label, auch wenn es nur aus einem Buchstaben bestehen sollte. Mehr Platz macht auch keinen Sinn, da auch die Eingabefelder natürlich einen gewissen Platz brauchen. Damit du diese Werte nicht ständig ändern musst, wenn du die Breite veränderst, werden sie in Prozent von der Gesamtbreite angegeben. Hast du das Label links oder rechts, die Breite auf 500 px und die Labelbreite auf 50%, dann sind für die Label 250 px reserviert und für die Eingabefelder ebenfalls 250 px. Setzt du das Label auf die Position unten oder oben, dann spielt die Labelbreite keine Rolle. Beide Elemente können die volle Breite nutzen, weil sie untereinander oder übereinander stehen und sich damit gegenseitig keinen Platz in der Breite wegnehmen. Abstand Der Abstand zwischen den einzelnen Eingabefeldern kann nur gesamt geregelt werden. Du kannst Werte zwischen 0 und 25 px eintragen. Wenn der Wert auf 0 px steht, dann stehen die Felder so dicht zusammen, dass sie gerade noch als einzelne Felder erkennbar sind, also mit 1 px Abstand. Die Obergrenze von 25 px sorgt dafür, dass das Formular noch als Einheit erkannt wird. Schriftart Ausführliche Beschreibung auf der Seite „Grundfunktionen“. Mit dieser Option bestimmst du die Schriftgestaltung der Label und der Eingabefelder. Je größer die Schrift, umso höher wird automatisch auch das Eingabefeld. Wichtig: Die Schriftfarbe gilt nur für die Label, nicht für die Schriftfarbe der Eingabefelder. Für das Eingabefeld gibt es weiter unten im Dialog eigene Einstellungen. Da es keinen Sinn macht, unterschiedliche Schriftgrößen für Label und Eingabefeld zu machen, gilt die Schriftgröße für beides. Ebenso sieht es nicht gut aus, wenn das Label eine andere Schriftfamilie hat als der Text in den Eingabefeldern. Daher gilt auch hier, eine Einstellung für beides. Bei der Farbe macht es durchaus Sinn. Wenn du zum Beispiel eine völlig schwarze Webseite hast, sollten die Label in Farbe oder Weiss sein, damit man den Text lesen kann. Wenn du die Eingabefelder gerne weiss darstellen möchtest, musst du in der Lage sein, hier die Schriftfarbe auf Schwarz stellen zu können. Daher haben wir für das Eingabefeld eigene Einstellungen für den Hintergrund, die Schriftfarbe und den Rahmen. Felder Dieser Bereich dient als Vorschau und gleichzeitig dazu, neue Elemente anzulegen. Wenn du mit der Maus über ein Element fährst, siehst du, dass eine ähnliche Toolbar angezeigt wird wie beim allgemeinen Bearbeiten von Inhaltselementen. Du findest dort einen Stift, ein grünes Pluszeichen und einen roten Papierkorb. Außerdem ändert sich der Mauszeiger zu einem Verschiebepfeil und das Element wird mit einer roten gestrichelten Linie umrandet. Folgende Besonderheiten:

1. Wenn du auf den Papierkorb klickst, wird das Element ohne Warnung gelöscht. Zum einen lassen sich die meisten Elemente sehr schnell anlegen und zum anderen könntest du den gesamten Dialog mit dem Button „Abbrechen“ beenden, um das Löschen rückgängig zu machen. Allerdings werden dann alle Änderungen seit dem Öffnen ebenfalls ignoriert. Im Zweifel lieber erst speichern, dann erneut öffnen und dann löschen.
2. Wenn du mit der Maus auf ein Element klickst öffnet sich sofort der Inline-Dialog zum Bearbeiten des Elementes. Du kannst zwar auch den Stift benutzen, schneller geht es aber durch den Klick, da das ganze Element darauf reagiert.
3. Wenn du klickst und die Maus gedrückt lässt, dann kannst du per Drag&Drop das Element verschieben. Das geht natürlich nur nach oben und unten und ist sehr schnell.
4. Wenn du mehr Elemente hinzufügst, dann vergrößert sich automatisch die Vorschau. Auf der rechten Seite des gesamten Dialoges erscheint dann entweder ein Scrollbalken oder falls der bereits vorhanden ist, vergrößert sich der Bereich zum Scrollen.
5. Label und Eingabefeld bilden immer eine Einheit und werden auch gemeinsam verschoben. Label bei einzeiligen Feldern stehen immer so, dass sie mit dem Text in den Eingabefeldern auf einer Höhe sind. Label bei mehrzeiligen Feldern, egal ob Textfelder, Radioboxen oder Kontrollkästchen stehen immer so, dass sie auf Höhe mit der ersten Zeile im Eingabefeld sind.
6. Du kannst jederzeit den Typ des Eingabefeldes ändern. Du kannst also aus einem einzeiligen Textfeld jederzeit ein mehrzeiliges Feld machen oder eine Auswahlliste, Kontrollkästen oder sogar eine Linie oder Überschrift. Das gute daran ist, dass angelegte Elemente zum Beispiel mehrere Felder für Kontrollkästchen nicht verloren gehen und jederzeit wieder aktiviert werden, wenn du den richtigen Typ auswählst.
7. Neue Elemente für Eingabefelder wie Kontrollkästchen werden automatisch angelegt, wenn du in das letzte leere Feld klickst. Dann erscheint nämlich ein neues letztes, leeres Feld. Ebenso verschwinden die Einträge, wenn du den Inhalt entfernst und dann das Feld verläßt. Dazu aber noch ausführlich, wenn wir das Element genauer beschreiben.

Elemente anlegen und bearbeiten Um ein neues Element für dein Formular anzulegen, benutze das grüne Pluszeichen in der Toolbar. Standardmäßig ist der Typ „Texteingabe“ ausgewählt. Da du jederzeit wechseln kannst, erklären wir dir jetzt die einzelnen Typen und was du damit machen kannst. Unter dem Label Typ findest du 5 verschiedene Typen: Überschrift Der erste Typ ist eine Überschrift. Hierfür stehen dir 2 Optionen zur Verfügung. Zum einen kannst du bestimmen, wie die Überschrift aussehen soll. Dazu hast du eine Auswahlleiste mit dem Label „Modus“. Klickst du auf „Label“ dann sieht die „Überschrift“ genauso aus wie ein Label und übernimmt immer automatisch alle Formatierungen, die du für ein Label einstellst. Dann hast du noch die Formatierungen H1 bis H4. Damit stellst du eine Verbindung zu den Formatvorlagen deiner Überschriften auf deiner Webseite her. Eine Überschrift hier im Format H1 sieht genauso aus wie eine Überschrift, hergestellt mit dem Inhaltselement Überschrift, welche du auf H1 gestellt hast. Du solltest dir die ausführlichen Anmerkungen bzgl. Suchmaschinen-Optimierung bei der Beschreibung des Inhaltselementes Überschrift durchlesen, damit du auch deine Formulare richtig anlegst. Unter dem Label „Bezeichnung“ steht dir ein Eingabefeld zur Verfügung, indem du den Text für deine Überschrift eintragen kannst. Linie Eine Linie hat keine Einstellungsmöglichkeiten, da einfach eine Standardlinie hinzugefügt wird. Texteingabe Hiermit kannst du einzeilige und mehrzeilige Text-Eingabefelder erzeugen. Dabei hast du folgende Einstellungsmöglichkeiten. Bezeichnung = Hier trägst du das Label für das Textfeld ein. Also zum Beispiel einfach „Ort“ oder „Email“ oder auch „Ich freue mich auf deine Anmerkungen:“ Längere Texte solltest du am besten mit dem Typ „Überschrift“ machen und dann über oder unter einem Textfeld platzieren. Wenn die „Überschrift“ als Label deklariert wird, sieht sie genauso aus wie das Label, was du hier erzeugst. Defaulttext = Hier trägst du einen Defaulttext ein. Beschreibung siehe weiter oben. Pflichtfeld = Hiermit markierst du ein Feld als Pflichtfeld. Beschreibung siehe weiter oben. Reihe = Hiermit kannst du angeben, wie viele Zeilen du für die Eingabe zur Verfügung hast. Für Eingabefelder, in denen der Besucher nur eine Zeile eingeben soll, verwendest du die Option 1, also eine Reihe. Sobald du einen Wert größer als 1 eingibst, also 2 Reihen oder mehr wird der Typ geändert und statt einem Textfeld eine sogenannte Textarea angelegt. Die max. Anzahl der Reihen ist auf 15 begrenzt. Höhere Felder sind nicht möglich. Die Anzahl der Reihen hat keinen Einfluss auf die Menge des Textes, der eingetragen werden kann. Breite = Normalerweise sind alle Felder gleich breit. Wenn du möchtest, dass zum Beispiel das Feld zur Eingabe der PLZ schmaler ist, kannst du je die Breite festlegen. Diese ist wieder in % angegeben, damit das gesamte Element responsive ist und optisch bei jeder Breite gut aussieht. Ist die Gesamtbreite, die für die Eingabefelder zur Verfügung steht, 400 px und du setzt die Breite auf 25%, dann ist dieses Feld nur 100 px breit. Der Unterschied zwischen einem Textfeld und einer Textarea, einem mehrzeiligen Textfeld: Bei einem einzeiligen Textfeld ist es nicht möglich, einen Absatz also Zeilenreturn zu machen. Das wird schlicht ignoriert. Du kannst einfach nur Text schreiben und wenn der Text länger ist, als das sichtbare Eingabefeld, wird der geschriebene Text nach links verschoben. Wenn du die Zeile verläßt, springt der Text je nach Browser wieder an den Anfang und der Text, der zu lang ist, wird nicht mehr angezeigt. Du kannst in den Text klicken und mit der Pfeiltaste bis an das Textende steppen oder mit gedrückter Maustaste, die du nach rechts ziehst an das Ende vom Text gelangen, um ihn zu bearbeiten oder zu lesen. Bei einem mehrzeiligen Textfeld, einer Textarea sind zum einem mindestens zwei Zeilen zu sehen. Je mehr Reihen du angibst, um zu höher wird das Eingabefeld. Außerdem bricht der Text nun automatisch um und ist komplett sichtbar, zumindest in der Breite. Wenn du mehr Zeilen geschrieben hast, als im sichtbaren Bereich angezeigt werden können, dann erscheint ein Scrollbalken rechts im Eingabefeld. Du kannst also beliebig vielen Text eintragen und mit dem Scrollbalken jederzeit zum Anfang oder Ende des Textes scrollen. Einzelauswahl Beim Feldtyp „Einzelauswahl“ gibt es zwei Typen, die hier Modus genannt werden. Dieser Modus regelt das Aussehen der Einzelauswahl. Wie der Name schon sagt, kannst du hiermit ein Element anlegen, welches mehrere Optionen anbietet, von denen aber nur eine einzige zur Zeit ausgewählt oder markiert werden kann. Gut geeignet, um Bewertungen abzufragen oder dem Besucher die Möglichkeit zu bieten, aus verschiedenen Angeboten eines auszuwählen. Modus = Combobox Eine Combobox bezeichnet man auch als Kombinationsfeld oder Auswahlliste. Man klappt die Liste auf und kann dann aus vorhandenen Einträgen einen Eintrag auswählen. Der Vorteil einer Combobox - man spart Platz, da lediglich einen Zeile benötigt wird und die Listeneinträge beim Aufklappen nach unten über die darunter liegenden Felder dargestellt wird. Das Aussehen einer Combobox ist vom Browser und vom Betriebssystem abhängig. Der Nachteil - man sieht die Einträge erst, wenn man mit der Maus geklickt hat. Sobald man einen Eintrag ausgewählt hat, wird dieser angezeigt, wenn man die Combobox verläßt. Modus = Radiobutton Radiobutton Listen, die vor den einzelnen Einträgen ein rundes Feld haben. Klickt man auf einen Eintrag, wird das runde Feld markiert. Es kann nur ein Feld zur Zeit markiert sein. Der Vorteil von Radiobutton = Der Besucher sieht alle Einträge untereinander angezeigt und kann diese in Ruhe durchlesen und sich dann entscheiden. Der Nachteil = Das Element ist entsprechend hoch. Jeder Eintrag benötigt natürlich eine Zeile Platz. Je nach Browser und Betriebssystem sehen die Button unterschiedlich aus. Bezeichnung Hier trägst du das Label für die Einzelauswahl ein. Der Text steht entweder auf gleicher Höhe mit der Combobox oder auf der ersten Zeile bei den Radiobutton. Pflichtfeld Hiermit markierst du ein Feld als Pflichtfeld. Beschreibung siehe weiter oben. Elemente Mit diesem Werkzeug legst du beliebig viele Einträge an. In dem durch eine gestrichelte Linie festgelegten Bereich befindet sich genau ein leeres Feld, wenn du ein neues Feld angelegt hast. Sobald du in das Feld geklickt und den ersten Buchstaben geschrieben hast, wird automatisch ein zweites leeres Feld angelegt. Von dem Augenblick an hast du zum Schluss immer ein leeres Feld, dass du nicht weiter beachten brauchst, da es nicht angezeigt wird. Durch diese Technik kannst du einfach die Einträge schreiben und musst keine zusätzlichen Werkzeuge benutzen um neue Einträge anzulegen. Löscht du den kompletten Text für einen Eintrag aus dem Feld und verläßt dann dieses Feld, dann wird es gelöscht und die noch mit Inhalt versehenen Felder rücken entsprechend auf. Kontrollkästchen Die Bedienung beim Typ Kontrollkästchen ist identisch mit dem Typ „Einzelauswahl“. Es fehlt lediglich die Option „Modus“ da es keine Auswahlliste für Kontrollkästchen gibt bzw. diese Option nicht vorgesehen ist. Die Kontrollkästchen sehen aus wie die Radiobutton nur dass die Einträge ein Quadrat vorgestellt haben. Der wichtigste Unterschied ist, dass der Benutzer beliebig viele Einträge gleichzeitig markieren kann. Hinweis: Die Einträge gehen nicht verloren, wenn du den Modus änderst. Du kannst du sogar den Typ des Elementes ändern. Wechselst du zum Beispiel zum Typ Kontrollkästchen, bleiben diese Einträge bestehen und können verwendet werden. Dadurch kannst du auch nachdem du ein Feld fertiggestellt hast, jederzeit nachträglich prüfen, ob ein anderer Typ besser passt. Warnung: Wenn du ein Feld bearbeitest, musst du zwingend auf Übernehmen klicken, wenn du die Daten behalten willst. Wenn du auf Abbrechen klickst werden alle Änderungen verworfen.

Hier kannst du das „Drumherum“ des Formulars bestimmen. Neben den Eingabefeldern braucht man für ein Formular noch einen Button, auf den man klickt, um das Formular zu verschicken. In diesem Bereich kannst du dazu einige Einstellungen machen. Email Trage hier bitte die Emailadresse ein, an die alle Nachrichten gehen sollen. Wenn du das Feld leer läßt, wird die Email verwendet, die bei uns in der Verwaltung zu deinem Account hinterlegt ist. Du bekommst eine Nachricht mit allen Informationen, die dein Besucher in das Formular eingetragen hat. Sprache Du kannst aktuell drei Sprachen auswählen. Damit werden Aktionen gesteuert, auf die du keinen Einfluss hast. Wenn ein Besucher das Formular abschickt, wird das gesamte Formular mit einem halbtransparenten Feld überdeckt, damit in der Zeit, wo die Übertragung stattfindet, keine weiteren Eingaben gemacht werden. Auf dieses Feld wird eine Nachricht eingeblendet, die den Besucher darauf hinweist, dass er bitte warten möchte, bis die Nachricht verschickt wurde und wenn diese erfolgreich übermittelt werden konnte, erfolgt ein weiterer Hinweis, dass die Nachricht versandt worden ist. Diese Meldungen werden in der von dir eingestellten Sprache angezeigt. Absendeknopf Du kannst frei entscheiden, was auf dem Button stehen soll, auf den der Besucher klickt wenn er das Formular abschicken will. Das kann einfach „Absenden“ sein oder „Abstimmung abschicken“ oder was auch immer sein. Lässt du das Feld frei wird der Standardtext verwendet. Eingabefeld Die Eingabefelder in deinem Formular können hier optisch gestylt werden. Wie oben beschrieben, wird die Schriftfamilie zentral gesteuert. Die Farben kannst du hier aber ändern. Bezeichnung Dieses Feld dient ausschließlich dazu, dir zu helfen, zu erkennen, von welchem Formular die Nachricht verschickt wurde. Das ist hilfreich, wenn du mehrere Formulare auf deiner Webseite hast. In der Email, die du von unserem System bekommst, wird diese Bezeichnung eingefügt. Du siehst dort eine Zeile, wo steht: „Kontaktformularbezeichnung: „der Text aus dem Feld Bezeichnung“. Dein Besucher sieht diese Email und auch diese Bezeichnung nicht. Rahmen Hiermit kannst du jedem Feld einen Rahmen geben und diesen mit einer Farbe versehen. Ausführliche Beschreibung auf der Seite „Grundfunktionen“. Schriftfarbe Der Text, welcher dein Besucher in die Eingabefelder schreibt, hat die gleiche Schriftfamilie wie die Label und auch die gleiche Schriftgröße. Die Farbe der Schrift wird über dieses Eingabefeld gesteuert. Das ist wichtig, weil der Hintergrund deiner Webseite oder auch nur der Hintergrund des Inhaltselement beliebig eingestellt werden kann. Und weil du den Hintergrund der Eingabefelder ebenfalls frei bestimmen kannst. Wenn du zum Beispiel die Schriftfarbe für die Label auf Schwarz setzt und diese Farbe würde auch automatisch für die Schrift in den Eingabefeldern gelten, könntest du keine dunklen oder sogar schwarzen Felder anlegen. Weil die Farben aber getrennt eingestellt werden, kannst du schwarze Label haben, ein schwarzes Eingabefeld und eine weisse Schrift für den Text in den Eingabefelder. Oder welche Farbkombination du auch immer möchtest. Hintergrund Hier stellst du ein, welche Hintergrundfarbe die Eingabefelder des Formulars haben sollen.