Untitled

(function () {
    if (!document.querySelector(".egContainer")) {
        try {
            /* main variables */
            var debug = 0;
            var variation_name = "";
            var $;
            /* all Pure helper functions */

            function waitForElement(selector, trigger, delayInterval, delayTimeout) {
                var interval = setInterval(function () {
                    if (
                        document &&
                        document.querySelector(selector) &&
                        document.querySelectorAll(selector).length > 0
                    ) {
                        clearInterval(interval);
                        trigger();
                    }
                }, delayInterval);
                setTimeout(function () {
                    clearInterval(interval);
                }, delayTimeout);
            }


            let egSearchbar = `<div class="egContainer">
                                    <h2 id="egResult"></h2>
                                  <div class="eg_subscribe_form">
                                  <div class="input-group">
                                     <input type="text" class="eg-form-control" name="email" placeholder="you@yachtmail.com">
                                     <span class="eg-input-group-btn">
                                          <button class="btn btn-default" id="egSubmit" type="button">Submit</button>
                                     </span>
                                     <button class="btn btn-default egbtn" type="button">Sign Up for 10% Off</button>
                                  </div>
                                </div>
                              </div>`;

            /* Variation Init */
            function init() {
                /* start your code here */
                document.querySelector("body").insertAdjacentHTML("afterend", egSearchbar);
                let submitBtn = document.querySelector("#egSubmit");
                submitBtn.addEventListener("click", function () {
                    sendData();
                });
            }

            const validateEmail = (email) => {
                return email.match(
                    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
                );
            };

            function sendData() {
                const result = document.querySelector("#egResult");
                const email = document.querySelector(".eg-form-control").value;

                if (validateEmail(email)) {
                    var form = new FormData();
                    form.append('email', email);
                    form.append('g', 'WR9rCg');
                    var xhttp = new XMLHttpRequest();
                    xhttp.onreadystatechange = function () {
                        if (this.readyState == 4 && this.status == 200) {
                          //  result.innerText = `Thank you!`
                            //result.style.color = "green";
                            document.querySelector(".eg-form-control").value = "";
                           // document.querySelector(".eg-form-control").setAttribute('disabled');
                            document.querySelector("#egSubmit").innerHTML = "Thank you!";
                            document.querySelector("#egSubmit").style.width = "100px";
                            setTimeout(function(){
                     document.querySelector('.egContainer').remove();
                            },1500);
                        }
                    };
                    xhttp.open("POST", "https://manage.kmail-lists.com/ajax/subscriptions/subscribe", true);
                    xhttp.send(form);


                } else {
                    result.innerText = `Please insert valid email`
                    result.style.color = "red";
                }

                setTimeout(() => {
                    result.innerHTML = "";
                }, 3000);
            }
            /* Initialize variation */
            waitForElement('body', init, 500, 15000);
        } catch (e) {
            if (debug) console.log(e, "error in Test" + variation_name);
        }
    }
})();



<style>
.egContainer {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  padding: 25px 15px;
  position: fixed;
  bottom: -16px;
  left: 150px;
  z-index: 99999999 !important;
}

/*.egContainer .input-group::before {
  content: "SUBSCRIBE:";
  font-size: 12px;
  position: absolute;
  top: 50%;
  font-weight: 600;
  color: #333333;
  left: 1.5%;
  transform: translateY(-50%);
}*/

.egContainer button.btn.btn-default.egbtn {
position: absolute;
left: -34%;
text-align: left;
font-size: 12px;
z-index: -9;
width: 40%;
padding-left: 12px !important;
border-radius: 14px;
font-weight: bold;
}

.egContainer .eg_subscribe_form {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.eg_subscribe_form:focus {
  outline: none;
}
.eg_subscribe_form .eg-form-control {
  border: 1px solid #F1D27A;
  outline: none;
  width: 60%;
  border-radius: 15px;
  padding-left: 10px;
}
.eg_subscribe_form .eg-form-control:focus {
  box-shadow: none;
}
.eg_subscribe_form input {
  height: 37px;
}

.eg-form-control::placeholder{
  font-family: OptimaLTP;
}

span.eg-input-group-btn {
  border-radius: 0;
}

.eg_subscribe_form button {
  border-radius: 15px;
  left: -12%;
  font-style: italic;
  padding: 0 !important;
  font-size: 12px;
  color: #000;
  background-color: #f1d27a;
  border: none;
  height: 37px;
  width: 70px;
  text-transform: uppercase;
  position: relative;
  font-weight: 800;
  transition: all ease 0.3s;
}
.eg_subscribe_form button:hover, .eg_subscribe_form button:focus{
  outline: none;
  transition: all ease 0.3s;
}

.eg_subscribe_form .eg-input-group-btn:last-child > .btn, 
.eg_subscribe_form .eg-input-group-btn:last-child > .btn-group {
  z-index: 2;
  margin-left: 0px;
}

#egResult{
  font-size: 14px;
}

@media screen and (max-width: 467px) {
  button.btn.btn-default.egbtn {
    left: -23%;
    text-align: left;
    font-size: 12px;
    z-index: -9;
    width: 44%;
  }

  .egContainer button.btn.btn-default.egbtn {
  left: -24%;
  }
}
</style>