<section class="splitter splitter_bg-color_white splitter_padding_top_large splitter_padding_bottom_small ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<form id="randomFormId2" action="" method="post" class="validation">
<div class="row columns-form">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="columns-form__form form-distinguisher_columns-form" id="randomFormId2" action="#" method="post" novalidate>
<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="">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="">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
required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Telefono</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_phone-number
" id="randomInputId4" 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>
</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 " id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="provincia">¿Dónde compras?</label>
<div class="field-top__wrap">
</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>
</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="landing-price">¿Por cuánto compras?</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_landing-price
" id="landing-price" type="text" name="" title="Por cuánto compras" 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="landing-howmuch">¿Cuánto aportas?</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_landing--howmuch
" id="landing-howmuch" type="text" name="" title="¿Cuánto aportas?" 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>
</ul>
</div>
<div class="columns-form__success hidden">
<div class="success">
<div class="success__icon">
<svg class="icon icon-complex_enviar icon-56 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_enviar"></use>
</svg>
</div>
<div class="success__title">
<h2 class="
title-l
">
Información enviada
</h2>
</div>
<div class="success__description">
<div class="
bodycopy-m
">
<p>Si tienes una cuenta con nosotros te enviaremos un mail temporal de recuperación de contraseña. Por favor comprueba tu bandeja de entrada</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<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="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="form-btn">
<div class="form-btn__submit">
<button id="" class="btn
" type="submit">
Sí quiero
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<form id="{{id}}" action="" method="post" class="validation">
{{#if isStepsNav}}
{{ render '@steps-nav__list--one-line-fixed' }}
{{/if}}
<div {{#if hasID}}id="{{idComponent}}" {{/if}} class="row columns-form{{#if lines}} lines{{/if}}">
{{#if isColumnsFormTitle}}
<div class="{{#if isFullWidthComponent}}col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col{{else}}col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col{{/if}}">
<div class="columns-form-title{{#if isLeft}} left{{/if}}">
{{> @title-l title }}
{{> @bodycopy-l bodycopy }}
</div>
</div>
{{/if}}
<div class="col-xs-12{{#if isWideMS}} col-ms-12{{else if isFullWidth}} col-ms-12{{else}} col-ms-9{{/if}} col-ms-mr-ml{{#if isFullWidth}} col-sm-12 col-lg-12{{else}} col-sm-10 col-lg-10{{/if}} col">
<div class="columns-form__form form-distinguisher_columns-form" id="{{ id }}" action="#" method="post" novalidate>
{{#if form-list-flex}}
{{> @form-list-flex form-list-flex }}
{{else}}
{{> @form-list-different-columns form-list }}
{{/if}}
</div>
<div class="columns-form__success hidden">
{{> @success success }}
</div>
</div>
{{#if checkbox}}
<div class="col-xs-12{{#if isWideMS}} col-ms-12{{else if isFullWidth}} col-ms-12{{else}} col-ms-9{{/if}} col-ms-mr-ml{{#if isFullWidth}} col-sm-12 col-lg-12{{else}} col-sm-10 col-lg-10{{/if}} col">
{{> @form-checkbox-group checkbox }}
</div>
{{else}}
{{/if}}
{{#if isCheckWithLegal}}
<div class="col-xs-12{{#if isWideMS}} col-ms-12{{else if isFullWidth}} col-ms-12{{else}} col-ms-9{{/if}} col-ms-mr-ml{{#if isFullWidth}} col-sm-12 col-lg-12{{else}} col-sm-10 col-lg-10{{/if}} col">
{{> @legal legal }}
</div>
{{else}}
<div class="col-xs-12{{#if isWideMS}} col-ms-12{{else if isFullWidth}} col-ms-12{{else}} col-ms-9{{/if}} col-ms-mr-ml{{#if isFullWidth}} col-sm-12 col-lg-12{{else}} col-sm-10 col-lg-10{{/if}} col">
{{ render '@legal' }}
</div>
{{/if}}
<div class="col-xs-12{{#if isWideMS}} col-ms-12{{else if isFullWidth}} col-ms-12{{else}} col-ms-9{{/if}} col-ms-mr-ml{{#if isFullWidth}} col-sm-12 col-lg-12{{else}} col-sm-10 col-lg-10{{/if}} col{{#if isLeft}} left{{/if}}">
{{> @form-btn submit-btn }}
</div>
</div>
</form>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomSmall": true
},
"title": {
"text": "Estamos listos. Firmamos cuando quieras. Sin demoras."
},
"bodycopy": {
"text": "Si quieres, contacto contigo..."
},
"encabezado": {
"title": {
"text": "Estamos listos. Firmamos cuando quieras. Sin demoras."
},
"bodycopy": {
"text": "Si quieres, contacto contigo..."
}
},
"legal": {
"bodycopy": {
"text": "Para poder atenderte, contactaremos contigo en el teléfono y correo electrónico, y con el nombre, que nos facilites. Estos datos los utilizaremos en UCI («Unión de Créditos Inmobiliarios S.A. E.F.C.») para gestionar tu solicitud, para facilitarte información sobre nuestros productos y servicios, y 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 pulsar en el siguiente botón de envío, declaro haber leído y acepto la información sobre Protección de Datos."
},
"isCheckbox": true,
"checkbox": {
"checkbox-group": [
{
"id": "checkbox1",
"title": "Checkbox"
}
],
"error-message": {
"text": "Error"
}
}
},
"id": "randomFormId2",
"form-list": {
"form-list": [
{
"isRequired": true,
"onecolumn": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "NOMBRE"
}
},
"input": {
"distinguisher": "name",
"id": "randomInputId21",
"type": "text",
"title": "Name",
"placeholder": ""
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"onecolumn": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "EMAIL"
}
},
"input": {
"placeholder": "",
"distinguisher": "email",
"id": "randomInputId211",
"type": "text",
"title": "Email"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"onecolumn": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "Telefono"
}
},
"input": {
"distinguisher": "phone-number",
"id": "randomInputId4",
"type": "text",
"title": "Phone number",
"validationAttributes": "minlength='11'"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"onecolumn": true,
"form-select": {
"field-top": {
"label": {
"text": "¿Dónde compras?",
"for": "provincia"
}
},
"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"
}
}
}
},
{
"isRequired": true,
"onecolumn": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "¿Por cuánto compras?",
"for": "landing-price"
}
},
"input": {
"distinguisher": "landing-price",
"id": "landing-price",
"type": "text",
"title": "Por cuánto compras",
"placeholder": ""
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"onecolumn": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "¿Cuánto aportas?",
"for": "landing-howmuch"
}
},
"input": {
"distinguisher": "landing--howmuch",
"id": "landing-howmuch",
"type": "text",
"title": "¿Cuánto aportas?",
"placeholder": ""
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
},
"submit-btn": {
"btn": {
"type": "submit",
"text": "Sí quiero"
}
},
"success": {
"title": {
"text": "Información enviada"
},
"description": {
"text": "<p>Si tienes una cuenta con nosotros te enviaremos un mail temporal de recuperación de contraseña. Por favor comprueba tu bandeja de entrada</p>"
}
}
}
.columns-form {
&-title {
padding-bottom: var( --gutter-ms-vertical);text-align: center;
.title-l {
padding-bottom: var( --gutter-ms-vertical);
}
&.left{text-align: left;}
}
.checkbox-wrapper{margin-top:30px;}
.prelabel.heading{
margin-bottom: 24px;
}
.legal{margin-top:30px;
.checkbox-wrapper{margin-top:0;}
ul li:first-child{padding-right:0;}
}
.recaptcha{margin-top:10px;
display: flex;
justify-content: center;
align-items: center;
}
.form-btn {
text-align: center;
}
.col.left{
.recaptcha{margin-top:10px;
align-items:flex-start;
}
.form-btn {
text-align: left;
}
}
&.lines{
border-top: solid 1px var(--color-border);
border-bottom: solid 1px var(--color-border);
padding: 80px;
@media (--viewport-ms-max) {
padding: 80px 0;
}
.steps-nav__list.oneLine{
margin-top: 0;
}
}
/* ESTOS ÚLTIMOS ESTILOS SON PARA SALVAR LAS VALIDACIONES DE LOS SITECORE FORMS */
.landing-form-list .form-list__error-message,
.columns-form-list .form-list__error-message,
.form-list-different-columns .form-list__error-message,
.form-list-flex .form-list__error-message,
.form-list .form-list__error-message{
opacity: 1;
}
.landing-form-list .field-bottom__error-message,
.columns-form-list .field-bottom__error-message,
.form-list-different-columns .field-bottom__error-message,
.form-list-flex .field-bottom__error-message,
.form-list .field-bottom__error-message{
margin-top: 0;
}
.landing-form-list .field-bottom__error-message span.error-message span.field-validation-error span,
.columns-form-list .field-bottom__error-message span.error-message span.field-validation-error span,
.form-list-different-columns .field-bottom__error-message span.error-message span.field-validation-error span,
.form-list-flex .field-bottom__error-message span.error-message span.field-validation-error span,
.form-list .field-bottom__error-message span.error-message span.field-validation-error span {
margin-top: 5px;
}
}
Variants: Default, Check, isWideMs, onecolumn, twocolumns, threecolumns, header, footer, mobile menu