<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
">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis, tellus eget interdum rhoncus.
</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="">HOW MANY APPLICANTS ARE THERE?</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">HOLDER'S AGE, THE OLDEST HOLDER</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">HOLDER'S AGE</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
">
YEARS
</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">NET MONTHLY INCOME, 1st holder</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">NET MONTHLY INCOME</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">ANNUAL PAYMENTS, 1ST HOLDER</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">ANNUAL PAYMENTS</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">ANNUAL PAYMENTS, 1ST HOLDER</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="">DO YOU HAVE ANY OTHERS LOANS? 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="">DO YOU HAVE ANY OTHERS LOANS?</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="YES" checked>
<label class="radio-label " for="otherLoansYes" id="" value="">
<span class="caption-placeholder-m">YES</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">OTHER LOANS SUMMARY</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_nationality" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="nationality">NATIONALITY</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="nationality">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden" id="nationality">
<div class="access-select__option access-select__chosen-option">Choose nationality</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="randromApplicationNationalityId1" type="radio" title="Option 1" name="nationality" value="">
<label class="access-select__option access-select__label" for="randromApplicationNationalityId1">
Option 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationNationalityId2" type="radio" title="Option 2" name="nationality" value="">
<label class="access-select__option access-select__label" for="randromApplicationNationalityId2">
Option 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationNationalityId3" type="radio" title="Option 3" name="nationality" value="">
<label class="access-select__option access-select__label" for="randromApplicationNationalityId3">
Option 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_countryOfResidence" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="countryOfResidence">country of residence</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="countryOfResidence">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden" id="countryOfResidence">
<div class="access-select__option access-select__chosen-option">Choose country of residence</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="randromApplicationCountryOfResidenceId1" type="radio" title="Option 1" name="country of residence" value="">
<label class="access-select__option access-select__label" for="randromApplicationCountryOfResidenceId1">
Option 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationCountryOfResidenceId2" type="radio" title="Option 2" name="country of residence" value="">
<label class="access-select__option access-select__label" for="randromApplicationCountryOfResidenceId2">
Option 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationCountryOfResidenceId3" type="radio" title="Option 3" name="country of residence" value="">
<label class="access-select__option access-select__label" for="randromApplicationCountryOfResidenceId3">
Option 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_provincia" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="provincia">IN WHICH PROVINCE DO YOU WANT TO BUY?</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">WHEN DO YOU PLAN TO BUY?</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">Choose when you want to buy</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="Within 2 months" name="Cuando" value="">
<label class="access-select__option access-select__label" for="randromApplicationCuandoId1">
Within 2 months
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationCuandoId2" type="radio" title="2 to 8 months" name="Cuando" value="">
<label class="access-select__option access-select__label" for="randromApplicationCuandoId2">
2 to 8 months
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationCuandoId3" type="radio" title="More than 8 months" name="Cuando" value="">
<label class="access-select__option access-select__label" for="randromApplicationCuandoId3">
More than 8 months
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationCuandoId4" type="radio" title="When you have the financing" name="Cuando" value="">
<label class="access-select__option access-select__label" for="randromApplicationCuandoId4">
When you have the financing
</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="">TYPE OF PROPERTY</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="NEW" checked>
<label class="radio-label " for="propertyTypeNew" id="" value="">
<span class="caption-placeholder-m">NEW</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="SECOND HAND">
<label class="radio-label " for="propertyTypeSecondhand" id="" value="">
<span class="caption-placeholder-m">SECOND HAND</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">PROPERTY PRICE</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="moneyRequestRangeSlider">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="moneyRequestRangeInput">MORTGAGE AMOUNT</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="moneyRequestRangeInput">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="" type="text" name="" title="Mortgage House Savings" min='0' max='1000000' data-default='10000'>
<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 required">
<div class="form-radio-group " id="reasonBuying">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">REASON FOR BUYING</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 class="column">
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="reasonBuyingSecond" type="radio" title="Second Home" name="reasonBuying" value="SECOND HOME" checked>
<label class="radio-label " for="reasonBuyingSecond" id="" value="">
<span class="caption-placeholder-m">SECOND HOME</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="reasonBuyingRelocation" type="radio" title="Relocation" name="reasonBuying" value="RELOCATION">
<label class="radio-label " for="reasonBuyingRelocation" id="" value="">
<span class="caption-placeholder-m">RELOCATION</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="reasonBuyingOther" type="radio" title="Other" name="reasonBuying" value="OTHER">
<label class="radio-label " for="reasonBuyingOther" id="" value="">
<span class="caption-placeholder-m">OTHER</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">
Continue
</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">NAME</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">SURNAME</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">PREFIX</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">Select</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">PHONE NUMBER</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">EMAIL</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="Email" />
<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 ">
<div class="form-textarea" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">YOUR MESSAGE</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="textarea">
<textarea class="textarea-field
input-distinguisher_Message
" id="randomInputId211" name="Mensaje" title="Mensaje" placeholder="Your message"></textarea>
</div>
<div class="field-bottom">
</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="">CONTACT METHOD</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="BY EMAIL" checked>
<label class="radio-label " for="randomRadioId1" id="" value="">
<span class="caption-placeholder-m">BY 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="BY PHONE">
<label class="radio-label " for="randomRadioId2" id="" value="">
<span class="caption-placeholder-m">BY PHONE</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="">PREFERRED CONTACT TIME</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">PREFERRED CONTACT TIME</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">
Back
</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">
Submit
</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">
<h2 class='title-xl'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<ul>
<li>Curabitur at erat ac diam volutpat vestibulum at ac nibh.</li>
<li>Curabitur nisi nunc, pulvinar ut nunc in, pretium interdum sapien.</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": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis, tellus eget interdum rhoncus.",
"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": "HOW MANY APPLICANTS ARE THERE?",
"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": "HOLDER'S AGE",
"for": "Edad"
},
"label-option-2": {
"text": "HOLDER'S AGE, THE OLDEST HOLDER",
"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": "YEARS"
},
"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": "NET MONTHLY INCOME",
"for": "Monthly income"
},
"label-option-2": {
"text": "NET MONTHLY INCOME, 1st holder",
"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": "ANNUAL PAYMENTS",
"for": "paymentsNumberInput"
},
"label-option-2": {
"text": "ANNUAL PAYMENTS, 1ST HOLDER",
"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": "ANNUAL PAYMENTS, 1ST HOLDER",
"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": "DO YOU HAVE ANY OTHERS LOANS?",
"fieldset": true
},
"label-option-2": {
"text": "DO YOU HAVE ANY OTHERS LOANS? 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": "YES",
"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": "OTHER LOANS SUMMARY",
"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": "nationality",
"field-top": {
"label": {
"text": "NATIONALITY",
"for": "nationality"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"select": {
"id": "nationality",
"chosen-placeholder": "Choose nationality",
"option": [
{
"id": "randromApplicationNationalityId1",
"select-name": "nationality",
"text": "Option 1"
},
{
"id": "randromApplicationNationalityId2",
"select-name": "nationality",
"text": "Option 2"
},
{
"id": "randromApplicationNationalityId3",
"select-name": "nationality",
"text": "Option 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": "countryOfResidence",
"field-top": {
"label": {
"text": "country of residence",
"for": "countryOfResidence"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"select": {
"id": "countryOfResidence",
"chosen-placeholder": "Choose country of residence",
"option": [
{
"id": "randromApplicationCountryOfResidenceId1",
"select-name": "country of residence",
"text": "Option 1"
},
{
"id": "randromApplicationCountryOfResidenceId2",
"select-name": "country of residence",
"text": "Option 2"
},
{
"id": "randromApplicationCountryOfResidenceId3",
"select-name": "country of residence",
"text": "Option 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": "provincia",
"field-top": {
"label": {
"text": "IN WHICH PROVINCE DO YOU WANT TO BUY?",
"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": "WHEN DO YOU PLAN TO BUY?",
"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": "Choose when you want to buy",
"option": [
{
"id": "randromApplicationCuandoId1",
"select-name": "Cuando",
"text": "Within 2 months"
},
{
"id": "randromApplicationCuandoId2",
"select-name": "Cuando",
"text": "2 to 8 months"
},
{
"id": "randromApplicationCuandoId3",
"select-name": "Cuando",
"text": "More than 8 months"
},
{
"id": "randromApplicationCuandoId4",
"select-name": "Cuando",
"text": "When you have the financing"
}
]
},
"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": "TYPE OF PROPERTY",
"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": "NEW",
"type": "-placeholder-m"
}
},
{
"id": "propertyTypeSecondhand",
"title": "Secondhand",
"name": "Property type",
"label": {
"text": "SECOND HAND",
"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": "PROPERTY PRICE",
"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": "MORTGAGE AMOUNT",
"for": "moneyRequestRangeInput"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"id": "moneyRequestRangeSlider",
"range-slider": {
"id": "moneyRequestRangeInput",
"inputTitle": "Mortgage House Savings",
"validationAttributes": "min='0' max='1000000' data-default='10000'",
"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",
"isRequired": true,
"form-radio-group": {
"field-top": {
"fieldset": true,
"label": {
"text": "REASON FOR BUYING",
"fieldset": true
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"id": "reasonBuying",
"radio-group": {
"isColumn": true,
"radio-group": [
{
"id": "reasonBuyingSecond",
"title": "Second Home",
"name": "reasonBuying",
"additionalAttributes": "checked",
"label": {
"text": "SECOND HOME",
"type": "-placeholder-m"
}
},
{
"id": "reasonBuyingRelocation",
"title": "Relocation",
"name": "reasonBuying",
"label": {
"text": "RELOCATION",
"type": "-placeholder-m"
}
},
{
"id": "reasonBuyingOther",
"title": "Other",
"name": "reasonBuying",
"label": {
"text": "OTHER",
"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": "NAME",
"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": "SURNAME",
"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": "PREFIX",
"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": "Select",
"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": "PHONE NUMBER",
"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": "EMAIL"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"input": {
"placeholder": "Email",
"distinguisher": "email",
"id": "randomInputId211",
"type": "text",
"title": "Email"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"form-textarea": {
"field-top": {
"label": {
"text": "YOUR MESSAGE"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"textarea": {
"distinguisher": "Message",
"id": "randomInputId211",
"type": "text",
"title": "Mensaje",
"placeholder": "Your message"
}
}
},
{
"hasThreeFields": true,
"field": [
{
"isRequired": true,
"form-radio-group": {
"distinguisher": "contact-type",
"field-top": {
"fieldset": true,
"label": {
"text": "CONTACT METHOD",
"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": "BY EMAIL",
"type": "-placeholder-m"
}
},
{
"distinguisher": "contact-through-phone",
"id": "randomRadioId2",
"title": "Phone",
"name": "Contact method",
"label": {
"text": "BY PHONE",
"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": "PREFERRED CONTACT TIME"
},
"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": "PREFERRED CONTACT TIME",
"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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis, tellus eget interdum rhoncus, mi mauris gravida neque, euismod luctus ipsum mi sed nisi. Aenean dignissim ac libero quis fringilla. Vivamus congue, tortor in aliquam feugiat, nisl lorem condimentum ex, nec auctor neque nisl sed nulla. Pellentesque eu purus sapien. Proin at imperdiet metus, eget aliquet nisi. Quisque cursus vitae ligula at feugiat. Sed vestibulum, nunc non convallis aliquam, libero tellus condimentum elit, ac volutpat tortor nulla eget odio. Aenean non neque viverra, tempor velit sit amet, molestie odio. Etiam quis dolor eget ex rutrum aliquam et a dolor. Vestibulum tincidunt vehicula mi, eu iaculis leo lacinia sit amet.</p>"
},
"continue-btn": {
"isContinue": true,
"btn": {
"type": "button",
"text": "Continue"
}
},
"description": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis, tellus eget interdum rhoncus."
},
"submit-btn": {
"isOneColumn": true,
"col": "col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10",
"btn": {
"type": "submit",
"text": "Submit"
}
},
"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": "Back"
}
},
"text-step-1": "<h2 class='title-xl'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2><ul><li>Curabitur at erat ac diam volutpat vestibulum at ac nibh.</li><li>Curabitur nisi nunc, pulvinar ut nunc in, pretium interdum sapien.</li></ul>",
"isUciMortgages": true
}
.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.