# 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**](https://docs.uxwizz.com/api/tags) attached to the current user. You can also modify the code to use [**events**](https://docs.uxwizz.com/api/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](https://2006615411-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ltuu0c63_YY4iXfi5vJ%2F-MdMsdN2CjHiKnTD-KQi%2F-MdMtNUQBrLWn9t38fqc%2Fpoll.gif?alt=media\&token=961521ba-f6b6-4549-af84-bad31235caf5)

You can test in this [JSFiddle](https://jsfiddle.net/pohcs8y2/3/) (note that this fiddle does not actually send data to UXWizz).

### HTML:

{% hint style="info" %}
Add this before the end of the \</body> tag.
{% endhint %}

```markup
<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:

{% hint style="info" %}
Add this in a \<script> tag or include it as an external JavaScript file somewhere **after** the tracker is included.
{% endhint %}

```javascript
(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:&#x20;

{% hint style="info" %}
Include this in a \<style> tag or as an external CSS file.
{% endhint %}

```
#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:

```javascript
(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)}}
})();
```