<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="application-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="application-form__form" id="applicationForm" action="#" method="post" novalidate>
<div class="application-form__step-1">
<div class="application-form__head">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10">
<div class="application-form__description">
<div class="
bodycopy-m
">
Cuanto más nos cuentes sobre tu proyecto, más podremos ajustarnos a tus necesidades. Estos datos son optativos.
</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-7 col-lg-7">
<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">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</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-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">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</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">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</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-12 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">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</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">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</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-12 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">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</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">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</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-12 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">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</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-12 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">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</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-12 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">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</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">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</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-12 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">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</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>
<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 form-select-distinguisher_provincia" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="provincia">¿EN QUÉ PROVINCIA QUIERES COMPRAR?</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="access-select " id="provincia">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden" id="provincia">
<div class="access-select__option access-select__chosen-option">Elije provincia</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="randromApplicationProvinceId1" type="radio" title="Provincia 1" name="Province" value="">
<label class="access-select__option access-select__label" for="randromApplicationProvinceId1">
Provincia 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationProvinceId2" type="radio" title="Provincia 2" name="Province" value="">
<label class="access-select__option access-select__label" for="randromApplicationProvinceId2">
Provincia 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationProvinceId3" type="radio" title="Provincia 3" name="Province" value="">
<label class="access-select__option access-select__label" for="randromApplicationProvinceId3">
Provincia 3
</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-12 col-ms-12 col-sm-12 col-md-10 col-lg-10">
<div class="form-list__field required">
<div class="form-select form-select-distinguisher_cuando" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="cuando">¿CUÁNDO TIENES PREVISTO COMPRAR?</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="access-select " id="cuando">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden" id="cuando">
<div class="access-select__option access-select__chosen-option">Elije cuándo comprarás</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="randromApplicationCuandoId1" type="radio" title="En 2 meses" name="Cuando" value="">
<label class="access-select__option access-select__label" for="randromApplicationCuandoId1">
En 2 meses
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationCuandoId2" type="radio" title="De 2 a 8 meses" name="Cuando" value="">
<label class="access-select__option access-select__label" for="randromApplicationCuandoId2">
De 2 a 8 meses
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationCuandoId3" type="radio" title="Más de 8 meses" name="Cuando" value="">
<label class="access-select__option access-select__label" for="randromApplicationCuandoId3">
Más de 8 meses
</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-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="propertyType">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">TIPO DE INMUEBLE</fieldset>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="propertyTypeNew" type="radio" title="New" name="Property type" value="NUEVA VIVIENDA" checked>
<label class="radio-label " for="propertyTypeNew" id="" value="">
<span class="caption-placeholder-m">NUEVA VIVIENDA</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="propertyTypeSecondhand" type="radio" title="Secondhand" name="Property type" value="DE SEGUNDA MANO">
<label class="radio-label " for="propertyTypeSecondhand" id="" value="">
<span class="caption-placeholder-m">DE SEGUNDA MANO</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>
</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-radio-group " id="purpose">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">FINALIDAD DE LA HIPOTECA</fieldset>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="habitualHousingPurpose" type="radio" title="Habitual housing" name="Mortgage purpose" value="VIVIENDA HABITUAL" checked>
<label class="radio-label " for="habitualHousingPurpose" id="" value="">
<span class="caption-placeholder-m">VIVIENDA HABITUAL</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="secondHomePurpose" type="radio" title="Second home" name="Mortgage purpose" value="SEGUNDA RESIDENCIA">
<label class="radio-label " for="secondHomePurpose" id="" value="">
<span class="caption-placeholder-m">SEGUNDA RESIDENCIA</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>
</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 ">
<div class="form-range-slider" id="MortgageHousePriceRangeSlider">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="MortgageHousePriceRangeInput">PRECIO VIVIENDA</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="range-slider" id="MortgageHousePriceRangeInput">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="" type="text" name="" title="Mortgage House Price" min='0' max='1000000' data-default='0'>
<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
">
0€
</div>
</div>
<div class="range-slider__legend-end">
<div class="bodycopy-xs
">
1.000.000€
</div>
</div>
</div>
</div>
<div class="field-bottom">
</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 ">
<div class="form-range-slider" id="MortgageHouseSavingsRangeSlider">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="MortgageHouseSavingsRangeInput">¿CUÁNTO APORTAS?</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="range-slider" id="MortgageHouseSavingsRangeInput">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="" type="text" name="" title="Mortgage House Savings" min='0' max='1000000' data-default='0'>
<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
">
0€
</div>
</div>
<div class="range-slider__legend-end">
<div class="bodycopy-xs
">
1.000.000€
</div>
</div>
</div>
</div>
<div class="field-bottom">
</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 form-radio-group-distinguisher_resident " id="resident">
<div class="field-top fieldset form-list__tooltip-label_option_2">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">¿ERES RESIDENTE EN ESPAÑA? Plural</fieldset>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">¿ERES RESIDENTE EN ESPAÑA?</fieldset>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="resident-yes" type="radio" title="Yes" name="Spain resident" value="SÍ" checked>
<label class="radio-label " for="resident-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="resident-no" type="radio" title="No" name="Spain resident" value="NO">
<label class="radio-label " for="resident-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__fieldform-list__field-distinguisher_other-country hidden required">
<div class="form-select " id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="country">¿DÓNDE RESIDES?</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="access-select " id="country">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden" id="country">
<div class="access-select__option access-select__chosen-option">Elije un país</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="randomAppOtherCountryId1" type="radio" title="Belarus" name="Resident of other country" value="">
<label class="access-select__option access-select__label" for="randomAppOtherCountryId1">
Belarus
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randomAppOtherCountryId2" type="radio" title="Norway" name="Resident of other country" value="">
<label class="access-select__option access-select__label" for="randomAppOtherCountryId2">
Norway
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randomAppOtherCountryId3" type="radio" title="Poland" name="Resident of other country" value="">
<label class="access-select__option access-select__label" for="randomAppOtherCountryId3">
Poland
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randomAppOtherCountryId4" type="radio" title="Sweden" name="Resident of other country" value="">
<label class="access-select__option access-select__label" for="randomAppOtherCountryId4">
Sweden
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randomAppOtherCountryId5" type="radio" title="Switzerland" name="Resident of other country" value="">
<label class="access-select__option access-select__label" for="randomAppOtherCountryId5">
Switzerland
</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-12 col-ms-12 col-sm-12 col-md-10 col-lg-10">
<div class="form-list__field ">
<div class="form-checkbox-group" id="moreInfo">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">¿PUEDES DARNOS MÁS INFORMACIÓN SOBRE TU FUTURA VIVIENDA?</fieldset>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="checkbox-group" id="">
<ul class="column">
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="moreInfoReform" type="checkbox" name="House needs a reform" title="House needs a reform">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
<label class="checkbox-label" for="moreInfoReform">
<span class="caption-placeholder-m">LA VIVIENDA NECESITA UNA REFORMA</span>
</label>
</div>
</li>
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="moreInfoNotYetBuilt" type="checkbox" name="House is not yet built" title="House is not yet built">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
<label class="checkbox-label" for="moreInfoNotYetBuilt">
<span class="caption-placeholder-m">LA CASA QUE QUIERO COMPRAR NO HA EMPEZADO A CONSTRUIRSE</span>
</label>
</div>
</li>
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="moreInfoSwitchHouseActiveMortgage" type="checkbox" name="I want to switch the house, but I have an active mortgage" title="I want to switch the house, but I have an active mortgage">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
<label class="checkbox-label" for="moreInfoSwitchHouseActiveMortgage">
<span class="caption-placeholder-m">QUIERO CAMBIAR DE CASA Y YA TENGO UNA HIPOTECA ACTIVA</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>
</li>
</ul>
<div class="form-btn">
<div class="form-btn__continue">
<button id="" class="btn
" type="button">
Continuar
</button>
</div>
</div>
</div>
<div class="application-form__step-2">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10">
<ul class="form-list">
<li class="form-list__item ">
<div class="form-list__field required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="randomInputId21">NOMBRE</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div> <input class="input
input-distinguisher_name
" id="randomInputId21" type="text" name="" title="Name" autocomplete="" />
<div class="form-fieldset__valid-indicator">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
</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>
</li>
<li class="form-list__item ">
<div class="form-list__field required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="randomInputId22">APELLIDOS</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div> <input class="input
input-distinguisher_surname
" id="randomInputId22" type="text" name="" title="Surname" autocomplete="" />
<div class="form-fieldset__valid-indicator">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
</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>
</li>
<li class="form-list__item ">
<div class="row">
<div class="col-xs-5 col-ms-5 col-sm-5 col-md-6 col-lg-6">
<div class="form-list__field required">
<div class="form-select " id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="randomInputId3">Prefijo</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="access-select " id="randomInputId3">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden" id="randomInputId3">
<div class="access-select__option access-select__chosen-option">Selecciona</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 overflow">
<li class="access-select__item">
<input class="access-select__option access-select__input" id="prefixSelectId1" type="radio" title="+34 Spain" name="Prefix" value="">
<label class="access-select__option access-select__label" for="prefixSelectId1">
+34 Spain
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="prefixSelectId2" type="radio" title="+44 United Kingdom" name="Prefix" value="">
<label class="access-select__option access-select__label" for="prefixSelectId2">
+44 United Kingdom
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="prefixSelectId3" type="radio" title="+239 Sao Tome And Principe" name="Prefix" value="">
<label class="access-select__option access-select__label" for="prefixSelectId3">
+239 Sao Tome And Principe
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="prefixSelectId4" type="radio" title="+1-268 Antigua and Barbuda" name="Prefix" value="">
<label class="access-select__option access-select__label" for="prefixSelectId4">
+1-268 Antigua and Barbuda
</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 class="col-xs-7 col-ms-7 col-sm-7 col-md-6 col-lg-6">
<div class="form-list__field required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="phoneNumber">Telefono</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div> <input class="input
input-distinguisher_phone-number
" id="phoneNumber" type="text" name="" title="Phone number" autocomplete="" minlength='11' />
<div class="form-fieldset__valid-indicator">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
</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="form-list__field required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="randomInputId211">Mail de contacto</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div> <input class="input
input-distinguisher_email
" id="randomInputId211" type="text" name="" title="Email" autocomplete="" placeholder="¿Cual es tu e-mail?" />
<div class="form-fieldset__valid-indicator">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
</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>
</li>
<li class="form-list__item ">
<div class="form-list__field required">
<div class="form-radio-group form-radio-group-distinguisher_contact-type " id="contactMethod">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">MÉTODO DE CONTACTO</fieldset>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input radio-distinguisher_contact-through-email " id="randomRadioId1" type="radio" title="E-mail" name="Contact method" value="POR EMAIL" checked>
<label class="radio-label " for="randomRadioId1" id="" value="">
<span class="caption-placeholder-m">POR EMAIL</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input radio-distinguisher_contact-through-phone " id="randomRadioId2" type="radio" title="Phone" name="Contact method" value="POR TELÉFONO">
<label class="radio-label " for="randomRadioId2" id="" value="">
<span class="caption-placeholder-m">POR TELÉFONO</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 class="form-list__field form-list__field_call-time hidden required">
<div class="form-select form-select-distinguisher_call-time" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">HORARIO PREFERENTE DE CONTACTO</label>
<div class="field-top__wrap">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</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">HORARIO PREFERENTE DE CONTACTO</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="randomSelectId1" type="radio" title="De 9:00 a 14:00 h" name="Preferred contact time" value="">
<label class="access-select__option access-select__label" for="randomSelectId1">
De 9:00 a 14:00 h
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randomSelectId2" type="radio" title="De 14:00 a 18:00 h" name="Preferred contact time" value="">
<label class="access-select__option access-select__label" for="randomSelectId2">
De 14:00 a 18:00 h
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randomSelectId3" type="radio" title="De 18:00 a 20:00 h" name="Preferred contact time" value="">
<label class="access-select__option access-select__label" for="randomSelectId3">
De 18:00 a 20:00 h
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randomSelectId4" type="radio" title="De 20:00 a 24:00 h" name="Preferred contact time" value="">
<label class="access-select__option access-select__label" for="randomSelectId4">
De 20:00 a 24:00 h
</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>
</li>
</ul>
<div class="application-form__legal">
<div class="legal">
<div class="legal__bodycopy">
<div class="
bodycopy-s
">
<p>UCI («Unión de Créditos Inmobiliarios S.A. E.F.C.») tratará los datos personales facilitados a través del presente formulario con la finalidad de gestionar tu solicitud de contacto, facilitarte información sobre nuestros productos y servicios, y conocer tu valoración sobre los mismos, legitimado en el consentimiento otorgado mediante la remisión del mismo. No los conservaremos ni utilizaremos para ninguna otra finalidad, y (salvo que estemos legalmente obligados) no se los facilitaremos a nadie más. Puedes obtener más información sobre el tratamiento de tus datos personales, y cómo ejercitar tus derechos, consultando <a href='XXXenlaceXXX' target='_blank'>nuestra Política de Protección de Datos</a>. Al pulsar en el siguiente botón de envío, declaro haber leído y acepto la información sobre Protección de Datos.</p>
</div>
</div>
</div>
</div>
<div class="recaptcha">
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="g-recaptcha" data-sitekey="6LdHn98bAAAAAGfA8VahTzyElGAicjNMwyuydIu7" data-callback="imNotARobot2"></div>
<div id="errorcaptchaContact">
<span class="error-message">Campo requerido</span>
</div>
<input type="hidden" id="recaptcha_valid" class="recaptcha_valid" value="false">
</div>
<ul class="buttons">
<li>
<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
btn_secondary
btn_secondary
" type="back">
Volver
</button>
</div>
</div>
</div>
</div>
</li>
<li>
<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">
Enviar solicitud
</button>
</div>
</div>
</div>
</div>
</li>
</ul>
</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="application-form__text">
<div class="application-form__text_step-1 rich-text-general">
<h3 class='title-xl'>Entenderlo todo para tomar la mejor decisión</h3>
<ul>
<li>En UCI haremos todo lo posible para que tu proyecto se convierta en realidad.</li>
<li>Descubre nuestros productos para los residentes en España.</li>
<li>Puedes pedirnos consejo siempre que lo necesites</li>
</ul>
</div>
<!-- ==== LO COMENTO PORQUE NO SE HA INTEGRADO NI FUNCIONA CON EL JS EN FRACTAL (CA) <div class="application-form__text_step-2 rich-text-general">
</div> ==== -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="application-form" {{#if hasID}}id="{{idComponent}}"{{/if}}>
<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="application-form__form" id="applicationForm" action="#" method="post" novalidate>
<div class="application-form__step-1">
<div class="application-form__head">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10">
<div class="application-form__description">
{{> @bodycopy-m description }}
</div>
</div>
</div>
</div>
{{> @form-list form-list-step-2 }}
{{> @form-btn continue-btn }}
</div>
<div class="application-form__step-2">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10">
{{> @form-list form-list-step-1 }}
<div class="application-form__legal">
{{ render '@legal' }}
</div>
{{ render '@recaptcha' }}
<ul class="buttons">
<li>{{> @form-btn back-btn }}</li>
<li>{{> @form-btn submit-btn }}</li>
</ul>
</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="application-form__text">
<div class="application-form__text_step-1 rich-text-general">
{{{ text-step-1 }}}
</div>
<!-- ==== LO COMENTO PORQUE NO SE HA INTEGRADO NI FUNCIONA CON EL JS EN FRACTAL (CA) <div class="application-form__text_step-2 rich-text-general">
{{{ text-step-2 }}}
</div> ==== -->
</div>
</div>
</div>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingBottomLarge": true
},
"form-list-step-2": {
"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-7 col-lg-7",
"isRequired": true,
"form-radio-group": {
"id": "holders",
"field-top": {
"fieldset": true,
"label": {
"text": "¿CUÁNTOS TITULARES TENDRÁ LA HIPOTECA?",
"fieldset": true
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"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"
}
}
}
},
{
"isOneColumn": true,
"col": "col-xs-12 col-ms-12 col-sm-12 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"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"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-12 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"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"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-12 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"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"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-12 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"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"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-12 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"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"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-12 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
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"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-12 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"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"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€"
}
}
}
},
{
"isOneColumn": true,
"col": "col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10",
"isRequired": true,
"form-select": {
"distinguisher": "provincia",
"field-top": {
"label": {
"text": "¿EN QUÉ PROVINCIA QUIERES COMPRAR?",
"for": "provincia"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"select": {
"id": "provincia",
"chosen-placeholder": "Elije provincia",
"option": [
{
"id": "randromApplicationProvinceId1",
"select-name": "Province",
"text": "Provincia 1"
},
{
"id": "randromApplicationProvinceId2",
"select-name": "Province",
"text": "Provincia 2"
},
{
"id": "randromApplicationProvinceId3",
"select-name": "Province",
"text": "Provincia 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": {
"distinguisher": "cuando",
"field-top": {
"label": {
"text": "¿CUÁNDO TIENES PREVISTO COMPRAR?",
"for": "cuando"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"select": {
"id": "cuando",
"chosen-placeholder": "Elije cuándo comprarás",
"option": [
{
"id": "randromApplicationCuandoId1",
"select-name": "Cuando",
"text": "En 2 meses"
},
{
"id": "randromApplicationCuandoId2",
"select-name": "Cuando",
"text": "De 2 a 8 meses"
},
{
"id": "randromApplicationCuandoId3",
"select-name": "Cuando",
"text": "Más de 8 meses"
}
]
},
"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-radio-group": {
"field-top": {
"fieldset": true,
"label": {
"text": "TIPO DE INMUEBLE",
"fieldset": true
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"id": "propertyType",
"radio-group": {
"radio-group": [
{
"id": "propertyTypeNew",
"title": "New",
"name": "Property type",
"additionalAttributes": "checked",
"label": {
"text": "NUEVA VIVIENDA",
"type": "-placeholder-m"
}
},
{
"id": "propertyTypeSecondhand",
"title": "Secondhand",
"name": "Property type",
"label": {
"text": "DE SEGUNDA MANO",
"type": "-placeholder-m"
}
}
]
},
"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-radio-group": {
"field-top": {
"fieldset": true,
"label": {
"text": "FINALIDAD DE LA HIPOTECA",
"fieldset": true
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"id": "purpose",
"radio-group": {
"radio-group": [
{
"id": "habitualHousingPurpose",
"title": "Habitual housing",
"name": "Mortgage purpose",
"additionalAttributes": "checked",
"label": {
"text": "VIVIENDA HABITUAL",
"type": "-placeholder-m"
}
},
{
"id": "secondHomePurpose",
"title": "Second home",
"name": "Mortgage purpose",
"label": {
"text": "SEGUNDA RESIDENCIA",
"type": "-placeholder-m"
}
}
]
},
"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",
"form-range-slider": {
"field-top": {
"label": {
"text": "PRECIO VIVIENDA",
"for": "MortgageHousePriceRangeInput"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"id": "MortgageHousePriceRangeSlider",
"range-slider": {
"id": "MortgageHousePriceRangeInput",
"inputTitle": "Mortgage House Price",
"validationAttributes": "min='0' max='1000000' data-default='0'",
"symbol": {
"text": "€"
},
"legend-start": {
"text": "0€"
},
"legend-end": {
"text": "1.000.000€"
}
}
}
},
{
"isOneColumn": true,
"col": "col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10",
"form-range-slider": {
"field-top": {
"label": {
"text": "¿CUÁNTO APORTAS?",
"for": "MortgageHouseSavingsRangeInput"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"id": "MortgageHouseSavingsRangeSlider",
"range-slider": {
"id": "MortgageHouseSavingsRangeInput",
"inputTitle": "Mortgage House Savings",
"validationAttributes": "min='0' max='1000000' data-default='0'",
"symbol": {
"text": "€"
},
"legend-start": {
"text": "0€"
},
"legend-end": {
"text": "1.000.000€"
}
}
}
},
{
"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": {
"distinguisher": "resident",
"field-top": {
"fieldset": true,
"label": {
"text": "¿ERES RESIDENTE EN ESPAÑA?",
"fieldset": true
},
"label-option-2": {
"text": "¿ERES RESIDENTE EN ESPAÑA? Plural",
"fieldset": true
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"id": "resident",
"radio-group": {
"radio-group": [
{
"id": "resident-yes",
"title": "Yes",
"name": "Spain resident",
"additionalAttributes": "checked",
"label": {
"text": "SÍ",
"type": "-placeholder-m"
}
},
{
"id": "resident-no",
"title": "No",
"name": "Spain resident",
"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,
"isRequired-2": true,
"distinguisher-2": "other-country",
"form-select-2": {
"field-top": {
"label": {
"text": "¿DÓNDE RESIDES?",
"for": "country"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"select": {
"id": "country",
"chosen-placeholder": "Elije un país",
"option": [
{
"id": "randomAppOtherCountryId1",
"select-name": "Resident of other country",
"text": "Belarus"
},
{
"id": "randomAppOtherCountryId2",
"select-name": "Resident of other country",
"text": "Norway"
},
{
"id": "randomAppOtherCountryId3",
"select-name": "Resident of other country",
"text": "Poland"
},
{
"id": "randomAppOtherCountryId4",
"select-name": "Resident of other country",
"text": "Sweden"
},
{
"id": "randomAppOtherCountryId5",
"select-name": "Resident of other country",
"text": "Switzerland"
}
]
},
"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",
"form-checkbox-group": {
"field-top": {
"fieldset": true,
"label": {
"text": "¿PUEDES DARNOS MÁS INFORMACIÓN SOBRE TU FUTURA VIVIENDA?",
"fieldset": true
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"id": "moreInfo",
"checkbox-group": {
"isColumn": true,
"checkbox-group": [
{
"id": "moreInfoReform",
"title": "House needs a reform",
"name": "More info",
"label": {
"text": "LA VIVIENDA NECESITA UNA REFORMA",
"type": "-placeholder-m"
}
},
{
"id": "moreInfoNotYetBuilt",
"title": "House is not yet built",
"name": "More info",
"label": {
"text": "LA CASA QUE QUIERO COMPRAR NO HA EMPEZADO A CONSTRUIRSE",
"type": "-placeholder-m"
}
},
{
"id": "moreInfoSwitchHouseActiveMortgage",
"title": "I want to switch the house, but I have an active mortgage",
"name": "More info",
"label": {
"text": "QUIERO CAMBIAR DE CASA Y YA TENGO UNA HIPOTECA ACTIVA",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
},
"form-list-step-1": {
"form-list": [
{
"isRequired": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "NOMBRE",
"for": "randomInputId21"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"input": {
"distinguisher": "name",
"id": "randomInputId21",
"type": "text",
"title": "Name"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "APELLIDOS",
"for": "randomInputId22"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"input": {
"distinguisher": "surname",
"id": "randomInputId22",
"type": "text",
"title": "Surname"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isTwoColumn": true,
"col-1": "col-xs-5 col-ms-5 col-sm-5 col-md-6 col-lg-6",
"isRequired-1": true,
"form-select-1": {
"field-top": {
"label": {
"text": "Prefijo",
"for": "randomInputId3"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"select": {
"isOverflow": true,
"distinguisher": "prefix",
"id": "randomInputId3",
"chosen-placeholder": "Selecciona",
"validationAttributes": "minlength='3'",
"option": [
{
"id": "prefixSelectId1",
"select-name": "Prefix",
"text": "+34 Spain"
},
{
"id": "prefixSelectId2",
"select-name": "Prefix",
"text": "+44 United Kingdom"
},
{
"id": "prefixSelectId3",
"select-name": "Prefix",
"text": "+239 Sao Tome And Principe"
},
{
"id": "prefixSelectId4",
"select-name": "Prefix",
"text": "+1-268 Antigua and Barbuda"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"col-2": "col-xs-7 col-ms-7 col-sm-7 col-md-6 col-lg-6",
"isRequired-2": true,
"form-fieldset-2": {
"field-top": {
"label": {
"text": "Telefono",
"for": "phoneNumber"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"input": {
"distinguisher": "phone-number",
"id": "phoneNumber",
"type": "text",
"title": "Phone number",
"validationAttributes": "minlength='11'"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"form-fieldset": {
"field-top": {
"label": {
"for": "randomInputId211",
"text": "Mail de contacto"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"input": {
"placeholder": "¿Cual es tu e-mail?",
"distinguisher": "email",
"id": "randomInputId211",
"type": "text",
"title": "Email"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"hasThreeFields": true,
"field": [
{
"isRequired": true,
"form-radio-group": {
"distinguisher": "contact-type",
"field-top": {
"fieldset": true,
"label": {
"text": "MÉTODO DE CONTACTO",
"fieldset": true
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"id": "contactMethod",
"radio-group": {
"radio-group": [
{
"distinguisher": "contact-through-email",
"id": "randomRadioId1",
"title": "E-mail",
"name": "Contact method",
"additionalAttributes": "checked",
"label": {
"text": "POR EMAIL",
"type": "-placeholder-m"
}
},
{
"distinguisher": "contact-through-phone",
"id": "randomRadioId2",
"title": "Phone",
"name": "Contact method",
"label": {
"text": "POR TELÉFONO",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"extraClassnames": "form-list__field_call-time",
"isHidden": true,
"isRequired": true,
"form-select": {
"field-top": {
"label": {
"text": "HORARIO PREFERENTE DE CONTACTO"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"distinguisher": "call-time",
"select": {
"chosen-placeholder": "HORARIO PREFERENTE DE CONTACTO",
"option": [
{
"id": "randomSelectId1",
"select-name": "Preferred contact time",
"text": "De 9:00 a 14:00 h"
},
{
"id": "randomSelectId2",
"select-name": "Preferred contact time",
"text": "De 14:00 a 18:00 h"
},
{
"id": "randomSelectId3",
"select-name": "Preferred contact time",
"text": "De 18:00 a 20:00 h"
},
{
"id": "randomSelectId4",
"select-name": "Preferred contact time",
"text": "De 20:00 a 24:00 h"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
}
]
},
"legal": {
"text": "<p>Para poder atenderte, contactaremos contigo en el teléfono y correo electrónico, y con el nombre, que nos facilites. Estos datos los utilizaremos en UCI («Unión de Créditos Inmobiliarios S.A.») solamente para contactar contigo y responder las consultas o petición de información que nos puedas plantear. No los conservaremos ni utilizaremos para ninguna otra finalidad, y (salvo que estemos legalmente obligados) no se los facilitaremos a nadie más. Si quieres saber más en relación con los aspectos legales de este trámite, y en especial cómo protegemos tu privacidad, pincha <a href='#'>aquí</a></p>"
},
"continue-btn": {
"isContinue": true,
"btn": {
"type": "button",
"text": "Continuar"
}
},
"description": {
"text": "Cuanto más nos cuentes sobre tu proyecto, más podremos ajustarnos a tus necesidades. Estos datos son optativos."
},
"submit-btn": {
"isOneColumn": true,
"col": "col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10",
"btn": {
"type": "submit",
"text": "Enviar solicitud"
}
},
"back-btn": {
"isOneColumn": true,
"col": "col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10",
"btn": {
"isSecondary": true,
"type": "back",
"text": "Volver"
}
},
"text-step-1": "<h3 class='title-xl'>Entenderlo todo para tomar la mejor decisión</h3><ul><li>En UCI haremos todo lo posible para que tu proyecto se convierta en realidad.</li><li>Descubre nuestros productos para los residentes en España.</li><li>Puedes pedirnos consejo siempre que lo necesites</li></ul>"
}
.application-form {
&__step-2 {
display: none;
}
&__head {
margin-bottom: 45px;
}
&__legal {
margin-top: 25px;
@media (--viewport-ms-min) {
margin-top: 35px;
}
a{color: var(--color-accent-dark);}
}
&__text {
@media (--viewport-xs-max) {
margin-top: 100px;
}
@media (--viewport-ms-only) {
margin-top: 120px;
}
&_step-2 {
display: none;
}
}
ul.buttons{
li{display:inline; margin-right:20px;float:left;
&:last-child{ margin-right:0;}
.form-btn{
.row > .col-xs-12.col-ms-12.col-sm-12.col-md-10.col-lg-10{flex-basis: auto;max-width: none;}
}
}
}
}
No notes defined.