<div class="contact-form isPT">
<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-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Prefix</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_prefix
" id="randomInputId3" type="text" name="" title="Phone prefix" autocomplete="" value="+34" minlength='3' />
<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 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-radio-group form-radio-group-distinguisher_cliente-uci " id="clienteUCI">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">Já é cliente UCI?</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_clienteUCI-si " id="randomRadioId11" type="radio" title="Sim" name="clienteUCI" value="Sim" checked>
<label class="radio-label " for="randomRadioId11" id="" value="">
<span class="caption-placeholder-m">Sim</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input radio-distinguisher_clienteUCI-no " id="randomRadioId22" type="radio" title="Não" name="clienteUCI" value="Não">
<label class="radio-label " for="randomRadioId22" id="" value="">
<span class="caption-placeholder-m">Não</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__item ">
<div class="form-list__field required">
<div class="form-radio-group form-radio-group-distinguisher_credito-habitacao " id="creditoHabitacao">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">Pretende pedir crédito habitação?</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_creditoHabitacao-si " id="randomRadioId111" type="radio" title="Sim" name="creditoHabitacao" value="Sim" checked>
<label class="radio-label " for="randomRadioId111" id="" value="">
<span class="caption-placeholder-m">Sim</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input radio-distinguisher_creditoHabitacao-no " id="randomRadioId222" type="radio" title="Não" name="creditoHabitacao" value="Não">
<label class="radio-label " for="randomRadioId222" id="" value="">
<span class="caption-placeholder-m">Não</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__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>
</ul>
<div class="contact-form__legal">
<div class="legal">
<div class="legal__bodycopy">
<div class="
bodycopy-s
">
</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": false,
"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-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-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-radio-group": {
"distinguisher": "cliente-uci",
"field-top": {
"fieldset": true,
"label": {
"text": "Já é cliente UCI?",
"fieldset": true
}
},
"id": "clienteUCI",
"radio-group": {
"radio-group": [
{
"distinguisher": "clienteUCI-si",
"id": "randomRadioId11",
"title": "Sim",
"name": "clienteUCI",
"additionalAttributes": "checked",
"label": {
"text": "Sim",
"type": "-placeholder-m"
}
},
{
"distinguisher": "clienteUCI-no",
"id": "randomRadioId22",
"title": "Não",
"name": "clienteUCI",
"label": {
"text": "Não",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"form-radio-group": {
"distinguisher": "credito-habitacao",
"field-top": {
"fieldset": true,
"label": {
"text": "Pretende pedir crédito habitação?",
"fieldset": true
}
},
"id": "creditoHabitacao",
"radio-group": {
"radio-group": [
{
"distinguisher": "creditoHabitacao-si",
"id": "randomRadioId111",
"title": "Sim",
"name": "creditoHabitacao",
"additionalAttributes": "checked",
"label": {
"text": "Sim",
"type": "-placeholder-m"
}
},
{
"distinguisher": "creditoHabitacao-no",
"id": "randomRadioId222",
"title": "Não",
"name": "creditoHabitacao",
"label": {
"text": "Não",
"type": "-placeholder-m"
}
}
]
},
"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"
}
}
}
]
},
"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>"
}
},
"isLegalComponent": true,
"isPT": 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.