*
nav-pos
blockHeaderEditIcon
Sie sind hier:  

Formular-Editor

(WebConnector - Online-Formulare)
 

Themen der Übersicht:

Online Formulare
Umfragen (EMS erforderlich)
Quick Shop (Factura erforderelich)
Affiliate (Factura erforderlich)
Kundenadministration (EMS erforderlich)
Schnittstellendokumentation (API)
arrow

Verbundene Themen:

Neues Formular erstellen Formular-Editor Formular in Webseite einbinden
arrow

Ein besonders wichtiges Werkzeug für die Gestaltung eines ansprechenden Internet-Auftritts ist der Formular-Editor. Das Formular auf Ihrer Webseite ist ein repräsentativer Eingang in Ihr Internet-Geschäft und es ist der einzige Weg für Ihren Website-Besucher, über eine Webseite Kontakt mit Ihnen aufzunehmen. Mit dem WBS-Formular-Editor erstellen Sie ansprechende Formulare, ohne sich lange mit den Tücken der HTML-Programmierung beschäftigen zu müssen. Alle zeitgemäßen Funktionen eines Formulars können mit diesem Formular-Editor bequem eingesetzt werden.

Auf dieser Seite:

Aufbau eines Formulars
Anordnung der Elemente
Erfahrung sammeln
Erweiterte Bearbeitung
Das Editor-Fenster
Neues Formularfeld einfügen 
Weiteres Formularfeld einfügen 
Formularfeld Bearbeitungselemente 
Formularfeld bearbeiten
CSS-Einstellungen Formular
CSS-Vorlagen
Formular-Vorschau

<

arrow

Aufbau eines Formulars

(Formular-Editor)

Jedes Formular enthält mindestens ein Eingabefeld und einen Absende-Button. Nebenstehend sehen Sie das einfachste Formular, wie es mit der WBS in wenigen Sekunden erstellt werden kann.

a) Ein Eingabefeld - hier ein einzeiliges Textfeld. Der Inhalt dieses Feldes ist die Nachricht, die der Webseitenbesucher, der das Formular ausfüllt, an den Websitebetreiber schickt, der das Formular auf einer Webseite zeigt.

b) Absende-Button. Mit Klick auf diesen Button schickt der Absender seine im Formular eingetragenen Daten auf die Reise.  

 

<

arrow

Anordung der Elemente

(Formular-Editor)

Es gibt zwei wichtige Aspekte der Anordnung einzelner Elemente auf einem Formular. Ein Aspekt ist die Position der Feldbeschriftung zum Eingabefeld: Im vorigen Beispiel stand der Text über dem Eingabefeld, hier ist er links daneben platziert. 

Der andere Aspekt betrifft die Anordnung der Felder auf dem Formular. Die Felder können untereinander oder nebeneinander stehen. Man spricht von einer oder zwei Spalten - in Ausnahmefällen auch mehr. 

Ferner spielt die Breite der Elemente eine Rolle. Solange Sie nichts anderes einstellen, nehmen die Elemente die gesamte zur Verfügung stehende Breite des Formulars ein. Besonders deutlich ist das an dem etwas überdimensioniert erscheinenden Absende-Button sichtbar. 

 

a) Mit dieser Einstellung bestimmen Sie die Platzierung der Feldbeschriftungen (Bezeichnung der EIngabefelder).

b) Die Feldbeschriftung steht neben dem Eingabefeld.

c) Mit dem linken Feld-Schieber verändern Sie das Verhältnis der Breite von Feldbeschriftung und Feld - für alle Felder. 

d) Mit dem rechten Feld-Schieber verkürzen Sie die Breite eines Eingabefeldes, ohne die Breite der Gesamtfelder zu ändern.

e) Mit dem Feldlängen-Schieber verändern Sie die Breite der gesamten Felder (Eingabe und Feldbeschriftung).

Diese drei Schieber, die alle mit der Maus zu ziehen sind, stehen nur zur Verfügung, wenn Feldbeschriftung oben deaktiviert ist.

 

<

arrow

Erfahrung sammeln

(Formular-Editor)

Die Breite jedes Elements auf dem Formular kann auch individuell verändert werden. 

a) Wenn Sie den Mauszeiger über das Feld ziehen, werden der Feldcontainer und alle Bearbeitungselemente sichtbar. 

b) Mit diesem Schieber ziehen Sie das Feld als Ganzes nach rechts oder links in eine neue Position.

c) Mit dem unteren Schieber verändern Sie die Gesamtbreite des Feldes individuell. Wenn der Aufbau des Formulars es zulässt, wird damit auch die Position des Schiebers oben verändert.

 

In dem nebenstehenden Beispiel wurde ein weiteres Feld platziert. 

a) Mit der Maus wurde ein weiteres Feld neben das vorhandene gezogen, das vorher mithilfe des Breitenschiebers verkleinert wurde, um Platz zu schaffen. Eine ausführliche Beschreibung dieses Vorgangs finden Sie auf dieser Seite unter Weiteres Formularfeld einfügen.

b) Das zweite Feld ist eingefügt.

Stellen Sie eine ähnliche Situation her und experimentieren Sie nun mit den verschiedenen Schiebern, um ein Gefühl dafür zu bekommen, wie das System reagiert und welche Möglichkeiten existieren, das Formular individuell zu gestalten. 

Keine Beschreibung kann Ihnen auch nur annähernd die Erfahrung beim Lesen vermitteln, die Sie durch dieses Ausprobieren aktiv sammeln können. 

Mit dieser Erfahrung im Hintergrund verstehen Sie alle weiteren Funktionalitäten des Formular-Editors sehr schnell und machen denselben für sich zu einem leistungsfähigen Werkzeug.

 

<

arrow

Erweiterte Bearbeitung

(Formular-Editor)

Der Formulareditor bietet zwei unterschiedliche Arten der Bearbeitung des Layouts eines Formulars. In der Grundversion werden die Elemente fast automatisch an die Größe des Formulars angepasst. Mit den vorab beschriebenen Steuerelementen kann das Layout blitzschnell - in wenigen Sekunden - durch einfache Mausbedienung verändert werden. In den ersten Abschnitten dieser Anleitung zum Formulareditor ist das ausführlich beschrieben. In der so genannten erweiterten Bearbeitung können Sie jedes Element Ihres Formulars individuell verändern, platzieren und einstellen, so dass Sie vollkommen frei sind in der Gestaltung Ihres Formulars. Trotzdem behält das Formular immer ein ordentliches Aussehen, indem die WBS dafür sorgt, dass bestimmte Gestaltungsregeln nicht verletzt werden können - wie z. B. die Ausrichtung in einem Raster, die Abstände der Felder untereinander usw. 

 
a) Nach Auswahl einer Formular-Vorlage mit vier Eingabefeldern und einem Absende-Button wurde mit diesen Schiebern schon etwas geändert. Wie das im Einzelnen geschieht, können Sie auf dieser Seite nachlesen unter Weiteres Formularfeld einfügen.

b) Der Absende-Button wurde in die Mitte geschoben.

c) Jetzt wird die erweiterte Bearbeitung aktiviert.

 

 
d) Der Feld-Container ist nun zweifarbig. Der grüne Teil erlaubt Veränderungen an der Feldbezeichnung, der blaue Teil am Eingabefeld selbst.

e) Jetzt wird Änderungen zurücksetzen geklickt. Das bedeutet, dass sich die Felder wieder der Breite des Formulars anpassen.

 

 
f) Die Felder stehen wieder untereinander statt nebeneinander und auch der Absende-Button ist im gleichen Verhältnis breiter geworden. Dies ist ein Zeichen dafür, dass die WBS weitestgehend dafür sorgt, dass die Größenverhältnisse erhelten bleiben.

g) Mit Aktualisieren wird dieser Zustand abgespeichert.

 

 
h) Die erweiterte Bearbeitung ist nun beendet und der Feld-Container hat bei Berührung durch den Mauszeiger wieder die einheitlich blaue Farbe wie zu Beginn dieser Sequenz. 

i) Mit diesem Button kann die erweiterte Bearbeitung gegebenenfalls erneut gestartet werden.

 

<

arrow

Das Editor-Fenster

Die folgenden Elemente des Editors sind immer sichtbar. Werfen Sie zunächst einen Blick auf die Übersicht:

a) Menü mit Formular-Elementen - hier teilweise ausgeklappt. Aus- und Einklappen mit Pfeil am rechten Rand des jeweiligen Menü-Eintrags. Dieses Menü ist Ihre Werkzeugkiste und Ihr Materialvorrat für das zu erstellende Formular. Hier finden Sie alle Elemente, die in einem Formular verwendet werden.

b) Mit diesem Button geben Sie dem Formular ein individuelles Aussehen. Die Beschreibung hierzu finden Sie auf dieser Seite unter CSS-Einstellungen Formular.

c) Dieses Kontroll-Kästchen steuert die Anordnung der Feldbeschriftung in Bezug zum Eingabefeld. Diese Anordnung hat Einfluss auf das Layout des Formulars und teilt die Layout-Arbeit in zwei verschiedene Vorgehensweisen auf.

d) Mit dem Button Vorlagen öffnen Sie eine kleine Galerie mit unterschiedlichen Möglichkeiten, Ihren Eingabefeldern ein anderes Aussehen zu geben.

e) Mit dem Button Erweitertes Bearbeiten wird die weiter oben beschriebene Erweiterte Bearbeitung aktiviert. 

f) Mit diesem Button Aktualisieren Sie das Formular nach Vornahme von Änderungen. 

 

 
g) Siehe Punkt c). 

h) Schiebeleiste mit Schiebern zum Verändern der Feld- bzw. Spaltenbreiten im Formular.

i) Feld-Container - in einem leeren Formular ist dies der einzige Platz, auf dem ein Formularfeld abgelegt werden kann. Sobald das erste Element in das Formular eingefügt wurde, öffnen sich weitere Ablagemöglichkeiten. 

k) Nach dem Aktualisieren der Formularänderungen erhalten Sie hier eine Vorschau des Formulars in einem neuen Browserfenster.

 

<

arrow

Neues Formularfeld einfügen

(Formular-Editor)

Ein neues Formularelement kann mittels Drag and Drop in den Feld-Container eingesetzt werden. Beginnen Sie bei jedem noch leeren Formular bitte mit dem Senden-Button. Solange kein Senden-Button im Formular enthalten ist, kann dieses nicht aktualisiert werden. Sie erhalten gegebenenfalls eine Fehlermeldung. 
Greifen Sie den Senden-Button mit der linken Maustaste im Vorrats-Menü, ziehen Sie ihn über den Container und lassen Sie ihn dort fallen, indem Sie die Maustaste wieder loslassen. Sobald beim Ziehen der Mauszeiger mit der mitwandernden Silhouette über dem Container auftaucht, bemerkt dieser den "Landeanflug" und färbt sich blau ein. Das ist für Sie das Signal, dass Sie das Element fallenlassen können. 

 
 

 

 
Jetzt befinden sich über dem Senden-Button und darunter je ein weiterer Container, in dem Sie das nächste Element ablegen können.

a) Ein weiteres Element - dieses Mal ein einzeiliges Textfeld - befindet sich im "Landeanflug".

b) Der obere Container ist blau eingefärbt.

c) Der untere Container ist nicht betroffen und steht weiter zur Verfügung.

 

<

arrow

Weiteres Formularfeld einfügen

(Formular-Editor)

Die Elemente im Formular können nicht nur übereinander, sondern auch nebeneinander platziert werden. Hierzu muss erst Platz geschaffen werden. Dafür greifen Sie mit der Linken Maustaste den Schieber für die Spaltenbreite und ziehen ihn nach links.

 

 
  
Beim Ziehen können Sie beobachten, dass nicht nur das Textfeld, sondern gleichzeitig auch der Senden-Button verkleinert wird. Beide Elemente befinden sich in derselben Spalte und diese wird mit dem Schieber komplett verändert. Damit ist nun Platz für weitere Elemente in einer zweiten Spalte entstanden. 

 
Beim Einfügen des nächsten Elements neben einem bereits vorhandenen färbt sich der noch verfügbare Bereich des bereits teilweise besetzten Containers orange ein, sobald das neue Element über diesem Bereich auftaucht.

 

<

arrow

Formularfeld Bearbeitungselemente

(Formular-Editor)

Wenn Sie den Mauszeiger über ein Formularfeld bewegen, öffnen sich automatisch weitere Einstellungsmöglichkeiten. Hierbei ist zu beachten, wie diese Einstellungsmöglichkeiten auf die Position des Mauszeigers reagieren. Sobald die Spitze des Mauszeigers den hellblau hinterlegten Feldcontainer b) erreicht, werden die Feldeinstellungen sichtbar. Von diesem Augenblick an erweitert sich der sensitive (empfindliche) Bereich des Feldcontainers auf den gesamten Umriss, in dem auch die einzelnen rundherum angeordneten Buttons platziert sind. 

a) Mit diesem Doppelpfeil verschieben Sie das gesamte Eingabefeld in horizontaler Richtung.

b) Der zentrale Feldcontainer ist hellblau eingefärbt. 

c) Mit diesem Kreuzsymbol löschen Sie das gesamte Element aus dem Formular. 

d) Hier können Sie einen Text eingeben, der gezeigt werden soll, solange der Webseitenbesucher noch nichts eingetragen hat.

e) An diesem Symbol können Sie das Element mit der linken Maustaste greifen und an eine andere Position im Formular ziehen. 

f) Mit diesem Doppelpfeil ändern Sie die Gesamtlänge des Feldcontainers. 

g) Hier gelangen Sie zu den CSS-Einstellungen für das Formularfeld, wo Sie die Schriftart, Schriftgröße, Ausrichtung u.v.a.m. für das Formularfeld festlegen. 

h) Mit dem Klick auf das Stift-Symbol können Sie Einstellungen wie die Beschriftung des Feldes, die Optionen des Feldes und auch die Validierung des Feldes definieren.

 

 

<

arrow

Formularfeld bearbeiten

(Formular-Editor)

Zunächst wird das Aussehen (die Darstellung) des Feldes bearbeitet.

a) Klicken Sie auf den Button CSS.

b) Das Fenster zum Bearbeiten des Stils wird geöffnet.

c) Wählen Sie aus, welchen Bereich Sie bearbeiten möchten. In diesem Beispiel eines einzeiligen Textfeldes haben Sie die Wahl zwischen der Darstellung der Feldbeschreibung und des Feldes selbst.

d) bis k) sind selbsterklärend.

Ebenso selbsterklärend sind die Angaben, die Sie für die Darstellung des Feldes selbst machen können. Folgen Sie einfach den Angaben in dem jeweils geöffneten Fenster für die Bearbeitung der CSS-Details. Andere Feldtypen liefern an dieser Stelle andere Bearbeitungsfenster, aus deren Inhalt sofort hervorgeht, wie das entsprechende Element verändert werden kann. 

 

 

 
 

 
Hier geht es um die Bearbeitung der Einstellungen des Feldes. Die Hauptseite ist geöffnet.

a) Klicken Sie auf den Button mit dem Stift-Symbol.

b) Das Fenster zum Bearbeiten der Einstellungen wird geöffnet.

c) bis e) sind selbsterklärend. 

 

Die zweite Lasche des Fensters betrifft die Validierung. Mit der Validierung können Sie eine Prüfung aktivieren, die dafür sorgt, dass das Feld vom Benutzer ausgefüllt wurde - so genanntes Pflichtfeld.

a) Klicken Sie auf Validierung.

b) Setzen Sie ein Häkchen, wenn das Feld als Pflichfeld arbeiten soll.

c) bis e) sind selbsterklärend. 

 

<

arrow

CSS-Einstellungen Formular

(Formular-Editor)

a) Klicken Sie auf "Formular Stil", um die CSS-Einstellungen für das gesamte Formular anzupassen. In den Einstellungen können Sie das CSS für das Formular, die Labels, die Felder und die Platzhalter definieren.

b) Wählen Sie aus, für welche Formulareigenschaft Sie die CSS-Einstellungen vornehmen möchten. Je nach Auswahl werden Ihnen unterschiedliche Einstellungsmöglichkeiten angezeigt. In unserem Beispiel bearbeiten wir die CSS-Einstellungen des Formulars.

 

 

<

arrow

CSS-Vorlagen

(Formular-Editor)

a) Neben der Möglichkeit, ein eigenes CSS für das Formular zu definieren, können Sie auch aus Vorlagen wählen. Klicken Sie auf den Button Vorlagen, um die Galerie der CSS-Vorlagen zu öffnen.

b) Wählen Sie eine gewünschte CSS-Vorlage aus. Nachdem Sie auf die Vorlage geklickt haben, ändert sich das Aussehen des Formulars entsprechend dem CSS der gewählten Vorlage. Hier wurden z. B. Schatten hinzugefügt.

c) Und so sieht das Formular mit Schatten aus.

Klicken Sie nochmals auf den Button Vorlagen, um die Vorlagen-Galerie zu schließen. Um das Formular zu speichern, klicken Sie auf den Button Aktualisieren.

 

<

arrow

Vorschau des Formulars

(Formular-Editor)

Klicken Sie, nachdem Sie das Formular gespeichert haben, auf Vorschau. Nun öffnet sich ein neues Tab in Ihrem Browser mit der Vorschau des erstellten Formulars.
 
Backtotop
blockHeaderEditIcon
Footer-06
blockHeaderEditIcon

Sprachen

Sprachen
coypright
blockHeaderEditIcon
2017 Copyright by Worldsoft AG, All Rights Reserved
social-media
blockHeaderEditIcon
Facebook   Twitter   Wordpress  Worldsoft
Benutzername:
User-Login
Ihr E-Mail