<section class="splitter splitter_bg-color_white splitter_padding_bottom_large ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="simulator-form">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="row">
<div class="col-xs-12 col-ms-10 col-sm-6 col-md-7 col-lg-7 col">
<form class="simulator-form__form" id="simulatorForm" action="#" method="post" novalidate>
<div class="simulator-form__head">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10">
<div class="simulator-form__description">
<div class="
bodycopy-m
">
Completando nuestro simulador de hipoteca cuánto puedo pedir podrás saber la catidad de dinero que puedes solicitar con tu hipoteca.
</div>
</div>
</div>
</div>
</div>
<ul class="form-list">
<li class="form-list__item ">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10">
<div class="form-list__field required">
<div class="form-radio-group " id="holders">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">¿CUÁNTOS TITULARES TENDRÁ LA HIPOTECA?</fieldset>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="oneHolder" type="radio" title="One holder" name="Holders number" value="" checked>
<label class="radio-label radio-label_icon " for="oneHolder" id="" value="">
<svg class="icon icon-person ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#person"></use>
</svg>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="twoHolders" type="radio" title="Two holders" name="Holders number" value="">
<label class="radio-label radio-label_icon " for="twoHolders" id="" value="">
<svg class="icon icon-2-persons ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#2-persons"></use>
</svg>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="form-list__item ">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-6 col-lg-6">
<div class="form-list__field required">
<div class="form-radio-group " id="employees">
<div class="field-top fieldset form-list__tooltip-label_option_2">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">¿TIENES PERSONAS A TU CARGO? Plural</fieldset>
<div class="field-top__wrap">
</div>
</div>
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">¿TIENES PERSONAS A TU CARGO?</fieldset>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="employees-yes" type="radio" title="Yes" name="Employees" value="SÍ" checked>
<label class="radio-label " for="employees-yes" id="" value="">
<span class="caption-placeholder-m">SÍ</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="employees-no" type="radio" title="No" name="Employees" value="NO">
<label class="radio-label " for="employees-no" id="" value="">
<span class="caption-placeholder-m">NO</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-6 col-lg-6">
<div class="form-list__field hidden " id="employeesNumber">
<div class="form-switch">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">¿CUÁNTAS PERSONAS?</fieldset>
<div class="field-top__wrap">
</div>
</div>
<div class="form-switch-group" id="">
<ul class="switch-group">
<li class="switch-group__item">
<div class="switch-wrapper">
<input class="switch
" id="employeesNumber1" type="radio" title="1" name="Employees number" value="1" checked>
<label class="switch-label" for="employeesNumber1">
<div class="text-label-m">1</div>
</label>
</div>
</li>
<li class="switch-group__item">
<div class="switch-wrapper">
<input class="switch
" id="employeesNumber2" type="radio" title="2" name="Employees number" value="2">
<label class="switch-label" for="employeesNumber2">
<div class="text-label-m">2</div>
</label>
</div>
</li>
<li class="switch-group__item">
<div class="switch-wrapper">
<input class="switch
" id="semployeesNumber3" type="radio" title="3" name="Employees number" value="3">
<label class="switch-label" for="semployeesNumber3">
<div class="text-label-m">3</div>
</label>
</div>
</li>
<li class="switch-group__item">
<div class="switch-wrapper">
<input class="switch
" id="employeesNumberPlus3" type="radio" title="+3" name="Employees number" value="+3">
<label class="switch-label" for="employeesNumberPlus3">
<div class="text-label-m">+3</div>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="form-list__item ">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10">
<div class="form-list__field required">
<div class="form-select " id="jobStatus">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="jobStatus">SITUACIÓN LABORAL DEL TITULAR</label>
<div class="field-top__wrap">
</div>
</div>
<div class="access-select ">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden">
<div class="access-select__option access-select__chosen-option">Elije una opción</div>
<div class="access-select__chosen-icon">
<svg class="icon icon-chebron-down ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-down"></use>
</svg>
</div>
</div>
<ul class="access-select__list">
<li class="access-select__item">
<input class="access-select__option access-select__input" id="jobStatus1" type="radio" title="Opción1" name="Job status" value="">
<label class="access-select__option access-select__label" for="jobStatus1">
Opción1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="jobStatus2" type="radio" title="Opción2" name="Job status" value="">
<label class="access-select__option access-select__label" for="jobStatus2">
Opción2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="jobStatus3" type="radio" title="Opción3" name="Job status" value="">
<label class="access-select__option access-select__label" for="jobStatus3">
Opción3
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="jobStatus4" type="radio" title="Opción4" name="Job status" value="">
<label class="access-select__option access-select__label" for="jobStatus4">
Opción4
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="jobStatus5" type="radio" title="Opción5" name="Job status" value="">
<label class="access-select__option access-select__label" for="jobStatus5">
Opción5
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="form-list__item form-list__item_second-holder hidden">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10">
<div class="form-list__field ">
<div class="form-select " id="jobStatus2">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="jobStatus2">SITUACIÓN LABORAL DEL 2º TITULAR</label>
<div class="field-top__wrap">
</div>
</div>
<div class="access-select ">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden">
<div class="access-select__option access-select__chosen-option">Elije una opción</div>
<div class="access-select__chosen-icon">
<svg class="icon icon-chebron-down ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-down"></use>
</svg>
</div>
</div>
<ul class="access-select__list">
<li class="access-select__item">
<input class="access-select__option access-select__input" id="jobStatus1" type="radio" title="Opción1" name="Job status" value="">
<label class="access-select__option access-select__label" for="jobStatus1">
Opción1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="jobStatus2" type="radio" title="Opción2" name="Job status" value="">
<label class="access-select__option access-select__label" for="jobStatus2">
Opción2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="jobStatus3" type="radio" title="Opción3" name="Job status" value="">
<label class="access-select__option access-select__label" for="jobStatus3">
Opción3
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="jobStatus4" type="radio" title="Opción4" name="Job status" value="">
<label class="access-select__option access-select__label" for="jobStatus4">
Opción4
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="jobStatus5" type="radio" title="Opción5" name="Job status" value="">
<label class="access-select__option access-select__label" for="jobStatus5">
Opción5
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="form-list__item ">
<div class="row">
<div class="col-xs-9 col-ms-5 col-sm-5 col-md-4 col-lg-4">
<div class="form-list__field ">
<div class="form-input">
<div class="field-top form-list__tooltip-label_option_2">
<label class="label-m" for="Edad">EDAD DEL TITULAR MAYOR</label>
<div class="field-top__wrap">
</div>
</div>
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="Edad">EDAD DEL TITULAR</label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="Edad" value="30">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
AÑOS
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="form-list__item ">
<div class="row">
<div class="col-xs-9 col-ms-7 col-sm-7 col-md-6 col-lg-6">
<div class="form-list__field ">
<div class="form-input">
<div class="field-top form-list__tooltip-label_option_2">
<label class="label-m" for="Monthly income">INGRESOS MENSUALES NETOS, 1º TITULAR</label>
<div class="field-top__wrap">
</div>
</div>
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="Monthly income">INGRESOS MENSUALES NETOS</label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="Monthly income" value="0">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-9 col-ms-5 col-sm-5 col-md-4 col-lg-4">
<div class="form-list__field " id="paymentsNumber">
<div class="form-input">
<div class="field-top form-list__tooltip-label_option_2">
<label class="label-m" for="paymentsNumberInput">¿CUÁL ES EL NÚMERO DE PAGAS? 1º TITULAR</label>
<div class="field-top__wrap">
</div>
</div>
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="paymentsNumberInput">¿CUÁL ES EL NÚMERO DE PAGAS?</label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="Payments number" value="14">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
PAGAS
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="form-list__item form-list__item_second-holder hidden">
<div class="row">
<div class="col-xs-9 col-ms-7 col-sm-7 col-md-6 col-lg-6">
<div class="form-list__field ">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="monthly-income-second-holder">INGRESOS MENSUALES NETOS, 2º TITULAR</label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="Monthly income second holder" value="0">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-9 col-ms-5 col-sm-5 col-md-4 col-lg-4">
<div class="form-list__field " id="secondHolderPaymentsNumber">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="paymentsNumberInputSecondHolder">¿CUÁL ES EL NÚMERO DE PAGAS? 2º TITULAR</label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="Payments number second holder" value="14">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
PAGAS
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="form-list__item ">
<div class="row">
<div class="col-xs-9 col-ms-7 col-sm-7 col-md-6 col-lg-6">
<div class="form-list__field required">
<div class="form-radio-group " id="otherLoans">
<div class="field-top fieldset form-list__tooltip-label_option_2">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">¿ESTÁ PAGANDO ALGÚN OTRO PRÉSTAMO? Plural</fieldset>
<div class="field-top__wrap">
</div>
</div>
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">¿ESTÁ PAGANDO ALGÚN OTRO PRÉSTAMO?</fieldset>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="otherLoansYes" type="radio" title="Yes" name="Other loan" value="SÍ" checked>
<label class="radio-label " for="otherLoansYes" id="" value="">
<span class="caption-placeholder-m">SÍ</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="otherLoansNo" type="radio" title="No" name="Other loan" value="NO">
<label class="radio-label " for="otherLoansNo" id="" value="">
<span class="caption-placeholder-m">NO</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-9 col-ms-5 col-sm-5 col-md-6 col-lg-6">
<div class="form-list__field hidden " id="otherLoansRange">
<div class="form-range-slider" id="otherLoansRangeSlider">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="otherLoansRangeInput">SUMA TOTAL DE PRÉSTAMOS ACTIVOS</label>
<div class="field-top__wrap">
</div>
</div>
<div class="range-slider" id="otherLoansRangeInput">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="" type="text" name="" title="Other loans summary" min='50' max='6000' data-default='985'>
<div class="range-slider__symbol" for="">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="range-slider__slider" id=""></div>
<div class="range-slider__legend">
<div class="range-slider__legend-start">
<div class="bodycopy-xs
">
50€
</div>
</div>
<div class="range-slider__legend-end">
<div class="bodycopy-xs
">
6.000€
</div>
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="form-btn">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10">
<div class="form-btn__submit">
<button id="" class="btn
" type="submit">
Calcular
</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="col-xs-12 col-ms-12 col-sm-6 col-md-5 col-lg-5 col">
<div class="simulator-form__text">
<div class="rich-text-general">
<h2 class='title-xl'>Descubre cuánto pagarías por tu hipoteca</h2>
<ul>
<li>En sólo 1 paso</li>
<li>Sin ningún tipo de compromiso</li>
<li>Resultados descargables</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="preloader">
<div class="preloader__wrapper">
<div class="preloader__content-spinner">
<div class="preloader__label">
<div class="text-label-m">CARGANDO LOS RESULTADOS…</div>
</div>
<div class="preloader__spinner">
</div>
<div class="preloader__spinner-content-dot">
<div class="preloader__spinner-dot spinner-dot_1"></div>
<div class="preloader__spinner-dot spinner-dot_2"></div>
<div class="preloader__spinner-dot spinner-dot_3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="simulator-form">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="row">
<div class="col-xs-12 col-ms-10 col-sm-6 col-md-7 col-lg-7 col">
<form class="simulator-form__form" id="simulatorForm" action="#" method="post" novalidate>
<div class="simulator-form__head">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10">
<div class="simulator-form__description">
{{> @bodycopy-m description }}
</div>
</div>
</div>
</div>
{{> @form-list form-list }}
{{> @form-btn submit-btn }}
</form>
</div>
<div class="col-xs-12 col-ms-12 col-sm-6 col-md-5 col-lg-5 col">
<div class="simulator-form__text">
<div class="rich-text-general">
{{{ text }}}
</div>
</div>
</div>
</div>
</div>
</div>
{{#if withPreloader}}
{{#if isHipotecas}}
{{ render '@preloader--hipotecas' }}
{{else}}
{{ render '@preloader' }}
{{/if}}
{{/if}}
</div>
{{/content}}
{{/extend}}
{
"toHide": {
"isHidden": true
},
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingBottomLarge": true
},
"description": {
"text": "Completando nuestro simulador de hipoteca cuánto puedo pedir podrás saber la catidad de dinero que puedes solicitar con tu hipoteca."
},
"form-list": {
"form-list": [
{
"isOneColumn": "Cuanto más nos cuentes sobre tu proyecto, más podremos ajustarnos a tus necesidades. Estos datos son optativos.",
"col": "col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10",
"isRequired": true,
"form-radio-group": {
"id": "holders",
"field-top": {
"fieldset": true,
"label": {
"text": "¿CUÁNTOS TITULARES TENDRÁ LA HIPOTECA?",
"fieldset": true
}
},
"radio-group": {
"radio-group": [
{
"id": "oneHolder",
"title": "One holder",
"name": "Holders number",
"additionalAttributes": "checked",
"icon": {
"name": "person",
"context": {
"name": "person"
}
}
},
{
"id": "twoHolders",
"title": "Two holders",
"name": "Holders number",
"icon": {
"name": "2-persons",
"context": {
"name": "2-persons"
}
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isTwoColumn": true,
"col-1": "col-xs-12 col-ms-12 col-sm-12 col-md-6 col-lg-6",
"isRequired-1": true,
"form-radio-group-1": {
"field-top": {
"fieldset": true,
"label": {
"text": "¿TIENES PERSONAS A TU CARGO?",
"fieldset": true
},
"label-option-2": {
"text": "¿TIENES PERSONAS A TU CARGO? Plural",
"fieldset": true
}
},
"id": "employees",
"radio-group": {
"radio-group": [
{
"id": "employees-yes",
"title": "Yes",
"name": "Employees",
"additionalAttributes": "checked",
"label": {
"text": "SÍ",
"type": "-placeholder-m"
}
},
{
"id": "employees-no",
"title": "No",
"name": "Employees",
"label": {
"text": "NO",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"col-2": "col-xs-12 col-ms-12 col-sm-12 col-md-6 col-lg-6",
"isHidden-2": true,
"id-2": "employeesNumber",
"form-switch-2": {
"field-top": {
"fieldset": true,
"label": {
"text": "¿CUÁNTAS PERSONAS?",
"fieldset": true
}
},
"switch-group": {
"switch-group": [
{
"id": "employeesNumber1",
"title": "1",
"name": "Employees number",
"additionalAttributes": "checked",
"label": {
"text": "1"
}
},
{
"id": "employeesNumber2",
"title": "2",
"name": "Employees number",
"label": {
"text": "2"
}
},
{
"id": "semployeesNumber3",
"title": "3",
"name": "Employees number",
"label": {
"text": "3"
}
},
{
"id": "employeesNumberPlus3",
"title": "+3",
"name": "Employees number",
"label": {
"text": "+3"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isOneColumn": true,
"col": "col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10",
"isRequired": true,
"form-select": {
"field-top": {
"label": {
"text": "SITUACIÓN LABORAL DEL TITULAR",
"for": "jobStatus"
}
},
"id": "jobStatus",
"select": {
"chosen-placeholder": "Elije una opción",
"option": [
{
"id": "jobStatus1",
"select-name": "Job status",
"text": "Opción1"
},
{
"id": "jobStatus2",
"select-name": "Job status",
"text": "Opción2"
},
{
"id": "jobStatus3",
"select-name": "Job status",
"text": "Opción3"
},
{
"id": "jobStatus4",
"select-name": "Job status",
"text": "Opción4"
},
{
"id": "jobStatus5",
"select-name": "Job status",
"text": "Opción5"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"extraClasses": "form-list__item_second-holder hidden",
"isOneColumn": true,
"col": "col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10",
"isRequired": false,
"form-select": {
"field-top": {
"label": {
"text": "SITUACIÓN LABORAL DEL 2º TITULAR",
"for": "jobStatus2"
}
},
"id": "jobStatus2",
"select": {
"chosen-placeholder": "Elije una opción",
"option": [
{
"id": "jobStatus1",
"select-name": "Job status",
"text": "Opción1"
},
{
"id": "jobStatus2",
"select-name": "Job status",
"text": "Opción2"
},
{
"id": "jobStatus3",
"select-name": "Job status",
"text": "Opción3"
},
{
"id": "jobStatus4",
"select-name": "Job status",
"text": "Opción4"
},
{
"id": "jobStatus5",
"select-name": "Job status",
"text": "Opción5"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isOneColumn": true,
"col": "col-xs-9 col-ms-5 col-sm-5 col-md-4 col-lg-4",
"form-input": {
"field-top": {
"label": {
"text": "EDAD DEL TITULAR",
"for": "Edad"
},
"label-option-2": {
"text": "EDAD DEL TITULAR MAYOR",
"for": "Edad"
}
},
"hasID": false,
"inputTitle": "Edad",
"idComponent": "Edad",
"inputValue": "30",
"symbol": {
"text": "AÑOS"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isTwoColumn": true,
"col-1": "col-xs-9 col-ms-7 col-sm-7 col-md-6 col-lg-6",
"form-input-1": {
"field-top": {
"label": {
"text": "INGRESOS MENSUALES NETOS",
"for": "Monthly income"
},
"label-option-2": {
"text": "INGRESOS MENSUALES NETOS, 1º TITULAR",
"for": "Monthly income"
}
},
"id": false,
"inputTitle": "Monthly income",
"idComponent": "monthly-income",
"inputValue": "0",
"symbol": {
"text": "€"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"col-2": "col-xs-9 col-ms-5 col-sm-5 col-md-4 col-lg-4",
"id-2": "paymentsNumber",
"form-input-2": {
"field-top": {
"label": {
"text": "¿CUÁL ES EL NÚMERO DE PAGAS?",
"for": "paymentsNumberInput"
},
"label-option-2": {
"text": "¿CUÁL ES EL NÚMERO DE PAGAS? 1º TITULAR",
"for": "paymentsNumberInput"
}
},
"hasID": false,
"inputTitle": "Payments number",
"idComponent": "paymentsNumberInput",
"inputValue": "14",
"symbol": {
"text": "PAGAS"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"extraClasses": "form-list__item_second-holder hidden",
"isTwoColumn": true,
"col-1": "col-xs-9 col-ms-7 col-sm-7 col-md-6 col-lg-6",
"form-input-1": {
"field-top": {
"label": {
"text": "INGRESOS MENSUALES NETOS, 2º TITULAR",
"for": "monthly-income-second-holder"
}
},
"id": false,
"inputTitle": "Monthly income second holder",
"idComponent": "monthly-income-second-holder",
"inputValue": "0",
"symbol": {
"text": "€"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"col-2": "col-xs-9 col-ms-5 col-sm-5 col-md-4 col-lg-4",
"id-2": "secondHolderPaymentsNumber",
"form-input-2": {
"field-top": {
"label": {
"text": "¿CUÁL ES EL NÚMERO DE PAGAS? 2º TITULAR",
"for": "paymentsNumberInputSecondHolder"
}
},
"hasID": false,
"inputTitle": "Payments number second holder",
"idComponent": "paymentsNumberInputSecondHolder",
"inputValue": "14",
"symbol": {
"text": "PAGAS"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isTwoColumn": true,
"col-1": "col-xs-9 col-ms-7 col-sm-7 col-md-6 col-lg-6",
"isRequired-1": true,
"form-radio-group-1": {
"field-top": {
"fieldset": true,
"label": {
"text": "¿ESTÁ PAGANDO ALGÚN OTRO PRÉSTAMO?",
"fieldset": true
},
"label-option-2": {
"text": "¿ESTÁ PAGANDO ALGÚN OTRO PRÉSTAMO? Plural",
"fieldset": true
}
},
"id": "otherLoans",
"radio-group": {
"radio-group": [
{
"id": "otherLoansYes",
"title": "Yes",
"name": "Other loan",
"additionalAttributes": "checked",
"label": {
"text": "SÍ",
"type": "-placeholder-m"
}
},
{
"id": "otherLoansNo",
"title": "No",
"name": "Other loan",
"label": {
"text": "NO",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"col-2": "col-xs-9 col-ms-5 col-sm-5 col-md-6 col-lg-6",
"isHidden-2": true,
"id-2": "otherLoansRange",
"form-range-slider-2": {
"field-top": {
"label": {
"text": "SUMA TOTAL DE PRÉSTAMOS ACTIVOS",
"for": "otherLoansRangeInput"
}
},
"id": "otherLoansRangeSlider",
"range-slider": {
"id": "otherLoansRangeInput",
"inputTitle": "Other loans summary",
"validationAttributes": "min='50' max='6000' data-default='985'",
"symbol": {
"text": "€"
},
"legend-start": {
"text": "50€"
},
"legend-end": {
"text": "6.000€"
}
}
}
}
]
},
"submit-btn": {
"isOneColumn": true,
"col": "col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10",
"btn": {
"type": "submit",
"text": "Calcular"
}
},
"text": "<h2 class='title-xl'>Descubre cuánto pagarías por tu hipoteca</h2><ul><li>En sólo 1 paso</li><li>Sin ningún tipo de compromiso</li><li>Resultados descargables</li></ul>",
"withPreloader": true
}
.simulator-form {
&.active {
position: relative;
}
&__head {
margin-bottom: 45px;
}
&__text {
@media (--viewport-xs-max) {
margin-top: 100px;
}
@media (--viewport-ms-only) {
margin-top: 120px;
}
}
}
Variantes: Default, UCIMortgages