Add Was This Helpful buttons to your blog!

In this setup I have created a for with yes and no buttons, once the user clicks one a textbox appears allowing them to enter additional feedback about what they liked or didn't like, this data is then submitted and recorded to a Google Spreadsheet via a Google Apps Script. Looking to create a tutorial on this soon!

by Luke Gackle

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript">
	function setLikeType(liketype){
		$('#dislikebtn').removeAttr('onClick');
		$('#likebtn').removeAttr('onClick');
		$('#likebtn').addClass('btnDisabled');
		$('#dislikebtn').addClass('btnDisabled');

		if(typeof $.cookie('WTHSubmittedURLs') === 'undefined'){
			$.cookie("WTHSubmittedURLs", "", { expires: 15 });
		}
		
		if($.cookie('WTHSubmittedURLs').indexOf(window.location.href)>-1){
				$('#likebtn').hide();
				$('#dislikebtn').hide();
				$('#WTHTitle').hide();
				document.getElementById("#commentsMessage").innerHTML = 'Thankyou for your feedback.';
				document.getElementById("#commentsMessage").style.visibility = "visible";
				return;
		}
		else{
			$.cookie("WTHSubmittedURLs", $.cookie('WTHSubmittedURLs') + ", " + window.location.href, { expires: 15 });

			document.getElementById("#commentsMessage").style.visibility = "visible";
			$('#Comments').show();
			$('#submitWTH').show();
				
			$.getJSON("https://api.ipify.org/?format=json", function(e) {
				$('#IPAddress').val(e.ip);
			});
			$('#PostURL').val(window.location.href);
			$('#Site').val(document.location.hostname);

			if(liketype == 'like'){
				$('#LikeType').val('like');
				document.getElementById("#commentsMessage").innerHTML = 'Well Done! Please leave your positive feedback.';
			}
			else if(liketype == 'dislike'){
				$('#LikeType').val('dislike');
				document.getElementById("#commentsMessage").innerHTML = 'What was wrong? Please help us.';
			}
		}
	}
	
	function WTHsubmit(){
		$('#submitWTH').attr('disabled', true);
		$('#Comments').hide();
		$('#submitWTH').hide();
		$('#likebtn').hide();
		$('#dislikebtn').hide();
		$('#WTHTitle').hide();
		document.getElementById("WasThisHelpful_LG").submit();
		
		document.getElementById("#commentsMessage").innerHTML =...

CSS

a#likebtn, 
a#dislikebtn,
#submitWTH{
  -webkit-appearance: none;
  -moz-appearance:none;
  appearance:none;
  color: #fff;
  font-family:Montserrat, sans-serif !important;
  font-weight:400 !important;
  font-size: 16px !important;
  border: none;
  border-radius: 5px !important;
  -webkit-border-radius: 5px !important;
  -moz-border-radius: 5px !important;
  -webkit-box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.2);
  transition: all .2s linear 0s;
    -moz-transition: all .2s linear 0s;
    -webkit-transition: all .2s linear 0s;
    -o-transition: all .2s linear 0s;
	min-width: 40px;
    display: inline-block;
	text-align:center;
	  cursor:pointer;
}
#likebtn{
      background-color: #5bb75b !important;
	  color: white !important;
      padding: 10px !important;
}

#dislikebtn{
	  background-color: #da4f49 !important;
	  color: white !important;
      padding: 10px !important;
}

a#likebtn:hover,
a#dislikebtn:hover {
  background-color: #417cb8
}
#submitWTH:hover{
    background-color:#d29c3a !important;
}

#submitWTH{
	background-color: #417cb8;
	padding: 10px !important;
}

a#likebtn:active,
a#dislikebtn:active,
.helpful-block-content input[type="button"].wth-submit:active{
  background-color: #417cb8;
  -webkit-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2);
  border:none;
}

#WasThisHelpful_LG .btnDisabled{
ponter-events:none !important;
cursor: default !important;
background-color:grey !important;
 transition: none !important;
    -moz-transition: none !important;
    -webkit-transition: none !important;
    -o-transition: none !important;
}