templates/contactenos/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block inner_head %}
  3.     <div class="parallax inner-head" style="background-position: 50% 0px;">
  4.         <div class="container">
  5.             <div class="row">
  6.                 <div class="col-md-12">
  7.                     <i class="fa fa-users"></i>
  8.                     <h4>Contáctanos</h4>
  9.                     <ol class="breadcrumb">
  10.                         <li><a href="{{ path('inicio') }}">Inicio</a></li>
  11.                         <li class="active">Contactanos</li>
  12.                     </ol>
  13.                 </div>
  14.             </div>
  15.         </div>
  16.     </div>
  17. {% endblock %}
  18. {% block body %}
  19.     <div class="contain-wrapp padding-bottom-50">
  20.         <div class="container">
  21.             <div class="row">
  22.                 <div class="col-md-8 col-sm-7">
  23.                     <form method="POST" id="form_contacto">
  24.                         <div class="clearfix"></div>
  25.                         <div id="success"></div>
  26.                         <div class="row wrap-form">
  27.                             <div class="col-sm-6">
  28.                                 <div class="form-group">
  29.                                     <label for="form_contacto_nombres">Nombres</label>
  30.                                     <input type="text" name="form_contacto_nombres" id="form_contacto_nombres" class="form-control required" placeholder="Ingresa tu nombre">
  31.                                     <span id="form_contacto_nombres_error" class="help-block-obligatorio"></span>
  32.                                 </div>
  33.                                 <div class="form-group">
  34.                                     <label for="form_contacto_telefono">Télefono</label>
  35.                                     <input type="text" name="form_contacto_telefono" id="form_contacto_telefono" class="form-control required" placeholder="Ingresa un número de teléfono o celular">
  36.                                     <span id="form_contacto_telefono_error" class="help-block-obligatorio"></span>
  37.                                 </div>
  38.                             </div>
  39.                             <div class="col-sm-6">
  40.                                 <div class="form-group">
  41.                                     <label for="form_contacto_apellidos">Apellidos</label>
  42.                                     <input type="text" name="form_contacto_apellidos" id="form_contacto_apellidos" class="form-control required" placeholder="Ingresa tu apellido">
  43.                                     <span id="form_contacto_apellidos_error" class="help-block-obligatorio"></span>
  44.                                 </div>
  45.                                 <div class="form-group">
  46.                                     <label for="form_contacto_email">Email</label>
  47.                                     <input type="email" name="form_contacto_email" id="form_contacto_email" class="form-control required" placeholder="Ingresa tu E-mail">
  48.                                     <span id="form_contacto_email_error" class="help-block-obligatorio"></span>
  49.                                 </div>
  50.                             </div>
  51.                             <div class="form-group col-md-12">
  52.                                 <label for="form_contacto_mensaje">Tu mensaje</label>
  53.                                 <textarea name="form_contacto_mensaje" id="form_contacto_mensaje" class="form-control required" placeholder="Escribe algo para nosotros..." rows="9"></textarea>
  54.                                 <span id="form_contacto_mensaje_error" class="help-block-obligatorio"></span>
  55.                             </div>
  56.                             <div class="form-group col-md-12">
  57.                                 <a href="#" onclick="formEnviarContacto(); return false;" class="btn-e btn-e-primary">Enviar</a>
  58.                             </div>
  59.                         </div>
  60.                     </form>
  61.                 </div>
  62.                 <div class="col-md-4 col-sm-5">
  63.                     <div class="contact-detail">
  64.                         <div class="contact-sparator"></div>
  65.                         <ul class="list-unstyled">
  66.                             <li>
  67.                                 <h6><i class="fa fa-phone fa-2x fa-primary"></i> Llámanos</h6>
  68.                                 <p>
  69.                                     + 56 9 84791170
  70.                                 </p>
  71.                             </li>
  72.                             <li>
  73.                                 <h6><i class="fa fa-envelope fa-2x fa-primary"></i> Contáctanos</h6>
  74.                                 <p>contacto@bricappropiedades.cl</p> 
  75.                                 <p>j.apiolaza@bricappropiedades.cl</p>
  76.                                 <p>g.briceno@bricappropiedades.cl</p>
  77.                             </li>
  78.                         </ul>
  79.                     </div>
  80.                 </div>
  81.             </div>
  82.         </div>
  83.     </div>
  84. {% endblock %}
  85. {% block javascripts %}
  86.     <script>
  88.         function formEnviarContacto(){
  89.             var path       = Routing.generate("contactenos_enviar_correo");
  90.             var formulario = $("#form_contacto").serialize();
  92.             var validarFormulario = validarFormularioContacto();
  94.             // if(validarFormulario){
  95.             if(true){
  96.                 $.ajax({
  97.                     url: path,
  98.                     type: 'POST',
  99.                     data: formulario,
  100.                     success: function (results) {
  101.                         if(results == "success"){
  102.                             var messageSuccess = "<h5>El correo ha sido enviado correctamente.</h5>";
  103.                             var titulo = '<div class="text-center">';
  104.                             titulo += '<i class="fa fa-check text-blue-gray" aria-hidden="true" style="font-size: 50px;"></i>';
  105.                             titulo += '</div>';
  107.                             bootbox.dialog({
  108.                                 closeButton: false,
  109.                                 title: titulo,
  110.                                 message: messageSuccess,
  111.                                 buttons: {
  112.                                     success: {
  113.                                         label: "<i class='fa fa-check' aria-hidden='true'></i> Aceptar",
  114.                                         className: "btn btn-e btn-sm btn-e-primary",
  115.                                         callback: function () {
  116.                                             window.onbeforeunload = null;
  118.                                             var path_show = "{{ path('contactenos') }}";
  119.                                             window.location.href = path_show;
  120.                                         }
  121.                                     }
  122.                                 }
  123.                             });
  124.                         }
  125.                     },
  126.                     error: function (e) {
  127.                         console.log(e);
  128.                     }
  129.                 });
  130.             }
  131.         }
  133.         function validarFormularioContacto(){
  134.             var flag = true;
  136.             if($('#form_contacto_nombres').val() == ''){
  137.                 $('#form_contacto_nombres').css("border-color", "red");
  138.                 $('#form_contacto_nombres_error').show();
  139.                 $('#form_contacto_nombres_error').text("Debe ingresar un nombre");
  140.                 flag = false;
  141.             }else{
  142.                 $('#form_contacto_nombres').css("border-color", "#acacac");
  143.                 $('#form_contacto_nombres_error').hide();
  144.             }
  146.             if($('#form_contacto_telefono').val() == ''){
  147.                 $('#form_contacto_telefono').css("border-color", "red");
  148.                 $('#form_contacto_telefono_error').show();
  149.                 $('#form_contacto_telefono_error').text("Debe ingresar un número de teléfono o celular");
  150.                 flag = false;
  151.             }else{
  152.                 $('#form_contacto_telefono').css("border-color", "#acacac");
  153.                 $('#form_contacto_telefono_error').hide();
  154.             }
  156.             if($('#form_contacto_apellidos').val() == ''){
  157.                 $('#form_contacto_apellidos').css("border-color", "red");
  158.                 $('#form_contacto_apellidos_error').show();
  159.                 $('#form_contacto_apellidos_error').text("Debe ingresar un mensaje");
  160.                 flag = false;
  161.             }else{
  162.                 $('#form_contacto_apellidos').css("border-color", "#acacac");
  163.                 $('#form_contacto_apellidos_error').hide();
  164.             }
  166.             if($('#form_contacto_email').val() == ''){
  167.                 $('#form_contacto_email').css("border-color", "red");
  168.                 $('#form_contacto_email_error').show();
  169.                 $('#form_contacto_email_error').text("Debe ingresar un email");
  170.                 flag = false;
  171.             }else{
  172.                 var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  173.                 if(regex.test($('#form_contacto_email').val())){
  174.                     $('#form_contacto_email').css("border-color", "#acacac");
  175.                     $('#form_contacto_email_error').hide();
  176.                 }else{
  177.                     $('#form_contacto_email').css("border-color", "red");
  178.                     $('#form_contacto_email_error').show();
  179.                     $('#form_contacto_email_error').text("Debe ingresar un email valido");
  180.                     flag = false;
  181.                 }
  182.             }
  184.             if($('#form_contacto_mensaje').val() == ''){
  185.                 $('#form_contacto_mensaje').css("border-color", "red");
  186.                 $('#form_contacto_mensaje_error').show();
  187.                 $('#form_contacto_mensaje_error').text("Debe ingresar un mensaje");
  188.                 flag = false;
  189.             }else{
  190.                 $('#form_contacto_mensaje').css("border-color", "#acacac");
  191.                 $('#form_contacto_mensaje_error').hide();
  192.             }
  194.             return flag;
  195.         }
  197.         $(document).ready(function() {
  198.             $('#navbar-menu ul li').removeClass('active');
  199.             $('#navbar-menu ul li.li_contacto').addClass('active');
  200.         });
  201.     </script>
  202. {% endblock %}