<div class="contact-form isUciMortgages">
<form id="randomFormId1" class="contact-form__form form-distinguisher_contact-form" action="#" method="post" novalidate>
<div class="contact-form__content">
<ul class="form-list">
<li class="form-list__item ">
<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="randomInputId211" type="text" name="" title="Name" autocomplete="" placeholder="¿Cómo te llamas?" />
<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__item ">
<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_surname
" id="randomInputId212" type="text" name="" title="Surname" autocomplete="" placeholder="¿Cómo te apellidas?" />
<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__item ">
<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="">Mail de contacto</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_email
" id="randomInputId211" type="text" name="" title="Email" autocomplete="" placeholder="¿Cual es tu e-mail?" />
<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__item ">
<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="">Prefix</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">Phone prefix</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="">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>
</div>
</div>
</li>
<li class="form-list__item ">
<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="">Field Text</label>
<div class="field-top__wrap">
</div>
</div>
<div class="textarea">
<textarea class="textarea-field
input-distinguisher_Mensaje
" id="randomInputId211" name="Mensaje" title="Mensaje" placeholder="Placeholder"></textarea>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="form-list__item ">
<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>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input radio-distinguisher_contact-through-callme " id="randomRadioId3" type="radio" title="Call me" name="Contact method" value="LLAMADME YA">
<label class="radio-label " for="randomRadioId3" id="" value="">
<span class="caption">LLAMADME YA</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="">Field Text</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">HORARIO PREFERENTE DE CONTACTO</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="randomSelectId1" type="radio" title="De 9:00 a 14:00 h" name="Preferred contact time" value="">
<label class="access-select__option access-select__label" for="randomSelectId1">
De 9:00 a 14:00 h
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randomSelectId2" type="radio" title="De 14:00 a 18:00 h" name="Preferred contact time" value="">
<label class="access-select__option access-select__label" for="randomSelectId2">
De 14:00 a 18:00 h
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randomSelectId3" type="radio" title="De 18:00 a 20:00 h" name="Preferred contact time" value="">
<label class="access-select__option access-select__label" for="randomSelectId3">
De 18:00 a 20:00 h
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randomSelectId4" type="radio" title="De 20:00 a 24:00 h" name="Preferred contact time" value="">
<label class="access-select__option access-select__label" for="randomSelectId4">
De 20:00 a 24:00 h
</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="form-list__item ">
<div class="form-list__field required">
<div class="form-checkbox-group" id="checkLegal">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">¿Aceptas los terminos legales?</label>
<div class="field-top__wrap">
</div>
</div>
<div class="checkbox-group" id="">
<ul>
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="check-Legal" type="checkbox" name="CheckLegal" title="CheckLegal">
<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>
<label class="checkbox-label" for="check-Legal">
<span class="caption-placeholder-m">Acepto</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>
</ul>
<div class="contact-form__legal">
<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="form-btn">
<div class="form-btn__submit">
<button id="" class="btn
" type="submit">
Solicitar información
</button>
</div>
</div>
</div>
</form>
<div class="contact-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="contact-form{{#if isPT}} isPT{{/if}}{{#if isUciMortgages}} isUciMortgages{{/if}}" {{#if hasID}}id="{{idComponent}}"{{/if}}>
<form id="{{id}}" class="contact-form__form form-distinguisher_contact-form" action="#" method="post" novalidate>
<div class="contact-form__content">
{{> @form-list form-list }}
<div class="contact-form__legal">
{{> @legal legal }}
</div>
{{> @form-btn submit-btn }}
</div>
</form>
<div class="contact-form__success hidden">
{{#if isAccentHipotecas}}
{{ render '@success' success}}
{{else}}
{{ render '@success'}}
{{/if}}
</div>
</div>
{
"hasID": false,
"id": "randomFormId1",
"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, 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>"
}
},
"form-list": {
"form-list": [
{
"isRequired": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "Nombre"
}
},
"input": {
"placeholder": "¿Cómo te llamas?",
"distinguisher": "name",
"id": "randomInputId211",
"type": "text",
"title": "Name"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "Apellidos"
}
},
"input": {
"placeholder": "¿Cómo te apellidas?",
"distinguisher": "surname",
"id": "randomInputId212",
"type": "text",
"title": "Surname"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "Mail de contacto"
}
},
"input": {
"placeholder": "¿Cual es tu e-mail?",
"distinguisher": "email",
"id": "randomInputId211",
"type": "text",
"title": "Email"
},
"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": "Prefix"
}
},
"select": {
"isOverflow": true,
"distinguisher": "prefix",
"id": "randomInputId3",
"chosen-placeholder": "Phone prefix",
"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"
}
},
"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,
"form-textarea": {
"field-top": {
"label": {
"text": "Field Text"
}
},
"textarea": {
"distinguisher": "Mensaje",
"id": "randomInputId211",
"type": "text",
"title": "Mensaje",
"placeholder": "Placeholder"
}
}
},
{
"hasThreeFields": 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"
}
},
{
"distinguisher": "contact-through-callme",
"id": "randomRadioId3",
"title": "Call me",
"name": "Contact method",
"label": {
"text": "LLAMADME YA"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"extraClassnames": "form-list__field_call-time",
"isHidden": true,
"isRequired": true,
"form-select": {
"field-top": {
"label": {
"text": "Field Text"
}
},
"distinguisher": "call-time",
"select": {
"chosen-placeholder": "HORARIO PREFERENTE DE CONTACTO",
"option": [
{
"id": "randomSelectId1",
"select-name": "Preferred contact time",
"text": "De 9:00 a 14:00 h"
},
{
"id": "randomSelectId2",
"select-name": "Preferred contact time",
"text": "De 14:00 a 18:00 h"
},
{
"id": "randomSelectId3",
"select-name": "Preferred contact time",
"text": "De 18:00 a 20:00 h"
},
{
"id": "randomSelectId4",
"select-name": "Preferred contact time",
"text": "De 20:00 a 24:00 h"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
},
{
"isRequired": true,
"form-checkbox-group": {
"field-top": {
"label": {
"text": "¿Aceptas los terminos legales?"
}
},
"id": "checkLegal",
"checkbox-group": {
"checkbox-group": [
{
"id": "check-Legal",
"title": "CheckLegal",
"name": "Contact Legal Check",
"label": {
"text": "Acepto",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
},
"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>"
}
},
"isUciMortgages": true
}
.contact-form {
&__content{
ul{display:flex;flex-wrap:wrap;
li{width: 50%;
&:nth-child(1),&:nth-child(3){padding-right: 30px;}
&:nth-child(5),&:nth-child(6){width: 100%;}
&:nth-child(2){
.form-list__field{margin-top: 0;}
}
@media (--viewport-ms-max){width: 100%;
&:nth-child(1),&:nth-child(3){padding-right: 0;}
/*&:nth-child(2){margin-top:35px;} borramos esta línea ya que genera un bug*/
}
.form-list__field{height:auto;
.form-select-distinguisher_call-time, .form-select-distinguisher_prefix{
ul{
li{width: 100%;padding-right:0;margin-top:0;
input{border:0;}
}
}
}
}
li.access-select__item{
padding-right: 0;
}
li{
width:100%;
}
}
&.radio-group{margin-top: -10px;
li{width: auto;flex-direction: row;padding-right:30px;padding-top:10px;
&:nth-child(3){color: var(--color-tertiary-dark); padding-right: 0;
.text-label-m{color: var(--color-tertiary-dark); }
}
@media (--viewport-ms-max){
&:nth-child(2){margin-top:0;}
}
}
}
/*.checkbox-wrapper{margin-top:40px;}*/
}
}
&.isUciMortgages{
.contact-form__content{
ul{
li{
&:nth-child(7){width: 100%;}
}
}
}
}
&__legal{
a{color: var(--color-accent-dark);}
}
.legal{
.checkbox-wrapper{margin-top:0;}
ul li:first-child{padding-right:0;}
}
}
Variants: Default, Ucimortgages, Check, Header, Footer, Mobile Menu. Permite configurar id del form.