SitioWebSolerPalau/popover-exit.html

<link rel="stylesheet" type="text/css" href="css/modal-oubonce.css">
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

<!-- Ouibounce Modal -->
<div id="ouibounce-modal" class="removeformobile">
    <div class="underlay"></div>
    <div class="modalNuevo">
        <p id="exit_modal"><img src="https://cdn-icons-png.flaticon.com/512/748/748122.png" width="20px"></p>
        <div class="modal-body">
            <div id='load'>
                <div class="hcol-6-12">
                    <img class="img-producto modal-img" src="media/img/icon-per.png">
                </div>
                <div class="hcol-6-12 grid">
                    <center>
                        <h2 class="modal-t">Suscríbete a nuestro boletín</h2><br>
                        <p>Recibe novedades al instante sobre nuevos productos y servicios.</p>
                    </center>
                    <form>
                        <input id="emailModal1" type="email" placeholder="Ingrese su correo electrónico" required>
                        <input id='enviarModal1' type="submit" value="Sí, deseo suscribirme">
                        <label style="color:red;font-size: 12px" id="emailRequerido">El correo electrónico es
                            requerido</label>
                        <label style="color:red;font-size: 12px" id="emailValido">Introduce un formato de correo
                            electrónico
                            válido</label>
                    </form>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <center>
                <p class="text-center" id="footer-modal"
                    onclick="document.getElementById('ouibounce-modal').style.display = 'none';">No, Gracias</p>
            </center>
        </div>
    </div>
</div>
<!-- final oubonce Modal -->

<!-- The Modal2 -->
<div id="myModal2" class="modal2 removeformobile">
    <!-- Modal content -->
    <div class="modal-content">
        <span class="close">&times;</span>
        <div class="hcol-12-12 " id="contenido_modal">
            <center>
                <h2 class="modal-t">¡Queremos conocerte!</h2><br>
                <p>Con estos manuales podrás informarte sobre nuestros productos.</p>
            </center>
            <form id="popover-datos1">
                <div class="form-group hcol-1-1">
                    <label for="email">Correo electrónico</label><input
                        class="required-entry input-email  validate-no-html-tags form-control " name="email" id="email"
                        type="email" />
                </div>
                <div class="form-group hcol-6-12">
                    <label for="name">Nombre</label><input
                        class="required-entry input-text  validate-no-html-tags form-control " name="nombre" id="nombre"
                        type="text" />

                </div>
                <div class="form-group hcol-6-12">
                    <label for="lastname">Apellidos</label><input
                        class="required-entry input-text  validate-no-html-tags form-control " name="apellido"
                        id="apellido" type="text" />
                </div>
                <div class="form-group hcol-1-1 checkbox">
                    <input class="validate-no-html-tags form-control underline" name="accept_conditions" id="blog_sp"
                        type="checkbox" checked=checked />
                    <label for="blog_sp">Quiero suscribirme al <a class="underline"> boletín de S&P México</a></label>
                </div>
                <div class="form-group hcol-1-1 checkbox">
                    <input class="required-entry  validate-no-html-tags form-control underline" name="accept_conditions"
                        id="accept_conditions" type="checkbox" />
                    <label for="accept_conditions">Acepto los <a class="underline" href="terminos-condiciones.php">
                            términos y condiciones</a></label>
                </div>
                <div class="hcol-1-1">
                    <button type="submit" class="btn small validation-passed" name="enviar"
                        id="enviar_form">Enviar</button>
                </div>
            </form>
            <form id="popover-datos2">
                <br>
                <div class="form-group hcol-1-1">
                    <label for="email">Correo electrónico</label><input
                        class="required-entry input-email  validate-no-html-tags form-control " name="email2"
                        id="email2" type="email" />
                </div>
                <div class="form-group hcol-1-1">
                    <label for="pr1">Empresa</label>
                    <input class="required-entry input-text  validate-no-html-tags form-control " name="pr1" id="pr1"
                        type="text" />
                </div>
                <div class="hcol-1-1">
                    <button type="submit" class="btn small validation-passed" name="enviar"
                        id="enviar_form2">Enviar</button>
                </div>
            </form>
            <form id="popover-datos3">
                <br>
                <div class="form-group hcol-1-1">
                    <label for="email">Correo electrónico</label><input
                        class="required-entry input-email  validate-no-html-tags form-control " name="email3"
                        id="email3" type="email" />
                </div>
                <div class="form-group hcol-1-1">
                    <label for="pr2">Actividad Profesional</label>
                    <div class="custom-select">
                        <select class="required-entry  validate-no-html-tags form-control " name="pr2" id="pr2">
                            <option value='' selected disabled style="color: #cccccc">Seleccione una opción...</option>
                            <option value='Academico'> I. Académico</option>
                            <option value='Agricultor'> II. Agricultor</option>
                            <option value='Arquitecto'> III. Arquitecto</option>
                            <option value='Comprador'> IV. Comprador</option>
                            <option value='Constructor'> V. Constructor</option>
                            <option value='Distribuidor'> VI. Distribuidor</option>
                            <option value='Estudiante'> VII. Estudiante</option>
                            <option value='Ganadero'> VIII. Ganadero</option>
                            <option value='Hotelero'> IX. Hotelero</option>
                            <option value='HVAC'> X. HVAC</option>
                            <option value='Industria'> XI. Industria</option>
                            <option value='Ingeniería'> XII. Ingeniería</option>
                            <option value='Instalador'> XIII. Instalador</option>
                            <option value='Mantenimiento'> XIV. Mantenimiento</option>
                            <option value='OEM'> XV. OEM</option>
                            <option value='Personal'> XVI. Personal</option>
                            <option value='Proyectista'> XVII. Proyectista</option>
                            <option value='Taller'> XVIII. Taller</option>
                            <option value='Otros'> XIX. Otros</option>
                        </select>
                    </div>
                </div>
                <div class="hcol-1-1">
                    <button type="submit" class="btn small validation-passed" name="enviar"
                        id="enviar_form3">Enviar</button>
                </div>
            </form>
            <form id="popover-datos4">
                <br>
                <div class="form-group hcol-1-1">
                    <label for="email">Correo electrónico</label>
                    <input class="required-entry input-email  validate-no-html-tags form-control " name="email4"
                        id="email4" type="email" />
                </div>
                <div class="form-group hcol-1-1">
                    <label for="pr3">País</label>
                    <input class="required-entry input-email  validate-no-html-tags form-control " name="pr3" id="pr3"
                        type="text" />
                </div>
                <div class="hcol-1-1">
                    <button type="submit" class="btn small validation-passed" name="enviar"
                        id="enviar_form4">Enviar</button>
                </div>
            </form>
            <form id="popover-datos5">
                <br>
                <div class="form-group hcol-1-1">
                    <label for="email">Correo electrónico</label><input
                        class="required-entry input-email  validate-no-html-tags form-control " name="email5"
                        id="email5" type="email" />
                </div>
                <div class="form-group hcol-1-1">
                    <label for="pr4">¿Preescribes Productos de ventilación?</label>
                    <div class="custom-select">
                        <div class="custom-select">
                            <select class="required-entry  validate-no-html-tags form-control " name="pr4" id="pr4">
                                <option value='Sí, frecuentemente '> Sí, frecuentemente </option>
                                <option value='Sí, a veces'> Sí, a veces </option>
                                <option value='No'> No </option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="hcol-1-1">
                    <button type="submit" class="btn small validation-passed" name="enviar"
                        id="enviar_form5">Enviar</button>
                </div>
            </form>

        </div>
    </div>

</div>

<script type="text/javascript">
    new VarienForm('popover-datos1', 'email');
    new VarienForm('popover-datos2', 'email');
</script>