Form-Tools

Interaktive Formulare für Veranstaltungsanmeldung 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 Hochschulrechenzentrum 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: http://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

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 type="text/javascript" src="https://frmtools.uni-bielefeld.de/formtools/global/scripts/rsv.js"></script>
<script type="text/javascript">
  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("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 für den Internet Explorer, ansonsten werden Umlaute abgeschnitten:

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

 

Optionale Formularfelder:

Textfeld

Normales Textfeld:
<input name="name" />


Textfeld mit Platzhalter:
<input size="30" name="name" placeholder="mit Platzhalter" />


Textfeld mit einer maximalen Zeichenanzahl:
<input size="30" name="name" maxlength="10" />

Textarea

<textarea name="feldname" cols="50" rows="10"></textarea>

Radio-Buttons

<input type="radio" name="zahlmethode" value="Mastercard"> Mastercard<br />
<input type="radio" name="zahlmethode" value="Visa"> Visa<br />
<input type="radio" name="zahlmethode" value="AmericanExpress"> American Express

Mastercard
Visa
American Express

Checkboxen

<input type="checkbox" name="zutat1" value="Aubergine"> Aubergine<br />
<input type="checkbox" name="zutat2" value="Pilze"> Pilze<br />
<input type="checkbox" name="zutat3" value="Brokkoli"> Brokkoli

Aubergine
Pilze
Brokkoli

Dropdownbox

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



Fakultäten als insert-Datei einbinden

<select name="fakultaeten">
  <insert file="/kommunikation/internet/roxen/insert_fakultaeten.html"/>
</select>




Länder als insert-Datei einbinden

<select name="land">
  <insert file="/kommunikation/internet/roxen/insert_land.html"/>
</select>




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

File Upload

<input name="datei" type="file" size="15">

Datumseingabe

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

 

Am Ende wird das Formular abgeschlossen:

<input class="button" 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.

Formularfelder im Unigrün

Falls Sie Ihre Formulare im Unigrün gestalten möchten und folgende Codezeilen noch nicht in Ihrem Template hinterlegt sind, müssen Sie diese noch in den Kopf Ihrer Datei einfügen:

<script src="/javascript/uniform/jquery.uniform.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
  $(function () {
   $(".input, .textarea, .select, .button").uniform();
  });
</script>

<link rel="stylesheet" href="/javascript/uniform/css/uniform.default.css" type="text/css" media="screen" />

Hinweis: In den 2017er-Templates sind diese Styles bereits hinterlegt und müssen nicht mehr eingebunden werden.

Weiter gilt es dann darauf zu achten, dass die angelegten Formularfelder mit den richtigen Klassennamen beschriftet werden:

  • Einfache Textfelder: class="text"
  • Textarea: class="textarea"
  • Radio-Buttons, Checkboxen: class="input"
  • Dropdownboxen, FileUpload-Felder: class="select"
  • Buttons: class="button"

 

 

Gesamter Code:

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

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

<script type="text/javascript">
  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("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>
        <select name="Anrede">
          <option value=" ">Anrede</option>
          <option value="Herr">Herr</option>
          <option value="Frau">Frau</option>
        </select>
      </td>
    </tr>
    <tr>
      <td align="right">*Vorname:</td>
      <td><input name="vorname" size="30" /></td>
    </tr>
    <tr>
      <td align="right">*Nachname:</td>
      <td><input name="nachname" size="30" /></td>
    </tr>
    <tr>
      <td align="right">*E-Mail:</td>
      <td><input name="email" size="30" /></td>
    </tr>
    <tr>
      <td align="right" valign="top">Anmerkungen:</td>
      <td><textarea name="anmerkungen" cols="45" rows="10"></textarea></td>
    </tr>
    <tr>
      <td align="right" valign="top"></td>
      <td>
        <p><strong>Datenschutzhinweis</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" value="bestätigt"></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

*Vorname:
*Nachname:
*E-Mail:
Anmerkungen:

Datenschutzhinweis

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 bei SELFHTML.

Formularfelder im Unigrün

Sie möchten Ihre Formularfelder im Unigrün darstellen? Hier sehen Sie wie's gemacht wird!

Beispielformular

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