Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Build an interactive feedback form with Javascript

Sunday, November 18th, 2018 by Servage

javascript-codeListening to feedback of users is important. The tool we are going to explore this time is not a typical feedback form. Instead, it allows visitors to give feedback interactively. Users can highlight areas or elements on a web page they need help with, write a comment to describe their issue or question, black out sensitive information and finally, send the feedback or support request.

Initial Setup and Requirements

We will achieve the above features with a tool called Feedback tool by a GitHub user JoeyAndres. This tool was previously abandoned but JoeyAndres forked the project to create a maintained version, so thank him for being able to use it.

The Feedback tool depends on jQuery, so we have to download that first. You can get the latest or any other version of jQuery you want from www.jquery.com or www.cdnjs.com. Download the file and include a link in your HTML file using the <script> tag, like this:

<script type=”text/javascript” src=”jquery.min.js”></script>

Next we will need the library itself. If you are familiar with NPM, you can install the library with this command: npm install feedback-tool. If you don’t use NPM, you can download the .js or .min.js file from the GitHub repository at https://github.com/JoeyAndres/feedback-tool/tree/master/dist. Remember to download the CSS style sheet too, either the normal or minified version and include it using the <link> tag like usually.

The last step is to initialize the plugin inside a <script> tag. The following code will do that by setting the target URL where the feedback will be submitted. Change the URL to your liking:

$.feedback({ ajaxURL: 'http://www.example.com/feedback' })

The feedback form should now be visible on your website in the lower-right corner.

Receiving and Processing Feedback

The plugin will send a POST request to the URL we specified above. You can use any implementation you wish to process the POST request. One of the most obvious ways is to use PHP and the superglobal variable $_POST[]. The keys that will be available in the $_POST[] array are “browser”, “url”, “note”, “img” and “html”. Out of these, the most important one is the “img”, which includes the image as a base64 encoded data URI. You can draw the picture on a page using:

<img src="<?php echo $_POST[“img”]; ?>" />

Other important variables are the “note”, which contains the feedback message typed by the user, and “browser”, which contains information about the visitor’s web browser.

This should get you started with a working feedback form. Check out the GitHub repository at https://github.com/JoeyAndres/feedback-tool for more complete information about the available variables and examples if you want to improve and take this implementation even further.

Build an interactive feedback form with Javascript, 5.0 out of 5 based on 3 ratings
Categories: Guides & Tutorials

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.