Did you find what you
were looking for?

: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: 10px;
  right:10px;
}
#apcl-widget-container{
  width: 260px;
  padding: 20px;
  border:2px solid #8a8a8a;
  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:55px !important;
  margin:0 !important;
  margin-top:10px !important;
  margin-right:10px !important;
}
.customerSatisfactionContainer input[type="radio"]{
  display:none !important;
  text-align:center !important;
}
.customerSatisfactionContainer img { width:45px !important; cursor:pointer !important;    }
.customerSatisfactionContainer input[type="radio"]:not(:checked) + span{
  border:4px solid transparent !important; 
  display:block !important;
  height:53px !important;
  width:53px !important;
  border-radius:9999px !important;
}
.customerSatisfactionContainer input[type="radio"]:checked + span{
  border:4px solid #8a8a8a !important; 
  display:block !important;
  height:53px !important;
  width:53px !important;
  border-radius:9999px !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:1px solid #333;
  padding-bottom:1px;
  text-decoration:none;
}
.progress-bar-widget{
  width: 100% !important;
  margin-bottom:10px v;
  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%;
  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(255,255,255,1);
}
#apcl-heading1 {           
  font-size: 18px;
  font-family: "Fjalla One",sans-serif;
  color: #8a8a8a;
}
#apcl-heading1 a {         
  font-family: "Fjalla One",sans-serif;
  color: #8a8a8a;
}
#apcl-submit {                      
  background-color: rgba(191,189,180,1.00);
  font-family: "Fjalla One",sans-serif;
  font-size: 15px;
  margin-top:20px;
  padding:5px;
  ;
  color: #ffffff;
}
#apcl-submit a {                    
  background-color: rgba(191,189,180,1.00);
  font-family: "Fjalla One",sans-serif;
  color: #ffffff;
}
#progress-span {               
  background-color: rgba(148,145,133,1.00);
}
#progress-span a {               
  background-color: rgba(148,145,133,1.00);
}

HTML

<div class="apcl-formLoadingOverlay" id="apcl-formLoadingOverlay" apcl-group="Your Form" apcl-title="Thanks"></div>
<div class="apcl-widget-wrapper" id="apcl-widget-wrapper">
  <div class="apcl-reset" id="apcl-reset">
    <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">Did you find what you<br>were looking for?</h1>
      <div class="apcl-leadsPreResults" id="apcl-leadsPreResults">	
        <div class="optionsContainer" id="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="YES" required="" type="radio" validation="">
                <span id="input-text-1" class="input-text-1"><img src="https://www.appocalypsis.com/widgetImages/Apcl-Happy-01.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="NO" type="radio">
                <span id="input-text-2" class="input-text-2"><img src="https://www.appocalypsis.com/widgetImages/Apcl-Unhappy-01.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">VOTE TO SEE RESULTS</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..

Did you find what you
were looking for?

:title

CSS

HTML

EXTRAS (updateable)

EXTRAS (non updateable)

Admin Hooks

JS Hooks

The magnificent workbench is doing some magic..

please wait and awesomeness will load..

Did you find what youwere looking for?

:title

CSS

HTML

EXTRAS (updateable)

EXTRAS (non updateable)

Admin Hooks

JS Hooks

Did you find what you
were looking for?