Request feedback after negative article vote

We have found a nice way of handling user feedback on negative votes - here it goes:

1. Add a new text field called "Originated Article" - note its ID (31107517 in my example).

2. Add a new form called "Article Feedback" - note its ID (155127 in my example).

3. Edit your theme, and the Article page HTML section add the following code after the article-vote-controls div (change the form ID, and the text to your liking):

<div class="negative-followup__c">
<p>We're sorry to hear that!</p>
<a href="/hc/en-us/requests/new?ticket_form_id=155127">Please tell us why.</a>
</div>

Add the following corresponding CSS:

/* ---- negative followup ----------- */
.negative-followup__c {
display: none;
border: 1px;
border-color: #ccc;
border-style: solid;
padding: 10px;
margin: 18px 0px;
width: 50%;
text-align: center;
background: #ccc;
}

4. Add the following script to the same Article page tab, right in the beginning:

<script>
$( document ).ready(function() {
$('.article-vote-controls').on('click',function(){
setTimeout(function(){
if ($('.article-vote-controls>a[title="No"]').attr('aria-selected')=='true') {
$('.negative-followup__c').show(500);
} else {
$('.negative-followup__c').hide(150);
}
},600);
});
});
</script>

This will bind the "click" actions on the voting buttons and show/hide the negative-feedback section.

5. Add the following script tag to the New-Requests page, right at the top. change the field ID from step 1:

<script>
$( document ).ready(function() {
$('#request_custom_fields_31107517').val(document.referrer)
$('.request_custom_fields_31107517').hide();
})
</script>

It will populate this field with the URL of the origin article, and hide it from the end user (you can omit the "hide" action so it will be visible to and editable by the user - up to you).

6. Publish all, and you are done.
Your users will see the originated article info on their request page.

 

One user's modifications

Zendesk note: These modifications were submitted by Morgan King.

I actually got it to work by adjusting the reference points. All I changed was the Article page. I wanted to do some different styling.

 

At the top of the Article page I added:

<script language="JavaScript">
function toggletext(cid)
{
if ( document.getElementById(cid).style.display == "none" )
{
document.getElementById(cid).style.display = "block";
}
else
{
document.getElementById(cid).style.display = "none";
};
}
</script>

 

Then for my 'No' vote I put: 

<p style="display:inline-block" onclick="toggletext('mytext')">{{vote 'down' class='article-vote-down' selected_class='article-voted' role='button'}}</p>

 

Then where I wanted the prompt to appear I put:

<div id="mytext" style="display: none;">
<a target="_blank" style="border:0" class="enhancement" href="/hc/en-us/requests/new#feedback"><div style="margin-top:-30px" class="enhancement">I'd Like to Submit Feedback</div></a><br /></div>

 

Also, I opted out of doing the case linking because it also did not seem to be working so I added the field to my support form to prompt people instead.