Whatsapp Lead

COMPONENTS

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async custom-element="amp-inputmask" src="https://cdn.ampproject.org/v0/amp-inputmask-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

CSS

<style amp-custom>
#lightbox, #my-policy {
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  z-index: 99997!important;
  background: rgba(0, 0, 0, .5);
  }
  .lightbox, .policy {
  width: 100%;
  max-width: 600px;
  background: #fff;
  padding: 25px;
  border-radius: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }
  
  .lightbox-header .close {
  margin: -1rem -1rem -1rem auto;
  }
  .close {
  position: relative;
  float: right;
  cursor: pointer;
  font-size: 18px;
  right: -10px;
  top: -25px;
  font-weight: 900;
  z-index: 99999!important;
  }
  .policy .close {
  right: 4px;
  }
  .privacy-policy {
  text-decoration: none;
  color: #000;
  cursor: pointer;
  }
  .texto-descritivo {
  font-size: 18px;
  }
  
  button[type="submit"] {
  width: 100%;
  cursor: pointer;
  border: 0;
  background: #004d92;
  color: #fff;
  font-size: 15px;
  padding: 10px 0px;
  font-weight: 100;
  }
  .blockquote b {
  color: red;
  }
  </style>

HTML

<button class="btn btn-primary" on="tap:lightbox">
    Whats Lead
  </button>

  <amp-lightbox id="lightbox" layout="nodisplay">
    <div class="lightbox" tabindex="0">
      <div class="col-lg-12">
        <div class="lightbox-header">
          <h3 class="texto-descritivo">Entre em contato com um de nossos vendedores!</h3>
          <button class="close" on="tap:lightbox.close">
            <span aria-hidden="true">×</span>
          </button>
          <hr />
        </div>

        <div class="content">
          <form method="post" class="mbr-form" action-xhr="/api/lead/register" id="form_contact"
            custom-validation-reporting="show-all-on-submit" target="_top"
            on='submit-success: AMP.navigateTo(url="https://api.whatsapp.com/send?phone=5551999999999", target="_blank", opener=true)'>
            <input type="hidden" name="captation" value="SITE_WHATSAPP" />
            <input type="hidden" name="utm_source" value="QUERY_PARAM(utm_source)" data-amp-replace="QUERY_PARAM">
            <input type="hidden" name="media" value="QUERY_PARAM(m)" data-amp-replace="QUERY_PARAM">
            <input type="hidden" name="external_referrer" value="EXTERNAL_REFERRER"
              data-amp-replace="EXTERNAL_REFERRER">
            <input type="hidden" name="document_referrer" value="DOCUMENT_REFERRER"
              data-amp-replace="DOCUMENT_REFERRER">

            <div submitting>
              <template type="amp-mustache">
                <span class="col-lg-12 alert alert-info">
                  Enviando formulário...
                </span>
              </template>
            </div>
            <div submit-error>
              <template type="amp-mustache">
                <span class="col-lg-12 alert alert-danger">
                  {% verbatim %}
                  {{ message}}
                  {% endverbatim %}
                </span>
              </template>
            </div>

            <div class="form-group">
              <input type="text" class="form-control" name="nome" id="nome" pattern="[a-záàâãéèêíïóôõöúçñźd' ]+"
                placeholder="Nome" required="true">
              <span visible-when-invalid="valueMissing" validation-for="nome"></span>
              <span visible-when-invalid="patternMismatch" validation-for="nome">
                Esse campo só aceita letras como caracters.
              </span>
            </div>
            <div class="form-group">
              <input type="text" class="form-control" name="telefone" id="telefone" mask="(00)00000-0000"
                placeholder="Telefone" required="true">
              <span visible-when-invalid="valueMissing" validation-for="telefone"></span>
            </div>
            <div class="form-group">
              <input type="checkbox" name="politica" value="Aceito a politica de privacidade" id="privacy"
                required="true" checked>
              <a href="javascript:void(0);" target="_blank" class="privacy-policy" on="tap:my-policy"> Aceito a politica
                de privacidade</a>
              <span visible-when-invalid="valueMissing" validation-for="privacy"></span>
            </div>

            <button type="submit" class="btn btn-primary">Enviar</button>
          </form>
        </div>
      </div>
    </div>
  </amp-lightbox>

  <amp-lightbox id="my-policy" layout="nodisplay">
    <div class="policy" tabindex="0">
      <div class="lightbox-header">
        <h3>Politica de privacidade title:</h3>
        <button class="close" on="tap:my-policy.close">
          <span aria-hidden="true">×</span>
        </button>
        <hr />
      </div>
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
      </div>
    </div>
  </amp-lightbox>

LIVE DEMO