Form-Tools-Quellcode

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.

Code

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="105" />

 

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>

 

Hinweistext

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" />

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"

 

Spam-Filter

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.

 

 

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");

  // 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="105" />
  <input name="cheat" type="hidden" value="&#64338;" />

  <table class="formulartabelle">
    <tr>
      <td colspan="2"><h2>Beispielformular</h2><br /></td>
    </tr>
    <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"></td>
      <td><input type="submit" value="Abschicken" /></td>
    </tr>
  </table>

</form>



Vorschau

Beispielformular


Vorname:
Nachname:
E-Mail:
Anmerkungen:

 

Weitere Hinweise zur Erzeugung von Formularfeldern finden Sie bei SELFHTML.

FAQ zu Form Tools

In unserem Wiki finden Sie eine Liste Häufig gestellter Fragen

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.