Form-Tools

Interaktive Formulare für Veranstaltungsanmeldungen oder Bewerbungen gehören heute zu den selbstverständlichen Funktionen von Internetseiten. In der Universität Bielefeld werden Formulare durch eine Software namens Form Tools verarbeitet. Diese Software wird im Bielefelder IT-Servicezentrum (BITS) gehostet. Wenn Sie ein solches Formular erstellen wollen, wenden Sie sich an die Web-Entwicklung.

Wie erhalte ich Zugang zu FormTools?

Wenden Sie sich an die Web-Entwicklung. Wir richten Ihnen einen FormTools-Account ein.

Zugang nur innerhalb des Uni-Netzwerks möglich

Beachten Sie, dass Sie FormTools nur innerhalb des Uni-Netzwerks nutzen können.
Wenn Sie FormTools von zu Hause aus nutzen möchten, ist dies nur über eine VPN-Verbindung möglich: https://uni-bielefeld.de/bits/services/vpn/

Bestätigungs-E-Mails

Sobald Ihr Formular ausgefüllt und abgeschickt wurde, kann FormTools beispielsweise eine Bestätigungs-E-Mail an den Ausfüllenden versenden. Gleichzeitig könnte auch eine Mail an Sie selbst eingerichtet werden, die alle ausgefüllten Daten des Formulars enthält.

Wenden Sie sich an die Web-Entwicklung. Wir richten Ihnen diese E-Mail-Funktion ein.

Daten exportieren

Die Formulardaten, die in FormTools abgespeichert werden, können in folgende Formate exportiert werden:

  • HTML-Tabelle
  • Excel
  • CSV
Spam-Vermeidung

Form Tools bietet auch ein AntiSpam-Modul an, das Ihr Formular vor Spam-Einträgen schützen kann.( ->   Weitere Informationen )

Sollten Sie an der Einrichtung eines Spam-Filters für Ihr Formular interessiert sein, wenden Sie sich bitte an die Web-Entwicklung.

Formulare verschieben oder löschen

Falls Sie Formulare auf andere Seiten verschieben oder wenn Sie irgendwann ein Formular und die damit gespeicherten Daten nicht mehr benötigen, würden wir uns über einen kurzen Hinweis freuen (Web-Entwicklung).



Ein Formular vorbereiten

Sie können uns bei der Einrichtung Ihres Formulars helfen, indem Sie den Quelltext bereits vorbereiten. (Sollte Ihnen dies aus irgendwelchen Gründen nicht möglich sein, schicken Sie uns gerne eine E-Mail mit den entsprechenden Eckdaten des Formulars)

Um ein Formular vorzubereiten, müssen Sie in einem HTML-Dokument folgende Code-Schnipsel einfügen:


Hier wird das Script angefordert, das die Pflichtfelder erzeugt (nicht vergessen diese Felder an die vorhandenen Feldnamen anzupassen):

<script src="https://frmtools.uni-bielefeld.de/formtools/global/scripts/rsv.js"></script>
<script>
  var rules = [];
  rules.push("required,vorname,Vorname erforderlich");
  rules.push("letters_only,vorname,Bitte ausschließlich Buchstaben eingeben");
  rules.push("required,nachname,Name erforderlich");
  rules.push("required,email,E-Mail erforderlich");
  rules.push("valid_email,email,E-Mail ungültig");
  rules.push("same_as,email,email2,Die E-Mail-Adresse stimmt nicht überein");
  rules.push("digits_only,alter,Beim Alter bitte nur Ziffern eingeben");

  // an den nachfolgenden Zeilen bitte nichts ändern
  rsv.errorFieldClass = null;
  rsv.displayType = "alert-all";
  rsv.customErrorHandler = null;
</script>

 

So sieht der Formular-Kopf aus (Zieladresse und utf-8 codierung):

<form action="https://frmtools.uni-bielefeld.de/formtools/process.php" method="post" accept-charset="utf-8" enctype="multipart/form-data" onSubmit="return rsv.validate(this, rules)">

 

Mit der Form-Tools-FormID wird das entsprechende Formular angesprochen:

<input type="hidden" name="form_tools_form_id" value="000" />

 

Dieses dient der Zeichensatzcodierung, ansonsten werden Umlaute abgeschnitten:

<input name="cheat" type="hidden" value="&#64338;" />

 

Optionale Formularfelder:

Textfeld

Normales Textfeld

<label for="name">Name:</label>
<input name="name" id="name" />

Vorschau:


Pflicht-Textfeld

<label for="name">Name:</label>
<input name="name" id="name" aria-required="true" />

Vorschau:


Textfeld mit Platzhalter

<label for="name">Name:</label>
<input size="30" name="name" id="name" placeholder="mit Platzhalter" />

Vorschau:


Textfeld mit einer maximalen Zeichenanzahl

<label for="name">Name:</label>
<input size="30" name="name" id="name" maxlength="10" />

Vorschau:

Textarea

<label for="anmerkungen">Anmerkungen:</label>
<textarea name="anmerkungen" id="anmerkungen" cols="50" rows="10"></textarea>

Vorschau:

Radio-Buttons

<fieldset>

  <legend>Frage?</legend><br>
  <input type="radio" name="frage" id="antwort1" value="Ja" />
  <label for="antwort1">Ja</label><br />
  <input type="radio" name="frage" id="antwort2" value="Nein" />
  <label for="antwort2">Nein</label><br />
  <input type="radio" name="frage" id="antwort3" value="Vielleicht" />
  <label for="antwort3">Vielleicht</label>

</fieldset>

Vorschau:

Frage?
Ja
Nein
Vielleicht

Checkboxen

<fieldset>

  <legend>Wählen Sie Ihre Pizza-Zutaten aus:</legend><br>

  <input type="checkbox" name="zutat1" id="zutat1" value="Aubergine" /> <label for="zutat1">Aubergine</label><br />

  <input type="checkbox" name="zutat2" id="zutat2" value="Pilze" /> <label for="zutat1">Pilze</label><br />

  <input type="checkbox" name="zutat3" id="zutat3" value="Brokkoli" /> <label for="zutat1">Brokkoli</label>

</fieldset>

Vorschau:

Wählen Sie Ihre Pizza-Zutaten aus:
Aubergine
Pilze
Brokkoli

Dropdown- / Selectfeld

Normales Dropdownfeld

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

Vorschau:

Anrede:


Dropdownfeld mit Gruppierungen

<label for="stadt">Lieblingsstadt:</label>
<select name="stadt" id="stadt">

  <optgroup label="Asien">
    <option value="Delhi">Delhi</option>
    <option value="Hong Kong">Hong Kong</option>
    <option value="Mumbai">Mumbai</option>
    <option value="Tokio">Tokio</option>
  </optgroup>

  <optgroup label="Europa">
    <option value="Amsterdam">Amsterdam</option>
    <option value="Bielefeld">Bielefeld</option>
    <option value="London">London</option>
    <option value="Moskau">Moskau</option>
  </optgroup>

  <optgroup label="Amerika">
    <option value="Buenos Aires">Buenos Aires</option>
    <option value="Los Angeles">Los Angeles</option>
    <option value="New York">New York</option>
    <option value="Sao Paulo">Sao Paulo</option>
  </optgroup>

</select>

Vorschau:

Lieblingsstadt:


Fakultäten als insert-Datei einbinden

<label for="fakultaeten">Fakultät:</label>
<select name="fakultaeten" id="fakultaet">
  <insert file="/kommunikation/internet/roxen/insert_fakultaeten.html"/>
</select>

Vorschau:

Fakultät:


Länder als insert-Datei einbinden

<label for="land">Land:</label>
<select name="land" id="land">
  <insert file="/kommunikation/internet/roxen/insert_land.html" />
</select>

Vorschau:

Land:


Sie haben einen Rechtschreibfehler gefunden? Es fehlt ein Land? Schreiben Sie uns eine E-Mail an internet@uni-bielefeld.de

File Upload

<label for="datei">Lebenslauf:</label><br>
<input name="datei" id="datei" type="file" size="15">;

Vorschau:

Lebenslauf:

Datumseingabe

<script src="/javascript/calendarDateInput.js"></script>
<script>DateInput("Name_des_Datumfeldes", true, "DD-MON-YYYY")</script>

Vorschau:

Buttons

Submit-Button

<input type="submit" value="Formular absenden">

Vorschau:


Reset-Button

<input type="reset" value="Alle Felder leeren">

Vorschau:

 

Am Ende wird das Formular mit dem Submit-Button und dem </form>-Tag abgeschlossen:

  <input type="submit" value="Abschicken" />
</form>

 

Datenschutzhinweis einfügen

So oder ähnlich sollte ihr Hinweis am Ende eines Formulars lauten:

Ihre personenbezogenen Daten werden zum Zweck der Organisation der Veranstaltung gespeichert. Die Daten werden vertraulich behandelt und nicht an Dritte weiter gegeben. Sie können jederzeit Informationen über die gespeicherten Daten erhalten und die Zustimmung zur Speicherung ebenfalls widerrufen. Nach Beendigung der Veranstaltung werden die Daten gelöscht.

Ich habe die Bedingungen gelesen und bin damit einverstanden.

Barrierefreiheit in Formularen

Zur Verbesserung der Barrierefreiheit von Formularen achten Sie bitte darauf, dass Sie das Label-Tag verwenden und Pflichtfelder richtig auszeichnen.

Wie unten im Beispiel-Quelltext gezeigt, werden <label>-Tags verwendet, um die Bezeichnung eines Formular-Feldes explizit zu kennzeichnen und für Lesegeräte auffindbar zu machen.

Mit dem "aria-required"-Attribut teilen Sie Lesegeräten mit, ob es sich hier um ein Pflichtfeld handelt (true = Pflichtfeld).

Beispiel:
<label for="vorname">Vorname</label>
<input name="vorname" id="vorname" size="30" aria-required="true" />

Weitere Informationen zu Barrierefreiheit auf Internetseiten:
Anforderungen der Barrierefreiheit

 

 

Gesamter Code:

Sie können diesen Code kopieren und in Ihre html-Seite integrieren.

<script src="https://frmtools.uni-bielefeld.de/formtools/global/scripts/rsv.js"></script>

<script>
  var rules = [];
  rules.push("required,vorname,Vorname erforderlich");
  rules.push("letters_only,vorname,Vorname: Bitte ausschließlich Buchstaben eingeben");
  rules.push("required,nachname,Name erforderlich");
  rules.push("required,email,E-Mail erforderlich");
  rules.push("valid_email,email,E-Mail ungültig");
  rules.push("same_as,email,email2,Die E-Mail-Adressen stimmen nicht überein");
  rules.push("required,datenschutzhinweis,Zustimmung zum Datenschutz erforderlich");

  // an den nachfolgenden Zeilen bitte nichts ändern
  rsv.errorFieldClass = null;
  rsv.displayType = "alert-all";
  rsv.customErrorHandler = null;
</script>

<form action="https://frmtools.uni-bielefeld.de/formtools/process.php" method="post" accept-charset="utf-8" enctype="multipart/form-data" onSubmit="return rsv.validate(this, rules)">

  <input type="hidden" name="form_tools_form_id" value="000" />
  <input name="cheat" type="hidden" value="&#64338" />

  <h2>Beispielformular</h2>

  <table class="formulartabelle">
    <tr>
      <td align="right" valign="top"></td>
      <td>
        <label for="anrede">Anrede:</label>
        <select name="anrede" id="anrede">
          <option value=" ">Bitte wählen</option>
          <option value="Herr">Herr</option>
          <option value="Frau">Frau</option>
        </select>
      </td>
    </tr>
    <tr>
      <td align="right">*<label for="vorname">Vorname</label>:</td>
      <td><input name="vorname" id="vorname" size="30" aria-required="true" /></td>
    </tr>
    <tr>
      <td align="right">*<label for="nachname">Nachname</label>:</td>
      <td><input name="nachname" id="nachname" size="30" aria-required="true" /></td>
    </tr>
    <tr>
      <td align="right">*<label for="email">E-Mail</label>:</td>
      <td><input type="email" name="email" id="email" size="30" aria-required="true" /><br>
      <input type="email" name="email2" size="30" placeholder="bitte bestätigen Sie die Mail-Adresse" aria-required="true" /></td>
    </tr>
    <tr>
      <td align="right" valign="top"><label for="anmerkungen">Anmerkungen</label>:</td>
      <td><textarea name="anmerkungen" id="anmerkungen" cols="45" rows="10"></textarea></td>
    </tr>
    <tr>
      <td align="right" valign="top"></td>
      <td>
        <p><strong><label for="datenschutzhinweis">Datenschutzhinweis</label></strong></p>
        <p>Ihre personenbezogenen Daten werden zum Zweck der Organisation der Veranstaltung gespeichert. Die Daten werden vertraulich behandelt und nicht an Dritte weiter gegeben. Sie können jederzeit
        Informationen über die gespeicherten Daten erhalten und die Zustimmung zur Speicherung ebenfalls widerrufen. Nach Beendigung der Veranstaltung werden die Daten gelöscht.</p>
      </td>
    </tr>
    <tr>
      <td align="right" valign="top"><input type="checkbox" name="datenschutzhinweis" id="datenschutzhinweis" value="bestätigt" aria-required="true"></td>
      <td>*Ich habe die Bedingungen gelesen und bin damit einverstanden.<br><br></td>
    </tr>
    <tr>
      <td align="right"></td>
      <td><input type="submit" value="Abschicken" /></td>
    </tr>
  </table>

</form>



Vorschau

Beispielformular

*:
*:
*:
:

Ihre personenbezogenen Daten werden zum Zweck der Organisation der Veranstaltung gespeichert. Die Daten werden vertraulich behandelt und nicht an Dritte weiter gegeben. Sie können jederzeit Informationen über die gespeicherten Daten erhalten und die Zustimmung zur Speicherung ebenfalls widerrufen. Nach Beendigung der Veranstaltung werden die Daten gelöscht.

*Ich habe die Bedingungen gelesen und bin damit einverstanden.

 

Weitere Hinweise zur Erzeugung von Formularfeldern finden Sie bspw. auf SELFHTML.

Umsetzungsdauer

Bitte planen Sie genügend Zeit für die Umsetzung ein!

Sie sollten sich mindestens 2 Wochen vor der geplanten Onlinestellung des Formulars bei uns melden.

Beispielformular

Den Code für ein Beispielformular finden Sie ganz unten auf dieser Seite.