*
nav-pos
blockHeaderEditIcon
Sie sind hier:  

Neues Formular erstellen (alt) >>> neu

(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 in Webseite einbinden

Online-Formulare sind die entscheidende Schnittstelle zwischen Ihrer WBS und Ihrer Website. Hierbei spielt es keine Rolle, mit welchem System Ihre Website erstellt wurde. Über das Online-Formular gelangen die Daten Ihrer Webseitenbesucher in Ihre WBS, in der sie mit allen für Sie freigeschalteten Funktionen weiter bearbeitet werden können. Sie erfahren hier, wie Sie ein Formular erstellen und es an Ihre
Bedürfnisse anpassen.

Auf dieser Seite:

Formular auswählen
Neues Formular erstellen
Formularvorlage verwenden
Leeres Formular neu zusammenstellen
Formular bearbeiten
Der Formular-Editor (FE)
Neues Formularfeld einfügen (FE)
Formularfeld bearbeiten (FE)
CSS-Einstellungen Formularfeld (FE)
Grundeinstellungen Formularfeld (FE)
CSS-Einstellungen Formular (FE)
CSS-Vorlagen (FE)
Formular-Vorschau (FE)
Formular-Einstellungen
Formular-Prozesse
Script für den Einbau des Formulars
arrow

Jeder Internet-Auftritt, der nicht nur ein reines Informations-Schaufenster ist, sondern mit dem Besucher der Website einen Dialog führt, präsentiert sich mit einem Online-Formular. Das Online-Formular spielt in Ihrem Internet-Auftritt die Rolle des Eingangs zu Ihrer Firma. Das Erscheinungsbild Ihrer Online-Formulare ist bereits ein wichtiger Erfolgsfaktor für Ihr Geschäft. Daher ist es wichtig, durch die Gestaltung des Formulars den Besucher Ihrer Website zum Betreten Ihres Geschäfts einzuladen. 

<

arrow

Formular auswählen

a) Wählen Sie den Pfad WebConnector - Formulare. Falls bereits Formulare existieren, erhalten Sie die Liste mit den Formularen. 

b) Wenn Sie ein neues Formular erstellen möchten, klicken Sie auf Neues Formular.

c) Für die Bearbeitung eines existierenden Formulars klicken Sie bitte auf den Namen des Formulars in der Zeile, in der es steht. Sie fahren dann fort mit Formular bearbeiten.

d) Mit EDIT können Sie Name und Beschreibung des Formulars ändern, mit dem Mülleimer löschen Sie das Formular, mit dem Kopiersymbol erzeugen Sie aus dem existierenden Formular ein weiteres Formular mit den gleichen Eigenschaften. Dies ist eine Hilfe bei der Erstellung mehrerer gleichartiger Formulare (in Serie). 

 

Bevor Sie nun an die Bearbeitung des Formulars gehen, lesen Sie im kommenden Abschnitt, wie optimal Sie der Formular-Editor bei dieser Arbeit unterstützt:

 
 


 

<

arrow

Neues Formular erstellen

Sobald Sie ein neues Formular angefordert oder für ein existierendes Formular EDIT gedrückt haben, erhalten Sie das Eingabefenster für die Bearbeitung der beschreibenden Formulardaten: 

a) Geben Sie den Namen für das Formular an.

b) Geben Sie die Beschreibung des Formulars ein.

c) Wählen Sie die Sprache aus, in der das Formular erstellt werden soll. Zur Auswahl stehen nur Sprachen, die Sie vorab in den Grundeinstellungen definiert haben. Hier finden Sie eine detaillierte Anleitung: Spracheinstellungen

d) Speichern Sie Ihre Eingaben.

 


 

<

arrow

Formular-Vorlage verwenden

Nachdem Sie ein neues Formular erstellt und die beschreibenden Daten abgespeichert haben, fordert die WBS Sie zur Auswahl einer Vorlage (Template) auf. Legen Sie nun fest, ob Sie mit einem leeren Template arbeiten oder ein vordefiniertes Template verwenden möchten.

a) Um eine leere Vorlage zu verwenden, klicken Sie auf "Leere Vorlage" - oder 

b) wählen Sie eine der bestehenden Vorlagen aus. 

Sie erhalten dann entweder ein leeres Formular, das Sie von Anfang an selbst zusammenstellen, oder ein mit den entsprechenden Feldern bereits fertig ausgestattetes Formular, an dem Sie noch eigene Änderungen vornehmen können. 

 


 

<

arrow

Leeres Formular - neu zusammenstellen

Hier landen Sie, wenn Sie ein neues Formular erstellt und als Vorlage das Template Leeres Formular ausgewählt haben. Bevor Sie nun mit der Bearbeitung fortfahren, machen Sie sich bitte mit dem Formular-Editor vertraut. 

 


 

<

arrow

Formular bearbeiten

Hier landen Sie, wenn Sie in der Liste der Formulare auf den Formularnamen in dessen Zeile geklickt haben, um das Formular zu bearbeiten, oder wenn Sie für ein neues Formular ein bestehendes Template ausgewählt haben, das Sie für Ihr aktuelles Formular modifizieren möchten. 

In der nachfolgenden Beschreibung des Formular-Editors erfahren Sie, wie Sie von dieser Situation ausgehend zu Ihrem fertigen Formular gelangen.

 


 

<

arrow

Der Formular Editor

Alle folgenden Beschreibungen beziehen sich auf den Formular-Editor. Jeder einzelne Abschnitt dient dazu, Ihnen die Elemente des Editors zu erläutern, mit denen Sie Ihr Formular individuell gestalten können. Sie sind in der Wahl der Reihenfolge der einzelnen Arbeiten so lange frei, bis Ihr Formular das gewünschte endgültige Aussehen besitzt. 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.

c) Hier können Sie nachträglich doch noch ein bestehendes Template auswählen.

d) Diese Auswahl bietet Ihnen eine Vorschau auf das Formular für die unterschiedlichen Endgeräte. Sie können die Darstellung dort jeweils anpassen.

e) Mit Aktualisieren speichern Sie Ihre Änderungen am Formular.

 


 

<

arrow

Neues Formularfeld einfügen

(Formular-Editor)

a) Ein neues Formularfeld kann mittels Drag and Drop (Feld mit der linken Maustaste halten und in das Feld ziehen) in den Formular-Container
verschoben werden.

b) Um das Formularfeld im Formular-Container zu platzieren, muss das Feld in die grau hinterlegte Zeile verschoben werden. Sobald sich das Formularfeld im Bereich der Zeile befindet, färbt sich die Zeile automatisch blau ein. Nun können Sie die linke Maustaste lösen und das Formularfeld im
Container platzieren.

 

 


 
c) Ein zweites neues Formularfeld kann mittels Drag and Drop (Feld mit der linken Maustaste halten und in das Feld ziehen) in den Formular-Container verschoben werden. 

d) Dieses zweite Formularfeld wird hier als Beispiel unter das erste Feld gestellt - in eine zweite Zeile



 

e) Mit den Formularen der Worldsoft Business Suite können Sie auch mehrspaltige Formulare erstellen. Wenn Sie eine neue Spalte in Ihrem Formular hinzufügen möchten, verschieben Sie ein Formularfeld direkt neben das bereits bestehende Formularfeld.

f) Der Bereich neben dem bestehenden Feld wird automatisch orange eingefärbt, wenn das neue Formularfeld seine richtige Position erreicht hat. Lösen Sie nun die linke Maustaste, um eine neue Formularspalte zu erstellen.



 

<

arrow

Formularfeld bearbeiten

(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 k) 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. Es ist dringend zu empfehlen, den Mauszeiger nach jeder einzelnen Änderung durch einen der Doppelpfeile anschließend in vertikaler Richtung aus dem Feldcontainer komplett herauszuziehen und anschließend neu in den hellblauen Bereich zu ziehen, um weitere Änderungen vorzunehmen. 

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

b) Mit diesem Doppelpfeil ändern Sie die Länge des Führungstext-Bereichs. 

c) Mit diesem Doppelpfeil ändern Sie die Länge des Eingabebereichs. 

d) Mit diesem Kreuzsymbol löschen Sie das gesamte Eingabefeld aus dem Formular.

e) Mit diesem Symbol verschieben Sie das gesamte Eingabefeld an eine beliebige andere Stelle des Formulars. 

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.

i) Führungstext-Bereich - türkis hinterlegt.

j) Eingabebereich - grün hinterlegt. 

k) Feldcontainer - hellblau hinterlegt. 



 

<

arrow

CSS-Einstellungen Formularfeld

(Formular-Editor)

a) Wählen Sie im ersten Schritt aus, was Sie bearbeiten möchten, hier: Feldeinstellungen (türkis)

b) Legen Sie die Schriftart fest.

c) Legen Sie die Schriftgröße fest.

d) Wählen Sie, ob der Text fett, kursiv oder unterstrichen angezeigt werden soll.

e) Definieren Sie die Lage des Führungstextes.

f) Bestimmen Sie die Farbe des Führungstextes.

 
 

 
 

a) Wählen Sie im ersten Schritt aus, was Sie bearbeiten möchten, hier: Feld (grün)

b) Legen Sie die Schriftart fest.

c) Legen Sie die Schriftgröße fest.

d) Wählen Sie, ob der Text fett, kursiv oder unterstrichen angezeigt werden soll.

e) Definieren Sie die Ausrichtung der gewählten Eigenschaft.

f) Klicken Sie auf eine der Ecken, um diese Ecke in der gewählten Eigenschaft abzurunden.

g) Legen Sie den Radius der Rundung fest.

h) Vergeben Sie die Farbe des Textes.

i) Vergeben Sie die Hintergrundfarbe.

j) Legen Sie hier das Aussehen des Rands fest.



 

<

arrow

Grundeinstellungen Formularfeld

(Formular-Editor)

Beachten Sie, dass die Grundeinstellungen von der Art des Formularfelds abhängig sind. Für das in diesem Beispiel verwendete einzeilige Textfeld ergeben sich folgende Möglichkeiten:

a) (Reiter Hauptseite) Name des Formularfelds.

b) Geben Sie den Text ein, der im Formularfeld angezeigt werden soll. Wenn Sie keinen Text eingeben, bleibt das Feld leer.

c) Legen Sie hier die CSS-Klasse für die Größe des Formularfelds fest.

 

 

 
 
 
d) (Reiter Validierung) Setzten Sie ein Häkchen, wenn Sie möchten, dass das Formularfeld ein Pflichtfeld im Formular ist.

e) Wählen Sie aus, welcher Inhalt in das Formularfeld eingeben werden kann. Weicht der eingegebene Text von den Einstellungen ab, wird dem Interessenten automatisch eine Meldung angezeigt.

f) Legen Sie die Mindestlänge des Inhalts im Formularfeld fest.

g) Legen Sie die Maximallänge des Inhalts im Formularfeld fest.
 


 

<

arrow

CSS-Einstellungen Formular

(Formular-Editor)

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.

a) 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.

b) Legen Sie die Hintergrundfarbe des Formulars fest.

c) Fügen Sie hier den Link zur Hintergrundgrafik des Formulars ein.

d) Wählen Sie die Position der Hintergrundgrafik aus.

e) Wählen Sie nun, ob die Hintergrundgrafik wiederholt werden soll.

 


 

<

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 CSS-Vorlagen zu öffnen.

b) Klicken Sie auf einen der Pfeile, um nach links oder rechts zu navigieren.

c) Standardmäßig ist eine leere CSS-Vorlage ausgewählt. Damit erscheint das Formular ein "normales" Aussehen.

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

e) Und so sieht das Formular mit Schatten aus.

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

 


 

<

arrow

Vorschau des Formulars

(Formular-Editor)

a) 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.
 


 
b) In der Vorschau wird Ihnen das Formular so angezeigt, wie es auch auf Ihrer Website angezeigt werden würde. Die Formulare der Worldsoft Business Suite sind für mobile Endgeräte optimiert und somit optimal für den Einsatz im Responsive Design einer Website.

Nachdem Sie alle Einstellungen durchgeführt haben und das Formular in der Vorschau Ihren Vorstellungen entspricht, klicken Sie auf Schritt vorwärts, um zu den Einstellungen des Formulars weitergeleitet zu werden.

Sie verlassen nun den Formular-Editor.  

 


 

<

arrow

Formulareinstellungen

a) Formularnamen abändern.

b) Formularbeschreibung abändern.
 


 

c) Legen Sie hier den Titel des Formulars fest. Der Titel wird über dem Formular angezeigt.

d) Geben Sie hier den Text der Dankeseite ein. Diesen Text sieht der Besucher, sobald er das Formular abgesendet hat.

e) Geben Sie hier den Link zu Ihrer Dankeseite ein. Statt den oben eingegebenen Text zu zeigen, können Sie hier eine Webseite angeben, die stattdessen dem Besucher gezeigt werden soll.

f) Wählen Sie aus, ob Sie auf Ihren Link oder auf den vorher eingegeben Text nach dem Absenden des Formulars verlinken möchten, ob also Lösung d) oder e) in Frage kommt. 

g) Setzen Sie ein Häkchen, wenn ein unregistrierter Besucher in die Datenbank aufgenommen werden soll. 

h) Setzen Sie ein Häkchen, wenn der Besucher sofort eingeloggt werden soll. 

i) Geben Sie an, in wessen Nachrichtenbox ein Eintrag erfolgen soll. 

j) Wählen Sie denjenigen Benutzer Ihrer WBS aus, der die Daten des ausgefüllten Formulars zugesandt bekommen soll.



 

k) Geben Sie die maximale Breite des Formulars ein. Da alle Formulare der WBS für das Responsive Design optimiert sind, werden die Größendefinitionen in max. Breite und max. Höhe definiert. Max. Breite/Höhe bedeutet, dass das Feld max. diese Breite/Höhe annehmen kann. 

l) Geben Sie die maximale Höhe des Formulars ein. 

m) Sie haben die Möglichkeit, ein eigenes CSS an das Formular anzubinden. Geben Sie hier die URL zur gewünschten CSS Datei an. 

n) Wenn Sie keine URL zur Verfügung haben, können Sie auch direkt CSS Befehle eingeben. 



 

<

arrow

Formular-Prozesse vs. Gruppen-Prozesse

o) An jedes Formular können Prozesse angehängt werden. Wählen Sie hier, welche Prozesse nach dem Ausfüllen des Formulars ausgeführt werden sollen. Klicken Sie auf Regel hinzufügen, um einen neuen Prozess zu erstellen.

Für das automatische Ausführen von Prozessen stehen Ihnen bei Formularen zwei verschiedene Wege zur Verfügung:

Indirekt:
Definieren Sie für eine Gruppe einen oder mehrere Prozesse und definieren Sie die Zuordnung des Kontakts, der das Formular abschickt,  zu dieser Gruppe als Prozess für das Formular.

Direkt:
Definieren Sie einen oder mehrere Prozesse direkt in diesem Formular. Damit können Sie so genannten Einmal-Anfragen automatisch beantworten, ohne für jeden Anfragetyp eine Gruppe anlegen zu müssen. Ihr Gruppenbestand 
bleibt übersichtlich.

 


 

p) Geben Sie an, worauf sich der Prozess bezieht. Im Falle von Auswahl-Buttons oder -Checkboxen haben Sie hier die Möglichkeit, an die verschiedenen Einträge entsprechend verschiedene Prozesse zu hängen. 

q) Fügen Sie einen weiteren Prozess hinzu. 

r) Löschen Sie einen Prozess. 

s) Die definierten Prozesse werden nach dem Absenden des Formulars ausgeführt. 

t) Folgende Prozesse stehen Ihnen zur Verfügung: 

Zum Affiliate-Netzwerk hinzufügen, 
Bestehende Gruppe ersetzen, 
Lead-Manager Projekt zuweisen, 
System E-Mail anbinden, 
Affiliate hinzufügen, 
Neue Gruppe hinzufügen, 
E-Mail anbinden. 

Für die mit der Zuordnung zu Gruppen befassten Prozesse legen Sie für jede einzelne Gruppe einen eigenen Prozess fest. In dem Gruppen-Hierarchiebaum können Sie jeweils nur eine einzige Gruppe mit einem Häkchen auswählen. 

u) Klicken Sie auf Speichern, um Ihre Einstellungen zu speichern. Um zum nächsten Schritt zu gelangen, klicken Sie ganz oben auf den Button Schritt vorwärts

Sie verlassen jetzt die Formulareinstellungen.



 

<

arrow

Script für den Einbau des Formulars

Um das Formular anzusehen oder einzubinden, werden Ihnen im letzten Schritt ein Link und ein Script angezeigt.

a) Mit diesem Link erhalten Sie eine Vorschau des Formulars.

b) Benutzen Sie dieses Script, um das Formular in Ihre Webseite einzubinden. Eine detaillierte Anleitung über das Einbinden in eine Webseite finden Sie hier: Formular in Webseite einbinden
 

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