Kontakt- und Anmeldeformulare

Erstellen Sie Formulare, um E-Mails mit strukturierten Informationen (Name, Adresse, Telefon usw.) zu erhalten; z. B. zur Anmeldung zu einer Tagung.

Ein Musterformular

Sie können dieses Musterformular in der Quelltext-Ansicht Ihres Dokuments einfügen und an Ihre Bedürfnisse anpassen.

Vorschau





Ich nehme an folgenden Veranstaltungen teil:


Ich möchte über zukünftige Tagungen informiert werden:



Quelltext


<form name="web2mail" id="web2mail" action="https://www.uibk.ac.at/scripts/web2mail.xsp" method="POST">

<p>
<label for="anrede">Anrede</label><br />
<select name="w2m_anrede" id="anrede">
<option value="">Bitte wählen:</option>
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
</p>

<p>
<label for="vorname">Vorname</label><br />
<input type="text" name="w2m_vorname" id="vorname" />
</p>

<p>
<label for="nachname">Nachname</label><br />
<input type="text" name="w2m_nachname" id="nachname" />
</p>

<p>
<label for="email">E-Mail</label><br />
<input type="text" name="w2m_email" id="email" />
</p>

<p>
Ich nehme an folgenden Veranstaltungen teil:<br />
<input type="checkbox" name="w2m_veranstaltung_1" id="veranstaltung_1" value="XIMS: Erste Schritte" /> <label for="veranstaltung_1">XIMS: Erste Schritte</label><br />
<input type="checkbox" name="w2m_veranstaltung_2" id="veranstaltung_2" value="XIMS: Spezielle Anwendungen" /> <label for="veranstaltung_2">XIMS: Spezielle Anwendungen</label><br />
<input type="checkbox" name="w2m_veranstaltung_3" id="veranstaltung_3" value="XIMS: Workshop Responsive Design" /> <label for="veranstaltung_2">XIMS: Workshop Responsive Design</label>
</p>

<p>
Ich möchte über zukünftige Tagungen informiert werden:<br />
<input type="radio" name="w2m_info" id="info_1" value="ja" /> <label for="info_1">ja</label><br />
<input type="radio" name="w2m_info" id="info_2" value="nein" /> <label for="info_2">nein</label>
</p>

<p>
<label for="nachricht">Was ich noch hinzufügen möchte:</label><br />
<textarea name="w2m_nachricht" id="nachricht" style="width:100%;height:5em"></textarea>
</p>

<p>
<input class="control" type="submit" name="submit" value="Abschicken" />
<input type="hidden" name="to" value="IhreMailadressebittehiereinfuellen@uibk.ac.at" />
<input type="hidden" name="subject" value= "Tagung: Ximsologie" />
<input type="hidden" name="postmessage" value="Vielen Dank, Ihre Anmeldung wurde erfolgreich versandt." /> 
</p>

</form>

Im Folgenden erläutern wir die einzelnen Bestandteile.

Formularfelder

Allgemeines zu Formularfeldern

<label> ist die Bezeichnung des Formularfelds – es stellt eine Beziehung zwischen Bezeichnung und Feld her. Das ist wichtig, um die Barrierfreiheit des Formular zu gewährleisten: so können z. B. sehbehinderte BenutzerInnen erkennen, in welches Feld welche Informationen einzutragen sind. Im Attribut „for“ wird die „id“ des Formularfelds eingetragen. Im folgenden Beispiel also jeweils „vorname“:

<label for="vorname">Vorname</label><input type="text" name="w2m_vorname" id="vorname" />

Das Attribut „name“ muss mit der Vorsilbe „w2m_“ beginnen, damit das Feld für das E-Mail ausgewertet wird. Verwenden Sie hier keine Sonderzeichen, Umlaute oder Leerzeichen.

Textfelder (einzeilig)

Zur freien Eingabe von (einzeiligem) Text:

<p>
<label for="vorname">Vorname</label><br />
<input type="text" name="w2m_vorname" id="vorname" />
</p>

Textfelder (mehrzeilig)

<p>
<label for="nachricht">Was ich noch hinzufügen möchte:</label><br />
<textarea name="w2m_nachricht" id="nachricht" style="width:100%;height:5em"></textarea>
</p>

Die Größe des Felds steuern Sie über das Attribut „style“: „width“ bestimmt die Breite (hier 100%, also die gesamte Fensterbreite), „height“ die Höhe (hier: 5em, d. h. 5 Zeilen).

Auswahlfelder/Drop-downs

<p>
<label for="anrede">Anrede</label><br />
<select name="w2m_anrede" id="anrede">
<option value="">Bitte wählen:</option>
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
</p>

<select> steht für das Auswahlfeld, es erhält das Attribut „name“ (muss mit „w2m_“ beginnen).

<option> sind die Werte, die von den BenutzerInnen ausgewählt werden können. Wichtig ist hier das Attribut „value“ – das ist der Text, den Sie per E-Mail erhalten, wenn der Wert ausgewählt wurde.

Checkboxen

<p>
Ich nehme an folgenden Veranstaltungen teil:<br />
<input type="checkbox" name="w2m_veranstaltung_1" id="veranstaltung_1" value="XIMS: Erste Schritte" /> <label for="veranstaltung_1">XIMS: Erste Schritte</label><br />
<input type="checkbox" name="w2m_veranstaltung_2" id="veranstaltung_2" value="XIMS: Spezielle Anwendungen" /> <label for="veranstaltung_2">XIMS: Spezielle Anwendungen</label><br />
<input type="checkbox" name="w2m_veranstaltung_3" id="veranstaltung_3" value="XIMS: Workshop Responsive Design" /> <label for="veranstaltung_2">XIMS: Workshop Responsive Design</label>
</p>

Checkboxen erlauben (im Gegensatz zu Radiobuttons) eine Mehrfachauswahl. Verwenden Sie für jede Checkbox einen eindeutigen Namen.

Radiobuttons

<p>
Ich möchte über zukünftige Tagungen informiert werden:<br />
<input type="radio" name="w2m_info" id="info_1" value="ja" /> <label for="info_1">ja</label><br />
<input type="radio" name="w2m_info" id="info_2" value="nein" /> <label for="info_2">nein</label>
</p>

Es kann immer nur ein Radiobutton in einer Gruppe angeklickt sein. Damit die Radiobuttons als eine Gruppe erkannt werden, müssen sie alle das gleiche Attribut „name“ tragen (hier: „w2m_info“). Das Attribut „id“ hingegen muss für jeden Radiobutton eindeutig sein, damit es dem richtigen <label> zugeordnet werden kann (hier: „info_1“, „info_2“ etc.).

Abschicken-Button

<input class="control" type="submit" name="submit" value="Abschicken" />

Einstellungen (verborgene Felder)

Damit aus dem Formular ein E-Mail an Sie generiert werden kann, müssen Sie folgende Einstellungen (mittels verborgener Felder) treffen:

<input type="hidden" name="to" value="IhreMailadressebittehiereinfuellen@uibk.ac.at" />

Die E-Mail-Adresse, an die das Formular verschickt wurde. Es muss sich dabei um eine Adresse mit der Endung „@uibk.ac.at“ handeln

<input type="hidden" name="subject" value= "Tagung: Ximsologie" />

Der Betreff des E-Mails.

<input type="hidden" name="postmessage" value="Vielen Dank, Ihre Anmeldung wurde erfolgreich versandt." />

Der Text, den die BenutzerInnen sehen, nachdem sie das Formular abgeschickt haben.

Formatierung des E-Mails

Das E-Mail, das Sie erhalten, kann in zwei Varianten verschickt werden:

  1. Eine Zeile pro Formularfeld im Format „Feldname: Wert“ (z. B: „Vorname: Max“)
  2. Tabulator-getrennte Darstellung der Werte in einer Zeile (damit sie einfacher automatisch ausgewertet werden können, z. B. mit Excel)

Wenn Sie erste Variante verwenden möchten, gehen Sie genau so vor wie oben beschrieben.

Entscheiden Sie sich für die zweite Variante, muss der Name jedes Formularfeldes „body“ lauten:

<input type="text" name="body" />

 

  Hinweise:

  • Das Formular funktioniert nur, wenn es auf www.uibk.ac.at aufgerufen wird.
  • Da das E-Mail vom Server verschickt wird (und nicht von der Person, die das Formular ausfüllt), kann nicht per "Antworten"-Funktionalität des E-Mail-Clients auf das Mail geantwortet werden. Vergessen Sie also nicht, im Formular auch die Mailadresse abzufragen, damit sie den BenutzerInnen antworten können.
  • Das Skript existiert unter https://www.uibk.ac.at/scripts/web2mail_utf8.xsp (unter „action“ bei <form> einzutragen)  auch in einer Variante, die E-Mails mit dem UTF-8-Zeichensatz verschickt (standardmäßig ISO-8859-1).


Nach oben scrollen