simples HTML/jQuery Feedback/Rating Formular

by ·12 Kommentare

Ich brauchte letztens eine ganz einfache und versteckte Möglichkeit Besuchern einer Webseite Feedback zu ermöglichen. Hatte mich auch schon an meinen Webhosting Anbieter gewendet, der mir vielleicht hätte helfen können. Ich habe es dann doch alleine hinbekommen.
Also ein möglichst kleines und unaufdringliches Feedback Formular.

Einfach gesagt, schnell getan!

Demo

simple Feedback
Momentan erfolgt ein „Absenden“ via Alert, die Ergebnisse müssen dann natürlich korrekt verarbeitet statt ausgegeben werden.

Download

simple Feedback (< - Rechtsklick -> Speichern unter…)
Der gesamte Code (HTML, CSS, jQuery) steht in dieser HTML Datei. Außer 4 Bilddateien wird nichts weiter benötigt.

12 Kommentare

  5. Tolles Skript. Ich stehe allerdings auf dem Schlauch. Wie sichere ich die Bewertung und übergebe das Ergebnis der Bewertung (Klick auf die Sterne) mit den weiteren Daten an das Formular. Also mir ist klar wie ich das Formular versende und die Daten im Anschluß verarbeite, allerdings ist mir noch nicht klar wie ich das Ergebnis der Sterne-Bewertung auslesen kann.

  6. Wirf mal einen Blick in die Demo. Dort habe ich beim Klick des Absenden Buttons eine Ausgabe aller Formulardaten bewirkt. Anzahl der Sterne und Inhalt der 2 Boxen.
    Realisiert mit:
    alert(„Es wurden „+stars+“ Sterne vergeben. Positives Feedback: „+$(„#feedback .pro“).val()+“ || Negatives Feedback: „+$(„#feedback .contra“).val());

    Also auf die Textinhalte mit der jQuery Funktion .val() zugreifen.

    Die Anzahl der Sterne wird jedes mal beim Klick auf einen Stern neu in eine Variable gespeichert.
    stars = $(„#feedback .star“).index(this)+1; wird bei jedem Ändern der Sternanzahl ausgelöst.
    Man kann das auch rauslassen und die Anzahl der Sterne einfach beim Klick auf „Absenden“ erst auslösen, das wäre sogar performanter (wenn auch nur im Millisekundenbereich).

    Diese Variable stars enthält jetzt also einen numerischen Wert 0-5 und wird ausgegeben (oder eben irgendwo gespeichert etc).

  8. Hallo RoseMarie,
    entweder öffnest du die Online Demo und schaust dort in den Quelltext oder du lädst dir die .html Datei aus dem „Download“ Bereich runter und schaust dort in den Code.
    Der HTML Code enthält jegliches CSS, Javascript und natürlich das Formular 🙂

  10. hallo,

    das script sieht toll aus! klein und praktisch, genau, wie ich es gesucht habe.
    leider kenne ich mich mit js nicht aus – ich lerne gerade php und habe mir javascript und css noch auf die todo-liste gesetzt.

    ich soll für ein schulprojekt etwas erstellen auf php-basis und würde gerne so ein voting auf eine seite stellen. nun meine fragen:

    1. ist es möglich, das script nicht ein/ausblenden zu lassen, sondern einfach nur auf einer seite am rand zu erzeugen? ich würde das script über iframe einbinden.

    2. wie kann ich statt der zweiten textarea zwei einzeilige felder (name und email) einfügen?

    3. ich kenne javascript wie gesagt noch nicht. wie kann ich statt der ausgabe (ich nehme an, das ist das „alert“ *g*) javascript veranlassen, eine php-seite aufzurufen? eine art weiterleitung auf
    /../atwortseite.php?sterne=stars&kommentar=$(„#feedback .pro“).val()&name=name$email=email
    die auffang-seite php und die anbindung zu mysql habe ich bereits fertig, aber mein absende – formular besteht bisher nur aus feldern und einem radio-feld für die sterne. das hier ist deutlich hübscher!

    ich hoffe, die fragen sind nicht zuuuu aufdringlich. ich verspreche, dass ich javascript noch lernen will – nur momentan bin ich halt noch bei php.

Schreibe einen Kommentar