templates/front/form/contact.html.twig line 1

Open in your IDE?
  1. {% extends "front/_common/_base.html.twig" %}
  3. {% block linkcanonical %}
  4.     <link rel="canonical" href="{{ absolute_url(path('contact')) }}">
  5. {% endblock %}
  7. {% block cssadicional %}{% endblock %}
  9. {% block classbody %}{% endblock %}
  11. {% block content %}
  12.     <section class="b5 scroll-wrapper">
  13.         <div class="b5Wrapper">
  14.             <picture class="b5BannerPicture">
  15.                 <source srcset="{{ asset(sd.bannerImage|image_path) }}">
  16.                 <img class="b5BannerPictureImage" src="{{ asset(sd.bannerImage|image_path) }}" width="1600" alt="{{ sd.bannerImage|image_alt }}">
  17.             </picture>
  18.             {% if sd.bannerText %}
  19.                 <div class="b5BannerText scroll-item">
  20.                     <h1>{{ sd.bannerText }}</h1>
  21.                 </div>
  22.             {% endif %}
  23.         </div>
  24.     </section>
  26.     <section class="b21 b21CustomContact">
  27.         <div class="wanchoSecondary scroll-wrapper">
  28.             <ul class="b21MigaCustom b10LeftMigaPan scroll-item">
  29.                 <li><a href="{{ path('home') }}">Home</a></li>&nbsp;/ &nbsp;
  30.                 <li class="active"><a href="{{ path('contact') }}">Contáctanos</a></li>
  31.             </ul>
  32.             <div class="b21Wrap">
  33.                 <div class="b21Left">
  34.                     {% if sd.title %}
  35.                         <h4 class="titleStandard b21Title scroll-item">{{ sd.title }}</h4>
  36.                     {% endif %}
  37.                     {% if sd.text %}
  38.                         <div class="b21Text scroll-item">
  39.                             <p>{{ sd.text|nl2br }}</p>
  40.                         </div>
  41.                     {% endif %}
  42.                     <div class="b21Data">
  43.                         {% if sd.phone %}
  44.                             <div class="b21DataiTem scroll-item">
  45.                                 <a href="tel:{{ sd.phone|only_numbers }}"><i class="icon-iconos-15"></i> {{ sd.phone }}</a>
  46.                             </div>
  47.                         {% endif %}
  48.                         {% if sd.email %}
  49.                             <div class="b21DataiTem scroll-item">
  50.                                 <a href="mailto:{{ sd.email }}"><i class="icon-iconos-17"></i> {{ sd.email }}</a>
  51.                             </div>
  52.                         {% endif %}
  53.                         {% if sd.address %}
  54.                             <div class="b21DataiTem scroll-item">
  55.                                 <a href="https://www.google.com/maps/search/{{ sd.address }}" target="_blank">
  56.                                     <i class="icon-iconos-18"></i> {{ sd.address }}
  57.                                 </a>
  58.                             </div>
  59.                         {% endif %}
  60.                     </div>
  61.                 </div>
  62.                 <div class="b21Right">
  63.                     <div class="b21WrapContact scroll-item">
  64.                         {{ form_start(form, {'attr': {'class': 'scroll-item'}}) }}
  65.                             {% include 'front/templates/form_utm_fields.html.twig' %}
  66.                             <div class="b21Input">
  67.                                 {{ form_widget(form.company, {'attr': {'data-expresion': 'text', 'class': 'validKeypress g-text form-contact validate[required,custom[onlyLetterSp]]'}}) }}
  68.                                 <span class="form-label">Empresa*</span>
  69.                             </div>
  70.                             <div class="b21WrapInput">
  71.                                 <div class="b21Input">
  72.                                     {{ form_widget(form.name, {'attr': {'data-expresion': 'text', 'class': 'validKeypress g-text form-contact validate[required,custom[onlyLetterSp]]'}}) }}
  73.                                     <span class="form-label">Nombres*</span>
  74.                                 </div>
  75.                                 <div class="b21Input">
  76.                                     {{ form_widget(form.lastName, {'attr': {'data-expresion': 'text', 'class': 'validKeypress g-text form-contact validate[required,custom[onlyLetterSp]]'}}) }}
  77.                                     <span class="form-label">Apellidos*</span>
  78.                                 </div>
  79.                             </div>
  80.                             <div class="b21WrapInput">
  81.                                 <div class="b21Input">
  82.                                     {{ form_widget(form.email, {'attr': {'class': 'form-contact validate[required,custom[email]]'}}) }}
  83.                                     <span class="form-label">Correo*</span>
  84.                                 </div>
  85.                                 <div class="b21Input">
  86.                                     {{ form_widget(form.phone, {'attr': {'data-expresion': 'number', 'class': 'validKeypress g-number form-contact validate[required,custom[onlyNumberSp]]'}}) }}
  87.                                     <span class="form-label">Teléfono*</span>
  88.                                 </div>
  89.                             </div>
  90.                             <div class="b21Textarea">
  91.                                 {{ form_widget(form.message, {'attr': {'cols': '40', 'rows': '10', 'class': 'form-contact'}}) }}
  92.                                 <span class="form-label">Mensaje</span>
  93.                             </div>
  94.                             <div class="b21Paragraph">
  95.                                 (*) Campos obligatorios.
  96.                             </div>
  97.                             <div class="b21WrapCheckbox">
  98.                                 <input type="checkbox" id="b21Checkbox" class="validate[required]" name="">
  99.                                 <label for="b21Checkbox">Acepto las <a href="{{ path('privacy_policies') }}" target="_blank">Políticas de Privacidad</a></label>
  100.                             </div>
  101.                             <button class="buttonStandard gray b21Btn" id="BtnLibro">Enviar</button>
  102.                             {% if info.showCaptcha %}
  103.                                 <input type="hidden" name="recaptcha_token" id="recaptchaToken">
  104.                             {% endif %}
  105.                         {{ form_end(form) }}
  106.                     </div>
  107.                 </div>
  108.             </div>
  109.         </div>
  110.     </section>
  111. {% endblock %}
  113. {% block jsfinal %}
  114.     {% if info.showCaptcha %}
  115.         <script src="https://www.google.com/recaptcha/api.js?render={{ info.captchaSite }}"></script>
  116.         <script>
  117.             grecaptcha.ready(function() {
  118.                 grecaptcha.execute('{{ info.captchaSite }}', {action: 'submit'}).then(function(token) {
  119.                     document.getElementById('recaptchaToken').value = token;
  120.                 });
  121.             });
  122.         </script>
  123.     {% endif %}
  124.     <script type="text/javascript">
  125.         jQuery(function ($) {
  126.             $("form").validationEngine('attach', {
  127.                 promptPosition: "topLeft",
  128.                 autoHidePrompt: true,
  129.                 autoPositionUpdate: false,
  130.                 autoHideDelay: 2000,
  131.                 binded: false,
  132.                 scroll: false,
  133.                 validateNonVisibleFields: true
  134.             })
  136.             $('#BtnLibro').on('click', function (event) {
  137.                 event.preventDefault();
  138.                 const item = $(this);
  139.                 const form = item.closest('form');
  140.                 const valid = form.validationEngine('validate');
  141.                 if (valid) {
  142.                     item.prop('disabled', true).text('Enviando...');
  143.                     form.submit();
  144.                 } else {
  145.                     item.prop('disabled', false).text('Enviar');
  146.                 }
  147.             });
  148.         })
  149.     </script>
  150. {% endblock %}