Feedback and rating functions in online documentation
Feedback from the users of an online documentation provides valuable insights for improvements. To obtain feedback, you should make it as easy as possible for users to provide the feedback. You can do so in various ways.
Example 1: Feedback links for sending a prefilled email
The simplest way to collect feedback is to provide a link to send an email. To make it as easy as possible for users, you can add various data to this email automatically.
Tip: You can use the same technique also for adding links to support.
Go ahead and test the following examples:
Simple feedback link: Send general feedback
Feedback link that includes the topic URL: Send feedback on this topic
Feedback link that includes the topic title: Send feedback on this topic
Finally, here is the same link again, but this version allows users to edit their feedback content above the preset text rather than below: Send feedback on this topic
Implementation for example 1
Preferably, add a feedback link in the footer of your online documentation so that the link automatically appears in each topic.
> For the simple feedback link, you need the following 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>
Tip: To create a link like this, you may like to use a free tool such as the Mailto Link Generator.
> For the feedback link that includes the topic URL, you need to insert a small JavaScript and then the link. In total, the code looks like follows:
<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>
> The variant of the feedback link that indicates the topic title also requires a little JavaScript. In total, here you need to insert the following code:
<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>
> Finally, for the last variant with the input option above the text, the code looks like this:
<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>
Tip: Many authoring tools provide system variables that you can also use.
Example 2: Thumbs-up/down and rating form
If you want to include a rating function in an online documentation, which lets users rate the quality of a topic and possibly enter a comment directly, there are 2 options to accomplish this:
▪You can use a paid external service. Advantage: Easy implementation with only a few lines of ready-made code. Disadvantages: Costs, dependencies on the provider, data privacy concerns.
▪You can set up a simple, pragmatic solution by yourself. A solution that can be implemented with most authoring tools is shown in the following example.
The first variant of the example shows a simple thumbs-up/down function. The second variant of the example supports several evaluation levels and the entry of an additional comment. Each time a comment is submitted, the system sends an email to a specified email address. This email contains the rating result as well as the URL of the topic in which the rating was submitted.
Try it out!
Implementation for example 2
To make the solution as simple and universal as possible, it works with an iFrame. In each topic, an iFrame embeds a small form for the rating. The form transmits the referrer URL (which is the URL of the topic) along with the rating to a form processor (PHP file). The form processor finally sends the data by email to a predefined recipient. If the sending was successful, the form processor opens a page with a success message. If the sending failed, the form processor opens a page with an error message. These messages also appear within the iFrame.
All combined, you need the following codes (adjust the paths and the e-mail addresses of the sender and recipient as necessary):
iFrames for embedding the forms
Variant 1 for 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>
Variant 2 for several evaluation levels plus comment:
<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>
Form processor
<?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();
?>
Note that a PHP file is executed only when it resides on a web server.
This form processor is kept very simple. If the number of comments is not very large, this should do. Alternatively, you can link to a form processor already available in your company, or you can ask a developer to create a customized PHP form processor. Such a form processor could also write the submitted data to a CSV file or to an SQL database, for example, so that the data can be statistically analyzed.
HTML file for confirming successful submission
<!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 file with an error message
<!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>
Form variant 1 for thumbs-up/down
Notes: You can find the symbols used at https://fontawesome.com/. Of course, you can also use other images or, for example, images with the texts "Yes" and "No" or "Satisfied" and "Dissatisfied" or something similar. The CSS code of the form is a bit longish. This is because the form was created with the help of a visual editor. If you have the time and inclination, you can certainly shorten the code significantly manually.
<!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>
Alternative: Form variant 2 for several evaluation levels plus comment
Note: The CSS code of the form is a bit longish. This is because the form was created with the help of a visual editor. If you have the time and inclination, you can certainly shorten the code significantly manually.
<!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: Connection of a comment system
If you want to enable your customers to communicate not only with you as the manufacturer, but also with each other, you can integrate a comment system into your online documentation. This then works similar to the comments in a blog.
A powerful, free-to-use, and comparatively easy-to-set-up comment system is Commentics, for example. After installation on a web server, the system can be integrated with only two lines of code in an online documentation (see the installation and integration instructions that come with Commentics).
A major advantage of having a system like Commentics installed and operated on your own web server is that it creates fewer data privacy issues. In addition, you have full control over the data and do not lose it, should an external provider terminate their service.
With an external provider such as Disqus, on the other hand, you do not have to worry about the installation and backups of the database. Here, too, you only need to insert a few lines of code into your authoring tool and you get a full-featured comment function in every topic of your online documentation in no time – regardless of whether your authoring tool explicitly supports such a function or not.
Option: Connection of a forum
If you operate a web forum, there are good reasons for also integrating this forum directly into the online documentation – at least in addition to the option of also accessing the forum via your website. Users of the online documentation then have a one-stop shop for accessing all resources.
In most authoring tools, you can link an entry in the table of contents to an external web page instead of a conventional topic. The content of the external page, in this case the forum, then appears integrated in the online documentation like a normal topic.
In case embedding as a topic does not work in your authoring tool, you can alternatively display the forum in an iFrame. Visually, the result is the same.
The code that you need to embed the page via an iFrame looks like this, for example:
<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>
Tip: Following the same principle, you can also directly embed a support form. This saves your customers from having to go through your website.
___
Did you benefit from this information?
In return, please link to this page, mention the page on social media, or buy one of my books.
Thank you!
Want more? See also more code snippets for enhancing online documentation, as well as my other technical documentation work aids.