The magnificent workbench is doing some magic..
please wait and awesomeness will load..
Remind me when Sales Season Comes!
We will remind you when the time will come
Max Every 10 days
Max Every 20 days
Max Every 1 month
Max Every 2 month
Max Every 3 months
Max Every 4 months
REMIND ME PLEASE!
widget by
APPOCALYPSIS
Exit
Code ON
Code OFF
My Widget
Widget Name:
Animation Demo
Entry Animation:
Select ENTRY Animation
Bounce In
Bounce in Down
Bounce In Left
Bounce in Right
Bounce in Up
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
flipInX
flipInY
lightSpeedIn
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
slideInDown
slideInLeft
slideInRight
slideInUp
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
Exit Animation:
Select EXIT Animation
Bounce Out
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipOutX
flipOutY
lightSpeedOut
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
CSS
@import url(//fonts.googleapis.com/css?family=Dosis:400,700); @import url(//fonts.googleapis.com/css?family=PT+Sans:400,700); @import url(//fonts.googleapis.com/css?family=Lato: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; } #appo-overlay{ width: 100%; height: 100%; z-index:999999; position:fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.8); } #appo-overlay:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; /* Adjusts for spacing */ } #widget{ background: rgba(250,113,113,0.61); position: absolute; top: 50%; width:600px; height:340px; left: 50%; transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); } #apcl-image-container{ width:40%; height:100%; float:left; } #appo-img1 { width:100%; position:relative; top:50%; transform:translateY(-50%); -moz-transform:translateY(-50%); -webkit-transform:translateY(-50%); } #widgetBody{ width: 100%; height: 100%; padding: 20px; position: relative; background-color: #fff; border-radius: 3px; background:rgba(255,255,255,1); } #apcl-widget-content{ height:100%; width:58%; float:right; position:relative; } #apcl-widget-align{ width:100%; left:0; position:absolute; top:50%; transform:translateY(-50%); -moz-transform:translateY(-50%); -webkit-transform:translateY(-50%); } #apcl-1-text { font-size: 14px; font-family: "Lato",sans-serif; border:1px solid #c2c2c2; display:block; padding:0 10px; height:40px; line-height:40px; font-weight:300; background-color: rgba(255,255,255,1); color: #363836; margin-bottom:10px; width:100%; } #apcl-1-text a { font-family: "Lato",sans-serif; color: #363836; background-color: rgba(255,255,255,1); } #apcl-1-select { padding:0 10px; height:40px; line-height:40px; width:100%; border:1px solid #c2c2c2; color:#888; display:block; outline:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; background: url(http://www.appocalypsis.com/images/forms/arrowdown.png) no-repeat right 20px center / 15px #fff; margin-bottom:10px; } #text-1 { color: #424242; font-size: 30px; font-family: "Dosis",sans-serif; background-color:none; text-align:left; max-width:90%; } #text-1 a { color: #424242; background-color:none; font-family: "Dosis",sans-serif; } #appo-overlay { background-color: rgba(0,0,0,0.76); } #apcl-credits { position:absolute; bottom:-30px; left:0px; font-size:13px; color:#fff; font-family: "Tahoma"; width:100%; text-align:center; } #apcl-credits a{ color:#fff; border-bottom:1px solid #fff; padding-bottom:1px; } #linkBtn { width:30px; height:30px; position:absolute; top:10px; right:10px; background:#333 url(https://www.appocalypsis.com/images/close-icon-white.png) no-repeat center center / 60%; display:block; cursor:pointer; } #linkBtn a { color: #fff; font-weight:bold; font-family: "Roboto",sans-serif; } #apcl-submit { font-size: 18px; font-family: "Lato",sans-serif; border:none; width:100%; padding:10px; background-color: rgba(46,46,44,1); color: #ffffff; } #apcl-submit a { background-color: rgba(46,46,44,1); color: #ffffff; } #apcl-2-text {font-size: 14px; font-family: "Lato",sans-serif; border:1px solid #c2c2c2; display:block; padding:10px; font-weight:300; background-color: rgba(255,255,255,1); color: #363836; margin: 0 auto; margin-bottom:10px; width:100%; } #apcl-text-2 { font-size: 16px; } #apcl-subtitle { font-size: 14px; margin:10px 0; font-family: "PT Sans",sans-serif; } #apcl-subtitle a { font-family: "PT Sans",sans-serif; }
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="appo-overlay" id="appo-overlay" apcl-controls="backgroundColor[aTags=false]" apcl-actions="animation" apcl-title="Overlay" apcl-group="Widget Content"> <div class="widget" id="widget" apcl-controls="" apcl-title="Your Widget" apcl-group="Widget Content"> <div apcl-controls="backgroundColor[aTags=false]" class="widgetBody" id="widgetBody" apcl-group="Widget Content"> <div class="apcl-image-container" id="apcl-image-container"> <img src="https://www.appocalypsis.com/userfiles/widgets/1324/58191cac6ce09_clock.png" apcl-title="Image" apcl-group="Widget Content" apcl-controls="image" id="appo-img1"> </div> <div class="apcl-widget-content" id="apcl-widget-content"> <div class="apcl-widget-align" id="apcl-widget-align"> <h1 apcl-controls="text fontSize fontFamily color" apcl-title="Title" id="text-1" apcl-group="Widget Content">Remind me when Sales Season Comes!</h1> <h1 apcl-controls="text fontSize fontFamily color" apcl-title="Subtitle" id="apcl-subtitle" class="apcl-subtitle" apcl-group="Widget Content">We will remind you when the time will come</h1> <form apcl-onsubmit-redirect-target="http://www.appocalypsis.com" apcl-onsubmit="close" id="apcl-1-form" apcl-title="Form" apcl-controls="onSubmit" apcl-group="Your Form" apcl-lifecycle-label="On Form Submit" apcl-lifecycle="onSubmit"> <input class="apcl-1-text" id="apcl-1-text" name="apcl-1-text" apcl-title="Your Input" apcl-controls="fontFamily placeholder color fontSize backgroundColor borderRadius validation" apcl-input-name="email" placeholder="Your E-mail" apcl-group="Your Form" required="" type="email"> <select class="apcl-1-select" id="apcl-1-select" name="apcl-1-select" apcl-title="Your dropdown" apcl-input-name="occupation" apcl-group="Your Form" required="" apcl-controls="dropdown" apcl-dropdown-opts-num="6"><option value="Max Every 10 days">Max Every 10 days</option><option value="Max Every 20 days">Max Every 20 days</option><option value="Max Every 1 month">Max Every 1 month</option><option value="Max Every 2 month">Max Every 2 month</option><option value="Max Every 3 months">Max Every 3 months</option><option value="Max Every 4 months">Max Every 4 months</option></select> <button class="apcl-submit" id="apcl-submit" apcl-controls="text backgroundColor fontFamily fontSize color" value="Register" apcl-title="Your Button" apcl-group="Your Form" type="submit">REMIND ME PLEASE!</button> </form> </div> </div> <div class="linkBtn" apcl-title="Close Button" apcl-group="Widget Content" id="linkBtn" apcl-actions="close"></div> </div><!--End widgetBody--> <div class="apcl-credits" id="apcl-credits">widget by <a href="https://www.appocalypsis.com" target="_blank">APPOCALYPSIS</a></div> </div><!--End widget--> </div> </div>
EXTRAS (updateable)
EXTRAS (non updateable)
Admin Hooks
After Entry Animation Hook /*Add your js here*/ Before Widget Opens Hook /*Add your js here*/ After Widget Opens Hook /*Add your js here*/ After Widget Closes Hook /*Add your js here*/
JS Hooks
After Entry Animation Hook /*Your js here*/ Before Widget Opens Hook /*Your js here*/ After Widget Opens Hook /*Your js here*/ After Widget Closes Hook /*Your js here*/ After Form Submits Hook /*Your js here*/