Formulare erstellen (Step-by-Step) (auslaufend)

Detail of "Spider web at sunrise" - Luc Viatour / www.Lucnix.be

Formulare erstellen (Step-by-Step) (auslaufend)

Kommunikation mit dem Nutzer über standardisierte Eingabefelder

Beispiel eines Formulares für eine Anmeldung
Beispiel eines Formulares für eine Anmeldung

Formulare bieten die Möglichkeit, über standardisierte Felder in eine Kommunikation mit dem Nutzer der Website zu treten. Der Nutzer kann die vorgegebenen Felder ausfüllen und Informationen an den Betreiber des Webauftritts versenden. Auch das Hochladen und Anhängen von Dateien ist möglich.

Bitte denken Sie daran, dass nach der Konfiguration des Formulars noch einige Einstellungen vom Webteam auf dem Server vorgenommen werden müssen, bevor das Formular online gehen kann. Eine genaue Vorgehensweise finden Sie hierzu im letzten Abschnitt des Artikels.

Ein Beispiel für eine mögliche Anwendung des Absatzes finden Sie hier (nur mit TU-Login)

Hinweis: Bitte kopieren Sie keine vorhandenen Formulare sondern erstellen diese immer neu. Es werden bei jedem Formular administrative Einstellungen speziell für dieses Formular gemacht. Diese werden beim Kopieren übernommen. Dadurch kann es passieren, dass ein Formular nicht mehr funktioniert.

Formulare im Webauftritt bereitstellen

Jedes Formular im Webauftritt benötigt vier (fünf) Seiten im Inhaltsbereich.

  • die eigentliche Formular-Seite mit der Definition der Eingabefelder
  • eine OK-Seite mit der Information, dass der Formularversand erfolgreich war
  • eine Fehler-Seite (eine weitere falls die Captcha Validierung verwendet wird (s.u.))
    • mit der Information, dass der Formularversand nicht erfolgreich war
    • optional eine Zweite mit der Information, dass die Eingabe des Captcha nicht korrekt war
  • eine Mailtemplate-Seite mit einer Vorlage, wie die durch den Nutzer in den Feldern eingegebenen Informationen an den Betreiber des Webauftritts versendet werden sollen

Im Strukturbereich müssen für diese vier Seiten vier Seitenreferenzen angelegt werden.

Ihr erstelltes Formular können sie in der Vorschau ansehen, jedoch nicht auf Funktionsfähigkeit testen. Dies geht nur nach vollständiger Einrichtung, Konfiguration und anschließender Generierung durch das Webteam.

Ablösung des alten Formedit-Moduls durch Webforms

Ab sofort steht der neue Formular-Editor „Webforms“ zum Erstellen von Webformularen zur Verfügung. Es wird das alte „Form-Edit“-Modul ablösen.

Bitte benutzen Sie diese Absatzvorlage nicht mehr.

Bitte benutzen Sie Webforms für künftige Formulare.

Bearbeitungsschritte im Inhaltsbereich:

  1. Ordner für Formular anlegen über rechte Maustaste auf dem übergeordneten Ordner, „Neu“ + „Ordner anlegen“
  2. im Formularordner die Formular-Seite anlegen über rechte Maustaste, „Neu“ + „Seite anlegen“; wählen Sie die Seitenvorlage „Standard“ + „Inhalt mit Marginalienspalte“
  3. Im Zentralbereich der Seite fügen Sie einen Absatz ein („Neu“ + „Absatz einfügen“). Wählen Sie die Absatzvorlage „form-edit“ + „form start“.
    • „Formularüberschrift“: Tragen Sie einen Text ein, der als Überschrift auf der Formularseite angezeigt werden soll.
    • „Formularname“: Der Formularname ist ein eindeutiger Bezeichner, unter dem das Formular vom System gefunden werden kann. Er sollte nur aus Kleinbuchstaben und „_“ bestehen und keine Leer- oder Sonderzeichen enthalten!
    • „Beschreibung“: Optional können Sie hier einen Text eingeben, der das Formular beschreibt.
    • Die restlichen Felder wird das Webteam später für Sie füllen!
  4. Fügen Sie einen weiteren Absatz ein („Neu“ + „Absatz einfügen“). Wählen Sie die Absatzvorlage „form-edit“ + „form block“.
    • „Titel“: Tragen Sie einen Text ein, der als Überschrift für diesen Formularbereich angezeigt werden soll.
    • „Eindeutiger Bezeichner(ID)“: Geben Sie ein eindeutigen Namen für das Formularelement an. Er sollte nur aus Kleinbuchstaben und „_“ bestehen und keine Leer- oder Sonderzeichen enthalten!
    • „Block Collapse“: ermöglicht das Ein- bzw. Ausklappen des Blockes
    • „Zusatztext“: optional, falls Sie zusätzlichen Text anzeigen möchten
    • „Formularelemente“: Tragen Sie für jedes Feld und jedes Formularelement, das angezeigt werden soll, eine Zeile ein.
      In der ersten Spalte stehen die eindeutigen Bezeichner der Formularelemente. Sie dürfen nur aus Kleinbuchstaben und „_“ bestehen und keine Leer- oder Sonderzeichen enthalten!
      In der zweiten Spalte stehen die Namen der Felder, die im Formular angezeigt werden.
      In der dritten Spalte steht ein Default-Wert für dieses Formularelement.
      In der vierten Spalte steht der Typ des Formularelementes.
    • Sie finden die detaillierte Beschreibung der einzelnen Formularelemente in einem separaten Artikel.
    • Sie können beliebig viele „form block“-Absätze hintereinander einfügen, um längere Formulare optisch zu gliedern.
  5. Fügen Sie einen weiteren Absatz ein („Neu“ + „Absatz einfügen“). Wählen Sie die Absatzvorlage „form-edit“ + „form end“.
    • „Hinweis für Pflichtfelder (optional)“: Hier kann optional ein Hinweistext stehen, der z.B. darauf hinweist, dass die mit (*) markierten Felder Pflichtfelder sind und ausgefüllt werden müssen.
    • „Beschriftung für den Submit-Button“: Tragen Sie einen Text ein, der als Beschriftung des Knopfes zum Absenden des Formulares angezeigt werden soll.
    • „Beschriftung für den Reset-Button“: Tragen Sie einen Text ein, der als Beschriftung des Knopfes zum Abbruch des Formular Versendens angezeigt werden soll.
    • „Stylesheet-Klasse für Buttons (optional)“: muss nicht ausgefüllt werden.
    • „Fußnote“: Tragen Sie einen Text ein, der als Fußnote unter der Formularseite angezeigt werden soll.
  6. im Formularordner die OK-Seite anlegen über rechte Maustaste, „Neu“ + „Seite anlegen“; wählen Sie die Seitenvorlage „Standard“ + „Inhalt mit Marginalienspalte“
    • Im Zentralbereich der Seite fügen Sie einen Absatz ein („Neu“ + „Absatz einfügen“). Wählen Sie die Absatzvorlage „Standard“ + „Text (opt. m. Bild)“. Dieser Text soll eine Mitteilung an den Seitennutzer sein, wenn der Versand der Formulardaten erfolgreich war. Geben Sie einen entsprechenden Text ein.
  7. im Formularordner die Fehler-Seite anlegen über rechte Maustaste, „Neu“ + „Seite anlegen“; wählen Sie die Seitenvorlage „Standard“ + „Inhalt mit Marginalienspalte“
    • Im Zentralbereich der Seite fügen Sie einen Absatz ein („Neu“ + „Absatz einfügen“). Wählen Sie die Absatzvorlage „Standard“ + „Text (opt. m. Bild)“. Dieser Text soll eine Mitteilung an den Seitennutzer sein, wenn der Versand der Formulardaten NICHT erfolgreich war. Geben Sie einen entsprechenden Text ein.
  8. (optional) im Formularordner die Captcha-Fehler-Seite anlegen über rechte Maustaste, „Neu“ + „Seite anlegen“; wählen Sie die Seitenvorlage „Standard“ + „Inhalt mit Marginalienspalte“
  9. Im Zentralbereich der Seite fügen Sie einen Absatz ein („Neu“ + „Absatz einfügen“). Wählen Sie die Absatzvorlage „Standard“ + „Text (opt. m. Bild)“. Dieser Text soll eine Mitteilung an den Seitennutzer sein, wenn die Validierung des Captcha NICHT erfolgreich war. Geben Sie einen entsprechenden Text ein. Als Beispiel:
    • Überschrift: Fehler bei Sicherheitsabfrage!
    • Text: Der von Ihnen eingegebene Sicherheitscode hat leider nicht mit der Zeichenfolge im Bild übereingestimmt. Bitte füllen Sie das Formular erneut aus.
  10. im Formularordner die Mailtemplate-Seite anlegen über rechte Maustaste, „Neu“ + „Seite anlegen“; wählen Sie die Seitenvorlage „form-edit“ + „form-edit-configuration“ + „mailtemplate“
    • „Empfänger“: Geben Sie die e-Mail-Adresse an, an die die ausgefüllten Formulardaten gesendet werden sollen.
    • „Cc“: Geben Sie optional eine E-Mail-Adresse an, die die ausgefüllten Formulardaten in Kopie erhalten soll, z.B. die des Ausfüllenden mit %Eindeutiger Bezeichner des E-Mail-Formularelementes%, falls sie erfragt wird.
    • „Bcc“ Geben Sie optional eine E-Mail-Adresse an, die die ausgefüllten Formulardaten in Kopie verdeckt erhalten soll.
    • „Sender“: Hier sollte der Absender der Formulardaten stehen. Falls im Formular die E-Mail-Adresse des Ausfüllenden erfragt wird, kann hier mit %Eindeutiger Bezeichner des E-Mail-Formularelementes% die aktuelle ausgefüllte E-Mail-Adresse automatisch verwendet werden.
    • „Betreff“: Tragen Sie hier einen Betreff-Text ein, mit dem die E-Mail versendet werden soll.
    • „Attachements“: Falls im Formular Dateien hochgeladen werden sollen, geben Sie hier die Feldnamen der Felder an, in denen Dateien zum Hochladen eingetragen werden (im Format %Eindeutiger Bezeichner des Formularelementes zum Hochladen%).
      Gibt es mehrere Uploadfelder, trennen Sie die Formularelemente bitte mit Komma!
    • „Text“: Tragen Sie hier den Text ein, der als E-Mail versendet werden soll, nachdem eine Formular ausgefüllt wurde. Um auf die Inhalte der ausgefüllten Felder zugreifen zu können, verwenden Sie %Eindeutiger Bezeichner des Formularelementes%.
      Bsp.:
      Neue Kursanmeldung:
      -------------------
      %anrede% %vorname% %nachname% hat sich angemeldet.
      Die E-Mail-Adresse ist %email%.
    • Besonderheit: CSV-Auswertung
      • Es ist möglich, Ihre Ergebnisse als CSV-Liste auszugeben. Hierfür geben Sie unterhalb des Textes CSV: und die gewünschten Variablen an. Beispiel: CSV: %anrede%, %vorname%, %nachname%
    • Besonderheit bei „combobox date“:
      Bei Platzhaltern für Formular-Elemente vom Typ „combobox date“ wird vor den eindeutigen Namen „toDate_“ vorangestellt, damit der Wert als Datum angezeigt wird. Beispiel: wenn der eindeutige Name des Elementes „geburtstag“ heißt, lautet der Platzhalter „%toDate_geburtstag%“.
    • Checkboxen:
      Checkboxen werden im Template genau wie Textfelder behandelt. Rufen Sie über %Gruppenbezeichnung Checkbox% die Werte ab. Diese werden dann in der E-Mail mit Komma getrennt angegeben.

Bearbeitungsschritte im Strukturbereich:

  1. Neue Menüebene für Formularzugriff anlegen. In der Menüebene zunächst die beiden Schalter „Im Navigationsmenü anzeigen“ und „Navigationsmenü in Übersicht (SiteMap) anzeigen“ ausschalten (bis die Formulare endgültig getestet sind und freigegeben werden sollen).
  2. Unterhalb der neu angelegten Formular-Menüebene eine Seitenreferenz auf Formular-Seite im Inhaltsbereich anlegen.
  3. Unterhalb der neu angelegten Formular-Menüebene eine Seitenreferenz auf Mailtemplate-Seite im Inhaltsbereich anlegen.
  4. Unterhalb der neu angelegten Formular-Menüebene eine Seitenreferenz auf OK-Seite im Inhaltsbereich anlegen.
  5. Unterhalb der neu angelegten Formular-Menüebene eine Seitenreferenz auf Fehler-Seite im Inhaltsbereich anlegen.
  6. Unterhalb der neu angelegten Formular-Menüebene eine Seitenreferenz auf Captcha-Fehler-Seite im Inhaltsbereich anlegen.

Captcha Validierung hinzufügen

Beispiel eines automatisch generierten Captcha
Beispiel eines automatisch generierten Captcha

Möchten Sie Ihr Formular vor Spam schützen, so empfehlen wir Ihnen die Verwendung eines Captchas. Dieses muss vom Benutzer ausgefüllt werden, bevor er das Formular an Sie senden kann und verhindert so automatisches Versenden von Formularen.

Hinzufügen des Captchas:

  • Suchen Sie in Ihrem Formular den Absatz „form start“. Setzen Sie in diesem den Haken bei der Abfrage „Captcha Validierung“.
  • Tragen Sie darunter, im Punkt „Captcha ungültig (Optional)“ die Seitenreferenz ein, die von Ihnen in den Inhalten bereits angelegt wurde, auf die der Nutzer bei falscher Eingabe des Captchas geleitet wird. Klicken Sie dazu auf das Ordnericon und navigieren in dem sich sodann öffnenden Fenster zur gewünschten Seite. Wählen Sie diese aus und bestätigen Sie die Auswahl mit „auswählen“.
  • Speichern sie die Änderungen
  • Fügen Sie vor dem Abschnitt „form end“ einen neuen Formularblock hinzu. Dazu klicken Sie mit der rechten Maustaste auf den letzten „form block“-Abschnitt und wählen Sie „Neu->Absatz einfügen->form block aus.
    Nun sollte vor dem „form end“-Absatz ein neuer Absatz hinzugefügt worden sein.
  • Wählen Sie den neu angelegten Formularblock aus. Wählen Sie in diesem bei der Frage „Soll der Benutzer den Block ein- und ausklappen können?“ Nein aus. Fügen Sie sodann ein einziges (!) Captcha-Formularelement hinzu. Dazu klicken Sie im Unterpunkt „Formularelemente“ auf das Hinzufügen-Icon und wählen „Captcha“ als Vorlage aus.
  • Speichern Sie den Abschnitt und beenden Sie die Bearbeitung.
  • Geben Sie die Vorlage frei.

Und dann …

Nun ist die Konfiguration des Formulars fertig vorbereitet.

Bitte wenden Sie sich nun an uns über unser Kontaktformular.

Geben Sie uns darin

  • das FirstSpirit-Projekt, in dem Sie arbeiten an, sowie
  • den Pfad auf den Ordner im Strukturbereich, in dem die vier Formularseiten referenziert werden.

Wir müssen nun noch einige Einstellungen auf dem Server vornehmen, bevor das Formular online gehen kann. Dazu werden wir uns dann mit Ihnen in Verbindung setzen.