What do you think about our new Product Launch?

:title

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=Nunito:400,700);
@import url(//fonts.googleapis.com/css?family=Montserrat:400,700);
#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-container {                                    
  width: 320px;
  position:fixed;
  z-index:9999;
  bottom: 30px;
  right: 30px;
  background-color: rgba(87,87,87,1.00);
  padding:20px;
  border-radius:6px;
  box-shadow:0 0 10px 4px rgba(0,0,0,0.08);
  top: auto;
  left: auto;
}
#apcl-1-form{
  text-align:center;
}
.customerSatisfactionContainer{
  width:50% !important;
  height:60px;
  float:left;
  font-weight:bold !important;
  font-size:18px !important;
  background-color:rgba(255,255,255,1) !important;
  border-right: 2px solid #ccc !important;
}
.customerSatisfactionContainer:last-of-type{
  border:none !important;
}
.customerSatisfactionContainer span{
  height:60px;
  display:block !important;
  padding:0 20px !important;
  cursor:pointer;
}
.alignment{
  position:relative !important;
  top:50% !important;
  transform:translateY(-50%) !important;  
}
.customerSatisfactionContainer label{
  width:100%;
}
.customerSatisfactionContainer input[type="radio"]{
  display:none !important;
  text-align:center !important;
}
.customerSatisfactionContainer input[type="radio"]:not(:checked) + span{
}
.customerSatisfactionContainer input[type="radio"]:checked + span{
  background:#e3e3e3 !important;
}
#apcl-inputs-wrapper{
  overflow:hidden;
  border-radius:6px;  
}
.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-credits{
  width:100%;
  text-align:center;
  font-size:12px;
  color:#333;
  font-family:"Tahoma";
  bottom:-18px;
  left:0;
  position:absolute;
}
#apcl-credits a{
  font-size:12px;
  color:#333;
  border-bottom:1px solid #333;
  padding-bottom:1px;
  text-decoration:none;
}
.progress-bar-widget{
  height:60px !important;
  width: 50% !important;
  font-family: 'Fira Sans Condensed', sans-serif !important;
  float: left;
  font-weight: bold !important;
  font-size: 18px !important;
  background-color: rgba(255,255,255,1) !important;
}
.apcl-leadsSums-title{
  display:none !important;
}
.progress-bar-widget *{
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
}
.progress-bar-widget:last-child{
  border-right: none !important;
}
.progress-bar-widget:first-of-type .apcl-progress-bar-name{
  color:#24e079 !important;
} 
.progress-bar-widget:last-child .apcl-progress-bar-name{
  color:#eb344f !important;
} 
.apcl-progress-bar-name{
  display:block !important;
  margin-bottom:5px !important;
  font-size:15px !important;
  padding:0 10px !important;
}
.progress-bar{
  height:100% !important;
  text-align: center !important;
}
.apcl-percentage-bg{
  position:absolute !important;
  background:#e3e3e3 !important;
  height:100% !important;
  top:0 !important;
  left:0 !important;
  z-index:0;
}
.apcl-alignment{
  position:relative !important;
  top:50% !important;
  z-index:1;
  transform:translateY(-50%) !important;
}
.progress-span{
  display: block !important;
  padding: 0px 10px !important;
  color: rgba(0,0,0,0.5) !important;
  font-size: 16px !important;
  background-color:transparent !important;
}
.progress-percentage{
  display:none !important;
}
.apcl-leadsSums-title{
  font-size: 22px !important;
  text-align: center !important;
  margin-bottom: 20px !important;  
}
#apcl-leadsSums{
  display:none;
  overflow:hidden;
  border-radius:6px;
  position:relative;
}
#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);
}
#input-text-1 {           
  font-family: "Montserrat",sans-serif;
  color: #24e079;
  font-size: 18px;
}
#input-text-1 a {         
  font-family: "Montserrat",sans-serif;
  color: #24e079;
}
#input-text-2 {         
  font-family: "Montserrat",sans-serif;
  color: #eb344f;
  font-size: 18px;
}
#input-text-2 a {       
  font-family: "Montserrat",sans-serif;
  color: #eb344f;
}
#apcl-heading1 {                   
  color: #ffffff;
  font-family: "Nunito",sans-serif;
  font-size: 20px;
  text-align:center;
  margin-bottom:20px;
  line-height:23px;
}
#apcl-heading1 a {             
  color: #ffffff;
  font-family: "Nunito",sans-serif;
}
#apcl-close-button {                  
  position:absolute;
  top:-8px;
  right:-8px;
  border-radius:100%;
  background-color: rgba(87,87,87,1.00);
  line-height:30px;
  text-align:center;
  color: #ffffff;
  width:30px;
  height:30px;
  font-size:13px;
  cursor:pointer;
}
.progress-bar-widget:last-child .apcl-percentage-bg{
  background-color:transparent !important;
}
#apcl-close-button a {                  
  background-color: rgba(87,87,87,1.00);
  color: #ffffff;
}
#apcl-loading{
  text-align:center;
  color:#fff;
  font-family:tahoma;
  font-size:13px;
  height:100%;
  line-height:55px;
}
#apcl-loading img{
  height:35px;
  display:inline-block;
  vertical-align:middle;
  margin-left:5px;  
}
#apcl-formLoadingOverlay{
  position:absolute;
  top:0;
  left:0;
  border-radius:6px;
  background-color:rgba(255,255,255,0.6);
  width:100%;
  height:100%;
  text-align:center;
  display:none;
}
#apcl-leadsPreResults{
  position:relative;
}

HTML

<div class="apcl-reset" id="apcl-reset">
  <div id="apcl-widget-container" apcl-actions="animation" class="apcl-widget-container" apcl-title="Widget Container" apcl-group="Widget Content" apcl-controls="backgroundColor[aTags=false] positioning[topLeft=30px:30px:auto:auto:top_left.png,topRight=30px:auto:auto:30px:top_right.png,bottomRight=auto:auto:30px:30px:bottom_right.png,bottomLeft=auto:30px:30px:auto:bottom_left.png,middleLeft=30vh:30px:auto:auto:middle_left.png,middleRight=30vh:auto:auto:30px:middle_right.png]">
    <h1 class="apcl-heading1" id="apcl-heading1" apcl-controls="text fontSize fontFamily color" apcl-group="Widget Content" apcl-title="Widget Heading 1">What do you think about our new Product Launch?</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="apcl-inputs-wrapper" id="apcl-inputs-wrapper">
            <div class="radio customerSatisfactionContainer">
              <label>
                <input id="customerSatisfaction-radio-1" class="customerSatisfaction-radio-1" name="customerSatisfaction" apcl-input-name="customerSatisfaction" value="AMAZING!" required="" validation="" type="radio">
                <span><div id="input-text-1" class="input-text-1 alignment" apcl-title="Option 1" apcl-group="Widget Content" apcl-controls="text[matchValue=customerSatisfaction-radio-1] fontFamily ">AMAZING!</div>                  </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 HATE IT..." type="radio">
                <span><div id="input-text-2" class="input-text-2 alignment" apcl-title="Option 2" apcl-group="Widget Content" apcl-controls="text[matchValue=customerSatisfaction-radio-2] fontFamily ">I HATE IT...</div>                  </span>
              </label>
            </div>   
          </div>  
        </form>
      </div>
      <div class="apcl-formLoadingOverlay" id="apcl-formLoadingOverlay" apcl-group="Your Form" apcl-title="Thanks">
        <div class="apcl-loading" id="apcl-loading"> <img src="https://www.appocalypsis.com/images/Eclipse-new.svg"></div>
      </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">
          <div class="progress-bar">
            <div style="width: :percentage;" class="apcl-percentage-bg"></div>
            <div class="apcl-alignment">
              <span class="apcl-progress-bar-name">:value</span>
              <span id="progress-span" class="progress-span" apcl-title="Progress Bar" apcl-group="Widget Content">:percentage</span>
            </div>
          </div>
          <div class="progress-percentage">:count</div>
        </div>
      </div>
    </div>
    <div id="apcl-credits" class="apcl-credits">
      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" apcl-title="Widget Close Button" apcl-group="Widget Content" apcl-controls="backgroundColor color">✕</div>
  </div>
</div>

The magnificent workbench is doing some magic..

please wait and awesomeness will load..

What do you think about our new Product Launch?

:title

CSS

HTML

EXTRAS (updateable)

EXTRAS (non updateable)

Admin Hooks

JS Hooks