<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="contact-highlight lazyload">
<div class="wrap-img"><img src="/dist/images/access-highlight-bg.jpg" /></div>
<div class="row content">
<div class="col-xs-12 col-ms-12 col-ms-ml col-sm-8 col-md-7 col-lg-7 col end-lg end-md end-sm col-lg-offset-right-1 col-md-offset-right-1 col-sm-offset-right-1">
<form>
<div class="contact-highlight__tile">
<div class="contact-highlight__tile__header">
<h2 class="
title-l
title-l_color_dark
">
Lorem ipsum dolor sit amet
</h2>
<div class="
bodycopy-m
">
<p>Proin a ornare purus, sit amet molestie velit. In tempor varius faucibus. Morbi condimentum molestie sapien, sed sollicitudin mi. Phasellus dictum ornare lectus sit amet rhoncus. In tempor sapien neque, interdum convallis nisi sollicitudin ut. Sed orci nisi, tincidunt ac dapibus nec, consequat ut mi.</p>
</div>
</div>
<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-12 col-ms-mr-ml col-sm-12 col-lg-12 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="">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-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="">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-6 col-sm-4 col-md-4 col-lg-4
">
<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-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="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-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="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-12 col-ms-mr-ml col-sm-12 col-lg-12 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-12 col-ms-mr-ml col-sm-12 col-lg-12 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>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="contact-highlight lazyload{{#if isOpening}} opening{{/if}}{{#if isUnderHeader}} under-header{{/if}}" {{#if hasID}}id="{{idComponent}}"{{/if}}>
<div class="wrap-img{{#if isVisibleAllViews}} visible-all-views{{/if}}"><img src="{{ this.data-bg }}" /></div>
<div class="row content">
{{#if isReversed}}
<div class="col-xs-12 col-ms-12 col-ms-mr col-sm-8 col-md-7 col-lg-7 col start-lg start-md start-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
{{else if isReversedWide}}
<div class="col-xs-12 col-ms-12 col-ms-mr col-sm-9 col-md-8 col-lg-8 col start-lg start-md start-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
{{else if isWide}}
<div class="col-xs-12 col-ms-12 col-ms-ml col-sm-9 col-md-8 col-lg-8 col end-lg end-md end-sm col-lg-offset-right-1 col-md-offset-right-1 col-sm-offset-right-1">
{{else if isFullWidth}}
<div class="col-xs-12 col-ms-12 col-sm-10 col-md-10 col-lg-10 col col-sm-mr-ml">
{{else}}
<div class="col-xs-12 col-ms-12 col-ms-ml col-sm-8 col-md-7 col-lg-7 col end-lg end-md end-sm col-lg-offset-right-1 col-md-offset-right-1 col-sm-offset-right-1">
{{/if}}
<form>
<div class="contact-highlight__tile{{#if isAccentBG}} accent{{/if}}{{#if isAccentDarkBG}} accent-dark{{/if}}">
<div class="contact-highlight__tile__header">
{{#if antetitulo}}
{{> @text-label-m antetitulo }}
{{/if}}
{{#if isOpening}}
{{> @title-l title-opening }}
{{else}}
{{> @title-l title }}
{{/if}}
{{#if entradilla}}
{{> @bodycopy-m entradilla }}
{{/if}}
</div>
{{#if isSitecoreForms}}
{{ render '@columns-form--threecolumns-fullwidth' }}
{{else}}
{{> @form-list-different-columns form-list }}
{{#if isLegal}}
<div class="contact-highlight__legal">
{{> @legal legal }}
</div>
{{else if isLightboxLegal}}
<div class="contact-highlight__legal">
{{ render '@legal--lightboxlegal' }}
</div>
{{/if}}
{{> @form-btn submit-btn }}
{{/if}}
</div>
</form>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{{#if isLightboxLegal}}
{{ render '@lightbox-new' lightbox1 }}
{{/if}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": false,
"paddingBottomLarge": true
},
"isLegal": true,
"data-bg": "/dist/images/access-highlight-bg.jpg",
"title": {
"text": "Lorem ipsum dolor sit amet",
"colorDark": true
},
"legal": {
"isCheckbox": true,
"isLinkTooltip": true,
"isLink": true,
"bodycopy": {
"text": "<p>Para poder atenderte, contactaremos contigo en el teléfono y correo electrónico.</p>"
},
"link": {
"href": "#",
"text": "A long line for a link"
},
"checkbox": {
"checkbox-group": {
"field-top": false,
"checkbox-group": [
{
"id": "checkbox",
"title": "Checkbox"
}
]
},
"error-message": {
"text": "Error"
}
},
"link-tooltip": {
"title": {
"text": "Título Tooltip",
"isP": true
},
"bodycopy": {
"text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
},
"link": {
"href": "#",
"text": "Enlace"
}
}
},
"form-list": {
"form-list": [
{
"isRequired": true,
"twocolumns": 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,
"twocolumns": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "Apellidos"
}
},
"input": {
"distinguisher": "surname",
"id": "randomInputId22",
"type": "text",
"title": "Surname",
"placeholder": ""
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"twocolumns": 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"
}
}
}
},
{
"twocolumns": true,
"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"
}
}
}
},
{
"onecolumn": true,
"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'"
}
}
}
]
},
"submit-btn": {
"btn": {
"type": "submit",
"text": "Solicitar información"
}
},
"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>"
}
},
"tile-highlight": {
"isSticky": true,
"text-label": {
"text": "¿No Vives en Espana y quieres comprar aquí?",
"colorLight": true
},
"title": {
"text": "Tu quieres una casa y nosotros lo hacemos posible",
"colorLight": true
},
"bodycopy": {
"text": "<p>Visita la casa personalmente antes de pagar, Conocer a quien pertenece la casa en el Registro de la Propiedad y una vez adquirida, registrar la vivienda en el Registro de la Propiedad, son pasos básicos para comprar en España.</p>",
"colorLight": true
},
"btn": {
"href": "#",
"type": "button",
"text": "Comprar casa para no residentes"
}
},
"isSitecoreForms": true,
"entradilla": {
"text": "<p>Proin a ornare purus, sit amet molestie velit. In tempor varius faucibus. Morbi condimentum molestie sapien, sed sollicitudin mi. Phasellus dictum ornare lectus sit amet rhoncus. In tempor sapien neque, interdum convallis nisi sollicitudin ut. Sed orci nisi, tincidunt ac dapibus nec, consequat ut mi.</p>"
}
}
.contact-highlight {
position: relative;
margin-bottom: 50px;
@media (--viewport-ms-max) {
margin-right: 0;
}
@media (--viewport-xs-max) {
margin-left: -20px;
margin-right: -20px;
}
@media (--viewport-ms-min) {
margin-bottom: 50px;
}
@media (--viewport-sm-min) {
margin-bottom: 50px;
}
@media (--viewport-md-min) {
}
&__tile {
margin-bottom: -50px;background-color:var(--color-accent-light); padding: 70px;
@media (--viewport-ms-max) {
padding:40px;
}
@media (--viewport-xs-max) {
padding:40px 20px;
}
.form-list{
.form-checkbox-group{ /* para forzar un enlace a los textos legales en PT */
.tooltip-label{
justify-content: flex-start;
}
}
/*input, .access-select__option, .textarea-field, .form-input__fieldset, .checkbox-label:before{border-color: var(--color-accent-dark);} LO QUITAMOS POR PETICION DE DS (CA)*/
}
&.without-tooltip-label{
.form-list{margin-top: 26px;
.tooltip-label{
display: none;
}
.form-checkbox-group{ /* para forzar un enlace a los textos legales en PT */
.tooltip-label{
justify-content: flex-start;
height: auto;
display:flex;
}
}
&__valid-indicator{
top: 21px;
}
.form-radio-group { /* Para que en el caso de campo radio siempre se muestre (CA)*/
.tooltip-label{
justify-content: flex-start;
height: auto;
display:flex;
}
}
}
}
&__header{
margin-bottom: 20px;
.text-label-m{
margin-bottom: 20px;
}
/*.title-l{
}*/
.bodycopy-m{
margin-bottom: 10px; /*margin-top: -20px;*/
margin-top: 20px;
}
}
&.accent{
background-color:var(--color-accent);
.contact-highlight__tile__header{
.text-label-m{
color: var(--color-text-light);
}
.bodycopy-m{
color: var(--color-text-light);
}
}
.form-list{
.text-label-m, .label-m{color: var(--color-text-light);}
}
.contact-form__legal{
a{
color: var(--color-text-light);
}
.link span:after{
background-color: var(--color-text-light);
}
.bodycopy-s{color: var(--color-text-light);
a{
color: var(--color-accent-dark);
}
}
}
}
&.accent-dark{
background-color:var(--color-accent-dark);
.contact-highlight__tile__header{
.text-label-m{
color: var(--color-text-light);
}
.bodycopy-m{
color: var(--color-text-light);
}
}
.form-list{
.text-label-m, .label-m{color: var(--color-text-light);}
}
.contact-form__legal{
a{
color: var(--color-text-light);
}
.link span:after{
background-color: var(--color-text-light);
}
.bodycopy-s{color: var(--color-text-light);
a{
color: var(--color-accent);
}
}
}
}
.legal__checkbox{
.checkbox-label{
background-color: var(--color-white);
margin-right: 10px;
margin-left: -12px;
width: 24px;
}
}
.recaptcha{
margin-top: 0;
align-items: flex-start;
@media only screen and (max-width: 320px) {
margin-left:-10px;
}
}
.legal{
margin-top: 20px;
a{color: var(--color-accent-dark); text-decoration:underline;}
}
.landing-legal-form{
margin-bottom: 20px;
a{color: var(--color-accent-dark); text-decoration:underline;}
}
.form-btn{
margin-top: 20px;
text-align: left;
}
}
.wrap-img{height:550px;margin-top:0;width: 100%;top:0;overflow: hidden;display: flex; align-items:flex-start;justify-content: center;
@media (--viewport-lg-min) {
height:510px;
margin-top:50px;
}
@media (--viewport-md-max) {
height:550px;
margin-top:50px;
}
@media (--viewport-sm-max) {
height:550px;
margin-top:0;
}
@media (--viewport-ms-max) {
display:none;
}
img{width: 100%;}
&.visible-all-views{
@media (--viewport-ms-max) {
display:block;
height:auto;
margin-bottom:-8px;
}
}
}
.content{
/*width: calc(100% + 30px); Lo quito porque no entiendo que aporta y genera una diferencia en fullwidth que hace que no se centre bien (CA)*/
position: relative; margin-top: -450px;
@media (--viewport-lg-min) {
margin-top:-410px;
}
@media (--viewport-md-max) {
margin-top:-450px;
}
@media (--viewport-sm-max) {
margin-top:-450px;
}
@media (--viewport-ms-max) {
margin-top:0;
}
&.visible-all-views{
@media (--viewport-ms-max) {
margin-top:0;
}
}
/* Lo quito porque no entiendo que aporta y genera una diferencia en fullwidth que hace que no se centre bien (CA)
@media (--viewport-xs-max) {
width: calc(100% + 20px);
}
*/
}
&.opening {
.content{
/*margin-top: -450px;
@media (--viewport-lg-min) {
margin-top:-410px;
}
@media (--viewport-md-max) {
margin-top:-450px;
}
@media (--viewport-sm-max) {
margin-top:-450px;
}
&.visible-all-views{
@media (--viewport-ms-max) {
margin-top:0;
}
}*/
}
.wrap-img{
margin-top: 0;
}
}
&.under-header {
margin-top: 100px;
.content{
@media (--viewport-ms-max) {
margin-top:0;
}
}
}
.splitter{
.container{
margin: 0;
padding: 0;
.splitter__wrapper{
margin: 0;
padding: 0;
background: none;
}
}
}
}
Variantes: Default, Opening, Under Header, Image visible in all views, Accent BG, Accent Dark BG, Reversed, Without tooltip labels, Wide. Se puede configurar el src de la imagen.