JeanBenitez
/
PlataformaEducativa


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
							<?php
include 'php/paises-estados.php';

                  
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- styles -->
    <link rel="stylesheet" href="css/style-main.css">
    <link rel="stylesheet" href="css/animations.css">
    <link rel="stylesheet" href="css/menu-main.css">
    <link rel="stylesheet" href="css/icons-platform.css">
    
    <link rel="stylesheet" href="css/style-contacto.css">
    <!-- sweet alert -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
    <!-- validations -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <!-- bootstrap core css -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />

    <title>Plataforma Educativa</title>
    <!-- Para FTP -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-46001212-3"></script>
    <!-- Recaptcha -->
    <script src="https://www.google.com/recaptcha/api.js?render=6LelvrMZAAAAAPGd9tApcZ4bmbe6RgIbVFqzzza6"></script>

    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'UA-46001212-3');

        grecaptcha.ready(function() {
            grecaptcha.execute('6LelvrMZAAAAAPGd9tApcZ4bmbe6RgIbVFqzzza6', {
                action: 'homepage'
            }).then(function(token) {
                var recaptchaResponse = document.getElementById('recaptchaResponse');
                recaptchaResponse.value = token;
            });
        });
    </script>
</head>

<body class="">

    <!-- Header -->
    <?php include('header.html'); ?>
    <!-- Fin Header -->

    <section class="bg-contacto margin">
        <div class="container pt-5 pb-5">
            <div class="row">
                <div class="col-md-6">
                    <div class="container bg-white shadow">
                    <form id="enviarFormulario" method="post" class="ml-5 mr-5 mt-5 mb-2">
                        <input type="hidden" name="recaptcha_response" id="recaptchaResponse">
                        <div class="form-row">
                            <div class="form-group col-md-12">
                                <select class="custom-select required-entry  validate-no-html-tags form-control " name="necesito" id="necesito" required="true">
                                        <option value='' selected disabled style="color: #cccccc">Indícanos en que te podemos ayudar</option>
                                        <option value='Adquirir la Plataforma Educativa'>Adquirir la Plataforma Educativa</option>
                                        <option value='Una sesión 1-a-1 para entender las funciones de la Plataforma'>Una sesión 1-a-1 para entender las funciones de la Plataforma</option>
                                        <option value='Asesoría sobre la administración de la Plataforma'>Asesoría sobre la administración de la Plataforma</option>
                                        <option value='Soporte técnico para el uso de la Plataforma'>Soporte técnico para el uso de la Plataforma</option>
                                        <option value='Otros'>Otros</option>
                                    </select>
                            </div>
                            <div class="form-group col-md-6">
                                <input placeholder="Nombre(s)" class="required-entry input-text  validate-no-html-tags form-control " name="nombre" id="nombre" type="text" required="true" />

                            </div>
                            <div class="form-group col-md-6">
                                <input placeholder="Apellidos" class="required-entry input-text  validate-no-html-tags form-control " name="apellido" id="apellido" type="text" required="true" />
                            </div>
                            <div class="form-group col-md-12">
                                <select class="custom-select required-entry  validate-no-html-tags form-control " name="cargo" id="cargo" required="true">
                                        <option value='' selected disabled style="color: #cccccc">Indícanos el cargo</option>
                                        <option value='Dueño / Propietario'> Dueño / Propietario</option>
                                        <option value='Director General'> Director General</option>
                                        <option value='Gerente o Responsable de Sistemas'> Gerente o Responsable de Sistemas</option>
                                        <option value='Profesor'> Profesor</option>
                                        <option value='Padre de Familia'> Padre de Familia</option>
                                        <option value='Alumno'> Alumno</option>
                                    </select>
                            </div>

                            <div class="form-group col-md-12">
                                <input placeholder="Institución educativa" class="required-entry input-text  validate-no-html-tags form-control " name="empresa" id="empresa" type="text" required="true" />
                            </div>
                            <div class="form-group col-md-12">
                                <input placeholder="Dirección" class="required-entry input-text  validate-no-html-tags form-control " name="direccion" id="direccion" type="text" required="true" />

                            </div>
                            <div class="form-group col-md-6">
                                <input placeholder="Código postal" class="required-entry input-text  validate-no-html-tags form-control " name="cp" id="cp" type="text" required="true" maxlength="5" />

                            </div>
                            <div class="form-group col-md-6">
                                <input placeholder="Ciudad" class="required-entry input-text  validate-no-html-tags form-control " name="ciudad" id="ciudad" type="text" required="true" />

                            </div>
                            <div class="form-group col-md-6">
                                <select class="custom-select required-entry  validate-no-html-tags form-control " name="pais" id="pais" required="true">
                                        <option value='' selected disabled style="color: #cccccc">Selecciona un País</option>
                                        <option value='MEXICO'>MÉXICO</option>
                                        <?php
                                        foreach ($paises as $pais) {
                                            if ($pais!= 'MX') {
                                                echo "<option value='".$pais."'>".$pais."</option>";
                                            }
                                        }
                                        ?>
                                    </select>
                            </div>
                            <div class="form-group col-md-6">
                                <input placeholder="Teléfono" class="required-entry input-text  validate-no-html-tags form-control " name="telefono" id="telefono" type="text" required="true" maxlength="10" />

                            </div>
                            <div class="form-group col-md-12" id="divEstado">
                                <select class="custom-select required-entry  validate-no-html-tags form-control " name="estado" id="estado" required="true">
                                        <option value='' selected disabled style="color: #cccccc">Selecciona un estado</option>
                                        <?php
                                        foreach ($estados as $estado) {
                                            echo "<option value='".$estado."'>".$estado."</option>";
                                        }
                                        ?>
                                </select>
                            </div>
                            <div class="form-group col-md-12">
                                <input placeholder="Correo electrónico" class="required-entry input-text  validate-no-html-tags form-control " name="email" id="email" type="email" required="true" />

                            </div>
                            <div class="form-group col-md-12">
                                <textarea placeholder="Comentarios" class="required-entry  validate-no-html-tags form-control " name="comentarios" id="comentarios" maxlength="80"></textarea>
                            </div>
                            <div class="form-group pl-4 col-md-12">
                                <input type="checkbox" class="form-check-input validate-no-html-tags required-entry" name="aceptar_condiciones" id="aceptar_condiciones" type="checkbox" required="true" >
                                <label for="aceptar_condiciones"  >Acepto los <a class="no-underlinee" href="legal.html" target="_blank">términos y condiciones</a></label>
                            </div>
                            <div class="col-md-12">
                                <button type="submit" id="enviar" name="enviar" class="mb-5 btn btn-primary btn-lg btn-block validation-passed">Enviar</button>
                            </div>
                            <div class="col-md-12 text-center mb-5" id="loading">
                                <img src="images/contacto/loader.gif" width="41px">
                            </div>
                        </div>
                    </form>
                    </div>
                </div>
                <div class="col-md-6">
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <?php include('footer.html'); ?>
    <!-- Fin Footer -->
    
</body>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<style>
    .error {
        font-size: 15px !important;
        font-weight: normal;
        font-family: Roboto, sans-serif;
        color: rgb(230, 59, 59);
        line-height: 1.2em;
    }
    
    .custom-select {
        color: #7c7c7c;
    }
</style>
<script>

    // script del formulario
    $('#loading').hide();
    $('#estado').prop('disabled', true);

    //Por si recargan la página
    var valor = $('#pais').val()
    if(valor == 'MEXICO'){
        $('#estado').prop('disabled', false);
    }else{
        $('#divEstado').hide();
        $('#estado').prop('disabled', true);
    }

    $('#pais').on('change', function() {
        var valor = $('#pais').val();
        if(valor == 'MEXICO'){
            $('#divEstado').show();
            $('#estado').prop('disabled', false);
        }else{
            $('#divEstado').hide();
            $('#estado').prop('disabled', true);
        }
    });


    $.validator.addMethod("numberAndLetters", function(value, element) {
        return this.optional(element) || /^[A-ZÑÁÉÍÓÚ 0-9 .,#-]+$/i.test(value);
    }, "Solo se permiten letras y números.");

    $("#enviarFormulario").validate({
        rules: {
            necesito: {
                required: true
            },
            nombre: {
                required: true,
            },
            apellidos: {
                required: true,
            },
            cargo: {
                required: true
            },
            empresa: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            telefono: {
                required: true,
                maxlength: 10
            },
            direccion: {
                required: true,
            },
            cp: {
                required: true,
            },
            ciudad: {
                required: true,
            },
            pais: {
                required: true,
            },
            comentarios: {
                required: false,
                numberAndLetters: true
            },
            aceptar_condiciones: {
                required: true
            }

        },
        messages: {
            necesito: {
                required: "Seleccione una opción de la lista"
            },
            nombre: {
                required: "El nombre es requerido."
            },
            apellido: {
                required: "Los apellidos son requeridos."
            },
            empresa: {
                required: "La empresa es requerida"
            },
            cargo: {
                required: "El cargo es requerido"
            },
            email: {
                required: "El correo electrónico es requerido.",
                email: "Ingrese un correo electrónico válido."
            },
            telefono: {
                required: "El teléfono es requerido."
            },
            direccion: {
                required: "La dirección es requerida."
            },
            cp: {
                required: "El código postal es requerido."
            },
            ciudad: {
                required: "La ciudad es requerida."
            },
            estado: {
                required: "El estado es requerido"
            },
            pais: {
                required: "El país es requerido."
            },
            comentarios: {
                required: "No se pueden ingresar carácteres alfanuméricos"
            },
            aceptar_condiciones: {
                required: "Se debe aceptar los términos y condiciones"
            }
        }
    });

    $('#enviarFormulario').submit(function(e) {
        e.preventDefault();
        var form = $("#enviarFormulario");
        if (form.valid()) {
            $('#enviar').hide();
            $('#loading').show();
            var url = "php/enviarCorreoContacto.php";
            $.ajax({
                type: "POST",
                url: url,
                data: $("#enviarFormulario").serialize(),
                success: function(data) {
                    var response = JSON.parse(data);
                    if (response.success) {
                        Swal.fire(
                            'Datos enviados correctamente',
                            response.mensaje,
                            'success'
                        );
                    } else {
                        Swal.fire(
                            'Se ha producido un error',
                            response.mensaje,
                            'error'
                        );
                    }
                    
                    $('#loading').hide();
                    $('#enviar').show(); 
                    $("#enviarFormulario").trigger("reset");
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    swal("Se ha producido un error", "No se han podido enviar los dato, Error: " + errorThrown + " ", "error");
                    $('#loading').hide();
                    $('#enviar').show();
                }
            });
        }
    });
</script>

</html>