# 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**](/api/tags.md) attached to the current user. You can also modify the code to use [**events**](/api/events.md) 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](/files/-MdMtNUQBrLWn9t38fqc)

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.uxwizz.com/useful-examples/feedback-form-polls.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.