<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-lite ">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<form class="application-form-lite__form" id="applicationForm" action="#" method="post" novalidate>
<div class="application-form-lite__head">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12">
<div class="application-form-lite__data">
<div class="quota-simulation-summary">
<div class="quota-simulation-summary--head">
<h3 class="
title-m
">Resumen de tu simulación</h3>
<a class="link
" href="#">
<span>Volver y cambiar datos</span>
</a>
</div>
<div class="quota-simulation-summary--wrap">
<div class="quota-simulation-summary--content">
<div class="wrap">
<div><svg class="icon icon-16_user ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_user"></use>
</svg>
</div> <span class="caption-label">1 titular / 33 años / 2.000 € / sin prestamos activos</span>
</div>
<div class="wrap">
<div><svg class="icon icon-16_home ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_home"></use>
</svg>
</div> <span class="caption-label">MADRID / 320.000 € / VIVIENDA HABITUAL / SEGUNDA MANO</span>
</div>
<div class="wrap">
<div><svg class="icon icon-16_savings ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_savings"></use>
</svg>
</div> <span class="caption-label">financiación: 220.000 € / aportación: 100.000 / gastos e impuestos: 68.000 €</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-md-6 col-lg-6 col col-ms-mr-ml">
<ul class="form-list form-list-different-columns row">
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12
">
<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">DNI</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_DNI
" id="randomInputId211" type="text" name="" title="dni" 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="col
form-list__item
col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12
">
<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="col
form-list__item
col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12
">
<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="col
form-list__item
col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12
">
<div class="row">
<div class="col-xs-5 col-ms-5 col-sm-5 col-md-4 col-lg-4">
<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="">Prefix</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_prefix
" id="randomInputId3" type="text" name="" title="Phone prefix" autocomplete="" value="+34" minlength='3' />
<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 class="col-xs-7 col-ms-7 col-sm-7 col-md-8 col-lg-8">
<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>
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12
">
<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="" />
<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="col
form-list__item
col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12
">
<div class="form-list__field
">
<div class="prelabel">
<span class="title-M
">
<h4>Cuéntanos más sobre tu proyecto</h4>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12
">
<div class="form-list__field
required">
<div class="form-select form-select-distinguisher_cuando" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="cuando">¿cUÁNDO TIENES PREVISTO comprar?</label>
<div class="field-top__wrap">
</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">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">
<li class="access-select__item">
<input class="access-select__option access-select__input" id="cuandoId1" type="radio" title="Cuando 1" name="Cuando" value="">
<label class="access-select__option access-select__label" for="cuandoId1">
Cuando 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="cuandoId2" type="radio" title="Cuando 2" name="Cuando" value="">
<label class="access-select__option access-select__label" for="cuandoId2">
Cuando 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="cuandoId3" type="radio" title="Cuando 3" name="Cuando" value="">
<label class="access-select__option access-select__label" for="cuandoId3">
Cuando 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>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12
">
<div class="form-list__field
">
<div class="form-select form-select-distinguisher_reforma" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="reforma">¿necesitas reforma?</label>
<div class="field-top__wrap">
</div>
</div>
<div class="access-select " id="reforma">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden" id="reforma">
<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">
<li class="access-select__item">
<input class="access-select__option access-select__input" id="reformaId1" type="radio" title="Reforma 1" name="Reforma" value="">
<label class="access-select__option access-select__label" for="reformaId1">
Reforma 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="reformaId2" type="radio" title="Reforma 2" name="Reforma" value="">
<label class="access-select__option access-select__label" for="reformaId2">
Reforma 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="reformaId3" type="radio" title="Reforma 3" name="Reforma" value="">
<label class="access-select__option access-select__label" for="reformaId3">
Reforma 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>
</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, <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">
Envía tu solicitud
</button>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-5 col-md-5 col-lg-5 col col-ms-mr-ml col-sm-offset-1 application-form-lite__text">
<span class="title-L
">
<h2>Tu hipoteca a un paso. A un click. A un ahora.</h2>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <span class="bodycopy-M">
<p>✓ En 1 sólo click, iniciamos el proceso.<br />✓ Solicita tu simulación y sabrás al instante el resultado.<br />✓ Y tachán, lo hacemos por ti y para ti.</p>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="application-form-lite {{extra-classes}}" {{#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">
<form class="application-form-lite__form" id="applicationForm" action="#" method="post" novalidate>
<div class="application-form-lite__head">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12">
<div class="application-form-lite__data">
{{> @quota-simulation-summary quota-simulation-summary }}
</div>
</div>
</div>
</div>
<div class="row">
<div class="{{#if fullWidth}}col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12{{else}}col-xs-12 col-ms-12 col-sm-6 col-md-6 col-lg-6 col col-ms-mr-ml{{/if}}">
{{#if form-list-flex}}
{{> @form-list-flex form-list-flex}}
{{else}}
{{> @form-list-different-columns form-list }}
{{/if}}
{{> @legal legal }}
{{> @form-btn submit-btn }}
</div>
{{#if fullWidth}}
{{else}}
<div
class="col-xs-12 col-ms-12 col-sm-5 col-md-5 col-lg-5 col col-ms-mr-ml col-sm-offset-1 application-form-lite__text">
{{> @title title }}
{{> @bodycopy parrafo }}
</div>
{{/if}}
</div>
</form>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingBottomLarge": true
},
"quota-simulation-summary": {
"title": {
"text": "Resumen de tu simulación"
},
"link": {
"text": "Volver y cambiar datos",
"href": "#"
},
"item": [
{
"text": {
"text": "1 titular / 33 años / 2.000 € / sin prestamos activos",
"type": "-label"
},
"icon": {
"name": "16_user"
}
},
{
"text": {
"text": "MADRID / 320.000 € / VIVIENDA HABITUAL / SEGUNDA MANO",
"type": "-label"
},
"icon": {
"name": "16_home"
}
},
{
"text": {
"text": "financiación: 220.000 € / aportación: 100.000 / gastos e impuestos: 68.000 €",
"type": "-label"
},
"icon": {
"name": "16_savings"
}
}
]
},
"form-list": {
"form-list": [
{
"isRequired": true,
"onecolumn": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "DNI",
"for": "randomInputId211"
}
},
"input": {
"distinguisher": "DNI",
"id": "randomInputId211",
"type": "text",
"title": "dni"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"onecolumn": 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,
"onecolumn": 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"
}
}
}
},
{
"onecolumn": true,
"isTwoColumn": true,
"col-1": "col-xs-5 col-ms-5 col-sm-5 col-md-4 col-lg-4",
"isRequired-1": true,
"form-fieldset-1": {
"field-top": {
"label": {
"text": "Prefix"
}
},
"input": {
"distinguisher": "prefix",
"id": "randomInputId3",
"type": "text",
"title": "Phone prefix",
"value": "+34",
"validationAttributes": "minlength='3'"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"col-2": "col-xs-7 col-ms-7 col-sm-7 col-md-8 col-lg-8",
"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"
}
}
}
},
{
"onecolumn": true,
"isRequired": true,
"form-fieldset": {
"field-top": {
"label": {
"for": "randomInputId211",
"text": "EMAIL"
}
},
"input": {
"placeholder": "",
"distinguisher": "email",
"id": "randomInputId211",
"type": "text",
"title": "Email"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"onecolumn": true,
"title": {
"text": "<h4>Cuéntanos más sobre tu proyecto</h4>",
"type": "-M"
}
},
{
"onecolumn": true,
"isRequired": true,
"form-select": {
"distinguisher": "cuando",
"field-top": {
"label": {
"text": "¿cUÁNDO TIENES PREVISTO comprar?",
"for": "cuando"
}
},
"select": {
"id": "cuando",
"chosen-placeholder": "Selecciona",
"option": [
{
"id": "cuandoId1",
"select-name": "Cuando",
"text": "Cuando 1"
},
{
"id": "cuandoId2",
"select-name": "Cuando",
"text": "Cuando 2"
},
{
"id": "cuandoId3",
"select-name": "Cuando",
"text": "Cuando 3"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"onecolumn": true,
"form-select": {
"distinguisher": "reforma",
"field-top": {
"label": {
"text": "¿necesitas reforma?",
"for": "reforma"
}
},
"select": {
"id": "reforma",
"chosen-placeholder": "Selecciona",
"option": [
{
"id": "reformaId1",
"select-name": "Reforma",
"text": "Reforma 1"
},
{
"id": "reformaId2",
"select-name": "Reforma",
"text": "Reforma 2"
},
{
"id": "reformaId3",
"select-name": "Reforma",
"text": "Reforma 3"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
},
"legal": {
"bodycopy": {
"text": "<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, <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>"
}
},
"submit-btn": {
"btn": {
"type": "submit",
"text": "Envía tu solicitud"
}
},
"title": {
"type": "-L",
"text": "<h2>Tu hipoteca a un paso. A un click. A un ahora.</h2>"
},
"parrafo": {
"type": "-M",
"text": "<p>✓ En 1 sólo click, iniciamos el proceso.<br />✓ Solicita tu simulación y sabrás al instante el resultado.<br />✓ Y tachán, lo hacemos por ti y para ti.</p>"
}
}
.application-form-lite {
&__description {
.bodycopy-m{color: var(--color-accent);}
}
&__head {
margin-bottom: 80px;
@media (--viewport-ms-max) {
margin-bottom: 40px;
}
}
&__text {
h2{
color: var(--color-text-accent);
margin-bottom: 32px;
}
}
.form-list__field {
margin-bottom: 0; /* para evitar el margen del componente form-list*/
h4{
color: var(--color-text-accent);
margin: 56px 0 32px;
}
}
.form-list-flex__field {
.prelabel.heading{
margin-bottom: 16px;
}
.heading{
margin-top: 36px;
}
}
.legal {
margin: 36px 0 56px;
}
.form-btn {
margin-top: 0;
@media (--viewport-ms-max) {
margin-bottom: 64px;
}
}
&.ico{
.application-form-lite__head {
margin-bottom: 104px;
@media (--viewport-ms-max) {
margin-bottom: 40px;
}
@media (--viewport-xs-max) {
margin-bottom: 32px;
}
.quota-simulation-summary{
@media(--viewport-ms-max) {
padding: 32px 40px;
}
@media(--viewport-xs-max) {
padding: 24px 20px;
}
}
}
}
}
No notes defined.