<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css">
<!--Subscription Form Begins-->
<br>
<p class="has-text-centered">
  On-page email validation by <a target="_blank" href="https://www.devxify.com"><b>Devxify</b></a>.
</p>
<br>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"></iframe>
<div id="subscribe" style="display: block" class="has-text-centered">
  <p class="menu-label">Can I please help you too stay updated with latest posts?</p>
  <form name="sform" method="POST" id="zcampaignOptinForm" action="" target="hidden_iframe">
    <div class="field has-addons has-addons-centered">
      <p class="control">
        <input class="input" type="email" placeholder="awesome@email.com" name="CONTACT_EMAIL" id="EMBED_FORM_EMAIL_LABEL" aria-label="email" required>
      </p>
      <p class="control">
        <button onclick="formHandle(document.sform.CONTACT_EMAIL);" class="button is-link" type="submit" name="SIGNUP_SUBMIT_BUTTON" id="zcWebOptin">
          Subscribe
        </button>
      </p>
    </div>
    <div>
      <span id="normal" class="tag is-light" style="display: inline-flex">Awesome Content Ahead</span>
      <span id="success" class="tag is-link is-light" style="display: none">Check Confirmation Mail</span>
      <span id="error" class="tag is-danger is-light" style="display: none">Check Your Email Format</span>
    </div>

  </form>
</div>
<!--Subscription Form Ends-->

function formHandle(inputText) {
  var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,6})+$/;
  if (inputText.value.match(mailformat)) {
    document.getElementById("normal").style.display = "none";
    document.getElementById("success").style.display = "inline-flex";
    document.getElementById("error").style.display = "none";
    return true;
  } else {
    document.getElementById("normal").style.display = "none";
    document.getElementById("success").style.display = "none";
    document.getElementById("error").style.display = "inline-flex";
    return false;
  }
}