Feedback form (polls)

A basic example of a poll form with a question and a simple Yes/No answer. The response is stored as a tag attached to the current user. You can also modify the code to use events instead and store more data (like the current page the user is on, the question text, username, etc.).
Example
A simple poll functionality implemented using UXWizz to store the results
You can test in this JSFiddle (note that this fiddle does not actually send data to UXWizz).
HTML:
Add this before the end of the </body> tag.
<div id="ust-poll">
  <div id="ust-poll__question">
    Is this page useful?
  </div>
  
  <div id="ust-poll__answers">
    <button class="ust-poll__answer" value="no">No</button>
    <button class="ust-poll__answer" value="yes">Yes</button>
  </div>
  
  <div id="ust-poll__close">X</div>
</div>
JavaScript:
Add this in a <script> tag or include it as an external JavaScript file somewhere after the tracker is included.
(function() {
    if (localStorage) {
    	if (localStorage['ust-poll-closed']) return;
    }
    
    var prevOnLoaded = UST.onLoaded;
    UST.onLoaded = function () {
    prevOnLoaded && prevOnLoaded();
    
    var poll = document.querySelector('#ust-poll');
    poll.style.display = 'inline-block';
    poll.style.transform = 'translateX(-50%) scaleY(1)';
    
    function close() {
      poll.style.display = 'none';
      localStorage && (localStorage['ust-poll-closed'] = true);
    }
    
    document.querySelector('#ust-poll__close').addEventListener('click', close);
    
    function clickedAnswer(e) {
      close();
      // Add a tag to the user like `poll_no` or `poll_yes`
      // You could also use addEvent instead to store more data
      UST.addTag('poll_' + e.currentTarget.value);
    }
    
    var answers = document.querySelectorAll('.ust-poll__answer');
    for (var i = 0; i < answers.length; ++i) {
    	answers[i].addEventListener('click', clickedAnswer);
    }
  }
})();
CSS: 
Include this in a <style> tag or as an external CSS file.
#ust-poll {
  display: inline-block;
  background: #1289A9;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: bold;
  color: white;
  text-align: center;
  border-radius: 10px;
  max-width: 400px;
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform-origin: bottom;
  transform: translateX(-50%) scaleY(0);
  transition: transform 0.2s ease-in-out;
  pointer-events: visible;
}
​
#ust-poll__question {
  padding-bottom: 1rem;  
}
​
#ust-poll__answers {
  display: flex;
  justify-content: space-between;
}
​
.ust-poll__answer {
  background: none;
  border: 2px solid white;
  padding: 0.5rem 1rem;
  color: white;
  width: 45%;
  cursor: pointer;
}
​
.ust-poll__answer:hover {
  background-color: rgba(255,255,255,0.1);
}
​
#ust-poll__close {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  font-family: Helvetica, sans-serif;
  font-weight: normal;
  cursor: pointer;
  font-size: 0.8rem;
  opacity: 0.5;
}
JavaScript one-liner
Alternatively, you can combine the HTML, CSS and JS in a single JS snippet and include it:
(function(){
var question='Is this page useful?';
if(localStorage){if(localStorage['ust-poll-closed']){return}}var sheet=document.createElement('style');sheet.innerHTML='#ust-poll{display:inline-block;background:#1289A9;padding:1rem 2rem;font-size:1rem;font-weight:700;color:#fff;text-align:center;border-radius:10px;max-width:400px;position:fixed;bottom:1rem;left:50%;transform-origin:bottom;transform:translateX(-50%) scaleY(0);transition:transform .2s ease-in-out;pointer-events:visible}#ust-poll__question{padding-bottom:1rem}#ust-poll__answers{display:flex;justify-content:space-between}.ust-poll__answer{background:none;border:2px solid #fff;padding:.5rem 1rem;color:#fff;width:45%;cursor:pointer}.ust-poll__answer:hover{background-color:rgba(255,255,255,0.1)}#ust-poll__close{position:absolute;right:.5rem;top:.5rem;font-family:Helvetica,sans-serif;font-weight:400;cursor:pointer;font-size:.8rem;opacity:.5}';document.body.appendChild(sheet);var div=document.createElement('div');div.innerHTML='<div id=ust-poll><div id=ust-poll__question>'+question+'</div><div id=ust-poll__answers><button class=ust-poll__answer value=no>No</button> <button class=ust-poll__answer value=yes>Yes</button></div><div id=ust-poll__close>X</div></div>';document.body.appendChild(div.firstChild);var prevOnLoaded=UST.onLoaded;UST.onLoaded=function(){prevOnLoaded&&prevOnLoaded();var poll=document.querySelector('#ust-poll');poll.style.display='inline-block';poll.style.transform='translateX(-50%) scaleY(1)';function close(){poll.style.display='none';localStorage&&(localStorage['ust-poll-closed']=true)}document.querySelector('#ust-poll__close').addEventListener('click',close);function clickedAnswer(e){close();UST.addTag('poll_'+e.currentTarget.value)}var answers=document.querySelectorAll('.ust-poll__answer');for(var i=0;i<answers.length;i+=1){answers[i].addEventListener('click',clickedAnswer)}}
})();
Last modified 10mo ago