<div class="steps-form">
<div class="steps-form__step1 step-form test-step-1" id="1">
<div class="text-label-m">¡EEEEEEEEMPEZAMOS!</div>
<div class="tit-group">
<h1 class="
title-xxl
">¿Qué quieres hacer?</h1>
<img class="emoji" src="/dist/images/que quieres.png" alt="emoji">
</div>
<ul class="form-list">
<li class="form-list__item ">
<div class="form-list__field required" s>
<div class="form-radio-group form-radio-group-distinguisher_step-1 inColumn" id="step-1">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="1_2_1" type="radio" title="opción 1" name="step-1" value="Comprar una casa, me he enamorado">
<label class="radio-label " for="1_2_1" id="2-L" value="1">
<span class="caption-placeholder-m">Comprar una casa, me he enamorado</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="1_5_2" type="radio" title="opción 2" name="step-1" value="Vender una casa para comprar una nueva">
<label class="radio-label " for="1_5_2" id="5-L" value="2">
<span class="caption-placeholder-m">Vender una casa para comprar una nueva</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="1_4_3" type="radio" title="opción 3" name="step-1" value="Construir un hogar desde cero a mi medida">
<label class="radio-label " for="1_4_3" id="4-L" value="3">
<span class="caption">Construir un hogar desde cero a mi medida</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
</ul>
<div class="steps-form__nav">
<div class="steps-form__nav-back nav-back">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-left ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-left"></use>
</svg>
</div>
</div>
<div class="steps-form__nav-forward nav-forward">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="steps-form__step2 step-form test-step-2" id="2">
<div class="text-label-m">¡ENTRAMOS EN HARINA!</div>
<div class="tit-group">
<h1 class="
title-xxl
">¿Qué te describe mejor?</h1>
<img class="emoji" src="/dist/images/describe.png" alt="emoji">
</div>
<ul class="form-list">
<li class="form-list__item ">
<div class="form-list__field required" s>
<div class="form-radio-group form-radio-group-distinguisher_step-2 inColumn" id="step-2">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="2_3_1" type="radio" title="opción 1" name="step-2" value="Soy funcionario y sé lo que haré los próximos 5 años">
<label class="radio-label " for="2_3_1" id="3-L" value="1">
<span class="caption-placeholder-m">Soy funcionario y sé lo que haré los próximos 5 años</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="2_3_2" type="radio" title="opción 2" name="step-2" value="Compro casa yo solo. Si me queréis, “irse”">
<label class="radio-label " for="2_3_2" id="3-L" value="2">
<span class="caption-placeholder-m">Compro casa yo solo. Si me queréis, “irse”</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="2_3_3" type="radio" title="opción 3" name="step-2" value="Necesito un aval quiero un empujoncito">
<label class="radio-label " for="2_3_3" id="3-L" value="3">
<span class="caption">Necesito un aval quiero un empujoncito</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="2_3_4" type="radio" title="opción 4" name="step-2" value="Nah, ninguna de las anteriores opciones">
<label class="radio-label " for="2_3_4" id="3-L" value="4">
<span class="caption">Nah, ninguna de las anteriores opciones</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>
</li>
</ul>
<div class="steps-form__nav">
<div class="steps-form__nav-back nav-back">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-left ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-left"></use>
</svg>
</div>
</div>
<div class="steps-form__nav-forward nav-forward">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="steps-form__step3 step-form test-step-3" id="3">
<div class="text-label-m">LA PREGUNTA DE MANOLO Y BENITO</div>
<div class="tit-group">
<h1 class="
title-xxl
">Además de comprarla, ¿quieres reformarla?</h1>
<img class="emoji" src="/dist/images/reforma.png" alt="emoji">
</div>
<ul class="form-list">
<li class="form-list__item ">
<div class="form-list__field required" s>
<div class="form-radio-group form-radio-group-distinguisher_step-3 inColumn" id="step-3">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="3_4_1" type="radio" title="opción 1" name="step-3" value="Yeah, mejor ahora que nunca">
<label class="radio-label " for="3_4_1" id="4-L" value="1">
<span class="caption-placeholder-m">Yeah, mejor ahora que nunca</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="3_5_2" type="radio" title="opción 2" name="step-3" value="No, mejor lo dejo para el futuro">
<label class="radio-label " for="3_5_2" id="5-L" value="2">
<span class="caption-placeholder-m">No, mejor lo dejo para el futuro</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="3_5_3" type="radio" title="opción 3" name="step-3" value="Mar de dudas, que me asesoren">
<label class="radio-label " for="3_5_3" id="5-L" value="3">
<span class="caption">Mar de dudas, que me asesoren</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>
</li>
</ul>
<div class="steps-form__nav">
<div class="steps-form__nav-back nav-back">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-left ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-left"></use>
</svg>
</div>
</div>
<div class="steps-form__nav-forward nav-forward">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="steps-form__step4 step-form test-step-4" id="4">
<div class="text-label-m">PARA TODOS LOS GRETA THUNBERGS</div>
<div class="tit-group">
<h1 class="
title-xxl
">¿Quieres que tu vivienda sea sostenible?</h1>
<img class="emoji" src="/dist/images/green.png" alt="emoji">
</div>
<ul class="form-list">
<li class="form-list__item ">
<div class="form-list__field required" s>
<div class="form-radio-group form-radio-group-distinguisher_step-4 inColumn" id="step-4">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="4_5_1" type="radio" title="opción 1" name="step-4" value="Claro, el planeta es mi jardín">
<label class="radio-label " for="4_5_1" id="5-L" value="1">
<span class="caption-placeholder-m">Claro, el planeta es mi jardín</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="4_5_2" type="radio" title="opción 2" name="step-4" value="No, prefiero quedarme como estoy">
<label class="radio-label " for="4_5_2" id="5-L" value="2">
<span class="caption-placeholder-m">No, prefiero quedarme como estoy</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="4_5_3" type="radio" title="opción 3" name="step-4" value="Mar de dudas, que me asesoren">
<label class="radio-label " for="4_5_3" id="5-L" value="3">
<span class="caption">Mar de dudas, que me asesoren</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>
</li>
</ul>
<div class="steps-form__nav">
<div class="steps-form__nav-back nav-back">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-left ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-left"></use>
</svg>
</div>
</div>
<div class="steps-form__nav-forward nav-forward">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="steps-form__step5 step-form test-step-5" id="5">
<div class="text-label-m">DINOS CUÁL ES TU TIPO</div>
<div class="tit-group">
<h1 class="
title-xxl
">¿A qué tipo habías pensado comprarla?</h1>
<img class="emoji" src="/dist/images/tipo.png" alt="emoji">
</div>
<ul class="form-list">
<li class="form-list__item ">
<div class="form-list__field required" s>
<div class="form-radio-group form-radio-group-distinguisher_step-5 inColumn" id="step-5">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="5_6_1" type="radio" title="opción 1" name="step-5" value="Tipo fijo, constante como una autopista">
<label class="radio-label " for="5_6_1" id="6-L" value="5">
<span class="caption-placeholder-m">Tipo fijo, constante como una autopista</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="5_6_2" type="radio" title="opción 2" name="step-5" value="Tipo mixto, un camino con curvas y rectas">
<label class="radio-label " for="5_6_2" id="6-L" value="5">
<span class="caption-placeholder-m">Tipo mixto, un camino con curvas y rectas</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="5_6_3" type="radio" title="opción 3" name="step-5" value="Tipo variable, cuesta de bajada o empepinada">
<label class="radio-label " for="5_6_3" id="6-L" value="5">
<span class="caption">Tipo variable, cuesta de bajada o empepinada</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="5_6_4" type="radio" title="opción 4" name="step-5" value="Mar de dudas, que me asesoren">
<label class="radio-label " for="5_6_4" id="6-L" value="5">
<span class="caption">Mar de dudas, que me asesoren</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>
</li>
</ul>
<div class="steps-form__nav">
<div class="steps-form__nav-back nav-back">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-left ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-left"></use>
</svg>
</div>
</div>
<div class="steps-form__nav-forward nav-forward">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="steps-form__step6 step-form test-step-6" id="6">
<div class="text-label-m">¡YA CASI ESTAMOS!</div>
<div class="tit-group">
<h1 class="
title-xxl
">No es obligatorio, pero si quieres protegerte...</h1>
<img class="emoji" src="/dist/images/house.png" alt="emoji">
</div>
<ul class="form-list">
<li class="form-list__item ">
<div class="form-list__field required" s>
<div class="form-radio-group form-radio-group-distinguisher_step-6 inColumn" id="step-6">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="6_7_1" type="radio" title="opción 1" name="step-6" value="Seguro de hogar, of course, la acabo de comprar">
<label class="radio-label " for="6_7_1" id="8-L" value="6">
<span class="caption-placeholder-m">Seguro de hogar, of course, la acabo de comprar</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="6_7_2" type="radio" title="opción 2" name="step-6" value="Seguro de vida, mejor tenerlo y no usarlo, que no tenerlo">
<label class="radio-label " for="6_7_2" id="8-L" value="6">
<span class="caption-placeholder-m">Seguro de vida, mejor tenerlo y no usarlo, que no tenerlo</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="6_7_3" type="radio" title="opción 3" name="step-6" value="Seguro de pagos, por si no hay trabajo, Dios no lo quiera">
<label class="radio-label " for="6_7_3" id="8-L" value="6">
<span class="caption">Seguro de pagos, por si no hay trabajo, Dios no lo quiera</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="6_7_4" type="radio" title="opción 4" name="step-6" value="Mar de dudas, que me asesoren">
<label class="radio-label " for="6_7_4" id="8-L" value="6">
<span class="caption">Mar de dudas, que me asesoren</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>
</li>
</ul>
<div class="steps-form__nav">
<div class="steps-form__nav-back nav-back">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-left ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-left"></use>
</svg>
</div>
</div>
<div class="steps-form__nav-forward nav-forward">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="steps-form__step7 step-form test-step-7" id="7">
<div class="text-label-m">¡VAMOS, VAMOS QUE ES LA PENÚLTIMA!</div>
<div class="tit-group">
<h1 class="
title-xxl
">Cómo te gustaría ver tu resultado</h1>
<img class="emoji" src="/dist/images/pixel.png" alt="emoji">
</div>
<ul class="form-list">
<li class="form-list__item ">
<div class="form-list__field required" s>
<div class="form-radio-group form-radio-group-distinguisher_step-7 inColumn" id="step-7">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="7_8_1" type="radio" title="opción 1" name="step-7" value="Lo quiero por mail para tenerlo siempre a mano y que un comercial me informe">
<label class="radio-label " for="7_8_1" id="8-L" value="7">
<span class="caption-placeholder-m">Lo quiero por mail para tenerlo siempre a mano y que un comercial me informe</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="7_8_2" type="radio" title="opción 2" name="step-7" value="Lo veo en pantalla, y me descargo el pdf del resultado, sin más">
<label class="radio-label " for="7_8_2" id="8-L" value="7">
<span class="caption-placeholder-m">Lo veo en pantalla, y me descargo el pdf del resultado, sin más</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>
</li>
</ul>
<div class="steps-form__nav">
<div class="steps-form__nav-back nav-back">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-left ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-left"></use>
</svg>
</div>
</div>
<div class="steps-form__nav-forward nav-forward">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="steps-form__step8 step-form test-step-8" id="8">
<div class="text-label-m">¡YA TERMINAMOS! ÚLTIMA, ULTIMÍSISISIMA</div>
<div class="tit-group">
<h1 class="
title-xxl
">¡Indícanos tus datos para poder enviarte el resultado de tu test!</h1>
<img class="emoji" src="/dist/images/mail.png" alt="emoji">
</div>
<form class="form-distinguisher_contact-form" id="" action="#" method="post" novalidate>
<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">
</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">
</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="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">
</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="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">
</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">
</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>
</ul>
<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 class="form-btn">
<div class="form-btn__submit">
<button id="" class="btn
" type="submit">
Ver mi resultado
</button>
</div>
</div>
</form>
<div class="steps-form__nav">
<div class="steps-form__nav-back nav-back">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-left ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-left"></use>
</svg>
</div>
</div>
<div class="steps-form__nav-forward nav-forward">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="steps-form">
{{#each step}}
<div class="{{ class }} step-form test-step-{{math @index "+" 1}}" id="{{math @index "+" 1}}">
{{> @text-label-m antetitulo }}
<div class="tit-group">{{> @title-xxl titulo }} <img class="emoji" src="{{ src-emoji }}" alt="emoji"></div>
{{#if isLastStep}}
<form class="form-distinguisher_contact-form" id="{{ id }}" action="#" method="post" novalidate>
{{> @form-list form-list }}
{{ render '@legal' }}
{{> @form-btn submit-btn }}
</form>
{{else}}
{{> @form-list form-list }}
{{/if}}
<div class="steps-form__nav">
<div class="steps-form__nav-back nav-back">
{{ render '@nav-arrow--back-small' }}
</div>
<div class="steps-form__nav-forward nav-forward">
{{ render '@nav-arrow--forward-small' }}
</div>
</div>
</div>
{{/each}}
</div>
{
"hasID": false,
"step": [
{
"class": "steps-form__step1",
"isActive": true,
"antetitulo": {
"text": "¡EEEEEEEEMPEZAMOS!"
},
"titulo": {
"text": "¿Qué quieres hacer?"
},
"src-emoji": "/dist/images/que quieres.png",
"form-list": {
"form-list": [
{
"hasTwoFields": true,
"test": false,
"field": [
{
"isRequired": true,
"form-radio-group": {
"distinguisher": "step-1",
"id": "step-1",
"Column": true,
"radio-group": {
"radio-group": [
{
"id": "1_2_1",
"title": "opción 1",
"name": "step-1",
"label": {
"text": "Comprar una casa, me he enamorado",
"type": "-placeholder-m",
"id": "2-L",
"value": "1"
}
},
{
"id": "1_5_2",
"title": "opción 2",
"name": "step-1",
"label": {
"text": "Vender una casa para comprar una nueva",
"type": "-placeholder-m",
"id": "5-L",
"value": "2"
}
},
{
"id": "1_4_3",
"title": "opción 3",
"name": "step-1",
"label": {
"text": "Construir un hogar desde cero a mi medida",
"id": "4-L",
"value": "3"
}
}
]
}
}
}
]
}
]
}
},
{
"class": "steps-form__step2",
"isActive": false,
"antetitulo": {
"text": "¡ENTRAMOS EN HARINA!"
},
"titulo": {
"text": "¿Qué te describe mejor?"
},
"src-emoji": "/dist/images/describe.png",
"form-list": {
"form-list": [
{
"hasTwoFields": true,
"field": [
{
"isRequired": true,
"form-radio-group": {
"Column": true,
"distinguisher": "step-2",
"id": "step-2",
"radio-group": {
"radio-group": [
{
"id": "2_3_1",
"title": "opción 1",
"name": "step-2",
"label": {
"text": "Soy funcionario y sé lo que haré los próximos 5 años",
"type": "-placeholder-m",
"id": "3-L",
"value": "1"
}
},
{
"id": "2_3_2",
"title": "opción 2",
"name": "step-2",
"label": {
"text": "Compro casa yo solo. Si me queréis, “irse”",
"type": "-placeholder-m",
"id": "3-L",
"value": "2"
}
},
{
"id": "2_3_3",
"title": "opción 3",
"name": "step-2",
"label": {
"text": "Necesito un aval quiero un empujoncito",
"id": "3-L",
"value": "3"
}
},
{
"id": "2_3_4",
"title": "opción 4",
"name": "step-2",
"label": {
"text": "Nah, ninguna de las anteriores opciones",
"id": "3-L",
"value": "4"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
}
]
}
},
{
"class": "steps-form__step3",
"isActive": false,
"antetitulo": {
"text": "LA PREGUNTA DE MANOLO Y BENITO"
},
"titulo": {
"text": "Además de comprarla, ¿quieres reformarla?"
},
"src-emoji": "/dist/images/reforma.png",
"form-list": {
"form-list": [
{
"hasTwoFields": true,
"field": [
{
"isRequired": true,
"form-radio-group": {
"Column": true,
"distinguisher": "step-3",
"id": "step-3",
"radio-group": {
"radio-group": [
{
"id": "3_4_1",
"title": "opción 1",
"name": "step-3",
"label": {
"text": "Yeah, mejor ahora que nunca",
"type": "-placeholder-m",
"id": "4-L",
"value": "1"
}
},
{
"id": "3_5_2",
"title": "opción 2",
"name": "step-3",
"label": {
"text": "No, mejor lo dejo para el futuro",
"type": "-placeholder-m",
"id": "5-L",
"value": "2"
}
},
{
"id": "3_5_3",
"title": "opción 3",
"name": "step-3",
"label": {
"text": "Mar de dudas, que me asesoren",
"id": "5-L",
"value": "3"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
}
]
}
},
{
"class": "steps-form__step4",
"isActive": false,
"antetitulo": {
"text": "PARA TODOS LOS GRETA THUNBERGS"
},
"titulo": {
"text": "¿Quieres que tu vivienda sea sostenible?"
},
"src-emoji": "/dist/images/green.png",
"form-list": {
"form-list": [
{
"hasTwoFields": true,
"field": [
{
"isRequired": true,
"form-radio-group": {
"distinguisher": "step-4",
"id": "step-4",
"Column": true,
"radio-group": {
"radio-group": [
{
"id": "4_5_1",
"title": "opción 1",
"name": "step-4",
"label": {
"text": "Claro, el planeta es mi jardín",
"type": "-placeholder-m",
"id": "5-L",
"value": "1"
}
},
{
"id": "4_5_2",
"title": "opción 2",
"name": "step-4",
"label": {
"text": "No, prefiero quedarme como estoy",
"type": "-placeholder-m",
"id": "5-L",
"value": "2"
}
},
{
"id": "4_5_3",
"title": "opción 3",
"name": "step-4",
"label": {
"text": "Mar de dudas, que me asesoren",
"id": "5-L",
"value": "3"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
}
]
}
},
{
"class": "steps-form__step5",
"isActive": false,
"antetitulo": {
"text": "DINOS CUÁL ES TU TIPO"
},
"titulo": {
"text": "¿A qué tipo habías pensado comprarla?"
},
"src-emoji": "/dist/images/tipo.png",
"form-list": {
"form-list": [
{
"hasTwoFields": true,
"field": [
{
"isRequired": true,
"form-radio-group": {
"Column": true,
"distinguisher": "step-5",
"id": "step-5",
"radio-group": {
"radio-group": [
{
"id": "5_6_1",
"title": "opción 1",
"name": "step-5",
"label": {
"text": "Tipo fijo, constante como una autopista",
"type": "-placeholder-m",
"id": "6-L",
"value": "5"
}
},
{
"id": "5_6_2",
"title": "opción 2",
"name": "step-5",
"label": {
"text": "Tipo mixto, un camino con curvas y rectas",
"type": "-placeholder-m",
"id": "6-L",
"value": "5"
}
},
{
"id": "5_6_3",
"title": "opción 3",
"name": "step-5",
"label": {
"text": "Tipo variable, cuesta de bajada o empepinada",
"id": "6-L",
"value": "5"
}
},
{
"id": "5_6_4",
"title": "opción 4",
"name": "step-5",
"label": {
"text": "Mar de dudas, que me asesoren",
"id": "6-L",
"value": "5"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
}
]
}
},
{
"class": "steps-form__step6",
"isActive": false,
"antetitulo": {
"text": "¡YA CASI ESTAMOS!"
},
"titulo": {
"text": "No es obligatorio, pero si quieres protegerte..."
},
"src-emoji": "/dist/images/house.png",
"form-list": {
"form-list": [
{
"hasTwoFields": true,
"field": [
{
"isRequired": true,
"form-radio-group": {
"Column": true,
"distinguisher": "step-6",
"id": "step-6",
"radio-group": {
"radio-group": [
{
"id": "6_7_1",
"title": "opción 1",
"name": "step-6",
"label": {
"text": "Seguro de hogar, of course, la acabo de comprar",
"type": "-placeholder-m",
"id": "8-L",
"value": "6"
}
},
{
"id": "6_7_2",
"title": "opción 2",
"name": "step-6",
"label": {
"text": "Seguro de vida, mejor tenerlo y no usarlo, que no tenerlo",
"type": "-placeholder-m",
"id": "8-L",
"value": "6"
}
},
{
"id": "6_7_3",
"title": "opción 3",
"name": "step-6",
"label": {
"text": "Seguro de pagos, por si no hay trabajo, Dios no lo quiera",
"id": "8-L",
"value": "6"
}
},
{
"id": "6_7_4",
"title": "opción 4",
"name": "step-6",
"label": {
"text": "Mar de dudas, que me asesoren",
"id": "8-L",
"value": "6"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
}
]
}
},
{
"class": "steps-form__step7",
"isActive": false,
"antetitulo": {
"text": "¡VAMOS, VAMOS QUE ES LA PENÚLTIMA!"
},
"titulo": {
"text": "Cómo te gustaría ver tu resultado"
},
"src-emoji": "/dist/images/pixel.png",
"form-list": {
"form-list": [
{
"hasTwoFields": true,
"field": [
{
"isRequired": true,
"form-radio-group": {
"Column": true,
"distinguisher": "step-7",
"id": "step-7",
"radio-group": {
"radio-group": [
{
"id": "7_8_1",
"title": "opción 1",
"name": "step-7",
"label": {
"text": "Lo quiero por mail para tenerlo siempre a mano y que un comercial me informe",
"type": "-placeholder-m",
"id": "8-L",
"value": "7"
}
},
{
"id": "7_8_2",
"title": "opción 2",
"name": "step-7",
"label": {
"text": "Lo veo en pantalla, y me descargo el pdf del resultado, sin más",
"type": "-placeholder-m",
"id": "8-L",
"value": "7"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
}
]
}
},
{
"class": "steps-form__step8",
"isActive": false,
"isLastStep": true,
"antetitulo": {
"text": "¡YA TERMINAMOS! ÚLTIMA, ULTIMÍSISISIMA"
},
"titulo": {
"text": "¡Indícanos tus datos para poder enviarte el resultado de tu test!"
},
"src-emoji": "/dist/images/mail.png",
"checkbox": {
"id": "checkbox",
"title": "Checkbox",
"label": {
"text": "<span>Checkbox</span>"
},
"text-label": {
"text": "¿Te gustaría recibir información sobre nuestros productos?"
}
},
"subtit": {
"text": "<p>Para poder informarte mejor necesitamos que nos indiques:</p>"
},
"legal": {
"text": "<p>Los datos recogidos en este formulario serán tratados por Unión de Créditos Inmobiliarios S.A., E.F.C (Hipotecas.com/UCI) para llevar a cabo todas las actividades necesarias para gestionar tu participación en la presente promoción, lo que incluye, cuando fuera necesario, el envío de comunicaciones vinculadas a esta promoción a través de los datos de contacto facilitados. Adicionalmente, en el caso de que a continuación nos des tu consentimiento, trataremos los datos para facilitarte información sobre nuestros productos y servicios, así como para conocer tu valoración sobre los mismos. 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 sobre cómo protegemos tu privacidad, pincha aquí. Al enviar el formulario, declaro haber sido informado de la política de privacidad, y consiento en el tratamiento de mis datos. Consulta las bases legales <a href='#'>aquí</a>.</p>"
},
"submit-btn": {
"btn": {
"type": "submit",
"text": "Ver mi resultado"
}
},
"form-list": {
"form-list": [
{
"isRequired": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "NOMBRE",
"for": "randomInputId21"
}
},
"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"
}
},
"input": {
"distinguisher": "surname",
"id": "randomInputId22",
"type": "text",
"title": "Surname"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"form-fieldset": {
"field-top": {
"label": {
"for": "randomInputId211",
"text": "Email"
}
},
"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"
}
}
}
},
{
"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"
}
},
"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"
}
},
"input": {
"distinguisher": "phone-number",
"id": "phoneNumber",
"type": "text",
"title": "Phone number",
"validationAttributes": "minlength='11'"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
}
}
]
}
/*.lightbox__window{padding-bottom:20px;} Esta clase no puede estar en este componente sin hacer referencia a su contenedor. Provoca un error en el resto de Lightbox (CA) */
.steps-form {
margin-top: -40px;
.step-form {
display: none;
&.steps-form__step1 {
display: block;
}
}
.inactive{display: none;}
.active{display:block;}
.tit-group{text-align:center;margin-bottom:0;margin-top:60px;
@media (--viewport-ms-max) {
margin-top:45px;
}
@media (--viewport-xs-max) {
margin-top:30px;
}
.title-xxl{
text-align: center;display:inline;
}
img{width: 45px;display:inline;margin-bottom:-14px;}
}
ul.form-list{width: 60%;margin:0 20%;
@media (--viewport-sm-max) {
width: 80%; margin:0 10%;
}
@media (--viewport-ms-max) {
width: 100%; margin:0;
}
@media (--viewport-xs-max) {
width: 90%; margin:0 5%;
}
li{width: 100%;
ul.radio-group{flex-direction: column;
li{padding:10px 0;}
}
}
}
.steps-form__nav {
display: flex;margin-bottom: 40px;width: 100%;justify-content: center;
position: absolute;bottom: 0;
@media (--viewport-xs-max) {
/*justify-content: space-between;*/
padding: 0 20px;
margin-bottom:10px;
}
&-back,
&-forward {
width: 30px;
margin-top: 30px;
/*margin-right: calc(50%-30px);
margin-left:30px;*/
}
&-back {/*margin-left: calc(50%-30px); margin-right:30px;*/
@media (--viewport-ms-min) {
/*margin-right: 30px;*/
}
}
&-forward{display: none;}
}
.steps-form__step1{
.steps-form__nav{
&-back{display: none;}
&-forward{display: none;}
}
}
.form-btn{text-align: center;}
.tipos{
ul.form-list{width: 100%;margin:0;
@media (--viewport-sm-max) {
width: 60%;margin:0 20%;
}
@media (--viewport-ms-max) {
width: 90%; margin:0 5%;
}
li{
ul.radio-group{flex-direction:row;
@media (--viewport-sm-max) {
flex-direction:column;
}
li{
&:first-child::before {
content: " ";
background: url(/dist/images/fijo.png);
background-size: contain;
display: block;
width: 100%;
height: 105px;
@media (--viewport-sm-max) {
width: 165px;
height: 80px;
}
@media (--viewport-xs-max) {
width: 145px;
height:70px;
}
}
&:nth-child(2n)::before {
content: " ";
background: url(/dist/images/mixto.png);
background-size: contain;
display: block;
width: 100%;
height: 105px;
@media (--viewport-sm-max) {
width: 165px;
height: 80px;
}
@media (--viewport-xs-max) {
width: 145px;
height:70px;
}
}
&:nth-child(3n)::before {
content: " ";
background: url(/dist/images/variable.png);
background-size: contain;
display: block;
width: 100%;
height: 105px;
@media (--viewport-sm-max) {
width: 165px;
height: 80px;
}
@media (--viewport-xs-max) {
width: 145px;
height:70px;
}
}
&:nth-child(4n)::before {
content: " ";
background: none;
display: block;
width: 100%;
height: 105px;
@media (--viewport-sm-max) {
width: 165px;
height:20px;
}
@media (--viewport-xs-max) {
width: 145px;
}
}
}
}
}
}
}
.steps-form__step8{position:relative; padding-bottom: 70px;
@media (--viewport-xs-max){padding-bottom:40px;}
.steps-form__nav{margin-bottom: 0;}
.checkbox-wrapper{margin:30px 0;}
ul.form-list{margin-top: 40px;
li{
.form-list__field{/*margin-top: 30px;*/}
}
}
p{text-align:left; padding-top:40px; /*padding:40px 0 30px;*/
a{color: var(--color-accent-dark);}
}
/*.show{
display: none;
p{text-align: center; padding:10px 0 30px;
@media (--viewport-ms-max){padding-bottom:0;}
}
ul.form-list{width: 90%;margin:0 5% 50px;flex-direction: row;display:flex;
@media (--viewport-ms-max) {
flex-direction: column;
width: 90%; margin:0 5% 30px;
}
li{width: 50%;
@media (--viewport-ms-max){width:100%;}
.form-list__field{
@media (--viewport-sm-min){margin-top:0;}
}
&:first-child{
.form-fieldset:first-child{
@media (--viewport-sm-min){margin-right: 30px;}
}
}
}
}
}*/
}
.steps-form__step1,
.steps-form__step2,
.steps-form__step3,
.steps-form__step4,
.steps-form__step5,
.steps-form__step6,
.steps-form__step7{
height:410px;position:relative;
@media (--viewport-sm-max){height:450px;}
@media (--viewport-ms-max){height:450px;}
@media (--viewport-xs-max){height:500px;}
/*@media (max-width: 767px) and (max-height: 823px){height:auto; min-height:773px;padding-bottom: 70px;}
@media (max-width: 767px) and (max-height: 812px){height:auto; min-height:762px;padding-bottom: 70px}
@media (max-width: 767px) and (max-height: 736px){height:auto; min-height:686px;padding-bottom: 70px}
@media (max-width: 767px) and (max-height: 731px){height:auto; min-height:681px;padding-bottom: 70px}
@media (max-width: 767px) and (max-height: 667px){height:auto; min-height:617px;padding-bottom: 70px}
@media (max-width: 767px) and (max-height: 640px){height:auto; min-height:590px;padding-bottom: 70px}
@media (max-width: 767px) and (max-height: 568px){height:auto; min-height:518px;padding-bottom: 70px}*/
@media (min-width: 520px) and (max-height: 720px){height:auto; min-height:400px;padding-bottom: 50px}
@media (max-width: 280px) and (max-height: 653px){height:auto; min-height:620px;padding-bottom: 50px}
}
}
No notes defined.