How do you feel about Brexit?

:title

poll widget by APPOCALYPSIS

Code ON Code OFF

My Widget

Widget Name:

Animation Demo

Entry Animation:

Exit Animation:

CSS

@import url(//fonts.googleapis.com/css?family=Fjalla+One);
#widget_html_main *{     
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
  font-weight:normal;
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  vertical-align:baseline;
  line-height:normal;
  background:none;
  text-decoration:none;
  text-transform:initial;
}
#apcl-reset *{ -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
  font-weight:normal;
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  vertical-align:baseline;
  line-height:1;
  background:none;
  text-decoration:none;
  text-transform:initial;
}
#apcl-reset input:focus, #widget_html_main input:focus{
  outline:none;
}
#apcl-reset input[type="radio"], #widget_html_main input[type="radio"]{
  position:relative;
  top:auto;
  left:auto;  
}
#apcl-reset label, #widget_html_main label{
  min-height:auto;
}
#apcl-widget-wrapper{
  position: fixed;
  bottom: 0;
  right:0;
  z-index:999999999;
}
#apcl-widget-container{
  width: 420px;
  padding: 20px;
  position: relative;
  display:block;
  background:#000;
}
#apcl-1-form{
  text-align:center;
}
#apcl-heading1{
  line-height:28px;
  text-align:center;
  font-size:22px;
  margin:0px 0px 10px 0;
}
.customerSatisfactionContainer{
  display:inline-block !important;
  width:60px !important;
  margin:0 !important;
}
.customerSatisfactionContainer input[type="radio"]{
  display:none !important;
  text-align:center !important;
}
.customerSatisfactionContainer img { width:60px !important; cursor:pointer !important; }
.customerSatisfactionContainer input[type="radio"]:checked + span{
  background:transparent !important;
  background-color:#fff !important;
  display:block !important;
  border-radius:999px !important;
}
.customerSatisfactionContainer label{
  color:#333 !important;
  width:100px !important;
  padding:0 !important;
}
.optionsContainer button{
  width: 100% !important;
  border: none !important;
  color: #fff !important;
  padding: 10px !important;
  margin-top:10px !important;
  text-transform:uppercase !important;
}
.optionsContainer button:hover{
  opacity:0.9 !important;
}
#apcl-close-button{
  position:absolute;
  z-index:999999999;
  top:10px;
  right:10px;
}
#apcl-close-button span{
  position:relative;
  width:30px;
  height:30px;
  display:block;
  cursor:pointer;
}
#apcl-close-button span:before{
  content:"";
  width:18px;
  height:1px;
  background:#333;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(45deg);  
}
#apcl-close-button span:after{
  content:"";
  width:18px;
  height:1px;
  background:#333;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(-45deg);  
}
#apcl-credits{
  width:100%;
  text-align:center;
  font-size:12px;
  color:#333;
  font-family:"Tahoma";
  margin-top:20px;
}
#apcl-credits a{
  font-size:12px;
  color:#333;
  border-bottom:0.5px solid #333;
  padding-bottom:1px;
  text-decoration:none;
}
.progress-bar-widget{
  width: 100% !important;
  margin-bottom:10px !important;
  display:table !important;
  font-family: 'Fira Sans Condensed', sans-serif !important;
}
.apcl-leadsSums-title{
  display:none !important;
}
.progress-bar-widget *{
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
}
.apcl-progress-bar-name{
  width: 100% !important;
  font-size: 14px !important;
  line-height: 25px !important;
  text-align: left !important;
  padding-bottom:5px !important;
  display:block !important;
  color: #333 !important;
}
.progress-bar{
  width: 86% !important;
  float: left !important;
  background: #eee !important;
  border-radius: 40px !important;
  position: relative !important;
  line-height: 20px !important;
  height: 20px !important;
  overflow: hidden !important; 
  box-shadow: 0 0 10px -2px rgba(0,0,0,0.5) !important;
}
.progress-bar span{
  background:#1da0cb !important;
  line-height: 20px !important;
  height: 20px !important;
  display: block !important;
  padding: 0px 20px !important;
  color: rgba(255,255,255,0.7) !important;
  text-align: center !important;
  font-size: 14px !important;
}
.progress-percentage{
  width: 14% !important;
  font-size:15px !important;
  font-weight:bold !important;
  float: left !important;
  line-height: 20px !important;
  padding-left: 10px !important;
  color: #333 !important;
}
.apcl-leadsSums-title{
  font-size: 22px !important;
  text-align: center !important;
  margin-bottom: 20px !important;  
}
#apcl-leadsSums{
  display:none;
  width:80%;
  margin:0 auto;
}
#apcl-widget-container {                                   
  background-color: rgba(214,214,214,1);
}
#apcl-heading1 {      
  font-size: 18px;
  font-family: "Fjalla One",sans-serif;
  color: #292929;
}
#apcl-heading1 a {    
  font-family: "Fjalla One",sans-serif;
  color: #292929;
}
#apcl-submit {   
  background-color: rgba(79,79,79,1);
  font-family: "Fjalla One",sans-serif;
  font-size: 17px;
}
#apcl-submit a {  
  background-color: rgba(79,79,79,1);
  font-family: "Fjalla One",sans-serif;
}
#progress-span {           
  background-color: rgba(77,77,77,1);
}
#progress-span a {           
  background-color: rgba(77,77,77,1);
}

HTML

<div class="apcl-formLoadingOverlay" id="apcl-formLoadingOverlay" apcl-group="Your Form" apcl-title="Thanks"></div>
<div class="apcl-reset" id="apcl-reset">
  <div class="apcl-widget-wrapper" id="apcl-widget-wrapper">
    <div id="apcl-widget-container" class="apcl-widget-container" apcl-actions="animation" apcl-controls="backgroundColor[aTags=false]" apcl-group="Widget Content" apcl-title="Widget Container">
      <h1 class="apcl-heading1" id="apcl-heading1" apcl-controls="text fontSize fontFamily color" apcl-group="Widget Content" apcl-title="Widget Heading 1">How do you feel about Brexit?</h1>
      <div class="apcl-leadsPreResults" id="apcl-leadsPreResults">	
        <div class="optionsContainer">
          <form apcl-onsubmit-redirect-target="http://www.appocalypsis.com" apcl-onsubmit="getSums[customerSatisfaction:Customer Satisfaction]" id="apcl-1-form" apcl-title="Form" apcl-controls="onSubmit" apcl-group="Your Form"  apcl-lifecycle-label="On Form Submit" apcl-lifecycle="onSubmit">  
            <div class="radio customerSatisfactionContainer">
              <label>
                <input id="customerSatisfaction-radio-1" class="customerSatisfaction-radio-1" name="customerSatisfaction" apcl-input-name="customerSatisfaction" value="I agree" required="" type="radio" validation="">
                <span id="input-text-1" class="input-text-1"><img src="https://www.appocalypsis.com/widgetImages/apcl-satisfaction-1.png"></span>
              </label>
            </div>
            <div class="radio customerSatisfactionContainer">
              <label>
                <input id="customerSatisfaction-radio-2" class="customerSatisfaction-radio-2" name="customerSatisfaction" apcl-input-name="customerSatisfaction" value="I am OK" type="radio">
                <span id="input-text-2" class="input-text-2"><img src="https://www.appocalypsis.com/widgetImages/apcl-satisfaction-2.png"></span>
              </label>
            </div>   
            <div class="radio customerSatisfactionContainer">
              <label>
                <input id="customerSatisfaction-radio-3" class="customerSatisfaction-radio-3" name="customerSatisfaction" apcl-input-name="customerSatisfaction" value="I do not care" type="radio">
                <span id="input-text-3" class="input-text-3"><img src="https://www.appocalypsis.com/widgetImages/apcl-satisfaction-3.png"></span>
              </label>
            </div>
            <div class="radio customerSatisfactionContainer">
              <label>
                <input id="customerSatisfaction-radio-4" class="customerSatisfaction-radio-4" name="customerSatisfaction" apcl-input-name="customerSatisfaction" value="Disappointed" type="radio">
                <span id="input-text-4" class="input-text-4"><img src="https://www.appocalypsis.com/widgetImages/apcl-satisfaction-4.png"></span>
              </label>
            </div>
            <div class="radio customerSatisfactionContainer">
              <label>
                <input id="customerSatisfaction-radio-5" class="customerSatisfaction-radio-5" name="customerSatisfaction" apcl-input-name="customerSatisfaction" value="Disgusted" type="radio">
                <span id="input-text-5" class="input-text-5"><img src="https://www.appocalypsis.com/widgetImages/apcl-satisfaction-5.png"></span>
              </label>
            </div>
            <button class="apcl-submit" id="apcl-submit" apcl-controls="text backgroundColor  fontFamily fontSize color" value="Submit" apcl-title="Your Button" apcl-group="Your Form" type="submit" apcl-submited-text="Thank you">Share your feelings</button>
          </form>
        </div>
      </div>
      <div id="apcl-leadsSums">
        <div id="apcl-leadsSums-title-pattern">
          <h1 class="apcl-leadsSums-title">:title</h1>
        </div>
        <div id="apcl-leadsSums-content-pattern">
          <div class="progress-bar-widget">
            <span class="apcl-progress-bar-name">:value</span>
            <div class="progress-bar"><span id="progress-span" class="progress-span" apcl-controls="backgroundColor" apcl-title="Progress Bar" apcl-group="Widget Content" style="width: :percentage;">:count</span>votes</div>
            <div class="progress-percentage">:percentage</div>
          </div>
        </div>
      </div>
      <div id="apcl-credits" class="apcl-credits">
        poll widget by
        <a href="https://www.appocalypsis.com" target="_blank">APPOCALYPSIS</a>
      </div>
      <div id="apcl-close-button" class="apcl-close-button" apcl-actions="close"><span></span></div>  
    </div>
  </div>
</div>

The magnificent workbench is doing some magic..

please wait and awesomeness will load..

How do you feel about Brexit?

:title

CSS

HTML

EXTRAS (updateable)

EXTRAS (non updateable)

Admin Hooks

JS Hooks