<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-6 col-sm-4 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="">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-6 col-sm-4 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="">APELLIDOS</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_apellidos
" id="randomInputId22" type="text" name="" title="Apellidos" 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-6 col-sm-4 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="randomInputId16">MAIL DE CONTACTO</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_
" type="" name="" title="" 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-6 col-sm-4 col-md-4 col-lg-4
">
<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>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-textarea" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">AYÚDANOS A ENTENDER QUÉ NECESITAS</label>
<div class="field-top__wrap">
</div>
</div>
<div class="textarea">
<textarea class="textarea-field
input-distinguisher_Mensaje
" id="randomInputId2111" name="Mensaje" title="Mensaje" minlength='10' maxlength='1000'></textarea>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-radio-group form-radio-group-distinguisher_contact-type " id="contactMethod">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">Field Text</fieldset>
<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 radio-distinguisher_contact-through-email " id="randomRadioId1" type="radio" title="E-mail" name="Contact method" value="POR EMAIL" checked>
<label class="radio-label " for="randomRadioId1" id="" value="">
<span class="caption-placeholder-m">POR EMAIL</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input radio-distinguisher_contact-through-phone " id="randomRadioId2" type="radio" title="Phone" name="Contact method" value="POR TELÉFONO">
<label class="radio-label " for="randomRadioId2" id="" value="">
<span class="caption-placeholder-m">POR TELÉFONO</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
<div class="form-list__field
form-list__field_call-time
hidden
required">
<div class="form-select form-select-distinguisher_call-time" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="access-select ">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden">
<div class="access-select__option access-select__chosen-option"></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="randomSelectId5" type="radio" title="De 9:00 a 14:00 h" name="Preferred contact time" value="">
<label class="access-select__option access-select__label" for="randomSelectId5">
De 9:00 a 14:00 h
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randomSelectId6" type="radio" title="De 14:00 a 18:00 h" name="Preferred contact time" value="">
<label class="access-select__option access-select__label" for="randomSelectId6">
De 14:00 a 18:00 h
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randomSelectId7" type="radio" title="De 18:00 a 20:00 h" name="Preferred contact time" value="">
<label class="access-select__option access-select__label" for="randomSelectId7">
De 18:00 a 20:00 h
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randomSelectId8" type="radio" title="De 20:00 a 24:00 h" name="Preferred contact time" value="">
<label class="access-select__option access-select__label" for="randomSelectId8">
De 20:00 a 24:00 h
</label>
</li>
</ul>
</div>
<div class="field-bottom">
</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,
"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,
"form-fieldset": {
"field-top": {
"label": {
"text": "APELLIDOS"
}
},
"input": {
"distinguisher": "apellidos",
"id": "randomInputId22",
"type": "text",
"title": "Apellidos",
"placeholder": ""
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"form-fieldset": {
"field-top": {
"label": {
"for": "randomInputId16",
"text": "MAIL DE CONTACTO"
}
},
"fieldset": {
"label": {
"text": "MAIL DE CONTACTO"
},
"input": {
"distinguisher": "email",
"id": "randomInputId16",
"type": "email",
"title": "E-mail"
}
},
"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"
}
}
}
},
{
"isRequired": true,
"form-textarea": {
"field-top": {
"label": {
"text": "AYÚDANOS A ENTENDER QUÉ NECESITAS"
}
},
"textarea": {
"distinguisher": "Mensaje",
"id": "randomInputId2111",
"type": "text",
"title": "Mensaje",
"placeholder": "",
"validationAttributes": "minlength='10' maxlength='1000'"
}
}
},
{
"hasTwoFields": true,
"field": [
{
"isRequired": true,
"form-radio-group": {
"distinguisher": "contact-type",
"field-top": {
"fieldset": true,
"label": {
"text": "Field Text",
"fieldset": true
}
},
"id": "contactMethod",
"radio-group": {
"radio-group": [
{
"distinguisher": "contact-through-email",
"id": "randomRadioId1",
"title": "E-mail",
"name": "Contact method",
"additionalAttributes": "checked",
"label": {
"text": "POR EMAIL",
"type": "-placeholder-m"
}
},
{
"distinguisher": "contact-through-phone",
"id": "randomRadioId2",
"title": "Phone",
"name": "Contact method",
"label": {
"text": "POR TELÉFONO",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"extraClassnames": "form-list__field_call-time",
"isHidden": true,
"isRequired": true,
"form-select": {
"tooltip-label": {
"notit": true
},
"distinguisher": "call-time",
"select": {
"chosen-label": "HORARIO PREFERENTE DE CONTACTO",
"option": [
{
"id": "randomSelectId5",
"select-name": "Preferred contact time",
"text": "De 9:00 a 14:00 h"
},
{
"id": "randomSelectId6",
"select-name": "Preferred contact time",
"text": "De 14:00 a 18:00 h"
},
{
"id": "randomSelectId7",
"select-name": "Preferred contact time",
"text": "De 18:00 a 20:00 h"
},
{
"id": "randomSelectId8",
"select-name": "Preferred contact time",
"text": "De 20:00 a 24:00 h"
}
]
},
"error-message": {
"text": "Choose a preferred call time, please*"
}
}
}
]
}
]
},
"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