Coder Wrap provides free to use snippets

/**Typeo CSS Start**/
* {
 box-sizing: border-box;
}

body {
 margin: 0px;
}

/**Typeo CSS End**/
.wl-offer-main, .wl-offer-main * {
 --page-width: 1250px;
 --base-fm: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 --title-size: 40px;
 --base-size: 16px;
 --base-clr: #3f3f3f;
 --white-clr: #ffffff;
 --black-clr: #000000;
 --theme-clr: #009688;
}

.wl-offer-main {
 font-family: var(--base-fm);
 font-size: var(--base-size);
 max-width: 350px;
 width: 100%;
 position: fixed;
 bottom: 0;
 left: 40px;
 transition: 0.5s all;
 z-index: 9999;
}

.offer-pop-label {
 font-size: var(--base-size);
 padding: 15px 20px;
 color: var(--white-clr);
 background: var(--theme-clr);
 display: flex;
 font-weight: 600;
 text-align: center;
 vertical-align: middle;
 cursor: pointer;
 border-radius: 0.40rem 0.40rem 0 0;
 animation: zoom-in-zoom-out 2s ease-out infinite;
 font-family: var(--base-fm);
 text-transform: uppercase;
 width: 250px;
 margin: auto;
 justify-content: center;
}

@keyframes zoom-in-zoom-out {
 0% {
  transform: scale(1, 1);
 }

 50% {
  transform: scale(1.04, 1.04);
 }

 100% {
  transform: scale(1, 1);
 }

}

.offer-pop-form {
 box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
 width: 100%;
 position: absolute;
 padding: 25px;
 margin-top: 30px;
 border-top: var(--theme-clr) 4px solid;
 border-radius: 10px 10px 0px 0px;
 transform: translateY(calc(100% + 40px));
 bottom: 0px;
 transition: 1s all;
 z-index: 999;
 background-color: var(--white-clr);
}

.offer-pop-close {
 cursor: pointer;
 width: 40px;
 height: 40px;
 border-radius: 100%;
 background-color: var(--theme-clr);
 color: var(--white-clr);
 display: flex;
 flex-flow: row wrap;
 align-items: center;
 justify-content: center;
 font-weight: 700;
 position: absolute;
 right: 10px;
 top: -22px;
}

.offer-pop-form .gform_title {
 font-size: 32px;
 margin: 0px 0px 20px 0px;
 line-height: 1.3;
 max-width: 340px;
}

.gform_description {
 line-height: 1.3;
 margin-bottom: 20px;
}

.gform_description b {
 color: var(--theme-clr);
}

.form-control {
 margin: 6px 0px;
 background: var(--white-clr);
 border: 2px solid rgba(216, 216, 216, 0.3);
 color: var(--base-clr);
 font-size: var(--base-size);
 padding: 12px 15px;
 width: 100%;
 border-radius: 4px;
 font-family: var(--base-fm);
 outline: none;
}

.form-control:focus {
 border-color: var(--theme-clr);
}

.submit-btn {
 border: none;
 font-size: var(--base-size);
 padding: 15px 30px;
 margin: 20px auto 0;
 color: var(--white-clr);
 background: var(--theme-clr);
 display: inline-block;
 font-weight: 600;
 text-align: center;
 vertical-align: middle;
 cursor: pointer;
 border-radius: 0.40rem;
 transition: 0.5s all;
 font-family: var(--base-fm);
 text-transform: uppercase;
}

.wl-offer-open .offer-pop-form {
 transform: none;
}

 document.querySelector('.offer-pop-label').addEventListener('click', function(){
  document.querySelector('.wl-offer-main').classList.add('wl-offer-open');   
 });
 document.querySelector('.offer-pop-close').addEventListener('click', function(){
  document.querySelector('.wl-offer-main').classList.remove('wl-offer-open');   
 });