Feedback- und Bewertungsfunktionen in Onlinedokumentation

Feedback von den Nutzern einer Onlinedokumentation liefert wertvolle Hinweise für Verbesserungen. Um Feedback zu erhalten, sollten Sie es Nutzern möglichst einfach machen, dieses zu geben. Dazu haben Sie mehrere Möglichkeiten.

Beispiel 1: Feedback-Links zum Senden einer vorausgefüllten E-Mail

Die einfachste Variante zum Einholen von Feedback ist ein Link zum Absenden einer E-Mail. Um es Nutzern möglichst einfach zu machen, können Sie in dieser E-Mail bereits diverse Daten mitgeben.

Tipp: Sie können dieselbe Technik auch für Links zum Support nutzen.

Testen Sie einmal folgende Beispiele:

Einfacher Feedback-Link: Send general feedback

Feedback-Link mit Angabe der Topic-URL: Send feedback on this topic

Feedback-Link mit Angabe des Topic-Titels: Send feedback on this topic

Zum Schluss noch einmal derselbe Link, aber in dieser Version können die Benutzer den Inhalt ihres Feedbacks oberhalb des voreingestellten Textes bearbeiten statt darunter: Send feedback on this topic

Implementierung zu Beispiel 1

Am besten fügen Sie einen Feedback-Link im Footer Ihrer Onlinedokumentation ein, sodass der Link automatisch in jedem Topic erscheint.

> Für den einfachen Feedback-Link benötigen Sie folgenden HTML-Code:

<a href="mailto:info@yourdomain.com?subject=Feedback%20on%20Demo%20Documentation&body=Hello%2C%20I%20have%20the%20following%20comment%3A%20%0A%0A">Send general feedback</a>

Tipp: Um einen Link wie diesen zu erstellen, können Sie ein kostenloses Tool wie den Mailto Link Generator verwenden.

> Für den Feedback-Link mit Angabe der Topic-URL benötigen Sie zuerst ein kleines JavaScript einfügen und dann den Link. In Summe sieht der erforderliche Code wie folgt aus:

<script>
 document.addEventListener("DOMContentLoaded", function() {
  var feedbackHref = document.getElementById("feedbackHref");
  feedbackHref.href = "mailto:info@yourdomain.com?subject=Feedback%20on%20Demo%20Documentation&body=Hello%2C%20I%20have%20a%20comment%20on%3A%20" + encodeURIComponent(window.location) + "%0A%0A";
 });
</script>
<a href="" id="feedbackHref">Send feedback on this topic</a>

> Auch die Variante des Feedback-Links mit Angabe des Topic-Titels benötigt ein kleines JavaScript. In Summe müssen Sie hier folgenden Code einfügen:

<script>
 document.addEventListener("DOMContentLoaded", function() {
  var feedbackHref2 = document.getElementById("feedbackHref2");
  feedbackHref2.href = "mailto:info@yourdomain.com?subject=Feedback%20on%20Demo%20Documentation&body=Hello%2C%20I%20have%20a%20comment%20on%3A%20" + document.title + "%0A%0A";
 });
</script>
<a href="" id="feedbackHref2">Send feedback on this topic</a>

> Für die letzte Variante mit der Eingabemöglichkeit oberhalb des Texts sieht der Code schließlich wie folgt aus:

<script>
 document.addEventListener("DOMContentLoaded", function() {
  var feedbackHref3 = document.getElementById("feedbackHref3");
  feedbackHref3.href = "mailto:info@yourdomain.com?subject=Feedback%20on%20Demo%20Documentation&body=%0A%09%09%09%09%0A%09%09%09%09__________%0A%09%09%09%09%0A%09%09%09Please%20add%20your%20feedback%20above%20for%3A%20" + document.title + "%0A%0A";
 });
</script>
<a href="" id="feedbackHref3">Send feedback on this topic</a>

Tipp: Viele Redaktionssysteme bieten Systemvariablen, die Sie ebenfalls verwenden können.

Beispiel 2: Thumbs-up/down und Rating-Formular

Wenn Sie in eine Onlinedokumentation eine Bewertungsfunktion einbauen möchten, bei der Nutzer die Qualität eines Topics bewerten und eventuell direkt einen Kommentar eingeben können, gibt es dafür 2 Möglichkeiten:

• Sie können einen kostenpflichtigen externen Dienst nutzen. Vorteil: Einfache Implementierung mit nur wenigen Zeilen vorgegebenem Code. Nachteile: Kosten, Abhängigkeiten vom Anbieter, datenschutzrechtliche Fragen.
• Sie können selbst eine einfache, pragmatische Lösung implementieren. Eine Lösung, die sich mit den meisten Redaktionssystemen umsetzen lässt, zeigt das folgende Beispiel.

Die erste Variante des Beispiels zeigt eine einfache Thumbs-up/down Funktion. Die zweite Variante des Beispiels ermöglicht mehrere Bewertungsstufen sowie das Erfassen eines zusätzlichen Kommentars. Mit jedem Absenden eines Kommentars schickt das System eine E-Mail an eine vorgegebene E-Mail-Adresse. Diese E-Mail enthält neben dem Bewertungsergebnis auch die URL des Topics, in dem die Bewertung abgegeben wurde.

Probieren Sie es aus!

Implementierung zu Beispiel 2

Um die Lösung möglichst einfach und universell zu machen, arbeitet sie mit einem iFrame. In jedem Topic bindet ein iFrame ein kleines Formular für die Bewertung ein. Das Formular übermittelt die Referrer URL (also die URL des Topics) zusammen mit der Bewertung an einen Formprocessor (PHP-Datei). Der Formprocessor sendet die Daten schließlich per E-Mail an einen fest vorgegebenen Empfänger. War das Senden erfolgreich, öffnet der Formprocessor eine Seite mit einer Erfolgsmeldung. Schlug das Senden fehl, öffnet der Formprocessor eine Seite mit einer Fehlermeldung. Diese Meldungen erscheinen ebenfalls innerhalb des iFrames.

Insgesamt benötigen Sie folgende Codes (passen Sie die Pfade sowie die E-Mail-Adresse des Absenders und des Empfängers wie erforderlich an):

iFrames zum Einbetten der Formulare

Variante 1 für Thumbs-up/down:

<iframe src="YOUR-PATH/thumbs-form.html" 
        id="thumbs-frame" 
        title="thumbs" 
        width="100%" 
        height="150px" 
        loading="lazy" 
        scrolling="no" 
        style="border: 0px solid white;">
</iframe>

Variante 2 für mehrere Bewertungsstufen plus Kommentar:

<iframe src="YOUR-PATH/feedback-form.html" 
        id="feedback-form-frame" 
        title="thumbs" 
        width="100%" 
        height="300px" 
        loading="lazy" 
        scrolling="no" 
        style="border: 0px solid white;">
</iframe>

Formprocessor

<?php
$mailTo = 'info@YOUR-DOMAIN.com';
$mailFrom = '"Feedback" <info@YOUR-DOMAIN.com>';
$mailSubject = 'Feedback';
$returnPage = 'message-success.html';
$returnErrorPage = 'message-error.html';
$mailText = "";
if(isset($_POST)) { 
   foreach($_POST as $name => $value) {
      if(is_array($value)) {
          $mailText .= $name . ":\n";
          foreach($valueArray as $entry) {
             $mailText .= "   " . $value . "\n";
          }
      }
      else {
          $mailText .= $name . ": " . $value . "\n";
      }
   }
}
$mailSent = @mail($mailTo, $mailSubject, $mailText, "From: ".$mailFrom);
if($mailSent == TRUE) {
   header("Location: " . $returnPage);
}
else {
   header("Location: " . $returnErrorPage);
}
exit();
?>

Beachten Sie, dass eine PHP-Datei nur dann ausgeführt wird, wenn sie auf einem Webserver liegt.

Dieser Formprocessor ist sehr einfach gehalten. Sofern die Anzahl der Kommentare nicht allzu groß ist, sollte dies ausreichen. Alternativ können Sie auch einen bereits in Ihrem Unternehmen verfügbaren Formprocessor verlinken oder einen Entwickler bitten, einen angepassten PHP-Formprocessor zu erstellen. Ein solcher könnte die abgesendeten Daten z. B. auch in eine CSV-Datei oder SQL-Datenbank schreiben, sodass die Daten statistisch ausgewertet werden können.

HTML-Datei zur Bestätigung des erfolgreichen Absendens

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Feedback success</title>
</head>
<body>
 <div style="text-align: center; margin-top: 25px;">
  <span style="color:#000000;font-family:Arial, Helvetica, sans-serif; ;font-size:16px;">Thanks for your feedback!</span>
 </div>
</body>
</html>

HTML-Datei mit einer Fehlermeldung

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Feedback error</title>
</head>
<body>
  <div style="text-align: center; margin-top: 25px;">
  <span style="color:#DC143C;font-family:Arial, Helvetica, sans-serif; font-size:16px;">Sorry, your feedback could not be sent.</span>
 </div>
</body>
</html>

Formular Variante 1 für Thumbs-up/down

Anmerkungen: Die verwendeten Symbole finden Sie auf https://fontawesome.com/. Natürlich können Sie auch andere Bilder verwenden oder z. B. Bilder mit den Texten „Ja“ und „Nein“ oder „Zufrieden“ und „Unzufrieden“ oder etwas Ähnlichem. Der CSS-Code des Formulars ist etwas länglich. Dies liegt daran, dass das Formular mit Hilfe eines visuellen Editors erstellt wurde. Wer Zeit und Lust hat, kann den Code manuell sicherlich deutlich verkürzen.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Thumbs</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
 background-color: #FFFFFF;
 color: #000000;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: normal;
 font-size: 13px;
 line-height: 1.1875;
 margin: 0;
 padding: 0;
}
input:focus, textarea:focus, select:focus {
 outline: none;
}
#my_thumbs-promt {
 background-color: transparent;
 background-image: none;
 border: 0px solid #000000;
 border-radius: 0px;
 padding: 0;
 margin: 0 0 20px 0 ;
 text-align: center;
}
#my_thumbs-promt div {
 text-align: center;
}
#my_thumbs-promt {
 display: block;
 margin: 0 0 20px 0 ;
 box-sizing: border-box;
 width: 100%;
}
#my_thumbs-container {
 clear: both;
 position: relative;
 table-layout: fixed;
 display: table;
 text-align: center;
 width: 100%;
 background-color: transparent;
 background-image: none;
 border: 0px solid #CCCCCC;
 box-sizing: border-box;
 margin: 0;
}
#thumbs-container {
 box-sizing: border-box;
 padding: 0 15px 0 15px;
 margin-right: auto;
 margin-left: auto;
}
#thumbs-container > .row {
 margin-right: -15px;
 margin-left: -15px;
}
#thumbs-container > .row > .col-1 {
 box-sizing: border-box;
 font-size: 0;
 min-height: 1px;
 padding-right: 15px;
 padding-left: 15px;
 position: relative;
}
#thumbs-container > .row > .col-1 {
 float: left;
}
#thumbs-container > .row > .col-1 {
 background-color: transparent;
 background-image: none;
 border: 0px solid #FFFFFF;
 border-radius: 0px;
 width: 100%;
 text-align: left;
}
#thumbs-container:before,
#thumbs-container:after,
#thumbs-container .row:before,
#thumbs-container .row:after {
 display: table;
 content: " ";
}
#thumbs-container:after,
#thumbs-container .row:after {
 clear: both;
}
#thumbs-down-button {
 border: 0px solid #C0C0C0;
 border-radius: 2px;
 background-color: transparent;
 background-image: url('thumbs-down.svg');
 background-repeat: no-repeat;
 background-position: center center;
 background-size: 50px 50px;
 color: #000000;
 font-family: Arial;
 font-weight: normal;
 font-style: normal;
 font-size: 13px;
 padding: 1px 6px 1px 6px;
 text-align: center;
 -webkit-appearance: none;
 margin: 0;
}
#my_thumbs-button-container {
 clear: both;
 position: relative;
 table-layout: fixed;
 display: table;
 text-align: center;
 width: 100%;
 background-color: transparent;
 background-image: none;
 border: 0px solid #CCCCCC;
 box-sizing: border-box;
 margin: 0;
}
#thumbs-button-container {
 box-sizing: border-box;
 padding: 0;
 margin-right: auto;
 margin-left: auto;
}
#thumbs-button-container > .row {
 margin-right: 0;
 margin-left: 0;
}
#thumbs-button-container > .row > .col-1, #thumbs-button-container > .row > .col-2, #thumbs-button-container > .row > .col-3, #thumbs-button-container > .row > .col-4 {
 box-sizing: border-box;
 font-size: 0;
 min-height: 1px;
 padding-right: 0px;
 padding-left: 0px;
 position: relative;
}
#thumbs-button-container > .row > .col-1, #thumbs-button-container > .row > .col-2, #thumbs-button-container > .row > .col-3, #thumbs-button-container > .row > .col-4 {
 float: left;
}
#thumbs-button-container > .row > .col-1 {
 background-color: transparent;
 background-image: none;
 border: 0px solid #FFFFFF;
 border-radius: 0px;
 width:  calc((100% - 200px) / 2);
 text-align: center;
}
#thumbs-button-container > .row > .col-2 {
 background-color: transparent;
 background-image: none;
 border: 0px solid #FFFFFF;
 border-radius: 0px;
 width: 100px;
 text-align: left;
}
#thumbs-button-container > .row > .col-3 {
 background-color: transparent;
 background-image: none;
 border: 0px solid #FFFFFF;
 border-radius: 0px;
 width: 100px;
 text-align: left;
}
#thumbs-button-container > .row > .col-4 {
 background-color: transparent;
 background-image: none;
 border: 0px solid #FFFFFF;
 border-radius: 0px;
 width:  calc((100% - 200px) / 2);
 text-align: left;
}
#thumbs-button-container:before,
#thumbs-button-container:after,
#thumbs-button-container .row:before,
#thumbs-button-container .row:after {
 display: table;
 content: " ";
}
#thumbs-button-container:after,
#thumbs-button-container .row:after {
 clear: both;
}
#my_thumbs-down-text {
 background-color: transparent;
 background-image: none;
 border: 0px solid #000000;
 border-radius: 0px;
 padding: 0;
 margin: 0;
 text-align: center;
}
#my_thumbs-down-text div {
 text-align: center;
}
#my_thumbs-down-text {
 display: block;
 margin: 0;
 box-sizing: border-box;
 width: 100%;
}
#thumbs-up-button {
 border: 0px solid #FFFFFF;
 border-radius: 0px;
 background-color: transparent;
 background-image: url('thumbs-up.svg');
 background-repeat: no-repeat;
 background-position: center center;
 background-size: 50px 50px;
 color: #FFFFFF;
 font-family: Arial;
 font-weight: normal;
 font-style: normal;
 font-size: 13px;
 padding: 1px 6px 1px 6px;
 text-align: center;
 -webkit-appearance: none;
 margin: 0;
}
#my_thumbs-up-text {
 background-color: transparent;
 background-image: none;
 border: 0px solid #000000;
 border-radius: 0px;
 padding: 0;
 margin: 0;
 text-align: center;
}
#my_thumbs-up-text div {
 text-align: center;
}
#my_thumbs-up-text {
 display: block;
 margin: 0;
 box-sizing: border-box;
 width: 100%;
}
</style>
</head>
<body>
 <div id="my_thumbs-container">
  <form name="thumbs" method="post" action="formprocessor.php" id="thumbs-container" onsubmit="return ValidateForm()">
   <input id="comefrom" name="page" type="hidden" value="">       
   <div class="row">
    <div class="col-1">
     <div id="my_thumbs-promt">
      <span style="color:#000000;font-family:Arial;font-size:16px;">Were you happy with this page?</span>
     </div>
     <div id="my_thumbs-button-container">
      <div id="thumbs-button-container">
       <div class="row">
        <div class="col-1">
        </div>
        <div class="col-2">
         <input type="submit" id="thumbs-down-button" name="unhappy" value="" style="display:inline-block;width:100px;height:51px;z-index:0;">
         <div id="my_thumbs-down-text">
          <span style="color:#000000;font-family:Arial;font-size:12px;">unhappy</span>
         </div>
        </div>
        <div class="col-3">
         <input type="submit" id="thumbs-up-button" name="happy" value="" style="display:inline-block;width:100px;height:51px;z-index:2;">
         <div id="my_thumbs-up-text">
          <span style="color:#000000;font-family:Arial;font-size:12px;">happy</span>
         </div>
        </div>
        <div class="col-4">
        </div>
       </div>
      </div>
     </div> 
    </div>
   </div>
  </form>
 </div>
 <script>
  document.getElementById('comefrom').value = document.referrer;
 </script>    
</body>
</html>

Alternativ: Formular Variante 2 für mehrere Bewertungsstufen plus Kommentar

Anmerkung: Der CSS-Code des Formulars ist etwas länglich. Dies liegt daran, dass das Formular mit Hilfe eines visuellen Editors erstellt wurde. Wer Zeit und Lust hat, kann den Code manuell sicherlich deutlich verkürzen.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Feedback</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
 background-color: #FFFFFF;
 color: #000000;
 font-family: Arial;
 font-weight: normal;
 font-size: 13px;
 line-height: 1.1875;
 margin: 0;
 padding: 0;
}
input:focus, textarea:focus, select:focus {
 outline: none;
}
#my_feedback-prompt {
 background-color: transparent;
 background-image: none;
 border: 0px solid #000000;
 border-radius: 0px;
 padding: 0;
 margin: 0 0 20px 0 ;
 text-align: center;
}
#my_feedback-prompt div {
 text-align: center;
}
#my_feedback-prompt {
 display: block;
 margin: 0 0 20px 0 ;
 box-sizing: border-box;
 width: 100%;
}
#my_feedback-container {
 clear: both;
 position: relative;
 table-layout: fixed;
 display: table;
 text-align: center;
 width: 100%;
 background-color: transparent;
 background-image: none;
 border: 0px solid #CCCCCC;
 box-sizing: border-box;
 margin: 0;
}
#feedback-container {
 box-sizing: border-box;
 padding: 0 15px 0 15px;
 margin-right: auto;
 margin-left: auto;
}
#feedback-container > .row {
 margin-right: -15px;
 margin-left: -15px;
}
#feedback-container > .row > .col-1 {
 box-sizing: border-box;
 font-size: 0;
 min-height: 1px;
 padding-right: 15px;
 padding-left: 15px;
 position: relative;
}
#feedback-container > .row > .col-1 {
 float: left;
}
#feedback-container > .row > .col-1 {
 background-color: transparent;
 background-image: none;
 border: 0px solid #FFFFFF;
 border-radius: 0px;
 width: 100%;
 text-align: left;
}
#feedback-container:before,
#feedback-container:after,
#feedback-container .row:before,
#feedback-container .row:after {
 display: table;
 content: " ";
}
#feedback-container:after,
#feedback-container .row:after {
 clear: both;
}
#my_feedback-text-container {
 clear: both;
 position: relative;
 table-layout: fixed;
 display: table;
 text-align: center;
 width: 100%;
 background-color: transparent;
 background-image: none;
 border: 0px solid #CCCCCC;
 box-sizing: border-box;
 margin: 0;
}
#feedback-text-container {
 box-sizing: border-box;
 padding: 5px 15px 5px 15px;
 margin-right: auto;
 margin-left: auto;
}
#feedback-text-container > .row {
 margin-right: -15px;
 margin-left: -15px;
}
#feedback-text-container > .row > .col-1 {
 box-sizing: border-box;
 font-size: 0;
 min-height: 1px;
 padding-right: 15px;
 padding-left: 15px;
 position: relative;
}
#feedback-text-container > .row > .col-1 {
 float: left;
}
#feedback-text-container > .row > .col-1 {
 background-color: transparent;
 background-image: none;
 border: 0px solid #FFFFFF;
 border-radius: 0px;
 width: 100%;
 text-align: center;
}
#feedback-text-container:before,
#feedback-text-container:after,
#feedback-text-container .row:before,
#feedback-text-container .row:after {
 display: table;
 content: " ";
}
#feedback-text-container:after,
#feedback-text-container .row:after {
 clear: both;
}
#my_feedback-button-container {
 clear: both;
 position: relative;
 table-layout: fixed;
 display: table;
 text-align: center;
 width: 100%;
 background-color: transparent;
 background-image: none;
 border: 0px solid #CCCCCC;
 box-sizing: border-box;
 margin: 0;
}
#feedback-button-container {
 box-sizing: border-box;
 padding: 5px 15px 5px 15px;
 margin-right: auto;
 margin-left: auto;
}
#feedback-button-container > .row {
 margin-right: -15px;
 margin-left: -15px;
}
#feedback-button-container > .row > .col-1 {
 box-sizing: border-box;
 font-size: 0;
 min-height: 1px;
 padding-right: 15px;
 padding-left: 15px;
 position: relative;
}
#feedback-button-container > .row > .col-1 {
 float: left;
}
#feedback-button-container > .row > .col-1 {
 background-color: transparent;
 background-image: none;
 border: 0px solid #FFFFFF;
 border-radius: 0px;
 width: 100%;
 text-align: center;
}
#feedback-button-container:before,
#feedback-button-container:after,
#feedback-button-container .row:before,
#feedback-button-container .row:after {
 display: table;
 content: " ";
}
#feedback-button-container:after,
#feedback-button-container .row:after {
 clear: both;
}
#feedback-text {
 border: 1px solid #CCCCCC;
 border-radius: 4px;
 background-color: #FFFFFF;
 background-image: none;
 color: #4F4F4F;
 font-family: Arial;
 font-weight: normal;
 font-style: normal;
 font-size: 13px;
 box-sizing: border-box;
 padding: 4px 4px 4px 4px;
 margin: 0;
 text-align: left;
 overflow: auto;
 resize: none;
}
#feedback-text:focus {
 border-color: #66AFE9;
 box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.60);
 outline: 0;
}
#my_feedback-range-container {
 clear: both;
 position: relative;
 table-layout: fixed;
 display: table;
 text-align: center;
 width: 100%;
 background-color: transparent;
 background-image: none;
 border: 0px solid #CCCCCC;
 box-sizing: border-box;
 margin: 0;
}
#feedback-range-container {
 box-sizing: border-box;
 padding: 5px 15px 5px 15px;
 margin-right: auto;
 margin-left: auto;
}
#feedback-range-container > .row {
 margin-right: -15px;
 margin-left: -15px;
}
#feedback-range-container > .row > .col-1 {
 box-sizing: border-box;
 font-size: 0;
 min-height: 1px;
 padding-right: 15px;
 padding-left: 15px;
 position: relative;
}
#feedback-range-container > .row > .col-1 {
 float: left;
}
#feedback-range-container > .row > .col-1 {
 background-color: transparent;
 background-image: none;
 border: 0px solid #FFFFFF;
 border-radius: 0px;
 width: 100%;
 text-align: center;
}
#feedback-range-container:before,
#feedback-range-container:after,
#feedback-range-container .row:before,
#feedback-range-container .row:after {
 display: table;
 content: " ";
}
#feedback-range-container:after,
#feedback-range-container .row:after {
 clear: both;
}
#feedback-button {
 border: 1px solid #2E6DA4;
 border-radius: 4px;
 background-color: #3370B7;
 background-image: none;
 color: #FFFFFF;
 font-family: Arial;
 font-weight: normal;
 font-style: normal;
 font-size: 13px;
 padding: 1px 6px 1px 6px;
 text-align: center;
 -webkit-appearance: none;
 margin: 0;
}
#feedback-range-control {
 width: 100%;
 height: 100%;
 padding: 0;
 background-color: transparent;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
}
#feedback-range-control:focus {
 outline: 0;
}
#feedback-range-control:focus::-webkit-slider-thumb {
 box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13,110,253,0.25);
}
#feedback-range-control:focus::-moz-range-thumb {
 box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13,110,253,0.25);
}
#feedback-range-control::-moz-focus-outer {
 border: 0;
}
#feedback-range-control::-webkit-slider-thumb {
 width: 16px;
 height: 16px;
 margin-top: -4px;
 background-color: #0D6EFD;
 border: 0;
 border-radius: 50%;
 -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 -webkit-appearance: none;
 appearance: none;
}
#feedback-range-control::-webkit-slider-thumb:active {
 background-color: #0D6EFD;
}
#feedback-range-control::-webkit-slider-runnable-track {
 width: 100%;
 height: 8px;
 color: transparent;
 cursor: pointer;
 background-color: #DEE2E6;
 border-color: transparent;
 border-radius: 8px;
}
#feedback-range-control::-moz-range-thumb {
 width: 16px;
 height: 16px;
 background-color: #0D6EFD;
 border: 0;
 border-radius: 50%;
 -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 -moz-appearance: none;
 appearance: none;
}
#feedback-range-control::-moz-range-thumb:active {
 background-color: #0D6EFD;
}
#feedback-range-control::-moz-range-track {
 width: 100%;
 height: 8px;
 color: transparent;
 cursor: pointer;
 background-color: #DEE2E6;
 border-color: transparent;
 border-radius: 8px;
}
#feedback-range-control:disabled {
 pointer-events: none;
}
#feedback-range-control:disabled::-webkit-slider-thumb {
 background-color: #adb5bd;
}
#feedback-range-control:disabled::-moz-range-thumb {
 background-color: #adb5bd;
}
#my_feedback-scale-container {
 clear: both;
 position: relative;
 table-layout: fixed;
 display: table;
 text-align: center;
 width: 100%;
 background-color: transparent;
 background-image: none;
 border: 0px solid #CCCCCC;
 box-sizing: border-box;
 margin: 0;
}
#feedback-scale-container {
 box-sizing: border-box;
 padding: 0;
 margin-right: auto;
 margin-left: auto;
}
#feedback-scale-container > .row {
 margin-right: 0;
 margin-left: 0;
}
#feedback-scale-container > .row > .col-1, #feedback-scale-container > .row > .col-2, #feedback-scale-container > .row > .col-3, #feedback-scale-container > .row > .col-4, #feedback-scale-container > .row > .col-5 {
 box-sizing: border-box;
 font-size: 0;
 min-height: 1px;
 padding-right: 0px;
 padding-left: 0px;
 position: relative;
}
#feedback-scale-container > .row > .col-1, #feedback-scale-container > .row > .col-2, #feedback-scale-container > .row > .col-3, #feedback-scale-container > .row > .col-4, #feedback-scale-container > .row > .col-5 {
 float: left;
}
#feedback-scale-container > .row > .col-1 {
 background-color: transparent;
 background-image: none;
 border: 0px solid #FFFFFF;
 border-radius: 0px;
 width:  calc((100% - 300px) / 2);
 text-align: center;
}
#feedback-scale-container > .row > .col-2 {
 background-color: transparent;
 background-image: none;
 border: 0px solid #FFFFFF;
 border-radius: 0px;
 width: 100px;
 text-align: left;
}
#feedback-scale-container > .row > .col-3 {
 background-color: transparent;
 background-image: none;
 border: 0px solid #FFFFFF;
 border-radius: 0px;
 width: 100px;
 text-align: left;
}
#feedback-scale-container > .row > .col-4 {
 background-color: transparent;
 background-image: none;
 border: 0px solid #FFFFFF;
 border-radius: 0px;
 width: 100px;
 text-align: left;
}
#feedback-scale-container > .row > .col-5 {
 background-color: transparent;
 background-image: none;
 border: 0px solid #FFFFFF;
 border-radius: 0px;
 width:  calc((100% - 300px) / 2);
 text-align: left;
}
#feedback-scale-container:before,
#feedback-scale-container:after,
#feedback-scale-container .row:before,
#feedback-scale-container .row:after {
 display: table;
 content: " ";
}
#feedback-scale-container:after,
#feedback-scale-container .row:after {
 clear: both;
}
#my_feedback-scale-1 {
 background-color: transparent;
 background-image: none;
 border: 0px solid #000000;
 border-radius: 0px;
 padding: 0;
 margin: 0;
 text-align: left;
}
#my_feedback-scale-1 div {
 text-align: left;
}
#my_feedback-scale-1 {
 display: block;
 margin: 0;
 box-sizing: border-box;
 width: 100%;
}
#my_feedback-scale-3 {
 background-color: transparent;
 background-image: none;
 border: 0px solid #000000;
 border-radius: 0px;
 padding: 0;
 margin: 0;
 text-align: right;
}
#my_feedback-scale-3 div {
 text-align: right;
}
#my_feedback-scale-3 {
 display: block;
 margin: 0;
 box-sizing: border-box;
 width: 100%;
}
#my_feedback-scale-2 {
 background-color: transparent;
 background-image: none;
 border: 0px solid #000000;
 border-radius: 0px;
 padding: 0;
 margin: 0;
 text-align: center;
}
#my_feedback-scale-2 div {
 text-align: center;
}
#my_feedback-scale-2 {
 display: block;
 margin: 0;
 box-sizing: border-box;
 width: 100%;
}
#my_comment-prompt {
 background-color: transparent;
 background-image: none;
 border: 0px solid #000000;
 border-radius: 0px;
 padding: 0;
 margin: 0;
 text-align: center;
}
#my_comment-prompt div {
 text-align: center;
}
#my_comment-prompt {
 display: block;
 margin: 0;
 box-sizing: border-box;
 width: 100%;
}
#my_comment-prompt-container {
 clear: both;
 position: relative;
 table-layout: fixed;
 display: table;
 text-align: center;
 width: 100%;
 background-color: transparent;
 background-image: none;
 border: 0px solid #CCCCCC;
 box-sizing: border-box;
 margin: 10px 0 0 0 ;
}
#comment-prompt-container {
 box-sizing: border-box;
 padding: 5px 15px 5px 15px;
 margin-right: auto;
 margin-left: auto;
}
#comment-prompt-container > .row {
 margin-right: -15px;
 margin-left: -15px;
}
#comment-prompt-container > .row > .col-1 {
 box-sizing: border-box;
 font-size: 0;
 min-height: 1px;
 padding-right: 15px;
 padding-left: 15px;
 position: relative;
}
#comment-prompt-container > .row > .col-1 {
 float: left;
}
#comment-prompt-container > .row > .col-1 {
 background-color: transparent;
 background-image: none;
 border: 0px solid #FFFFFF;
 border-radius: 0px;
 width: 100%;
 text-align: center;
}
#comment-prompt-container:before,
#comment-prompt-container:after,
#comment-prompt-container .row:before,
#comment-prompt-container .row:after {
 display: table;
 content: " ";
}
#comment-prompt-container:after,
#comment-prompt-container .row:after {
 clear: both;
}
</style>
</head>
<body>
 <div id="my_feedback-container">
  <form name="survey" method="post" action="formprocessor.php" enctype="multipart/form-data" id="feedback-container" onsubmit="return ValidateForm()">
   <input id="comefrom" name="page" type="hidden" value=""> 
   <div class="row">
    <div class="col-1">
     <div id="my_feedback-prompt">
      <span style="color:#000000;font-family:Arial;font-size:16px;">Was this page helpful?</span>
     </div>
     <div id="my_feedback-scale-container">
      <div id="feedback-scale-container">
       <div class="row">
        <div class="col-1">
        </div>
        <div class="col-2">
         <div id="my_feedback-scale-1">
          <span style="color:#000000;font-family:Arial;font-size:15px;">not helpful</span>
         </div>
         </div>
        <div class="col-3">
         <div id="my_feedback-scale-2">
          <span style="color:#000000;font-family:Arial;font-size:15px;">partly helpful</span>
         </div>
        </div>
        <div class="col-4">
         <div id="my_feedback-scale-3">
          <span style="color:#000000;font-family:Arial;font-size:15px;">very helpful</span>
         </div>
        </div>
        <div class="col-5">
        </div>
       </div>
      </div>
     </div>
     <div id="my_feedback-range-container">
      <div id="feedback-range-container">
       <div class="row">
        <div class="col-1">
         <div id="my_feedback-range-control" style="display:inline-block;width:300px;height:27px;z-index:3;">
          <input type="range" min="1" max="3" step="1" value="2" id="feedback-range-control" name="rating" title="your rating">
         </div>
        </div>
       </div>
      </div>
     </div>
     <div id="my_comment-prompt-container">
      <div id="comment-prompt-container">
       <div class="row">
        <div class="col-1">
         <div id="my_comment-prompt">
          <span style="color:#4F4F4F;font-family:Arial;font-size:15px;">Comments (optional):</span>
         </div>
        </div>
       </div>
      </div>
     </div>
     <div id="my_feedback-text-container">
      <div id="feedback-text-container">
       <div class="row">
        <div class="col-1">
         <textarea name="comments" id="feedback-text" style="display:inline-block;width:500px;height:85px;z-index:5;"></textarea>
        </div>
       </div>
      </div>
     </div>
     <div id="my_feedback-button-container">
      <div id="feedback-button-container">
       <div class="row">
        <div class="col-1">
         <input type="submit" id="feedback-button" name="button" value="Send Rating and Comments" style="display:inline-block;width:207px;height:25px;z-index:6;">
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </form>
 </div>
 <script>
  document.getElementById('comefrom').value = document.referrer;
 </script> 
</body>
</html>

Option: Anbindung eines Kommentar-Systems

Falls Sie es Ihren Kunden ermöglichen wollen, nicht nur mit Ihnen als Hersteller zu kommunizieren, sondern auch untereinander, können Sie ein Kommentar-System in Ihre Onlinedokumentation einbinden. Dies funktioniert dann ähnlich wie die Kommentare in einem Blog.

Ein leistungsfähiges, kostenlos nutzbares und vergleichsweise einfach zu integrierendes Kommentar-System ist beispielsweise Commentics. Nach der Installation auf einem Webserver ist das System mit nur zwei Zeilen Code in eine Onlinedokumentation integriert (siehe mit Commentics mitgelieferte Installations- und Integrationsanleitung).

Ein wesentlicher Vorteil bei einem auf einem eigenen Webserver installierten und betriebenen System wie Commentics ist es, dass dadurch weniger datenschutzrechtliche Hürden entstehen. Außerdem haben Sie die volle Kontrolle über die Daten und verlieren diese nicht, sollte ein externer Anbieter seinen Service einstellen.

Bei einem externen Anbieter wie z. B. Disqus müssen Sie sich hingegen nicht um die Installation und um Backups der Datenbank kümmern. Auch hier müssen nur einmalig in Ihrem Redaktionssystem ein paar Zeilen vorgegeben Code einfügen und schon haben Sie im Handumdrehen in jedem Topic Ihrer Onlinedokumentation eine Kommentarfunktion mit sämtlichen Features. Ganz unabhängig davon, ob Ihr Redaktionssystem eine solche Funktion von Haus aus explizit unterstützt oder nicht.

Option: Anbindung eines Forums

Wenn Sie ein Web-Forum betreiben, spricht vieles dafür, dieses Forum auch direkt in die Onlinedokumentation zu integrieren – zumindest ergänzend zur Möglichkeit, das Forum auch über Ihre Website aufzurufen. Nutzer der Onlinedokumentation haben damit eine zentrale Stelle für den Zugriff auf alle Ressourcen.

In den meisten Redaktionssystemen können Sie einen Eintrag im Inhaltsverzeichnis anstatt mit einem herkömmlichen Topic auch mit einer externen Webseite verknüpfen. Der Inhalt der externen Seite, in diesem Fall das Forum, erscheint dann integriert in die Onlinedokumentation wie ein normales Topic.

Falls das Einbinden als Topic in Ihrem Redaktionssystem nicht funktioniert, können Sie alternativ das Forum auch in einem iFrame anzeigen. Optisch ist das Ergebnis dasselbe.

Der zum Einbetten als iFrame benötigte Code sieht z. B. so aus:

<iframe src="https://YOUR-FORUM-URL.COM" 
        width="100%" 
        height="300px" 
        title="Forum" 
        frameborder="0">
</iframe>
<script>
 document.querySelector('iframe').style.width = "100%";
 document.querySelector('iframe').style.height = "100%";
 document.querySelector('iframe').style.top = "0";
 document.querySelector('iframe').style.left = "0";
 document.querySelector('iframe').style.position = "fixed";
 document.querySelector('iframe').style.zIndex = "8888";
</script>

Tipp: Nach demselben Schema können Sie auch ein Support-Formular direkt in eine Onlinedokumentation einbetten. Das erspart Ihren Kunden den Umweg über Ihre Website.