Kontaktformular

Um Formulare auf einer Website verwenden zu können, muss der Webserver die von den BenutzerInnen eingegebenen Daten übernehmen und (in eine Datenbank) ablegen können. Dazu braucht es Programmier- und Datenbankkenntnisse. Diese im Kurs zu vermitteln wäre zu viel. Daher greifen wir auf Dienste von Anbietern zurück, welche die ins Formular eingetragenen Daten übernehmen und per E-Mail an den Website-Betreiber übermitteln.

Der Vorteil der Formulare ist, dass man zur Kontaktaufnahme für die BenutzerInnen der Website keine eigene E-Mail-Adresse online stellen muss.

Einer dieser Anbieter ist DW-Formmailer (www.dw-formmailer.de). Er bietet zusätzlich einen Assistenten zur Formularerstellung (DW-Formgenerator) an, sodass wir keine Kenntnisse über Formularerstellung in HTML benötigen.
Man muss sich auch nicht anmelden, es genügt die E-Mail Adresse anzugeben, an welche die Daten weitergesendet werden sollen.
Für einfache Formulare ist dieser Dienst auch kostenlos ("Free Version") und trotzdem auf der Website in der das Formular angezeigt wird werbefrei. Einzig im E-Mail, das der Betreiber der Website bekommt, sind kurze Werbetexte eingefügt.

zum Anfang der SeiteBeispiel

Das Einbetten eines Kontaktformulars in die eigene Website kann z.B. so aussehen (Quelle: frühere Projektarbeit Webseite mit Kontaktformular (falls dieser Link nicht funktioniert: www.renaultclub.at, dann auf Menüpunkt "Über uns", dann auf Kontaktformular klicken).

 Screenshot eines Kontaktformulares
Der entsprechende Quellcode sieht dann so aus: 

<h1>Kontaktformular </h1>
<div id="formular">
<script type="text/javascript">
<!-- Anmerkung: Hier steht im Original javascript-Code für die Bedienung des Formulars. -->
</script>
<form name="dwmailer" action="http://www.dw-formmailer.de/cgi-bin/dwmailer/dwmailer.pl" 
      enctype="multipart/form-data" method="post" onsubmit="return check_form(this);">
   <input type="hidden" name="page_tv" value="" />
   <input type="hidden" name="pflicht" value="absender_name,absender_text" />
   <input type="hidden" name="empfaenger_mail" value="aW5mb0ByZW5hdWx0LWNsdWIuYXQ=" />
   <input type="hidden" name="betreff" value="Kontaktformular" />
   <input type="hidden" name="language" value="de" />
   <input type="hidden" name="page_background_color" value="#FFFFFF" />
   <input type="hidden" name="page_font_color" value="#000000" />
   <h2>Mitteilung an den C.A.R.</h2>
   <p>Ihr Name:<br />
      <input class="input" type="text" name="absender_name" />
   </p>
   <p>Ihre E-Mail Adresse:<br />
      <input class="input" type="text" name="absender_mail" />
   </p>
   <p>Ihre Mitteilung: (Restzeichen: <span id="count_1">2500</span>)<br />
      <textarea class="input" name="absender_text" id="absender_text" 
         onkeydown="rest(this,2500,'count_1',event)" onkeyup="rest(this,2500,'count_1',event)" 
         onchange="rest(this,2500,'count_1',event)">
      </textarea>
   </p>
   <p>Sicherheitscode eingeben:<br />
      <img id="refresh_image_1" src="http://www.dw-formmailer.de/image.php?ds=2" width="150" 
         height="50" border="0" alt="" />
      <input class="input" type="text" name="captcha_code_number" 
         id="captcha_code_number" maxlength="5" /><br /><br />
      <a href="javascript:void(0);" onclick="return reload_image();">Grafik neu laden</a> | 
      <a href="javascript:void(0);" onclick="return play('de');">Code anh&ouml;ren</a>
   </p>
   <p class="buttons">
      <input type="submit" value="Abschicken" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="reset" value="Zur&uuml;cksetzen" />
   </p>
   <p align="center" class="font-small">
      <a href="http://www.dw-formmailer.de" target="_blank">dw-FormGenerator 5.3.2</a>
   </p>
</form>
</div>
<p><script type="text/javascript">var ds='2';reload_init();</script></p>

Im ersten Teil (zwischen <script> und </script>) sind ca. 100 Zeilen Programmiercode, bei dem man genau auspassen sollte, das man beim Kopieren und Einfügen nichts verändert.

Im oberen Teil von <form> sind einige Eingabefelder, die nicht dargestellt werden (<imput type="hidden" …>. Sie dienen dazu, Daten wie vordefiniertes Betreff und E-Mail-Empfängeradresse (verschlüsselt) zu speichern, um dann mitgeschickt werden zu können.

Die weiteren Eingabefelder sind sichtbar.

Es ist ein Formular <form> definiert, deren id- und action-Parameter unverändert bleiben müssen. Im Formular sind fünf Eingabefelder <input> definiert. Das div um das Formular mit der id namens "suche" dient nur zum Formatieren mittels CSS.
Die einzelnen Eingabefelder haben folgende Aufgaben:

Das E-Mail, dass der Betreiber dann bekommt hat diese Struktur (stimmt inhaltlich nicht mit dem Formular oberhalb überein, da aus einem anderen Beispiel):

Von     Donald Duck <Donald.duck@disney.com>
Betreff Mitteilungstest
An      medinf-tutor@gmx.at <medinf-tutor@gmx.at>


- Professionelle Homepage Vorlagen für das kleine Budget
http://www.homepage-templates.org

Die Formulardaten wurden am 09.03.2012 um 20:04 Uhr übertragen
Formularadresse:   
--------------------------------------------------------------
Absender Mail: Donald.duck@disney.com
Name:             Donald Duck
Text:             Quack Quack
Auswahl:          passt schon    
Die Mail Empfaenger:  
---------------------------------------------------------------
1. Empfaenger: medinf-tutor@gmx.at   
IP-Country: AT Österreich      


- www.formmailer.eu - der kostenlose oder werbefreie Formmailer    

- Professionelle Homepage Vorlagen für das kleine Budget  
http://www.homepage-templates.org

 

zum Anfang der SeiteErstellen des Kontaktformulars

In der Navigationsleiste oben gibt es einen Eintrag "Formular Generator" und dort nochmals einen Eintrag "Formular Generator", den man anklickt.

(Schritt 1)

Auf der nächsten Seite gibt es ein Lehrvideo - noch nicht angeschaut, keine Ahnung ob es brauchbar ist.

Entweder ein Beispielformular aus der ersten Liste wählen, oder darunter "oder erstellen Sie ein komplett neues Formular!". Dort die Anzahl der gewünschten Felder auswählen - die kann auch später noch verändert werden - und auf "weiter zum Schritt 2" klicken.

Schritt 2: Bearbeiten der einzelnen Felder

Bei Schritt 2 gibt es oben eine kleine Hilfe Hilfe Hilfe aufrufen!, die erklärt, was die einzelnen Felder bedeuten.

In der Tabelle entspricht jede Zeile einem späterem Formularfeld oder einem Textteil.

Die einzelnen Spalten haben folgende Bedeutungen:

Feld Nr.
Mistkübel: Löschen des Feldes.
1. + : Danach noch ein Feld einfügen.
2. + : Danach noch einen Text einfügen.
3. + : Danach noch einen HTML-Code einfügen.
Pfeile: Reihenfolge der Felder verändern.
req
"required": Ist dieses Kontrollkästchen gesetzt, so ist das entsprechende Feld verpfichtend. Dies bedeutet, dass die BenutzerInnen in das Feld einen Wert eingegeben müssen. Solange sie dies nicht tun, können sie das Formular nicht absenden.
csv
"comma seperated values": Nur in der kostenpflichtigen Version benutzbar.
Feldname
Name des Formularfeldes, frei wählbar. Dieser Name wird intern für die E-Mail benutzt, um das Feld zu bezeichnen. Dieser Name scheint auf der Webseite, auf der das Formular eingebaut ist, nicht auf.
Anmerkung: Immer zuerst den Feldtyp auswählen, da dabei der Inhalt des Feldnamens überschrieben wird.
Beschreibung
Beschreibung des Feldes, frei wählbar. Diese Bezeichnung scheint neben dem Feld im Formular auf.
Anmerkung: Immer zuerst den Feldtyp auswählen, da dabei der Inhalt der Beschreibung überschrieben wird.
(leer)
Sprechblase: Fügt für das Feld das HTML-Attribut title ein. Somit kann dort ein "tooltip" angezeigt werden.
T mit Farbfeld: Nicht verwenden, erzeugt ein veraltetes HTML-Attribut mit dem die Textfarbe verändert werden könnte.
Feldtyp
Bestimmt, welchen Typ das Formularfeld hat.
size 1
Breite des Feldes als Anzahl der Zeichen. Besser später mit CSS formatieren.
size 2
Wird nur für das Feld "Dropdownmenü", "Optionsfeld" oder "Text mit Bildlauf" benötigt. Gibt die Anzahl der Optionen bzw. die Zeilenanzahl an.
size 3
Wird nur für das Feld "Text mit Bildlauf" benötigt. Gibt die Anzahl der maximalen Zeichen an und dadurch kann die aktuelle Anzahl der "Restzeichen" im Formular angezeigt werden.
?
HTML5 Attribute - noch nicht fertig. todo

Beim Eingeben von Werten immer den Feldtyp vor dem Feldnamen und der Beschreibung eingeben, da beid er Auswahl des Feldtyps die beiden anderen Felder überschrieben werden.

Sobald man fertig ist, auf "weiter zum Schritt 3" klicken.

Schritt 3: Einstellen weiterer Optionen, wenn nötig

Bei einigen Feldtypen müssen Werte vorgegeben sein. Diese werden im Schritt 3 eingegeben.

Sind keine Felder von diesen Feldtypen angelegt, so wird in diesem Schritt nichts angezeigt..

Sobald man fertig ist, auf "weiter zum Schritt 4" klicken.

Schritt 4: weitere Einstellungen

empfaenger_mail
E-Mail-Adresse an welche die von den BenutzerInnen eingegebenen Werte gesendet werden sollen.
empfaenger_name
Ein beliebiger Name. Erscheint in der E-Mail als Empfänger.
betreff
Ein beliebiger Text. Erscheint in der E-Mail als Betreff. Ist besonders dann wichtig, wenn von mehreren Formularen Daten an die selbe E-Mail-Adresse gesendet werden. Somit kann anhand des Betreffs unterschieden werden, von welchem Formular und somit von welcher Website die Daten kommen.

Diese Eingaben werden nur für die E-Mail verwendet und scheinen im Formular auf der Webseite nicht auf.

Weitere Einstellungen - noch nicht fertig. todo

Sobald man fertig ist, auf "weiter zum Ergebnis" klicken.

Ergebnis

Die Formatierungsmöglichkeiten, die am rechten Rand angeboten werden, sollte man nicht nutzen und daher schließen. Es würden veraltete HTML-Attribute verwendet werden. Besser später mit CSS formatieren!

Das Speichern ist unter einer vorgegebenen ID und einem selbstgewählten Passwort möglich. Dazu die erste Option auswählen.
Wichtig: Sowohl die ID als auch das Passwort aufbewahren!

Es wird eine Vorschau angezeigt. (In Blau gehalten, kann später mit CSS anders formatiert werden.)

Den HTML-Code des Formulars kann nun entweder mit "Download [form_not_saved.html]" als HTML-Datei gespeichert werden oder darunter als HTML-Code direkt aus dem Textfeld unter "Kopieren Sie folgenden HTML-Code und fügen ihn auf ihrer Hompage ein!" kopiert werden. Dazu "HTML-Code markieren" anklicken und dann z.B. mit Strg+C kopieren.

Den HTML-Code danach in die gewünschte HTML-Datei einfügen. Dabei am Besten mit einem Div-Element umschließen und dieses mit einer id versehen. Somit können in Folge alle Felder, Überschriften Hintergründe in CSS - gezielt mit Kontext-Selektoren - formatiert werden.

Änderungen

Sollte man draufkommen, dass man in einem vorherigen Schritt etwas ändern muss, kann man mit Hilfe der "Registerkarten" mit den Namen "Step 2" bis "Step 5" gezielt auf diesen Schritt springen.

Voransicht

Auch eine Voransicht ist jederzeit möglich. Dazu mit Hilfe der "Registerkarte" mit den Namen "Voransicht" diese aufrufen.

Tipp

Einige Ausbesserungen kann man auch nachträglich händisch in fertigen HTML-Code durchführen. Dazu braucht man aber meistens schon ein wenig Erfahrung.

Das Aussehen sollte nachträglich mit CSS formatiert werden.