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.

Ein Formular anlegen

Formular-Antrag ausfüllen:
Bitte füllen Sie den Formular-Antrag aus. Wir richten Ihnen dann falls notwendig einen FormTools-Account und das Formular ein.

Formular vorbereiten:
Wenn Sie sich etwas in HTML auskennen, können Sie das entsprechende Formular bereits gerne vorbereiten, indem Sie die Code-Schnipsel weiter unten auf dieser Seite verwenden.
Dies erspart uns Arbeit und beschleunigt die Umsetzung des Formulars.
Den Datenschutz-Hinweis formulieren wir später basierend auf Ihren Angaben im Formular-Antrag für Sie.

Zugang zu FormTools

Bestehendes Formular:
Sie möchten Zugang zu einem bereits bestehenden Formular erhalten?
Schreiben Sie eine E-Mail an internet@uni-bielefeld.de und geben Sie den Link zum Formular mit an.

Neu zu erstellendes Formular:
Füllen Sie bitte den Formular-Antrag aus. Wir richten Ihnen dann das Formular und 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 kann auch eine Mail an Sie selbst eingerichtet werden, die Sie benachrichtigt, sobald ein Formular ausgefüllt wurde.

Geben Sie bei der Beantragung des Formulars den Text an, der an die Ausfüllenden gehen soll. Wir richten Ihnen dann die 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, vermerken Sie dies im Formular-Antrag unter "Anmerkungen" oder wenden Sie sich 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("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

Wenn Sie den Formular-Antrag ausgefüllt haben und personenbezogene Daten erhoben werden, dann formulieren wir für Sie eine Einwilligungserklärung, die juristisch einwandfrei ist und den Vorgaben der DSGVO entspricht. Ohne eine solche Einwilligungserklärung kann ihr Formular bei der Erhebung von personenbezogenen Daten zukünftig nicht mehr freigegeben werden. Alle vorhanden Formulare werden auch nach und nach an die Datenschutzvorgaben angepasst.

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("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>
                    <option value="ohne">ohne Angabe</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>
                <b>Datenschutzhinweis</b>
                <p>Ihre personenbezogenen Daten... (wird von uns formuliert)</p>
            </td>
        </tr>
        <tr>
            <td align="right" valign="top">
                <input type="checkbox" name="datenschutzhinweis" id="datenschutzhinweis" value="bestätigt" aria-required="true">
            </td>
            <td>
                <label for="datenschutzhinweis">*Ich habe die Bedingungen gelesen und bin damit einverstanden.</label>
            </td>
        </tr>
        <tr>
            <td align="right"></td>
            <td><br><br><input type="submit" value="Abschicken" /></td>
        </tr>
    </table>

</form>



Vorschau

Beispielformular

*:
*:
*:
:
Datenschutzhinweis

Ihre personenbezogenen Daten... (wird von uns formuliert)



 

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.

Formular beantragen

Bitte füllen Sie den untenstehenden Formular-Antrag aus. Wir richten Ihnen dann das Formular und einen FormTools-Account ein und erstellen bei der Abfrage von personenbezogenen Daten eine Einwilligungserklärung für Sie.
Formular-Antrag

Beispielformular

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