Lektion 13 - Ein Feedback-Formular

Antworten
Admin
Administrator
Beiträge: 83
Registriert: Di 19. Aug 2014, 10:47

Lektion 13 - Ein Feedback-Formular

Beitrag von Admin » Di 19. Aug 2014, 11:26

Feedback - Formular

Um einem Besucher die Möglichkeit zu geben mit dir in Kontakt zu treten, musst du nicht unbedingt ein Gästebuch einbinden. Viele Leser möchten das auch nicht. Da vor allem Gästebücher häufig der Grund dafür sind, dass sie Spammails bekommen.

Eine andere Möglichkeit einem Besucher die Möglichkeit zu geben mit dir in Kontakt zu treten ist ein Feedback-Formular.

[anmerk]Bild|Achtung!
Überlege dir gut, welche Daten du von deinem Besucher benötigst. Lt. Datenschutzgesetzt ist es nur erlaubt, für den Vorgang relevante Daten abzufragen.[/anmerk]

Deshalb überlege dir gut, welche Daten du benötigst. Du solltest vorsichtig sein, beim Abfragen von Alter, Postadresse, Telefonnummer ...

Um zu erfahren, was dein Besucher von deiner Seite hält, brauchst du lediglich:
  1. den Namen (damit du ihn ansprechen kannst)
  2. die E-Mail-Adresse (damit du antworten kannst)
  3. die Nachricht (was will der Besucher dir mitteilen)
Beginnen wir gleich mit einem kleinen Feedback-Formular.


Formular definieren

In der Symbolleiste findest du einen Button zum Einfügen von Formularen.

Zunächst definierst du dein Formular. Über den Eintrag "Formular definieren".
[popup]http://kompozer-8.kreativ-workshops.net/forties/screens/lektion13-1a.png[/popup][popup]http://kompozer-8.kreativ-workshops.net/forties/screens/lektion13-1.png[/popup]
Formularname
  • Mit dem Formularnamen definierst du ein eindeutiges Formular.
Aktions-Url
  • Hier wird der Ausgabewert eingetragen. In meinem Beispiel sollen die Eingaben an meine E-Mail-Adresse geschickt werden. Bei E-Mail-Adresse musst du immer ein "mailto:" vor deine E-Mail-Adresse setzen.
Methode
  • Hier wählst du POST, da der Inhalt verschickt werden soll.
Kodierung
  • Wähle text/plain. Damit wird das Eingabeergebnis in Textform an dich geschickt.
[col]Bestätige den Assistenten mit OK.

In KompoZer wird dir ein Bereich angezeigt, der mit einer dünnen blauen Linie eingerahmt ist.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]Texteingabefeld
  • Jetzt legst du die Formularfelder an. Zuerst kommt das Feld, wo der Besucher seinen Namen einträgt.
    Klicke mit dem Cursor in den Bereich und rufe über die Symbolleiste Formular - Formularfeld auf.

    Der Formularfeld-Eigenschaften Assistent bietet dir viele Einstellungsmöglichkeiten.
|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]


[col]Feldtyp
zeigt an, welche Art von Formularfeld du verwenden möchtest.

Feldeinstellungen

Feldname
  • Dies ist der Name des Feldes.
Anfangswert
  • Der Anfangswert ist eine Vorgabe, die bereits im Feld steht. Sie muss vom Besucher gelöscht werden und durch eigenen Text ersetzt werden.
Tab-Index
  • Ein Besucher kann mit der Tabulator-Taste durch ein Formular von einem Eingabefeld zum nächsten Hüpfen. Der Tabindex sagt aus, an welcher Stelle der Reihenfolge das Feld angesprochen wird.
Zugrifftaste
  • Alternativ kannst du auch eine Zugrifftaste festlegen. z.B. F3. Der Cursor springt dann automatisch in das Feld, wenn der Besucher die Taste F3 drückt.
Lass alle anderen Felder frei, da sie die Größe des Feldes festlegen. Das geht aber viel einfacher über die CSS.

Klicke auf OK um den Assistenten zu bestätigen.|Dein Erstes Eingabefeld ist fertig:

#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]


[col]Füge auf die gleiche Weise ein Eingabefeld für die E-Mail-Adresse ein.

Memo-Feld oder auch Textfeld

#
Klicke auf das Bild für die Darstellung in Originalgröße

Als drittes Feld fügst du ein Textfeld ein. Bei einem Textfeld kann ein längerer Text geschrieben werden, der in eine weitere Zeile umbricht.Über die Symbolleiste Formular - Textfeld gelangst du in den Textfeld-Eigenschaften-Assistenten.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]


Die Feldbezeichnungen sind im Prinzip die Gleichen wie beim Texteingabefeld.
Mit der Ausnahme, dass du in den Werten Reihen und Spalten mindestens eine 1 einfügen musst.
Auch das Textfeld hat einen Tab-Index. Du kannst im Umbruchmodus noch die Eigenschaften des Textumbruches bearbeiten. Bei Standard wird der Text umgebrochen, sobald das Feld zu Ende ist. Auch einen kleinen Anfangstext kannst du einfügen.

[col]Der Abschicken-Button

Zum Schluss müssen deine Besucher das Formular auch noch abschicken können. Dafür baust du einen Abschicken-Button ein. Über Symbolleiste - Formular - Formularfeld wählst du als Feldtyp den Abschicken-Button.

Lege Feldname und Feldwert fest. Der Feldwert ist die Beschriftung deines Buttons. Mit einem Tabindex fügst du den Button in die Bedienreihenfolge ein. Bestätige den Assistenten mit OK.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]Auch beim Button gibst du keine Feldgröße oder maximale Werte. Der Button wird später über CSS formatiert.

Dein Formular ist nun so weit fertig.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]


Formatiere es noch per CSS
CSS für das Formular
Klickst du in die verschiedenen Eingabefelder, siehst du in der Statusleiste, dass das Formular aus verschiedenen Elementen besteht:

<form> ist das gesamte Formular
<input> sind die Eingabefelder
<textarea> ist das Memo-Feld.

Das gibt uns ja schon mal ein paar Möglichkeiten zu formatieren. Lege für das Formular einen Rahmen an und eine Hintergrundfarbe. Mit der Klasse input kannst du allen Eingabefeldern die gleiche Breite und Höhe geben. Auch eine passende Hintergrundfarbe macht das Formular noch ein bisschen freundlicher.

Mit der Klasse textarea gibst du dem Memofeld einen Rahmen und eine Hintergrundfarbe.

Der Abschicken-Button ist auch ein <input>-Feld. Damit er nicht so breit wird wie deine Eingabefelder, legst du nur dafür eine Klasse fest.

.abschicken

[col]Gib eine Breite und Höhe an. Damit der Text schön zentriert ist, stellst du eine Zeilenhöhe ein, die der Buttonhöhe entspricht. Dein Formular könnte nun so aussehen: Lösung

Füllst du das Formular aus und klickst auf den Abschicken-Button, sollte sich dein E-Mail Programm öffnen, wo alle Angaben aus dem Formular als Text eingefügt sind.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]Es öffnet sich das E-Mail-Programm mit deiner Nachricht und der E-Mail-Adresse, die du beim Definieren des Formulars angegeben hast. Du brauchst die Mail nur noch abschicken.

Viel Spaß beim Nachbasteln!|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]



[anmerk]Bild|Achtung!
Du kannst dein Formular auch von einem Script auslesen lassen. Es gibt im Internet einige Dienste, die diesen Service kostenlos anbieten. Der Vorteil dabei ist, dass dein Besucher kein E-Mail Programm benötigt um dein Formular auszufüllen. Ein Dienst dieser Art ist z.B. der Formular-Chef[/anmerk]

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 13 - Ein Feedback-Formular

Beitrag von kp2709 » Fr 12. Sep 2014, 09:51

hallöchen zusammen bei diesen sauwetter, :arrow:

hier mein feedback,
http://reikuma27.reikuma.bplaced.de/web ... dback.html

lg
kurt
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 13 - Ein Feedback-Formular

Beitrag von anke » Fr 12. Sep 2014, 14:44

Antwort hab ich über das Formular geschickt :D

Hellriders
Beiträge: 40
Registriert: Di 18. Aug 2015, 23:02

Re: Lektion 13 - Ein Feedback-Formular

Beitrag von Hellriders » So 1. Nov 2015, 15:50

mein formular ;)

formular

Vielleicht könnte man die Felder noch leeren sobald jemand in eines das erste mal reinklickt.
Ich wollte in dieses Formular den formular-chef einbinden aber hat irgendwie nicht geklappt. :?

gruß micha

camouflage1984
Beiträge: 244
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 13 - Ein Feedback-Formular

Beitrag von camouflage1984 » So 1. Nov 2015, 23:37

Hallo Micha
Hellriders hat geschrieben:Ich wollte in dieses Formular den formular-chef einbinden aber hat irgendwie nicht geklappt.
Also soweit ich weiß kannst du keine eigenen Formulare dort eingeben, oder doch? Ich habe diesen Service noch nie genutzt deshalb meine Frage!
Hellriders hat geschrieben:Vielleicht könnte man die Felder noch leeren sobald jemand in eines das erste mal reinklickt.
das könntest du mit Javascript erstellen.

Gruß
Dimi
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 13 - Ein Feedback-Formular

Beitrag von anke » Mo 2. Nov 2015, 06:40

hi micha :)
doch, das geht auch über den Formularchef. Die haben eine Dokumentation erstellt. In der Beschreibung der Basis-Konfiguration wird beschrieben, wie du dein Formular einrichten musst.

Gruß Anke

Hellriders
Beiträge: 40
Registriert: Di 18. Aug 2015, 23:02

Re: Lektion 13 - Ein Feedback-Formular

Beitrag von Hellriders » Mo 2. Nov 2015, 11:02

Ich nutze den formular chef bereits, habe jedoch das komplette Formular von dort genommen.

Habe es mir nochmal angeschaut und das ist dabei rausgekommen:
Um formular chef im selbsterstellten Formular zu nutzen, habe ich 2 Zeilen geändert. ;)
Diese Zeile:
<form enctype="text/plain" method="post" action="mailto:eigene emailadresse" name="feedback">

wird durch folgende ersetzt:
<form action="http://www.formular-chef.de/fc.cgi" method="post" enctype="multipart/form-data" name="feedback">

und vor diesen 3 Zeilen:
<input tabindex="1" name="name" value="Dein Name"><br>
<input tabindex="2" name="email" value="Deine Emailadresse"><br>
<textarea tabindex="3" cols="2" rows="2" name="nachricht">Deine Nachricht</textarea><br>

habe ich diese reinkopiert:
<input type="hidden" name="empfaenger" value="eigene emailadresse"/>

formular mit formular-chef Einbindung

gruß micha

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste