Arclab Webformular Generator - Bedienungsanleitung

Schritt für Schritt ... der schnellste Weg zum Formular | Inhaltsverzeichnis

 


417
 
Das folgende Beispiel erläutert die notwendigen Arbeitsschritte für ein sehr einfaches Formular. Es besteht aus einem Eingabefeld für die Emailadresse mit links daneben stehender Beschreibung.

 


 

602  
Klicken Sie im Hauptmenü auf Neues Projekt und wählen Sie im sich öffnenden Fenster die Option
Ein neues Formular anlegen.

Ausserdem steht mit dem Easy Formular Wizard ein Assistent zur Verfügung, der mit wenigen Klicks ein fertiges Formular erstellt ... mehr Infos.

Sie können auch eine der mitgelieferten Vorlagen laden und beliebig bearbeiten, indem Sie auf den Karteireiter Formularvorlagen wechseln.

 


 

603  

 

Wählen Sie im nächsten Schritt aus den Vorlagen das für Sie passende Design aus.


Der Punkt Design-Vorlagen im oberen Hauptmenü öffnet die Auswahl erneut, so dass das Design auch später jederzeit wieder geändert werden kann.

 


 

604  
An jeder Stelle mit dem grünen + Symbol können Elemente in das Formular eingefügt werden.

Öffnen Sie mit einem Klick auf das grüne + Symbol die Auswahl der verfügbaren Elemente.

 


 

Folgende Elemente sind verfügbar ...

Grundelemente

Die reinen Basiselemente für die Eingabe, Ausgabe, Auswahl, Captcha,
Download, Bilder, leere Zellenraster, Leerzeilen usw.

Kombi mit Bezeichnung links

Die häufigsten Kombinationen von Eingabeelementen mit links
daneben stehender Bezeichnung.

Kombi mit Bezeichnung oben

Die häufigsten Kombinationen eines Eingabeelements mit darüber
stehender Bezeichnung.

Spezielle Elemente

Elemente für mathematische Berechnungen und logische Operationen.

 


 

605  
Auf den Karteireiter Kombi mit Bezeichnung links befinden sich die häufigsten Kombinationen eines Elements mit links daneben stehender Bezeichnung.

Im Beispiel soll ein Eingabefeld für eine Emailadresse mit links daneben stehender Erklärung eingefügt werden.

Eine solche Kombination aus Eingabebereich und Beschreibung gibt es als fertigen Baustein. Wählen Sie das Element Eingabe einer Emailadresse aus.

 


 

606  




Der bei Bezeichnung eingegebene Text wird später links neben dem Eingabefeld stehen.

Im Beispiel soll neben dem Eingabebereich der Text Emailadresse: stehen.

 


 

607  
Der Name des Elements ... hier schlicht email ... ist der Variablenname des Eingabefeldes.

Die vom Nutzer eingegebene Emailadresse wird vom Formular also in dieser Variable gespeichert.

 


 

608  




Die Option Es soll ein Pflichtelement sein bewirkt, dass der Formularnutzer eine Eingabe machen muss und die Bezeichnung mit einem Sternchen versehen wird.

Wenn unterhalb des Eingabefeldes zusätzlich noch ein Text stehen soll, dann aktivieren Sie die Option Folgender Text bzw. Beschreibung ...

Als jeweilige Breiten der beiden Zellen werden vom Programm 20% und 80% vorgeschlagen. Diesen Wert können Sie jetzt oder später anpassen.

 


 

609  



Mit dem Klick auf OK werden die Bezeichnung und das Eingabeelement in den Entwurf eingefügt.

Es öffnet sich ein Dialog mit den Eigenschaften für des Eingabeelement, damit wir bei Bedarf noch weitere Einstellungen vornehmen können.

Hier geben wir bei Platzhalter - Text zusätzlich noch einen beschreibenden Infotext ein, der dann im Eingabeelement angezeigt wird.

 


 

414  
Wechseln Sie abschliessend noch auf den Kartei- reiter Pflichtelement und Überprüfung.

Hier sehen wir, dass die Option für das Pflichtfeld gemäss der vorher gemachten Einstellung aktiviert ist.

Klicken Sie auf OK, um das Element in den Entwurf zu übernehmen.

 


 

415  
Das Element für die Eingabe einer Emailadresse und die Beschreibung sind nun vollständig vorbereitet.

Nun fehlt noch ein Button, damit der Nutzer seine Eingabe absenden kann.

Mit einem Klick auf das grüne + Symbol öffnen wir erneut die Elementauswahl und fügen einen Button zum Absenden ein.

Verwenden Sie wieder ein Kombielement, damit der Button unterhalb des Eingabefelds positioniert wird.

 


 

416  
Damit wären alle Elemente für ein simples Formular zum Eingeben und Versenden einer Emailadresse vorhanden.

 


 

418  
Wenn Sie im oberen Menü den Vorschaumodus aktivieren, wird der Entwurf ohne Bearbeitungs- und Formatierungsoptionen dargestellt.

Mit einem Klick auf Bearbeitungsmodus können Sie wieder zurück wechseln.

 


 

610  
Klicken Sie im oberen Hauptmenü auf den Punkt Daten-Übermittlung., um festzulegen, wohin das Formular die eingegebenen Daten schicken soll.

Das Formular wird automatisch alle hier angelegten Aufgaben durchführen ... z.B. eine Email mit allen Daten an Sie und eine Bestätigungsnachricht an den Nutzer senden.

Wählen Sie die erste Option Eingegebene Daten an eine Emailadresse senden und geben Sie alle notwendigen Infos ein.

 


 

611  
Nachdem Sie den Empfänger der Email festgelegt haben, sehen Sie eine Vorschau der Nachricht, die das Formular dorthin verschicken wird.

Hier taucht nun auch wieder der Variablenname email auf, den wir anfangs für das Eingabeelement vergeben haben.

Der Platzhalter {email} wird vom Formular in der Nachricht dann durch den Wert ersetzt, den der Nutzer in das Feld eingegeben hat.

 


 

612  
Die links stehende Bezeichnung email: wird automatisch aus dem Variablennamen ermittelt.

Wir ändern diese noch von email: zu Email: ... klicken Sie dazu auf Email-Felder auswählen und wählen Sie den Eintrag aus.

Im unteren Bereich des Dialogs können Sie dann die Bezeichnung ändern.

 


 

613  
Abschliessend verringern wir noch den zu grossen Abstand zwischen den beiden Texten.

Klicken Sie auf Email-Design ändern. Hier sind die Breiten der beiden Zellen und die Breite der Tabelle festgelegt.

Ändern Sie entweder die Werte für die beiden Zellen oder die Breite der Tabelle.

Im Beispiel beträgt die gesamte Breite der Tabelle 700px und es ergibt sich ein passender Abstand bei den Werten 10% und 90% für die beiden Zellen.

 


 

614  
Klicken Sie abschliessend im Menü des Editors auf Speichern, um die Sendeaufgabe zu übernehmen.

Die erstellte Übermittlungsaufgabe erscheint nun in der Liste. Wenn Sie den Eintrag anklicken, werden im unteren Bereich Infos zu dieser Aufgabe angezeigt.

Sie können diese Aufgabe später ändern oder mit dem + Symbol weitere Aufgaben hinzufügen.

 


 

615  
Klicken Sie nun im Menu des Hauptfensters auf den Punkt Webformular erstellen.

Das Programm wird dann eine Datei erzeugen, die das gesamte Formular enthält. Laden Sie diese Datei abschliessend auf Ihre Homepage hoch.

PHP ist eine Scriptsprache für interaktive Webseiten. Das Formular nutzt diese speziellen Funktionen einer Homepage, um Eingaben zu verarbeiten und Emails zu versenden ... mehr zu PHP bei Wikipedia

 

<< zurück zum Inhaltsverzeichnis