<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 simple">
<h3 class="
title-m
">Resumen de tu simulación</h3>
<span class="link link_not-a-link
">
</span>
</div>
<div class="quota-simulation-summary--wrap">
<div class="quota-simulation-summary--content">
<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">CANTIDAD SOLICITADA: xxx.xxx € / APORTACIÓN: xxx.xxx € / GASTOS E IMPUESTOS: xxx.xxx €</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">Barcelona / Precio de la vivienda: xxx.xxx € / aportación: xxx.xxx € / Vivienda habitual / 2º mano</span>
</div>
<div class="wrap">
<div><svg class="icon icon-16_users ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_users"></use>
</svg>
</div> <span class="caption-label">35 años / 2 titulares / Gastos: 1.500 €</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12">
<div class="form-list-flex">
<ul class="form-list-flex__list">
<li class="form-list-flex__list__item"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field">
<div class="prelabel">
<span class="title-l
">
<p>Datos personales</p>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">DNI</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_dni
" id="dni" 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="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Nombre</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_name
" id="name" 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-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Primer apellido</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_primer-apellido
" id="primer-apellido" type="text" name="" title="primer-apellido" 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-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Segundo apellido</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_segundo-apellido
" id="segundo-apellido" type="text" name="" title="segundo-apellido" 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-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Edad</label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="Example form input" value="">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
Años
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-radio-group ">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">¿Tienes hijos menores a cargo?</label>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="hijosMenores">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="hijosMenoresSi" type="radio" title="hijosMenoresSi" name="hijosMenoresSi" value="Sí" checked>
<label class="radio-label " for="hijosMenoresSi" id="" value="">
<span class="caption-placeholder-m">Sí</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="hijosMenoresNo" type="radio" title="hijosMenoresNo" name="hijosMenoresNo" value="No">
<label class="radio-label " for="hijosMenoresNo" 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>
</li>
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-switch">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">¿Cuántos hijos tienes?</label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-switch-group" id="">
<ul class="switch-group">
<li class="switch-group__item">
<div class="switch-wrapper">
<input class="switch
" id="numhijos1" type="radio" title="numhijos 1" name="numhijos" value="1">
<label class="switch-label" for="numhijos1">
<div class="text-label-m">1</div>
</label>
</div>
</li>
<li class="switch-group__item">
<div class="switch-wrapper">
<input class="switch
" id="numhijos2" type="radio" title="numhijos 2" name="numhijos" value="2">
<label class="switch-label" for="numhijos2">
<div class="text-label-m">2</div>
</label>
</div>
</li>
<li class="switch-group__item">
<div class="switch-wrapper">
<input class="switch
" id="switch3" type="radio" title="Switch 3" name="Switch group" value="3">
<label class="switch-label" for="switch3">
<div class="text-label-m">3</div>
</label>
</div>
</li>
<li class="switch-group__item">
<div class="switch-wrapper">
<input class="switch
" id="numhijos4" type="radio" title="numhijos 4" name="numhijos" value="+ 4">
<label class="switch-label" for="numhijos4">
<div class="text-label-m">+ 4</div>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="form-list-flex__list__item"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field">
<div class="prelabel heading">
<span class="title-l
">
<p>Datos económicos</p>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-select " id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="randomInputId3">Situación laboral</label>
<div class="field-top__wrap">
</div>
</div>
<div class="access-select-net" id="randomInputId3">
<select name="select">
<option value="">Selecciona</option>
<option value="">Opción 1</option>
<option value="">Opción 2</option>
<option value="">Opción 3</option>
<option value="">Opción 4</option>
</select>
</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-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Ingresos netos mensuales</label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="Ingresos mensuales" value="">
<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>
</li>
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Número de pagas</label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="Example form input" value="">
<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>
</li>
<li class="form-list-flex__list__item"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field">
<div class="prelabel heading">
<span class="title-l
">
<p>Datos de contacto</p>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Email</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_email
" id="email" 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="form-list-flex__list__item width-50">
<div class="wrap-double">
<div class="form-list-flex__field width-33 ">
<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-net" id="randomInputId3">
<select name="select">
<option value="">Selecciona</option>
<option value="">+34 Spain</option>
<option value="">+44 United Kingdom</option>
<option value="">+239 Sao Tome And Principe</option>
<option value="">+1-268 Antigua and Barbuda</option>
</select>
</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-flex__field width-66 ">
<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>
</li>
</ul>
</div>
<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>
</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": false,
"item": [
{
"text": {
"text": "CANTIDAD SOLICITADA: xxx.xxx € / APORTACIÓN: xxx.xxx € / GASTOS E IMPUESTOS: xxx.xxx €",
"type": "-label"
},
"icon": {
"name": "16_savings"
}
},
{
"text": {
"text": "Barcelona / Precio de la vivienda: xxx.xxx € / aportación: xxx.xxx € / Vivienda habitual / 2º mano",
"type": "-label"
},
"icon": {
"name": "16_home"
}
},
{
"text": {
"text": "35 años / 2 titulares / Gastos: 1.500 €",
"type": "-label"
},
"icon": {
"name": "16_users"
}
}
]
},
"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": false,
"parrafo": false,
"fullWidth": true,
"form-list-flex": {
"form-list-flex-item": [
{
"title": {
"text": "<p>Datos personales</p>",
"type": "-l"
}
},
{
"isRequired": true,
"percent": 50,
"form-fieldset": {
"field-top": {
"label": {
"text": "DNI"
}
},
"input": {
"placeholder": "",
"distinguisher": "dni",
"id": "dni",
"type": "text",
"title": "dni"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"form-fieldset": {
"field-top": {
"label": {
"text": "Nombre"
}
},
"input": {
"placeholder": "",
"distinguisher": "name",
"id": "name",
"type": "text",
"title": "Name"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"form-fieldset": {
"field-top": {
"label": {
"text": "Primer apellido"
}
},
"input": {
"placeholder": "",
"distinguisher": "primer-apellido",
"id": "primer-apellido",
"type": "text",
"title": "primer-apellido"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"form-fieldset": {
"field-top": {
"label": {
"text": "Segundo apellido"
}
},
"input": {
"placeholder": "",
"distinguisher": "segundo-apellido",
"id": "segundo-apellido",
"type": "text",
"title": "segundo-apellido"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"form-input": {
"field-top": {
"label": {
"text": "Edad"
}
},
"hasID": false,
"inputTitle": "Example form input",
"idComponent": "ingresosMes",
"inputValue": "",
"symbol": {
"text": "Años"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"form-radio-group": {
"field-top": {
"label": {
"text": "¿Tienes hijos menores a cargo?"
}
},
"radio-group": {
"id": "hijosMenores",
"radio-group": [
{
"id": "hijosMenoresSi",
"isColumn": true,
"title": "hijosMenoresSi",
"name": "hijosMenoresSi",
"additionalAttributes": "checked",
"label": {
"text": "Sí",
"type": "-placeholder-m"
}
},
{
"id": "hijosMenoresNo",
"isColumn": true,
"title": "hijosMenoresNo",
"name": "hijosMenoresNo",
"label": {
"text": "No",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"form-switch": {
"field-top": {
"label": {
"text": "¿Cuántos hijos tienes?"
}
},
"switch-group": {
"switch-group": [
{
"id": "numhijos1",
"title": "numhijos 1",
"name": "numhijos",
"label": {
"text": "1"
}
},
{
"id": "numhijos2",
"title": "numhijos 2",
"name": "numhijos",
"label": {
"text": "2"
}
},
{
"id": "switch3",
"title": "Switch 3",
"name": "Switch group",
"label": {
"text": "3"
}
},
{
"id": "numhijos4",
"title": "numhijos 4",
"name": "numhijos",
"label": {
"text": "+ 4"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"heading": true,
"title": {
"text": "<p>Datos económicos</p>",
"type": "-l"
}
},
{
"isRequired": true,
"percent": 50,
"form-select": {
"net": true,
"field-top": {
"label": {
"text": "Situación laboral",
"for": "randomInputId3"
}
},
"select": {
"isOverflow": true,
"distinguisher": "situacion-laboral",
"id": "randomInputId3",
"chosen-placeholder": "Selecciona",
"validationAttributes": "minlength='3'",
"option": [
{
"select-name": "situacion",
"text": "Selecciona"
},
{
"id": "situacionSelectId1",
"select-name": "situacion",
"text": "Opción 1"
},
{
"id": "situacionSelectId2",
"select-name": "situacion",
"text": "Opción 2"
},
{
"id": "situacionSelectId3",
"select-name": "situacion",
"text": "Opción 3"
},
{
"id": "situacionelectId4",
"select-name": "situacion",
"text": "Opción 4"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"form-input": {
"field-top": {
"label": {
"text": "Ingresos netos mensuales"
}
},
"hasID": false,
"inputTitle": "Ingresos mensuales",
"idComponent": "ingresosMes",
"inputValue": "",
"symbol": {
"text": "€"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"form-input": {
"field-top": {
"label": {
"text": "Número de pagas"
}
},
"hasID": false,
"inputTitle": "Example form input",
"idComponent": "ingresosMes",
"inputValue": "",
"symbol": {
"text": "Pagas"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"heading": true,
"title": {
"text": "<p>Datos de contacto</p>",
"type": "-l"
}
},
{
"isRequired": true,
"percent": 50,
"form-fieldset": {
"field-top": {
"label": {
"text": "Email"
}
},
"input": {
"placeholder": "",
"distinguisher": "email",
"id": "email",
"type": "text",
"title": "Email"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isDouble": true,
"isRequired": true,
"percent": 50,
"percent1": 33,
"percent2": 66,
"form-select-1": {
"net": true,
"field-top": {
"label": {
"text": "Prefijo",
"for": "randomInputId3"
}
},
"select": {
"isOverflow": true,
"distinguisher": "prefix",
"id": "randomInputId3",
"chosen-placeholder": "Selecciona",
"validationAttributes": "minlength='3'",
"option": [
{
"select-name": "Prefix",
"text": "Selecciona"
},
{
"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"
}
}
},
"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"
}
}
}
}
]
}
}
.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.