Symfony Profiler

{% extends "front/_common/_base.html.twig" %}
{% block linkcanonical %}
<link rel="canonical" href="{{ absolute_url(path('contact')) }}">
{% endblock %}
{% block cssadicional %}
<link rel="stylesheet" href="{{ asset('static/js/validationform/validationEngine.jquery.css') }}">
{% if info.captchaShow and info.captchaSite and info.captchaSecret %}
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback" async defer></script>
<script type="text/javascript">
var onloadCallback = function() {
var element = document.getElementById('g-recaptcha-response');
element.classList.add('validate[required]');
};
</script>
{% endif %}
{% endblock %}
{% block classbody %}{% endblock %}
{% block content %}
<section class="contacto">
<div class="contacto_banner">
<div class="contacto_banner_content ww_center">
<div class="contacto_banner_miga">
<ul>
<li><a href="{{ path('home') }}">Inicio</a></li>
<li><a class="active">Contacto</a></li>
</ul>
</div>
{% if sd.title %}
<h2 class="contacto_banner_title">{{ sd.title }}</h2>
{% endif %}
</div>
</div>
<div class="contacto_wrap ww_center">
<div class="contacto_left">
<div class="contacto_info">
{% if forms.contactTitle %}
<h2>{{ forms.contactTitle }}</h2>
{% endif %}
{% if forms.contactText %}
<p>{{ forms.contactText|nl2br }}</p>
{% endif %}
</div>
<div class="contacto_form">
{{ form_start(form, {'attr': {'id': 'contactoForm'}}) }}
{% include 'front/templates/form_utm_fields.html.twig' %}
{{ form_widget(form.typeConsultation) }}
{{ form_widget(form.typePerson) }}
{{ form_widget(form.documentType) }}
{{ form_widget(form.documentNumber) }}
<div class="contacto_select">
<select name="" id="form_contact_type_consultation" class="inputEffect validate[required]">
<option value="" disabled selected>Seleccione su tipo de consulta</option>
{% for item in forms.contactTypes %}
<option value="{{ item.title }}" data-link="{{ item.link }}">{{ item.title }}</option>
{% endfor %}
</select>
<span class="icon-arrow_drop_down"></span>
</div>
<div class="contacto_radius">
<div class="contacto_tab_radio">
<input checked type="radio" name="form_type" class="checkedInput" value="Empresa" id="form_contact_legal_person">
<label for="form_contact_legal_person">Soy empresa</label>
</div>
<div class="contacto_tab_radio">
<input type="radio" name="form_type" class="checkedInput" value="Persona natural" id="form_contact_natural_person">
<label for="form_contact_natural_person">Soy Persona Natural</label>
</div>
</div>
<ul>
<li class="noneInputsEmpresa">
<div class="contacto_row_input">
<div class="contacto_input">
<input type="text" placeholder="" id="form_contact_document_number_legal_person" class="inputEffect soloNumber form_notActive validate[required] form_contact_document_number">
<label for="form_document_number_legal_person">RUC *</label>
</div>
<div class="contacto_input">
{{ form_widget(form.company, {'attr': {'class': 'inputEffect form_notActive validate[required]'}}) }}
<label for="form_contact_company">Empresa *</label>
</div>
</div>
</li>
<li class="noneInputs">
<div class="contacto_row_input">
<div class="contacto_input">
<select id="form_contact_document_types" class="inputEffect">
<option value="" disabled selected></option>
{% for item in forms.documentTypes %}
<option value="{{ item.title }}">{{ item.title }}</option>
{% endfor %}
</select>
<label class="field_text" for="form_contact_document_types">Tipo de documento *<span class="icon-arrow_drop_down"></span></label>
</div>
<div class="contacto_input">
<input type="text" placeholder="" id="form_contact_document_number_natural_person" class="inputEffect soloNumber form_isActive validate[required] form_contact_document_number">
<label for="form_document_number_natural_person">Número de documento *</label>
</div>
</div>
</li>
<li class="">
<div class="contacto_row_input">
<div class="contacto_input">
{{ form_widget(form.name, {'attr': {'class': 'inputEffect validate[required]'}}) }}
<label for="form_contact_name">Nombres *</label>
</div>
<div class="contacto_input">
{{ form_widget(form.department, {'attr': {'class': 'inputEffect validate[required]'}}) }}
<label for="form_contact_department">Departamento *</label>
</div>
</div>
</li>
<li>
<div class="contacto_row_input">
<div class="contacto_input">
{{ form_widget(form.phone, {'attr': {'class': 'inputEffect soloNumber validate[required, custom[phone]]'}}) }}
<label for="form_contact_phone">Teléfono *</label>
</div>
<div class="contacto_input">
{{ form_widget(form.email, {'attr': {'class': 'inputEffect validate[required, custom[email]]'}}) }}
<label for="form_contact_email">Correo Electrónico *</label>
</div>
</div>
</li>
<li>
<div class="contacto_input contacto_textarea">
{{ form_widget(form.message, {'attr': {'class': 'inputEffect validate[required]'}}) }}
<label for="form_contact_message">Mensaje *</label>
</div>
</li>
</ul>
<div class="contacto_obligatorio">
<p>* Campos obligatorios</p>
</div>
<div class="contacto_check">
<input type="checkbox" id="inputCheck" class="validate[required]" name="">
<label for="inputCheck">
<span class="contacto_check_active"></span>
<p>He leído y acepto las <a href="{{ path('data_protection_policies') }}" target="_blank">Políticas de privacidad</a></p>
</label>
</div>
{% if info.captchaShow and info.captchaSite and info.captchaSecret %}
<div style="padding-top:20px;">
<div class="g-recaptcha" data-sitekey="{{ info.captchaSite }}"></div>
</div>
{% endif %}
<div class="contacto_btn">
<button class="btn btn_blue" id="btnForm">Enviar</button>
</div>
{{ form_end(form) }}
</div>
</div>
{% if sd.customerServiceShow and sd.customerServiceItems|length > 0 %}
<div class="contacto_rigth">
<h2>{{ sd.customerServiceTitle ?: 'Atención al cliente' }}</h2>
{% for item in sd.customerServiceItems %}
<h3>{{ item.city }}</h3>
<a href="tel:{{ item.phone|only_numbers }}"><span class="icon-phone_in_talk"></span>{{ item.phone }}</a>
<a href="mailto:{{ item.email }}"><span class="icon-mail_outline"></span>{{ item.email }}</a>
<a href="{{ item.address|google_maps_search }}" target="_blank"><span class="icon-place-1"></span>{{ item.address }}</a>
<p><span class="icon-hour"></span>{{ item.officeHours|nl2br }}</p>
{% endfor %}
</div>
{% endif %}
</div>
</section>
{% endblock %}
{% block jsfinal %}
<script src="{{ asset('static/js/validationform/jquery.validationEngine-es.js') }}"></script>
<script src="{{ asset('static/js/validationform/staff.validationEngine.js') }}"></script>
<script type="text/javascript">
efectInput = function (inputName, efectInput) {
const inputs = document.getElementsByClassName(inputName);
for (let i = 0; i < inputs.length; i++) {
inputs[i].addEventListener('change', function () {
if (this.value) {
this.nextElementSibling.classList.add(efectInput)
} else {
this.nextElementSibling.classList.remove(efectInput)
}
})
inputs[i].addEventListener('keyup', function () {
if (this.value === "") {
this.nextElementSibling.classList.remove(efectInput)
} else {
this.nextElementSibling.classList.add(efectInput)
}
})
}
};
efectInput('inputEffect', 'fijar')
{# FIELDS #}
const quoteFields = $(".contacto_input input, .contacto_input select, .contacto_input textarea");
$(quoteFields).focusin(function() {
$(this).addClass('border');
});
$(quoteFields).focusout(function() {
if ($(this).val() === "") {
$(this).removeClass('border');
}
});
$(quoteFields).each(function() {
if ($(this).val()) {
$(this).addClass('border');
}
});
$('.soloNumber').keypress(validateNumber);
function validateNumber(event) {
const key = window.event ? event.keyCode : event.which;
if (event.keyCode === 8 || event.keyCode === 46) {
return true;
} else return !(key < 48 || key > 57);
}
{# END #}
let InputChecked = document.querySelectorAll('.checkedInput');
let elementDivHidden = document.querySelectorAll('.form_isActive');
let elementDivVisible = document.querySelectorAll('.form_notActive');
InputChecked.forEach((item)=>{
item.addEventListener('change', ()=>{
if(item.value === 'Empresa'){
elementDivHidden.forEach((el)=>{
el.disabled = true
el.closest('.noneInputs').style.display = 'none'
})
elementDivVisible.forEach((el)=>{
el.disabled = false
el.closest('.noneInputsEmpresa').style.display = 'block'
})
} else{
elementDivHidden.forEach((el)=>{
el.disabled = false
el.closest('.noneInputs').style.display = 'block'
})
elementDivVisible.forEach((el)=>{
el.disabled = true
el.closest('.noneInputsEmpresa').style.display = 'none'
})
}
})
})
$('#form_contact_legal_person').on('change', function () {
$('#form_contact_typePerson').val($(this).val());
$('#form_contact_document_types').val('');
$('#form_contact_document_number_natural_person').val('');
$('#form_contact_document_number_legal_person').val('');
$('#form_contact_documentType').val('RUC');
$('#form_contact_documentNumber').val('');
$('#form_contact_company').val('');
})
$('#form_contact_natural_person').on('change', function () {
$('#form_contact_typePerson').val($(this).val());
$('#form_contact_document_types').val('');
$('#form_contact_document_number_natural_person').val('');
$('#form_contact_document_number_legal_person').val('');
$('#form_contact_documentType').val('');
$('#form_contact_documentNumber').val('');
})
$('#form_contact_legal_person').trigger('change');
$('.form_contact_document_number').on('keyup', function () {
$('#form_contact_documentNumber').val($(this).val());
})
$('#form_contact_document_types').on('change', function () {
$('#form_contact_documentType').val($(this).val());
})
$('#form_contact_type_consultation').on('change', function () {
$('#form_contact_typeConsultation').val($(this).val());
})
const form_contact = $('#contactoForm');
const form_contact_button = $('#btnForm');
form_contact.validationEngine('attach', {
promptPosition: "topLeft",
autoHidePrompt: true,
autoHideDelay: 3000,
binded: false,
scroll: false
});
$('#form_contact_type_consultation').change(function(e){
e.preventDefault();
let link = $(this).find('option:selected').eq(0).data('link');
if( link ) {
location.href = link;
}
})
form_contact_button.on('click', function (event) {
event.preventDefault();
const valid = form_contact.validationEngine('validate');
if (valid) {
form_contact.submit();
}
});
</script>
{% endblock %}

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