<section class="splitter splitter_bg-color_white splitter_padding_top_large 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="newsletter">
<div class="newsletter__box">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-5 col-lg-6">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-9_5 col-lg-9_5">
<div class="newsletter__text">
<div class="newsletter__title">
<h2 class="
title-l
title-l_color_light
">
Subscreva a Nossa newsletter
</h2>
</div>
<div class="newsletter__description">
<div class="
bodycopy-m
bodycopy_color_light
">
Insira o seu email para ficar a par das últimas novidades!
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-7 col-lg-6">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 center-sm col-lg-11">
<form class="newsletter__form-list" action="#" method="post">
<ul class="form-list">
<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="randomInputId21">NOME</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>
</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="randomInputId22">APELIDO</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_surname
" id="randomInputId22" type="text" name="" title="Surname" 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>
</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="randomInputId211">Email</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>
</ul>
<div class="row">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="legal withCheck">
<div class="legal__checkbox">
<div class="form-checkbox-group" 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="checkbox-group" id="">
<ul>
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="checkbox" type="checkbox" name="Checkbox" title="Checkbox">
<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="checkbox">
<span class="caption"></span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
</div>
</div>
</div>
<div class="legal__bodycopy">
<div class="
bodycopy-s
">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="legal__link">
<a class="link
modal-toggle
" href="#" data-modal="modalOne">
<span>Informação legal</span>
</a>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip ">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Título Tooltip</p>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<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">
Subscrever
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="lightbox-new modalOne-container">
<div id="modalOne" class="modal">
<div class="modal-content">
<div class="container">
<div class="row">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 modal-box">
</div>
<div class="modal-container">
<!-- AQUÍ COMIENZA EL CONTENIDO -->
<div class="lightbox-content-legals">
<div class="modal-head legals">
<div class="row">
<div class="col-xs-12 col-ms-12">
<div class="modal__title small">
<h2 class="
title-m
">Antes de avançar, leia a nossa<br /><strong>Política de Proteção de Dados.</strong></h2>
</div>
</div>
</div>
</div>
<div class="modal-body legals">
<div class="row">
<div class="col-xs-12 col-ms-12">
<div class="
bodycopy-m
">
<p>Para podermos responder à sua solicitação, contactá-lo-emos via telefone ou e-mail e com o nome que nos disponibilize. Estes dados são utilizados pela UCI (Unión de Créditos Inmobiliarios S.A. ESTABELECIMIENTO FINANCIERO DE CRÉDITO (SOCIEDAD UNIPERSONAL) - SUCURSAL EM PORTUGAL) apenas para poder contactá-lo e responder às questões ou pedidos de informação que nos apresente. Não conservaremos nem utilizaremos os seus dados para qualquer outra finalidade e (a menos que estejamos legalmente obrigados a fazê-lo) não os disponibilizaremos a nenhum terceiro.</p>
<p>Se desejar saber mais acerca dos aspetos legais deste procedimento, e em particular sobre como protegemos a sua privacidade, consulte o o documento <a href='#' target='_blank'>Informação Adicional sobre Proteção de Dados</a>.</p>
</div>
</div>
</div>
</div>
</div>
<!-- AQUÍ TERMINA EL CONTENIDO -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}" {{/if}} class="newsletter">
<div class="newsletter__box">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-5 col-lg-6">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-9_5 col-lg-9_5">
<div class="newsletter__text">
<div class="newsletter__title">
{{> @title-l title }}
</div>
{{#if description}}
<div class="newsletter__description">
{{> @bodycopy-m description }}
</div>
{{/if}}
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-7 col-lg-6">
<div class="row">
{{#if form-list-newsletter}}
<div class="col-xs-12 col-ms-12 col-sm-12 center-sm col-lg-11">
<form class="newsletter__form-list" action="#" method="post">
{{> @form-list form-list-newsletter }}
<div class="row">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
{{> @legal legal }}
</div>
</div>
<div class="row">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
{{> @form-btn submit-btn }}
</div>
</div>
</form>
</div>
{{else}}
<div class="col-xs-12 col-ms-8 col-sm-9_5 center-sm col-lg-9_5">
<form class="newsletter__form" action="#" method="post">
<div class="newsletter__fieldset">
{{> @input input }}
</div>
<div class="newsletter__fieldset">
{{> @checkbox checkbox }}
</div>
</form>
{{#if error-message}}
{{> @error-message error-message }}
{{/if}}
</div>
{{/if}}
</div>
</div>
</div>
</div>
</div>
</div>
{{#if form-list-newsletter}}
{{else}}
{{ render '@line' }}
{{/if}}
</div>
{{/content}}
{{/extend}}
{{#if isLightboxLegal}}
{{ render '@lightbox-new' lightbox1 }}
{{/if}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"title": {
"text": "Subscreva a Nossa newsletter",
"colorLight": true
},
"description": {
"text": "Insira o seu email para ficar a par das últimas novidades!",
"colorLight": true
},
"input": {
"doesSubmitExist": true,
"isRegular": true,
"isLight": true,
"type": "email",
"placeholder": "Email",
"title": "Email"
},
"checkbox": {
"isLight": true,
"label": {
"text": "<p>Acepto las <a href='#'>condiciones de uso y la política de privacidad</a></p>"
},
"checkbox-group": {
"field-top": false,
"checkbox-group": [
{
"id": "privacyPolicyCheckbox",
"title": "Privacy Policy"
}
]
},
"error-message": {
"text": "Error"
}
},
"isLightboxLegal": true,
"lightbox1": {
"isLegals": true,
"modalContent1": true,
"modalID": "modalOne"
},
"form-list-newsletter": {
"form-list": [
{
"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": "NOME",
"for": "randomInputId21"
}
},
"input": {
"distinguisher": "name",
"id": "randomInputId21",
"type": "text",
"title": "Name"
},
"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": "APELIDO",
"for": "randomInputId22"
}
},
"input": {
"distinguisher": "surname",
"id": "randomInputId22",
"type": "text",
"title": "Surname"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"form-fieldset": {
"field-top": {
"label": {
"for": "randomInputId211",
"text": "Email"
}
},
"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"
}
}
}
}
]
},
"legal": {
"isLightboxLegal": true,
"isCheckbox": true,
"isLink": true,
"isLinkTooltip": true,
"modalTrigger1": {
"href": "#",
"text": "Informação legal",
"isModal": true,
"data-modal": "modalOne"
},
"bodycopy": {
"text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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."
},
"checkbox": {
"checkbox-group": {
"field-top": false,
"checkbox-group": [
{
"id": "checkbox",
"title": "Checkbox"
}
]
},
"error-message": {
"text": "Error"
}
},
"link": {
"href": "#",
"text": "Enlace"
}
}
},
"submit-btn": {
"btn": {
"type": "submit",
"text": "Subscrever"
}
}
}
.newsletter {
@media (--viewport-xs-max) {
margin-right: -19px;
margin-left: -20px;
}
&__box {
display: flex;
align-items: center;
min-height: 437px;
padding: 40px 20px;
background-color: var(--color-accent);
@media (--viewport-ms-min) {
min-height: 475px;
padding: 60px 0;
}
@media (--viewport-sm-min) {
min-height: 370px;
padding: 80px 0;
}
.row {
flex-grow: 1;
}
}
&__text {
@media (--viewport-ms-max) {
margin-bottom: 40px;
}
}
&__description {
margin-top: 10px;
@media (--viewport-ms-min) {
margin-top: 20px;
}
}
&__fieldset {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
&__form-list {
.form-list{
.field-top label{
color: var(--color-white);
}
.error-message{
color: var(--color-white);
}
.form-list__helper-text .bodycopy-xs{
color: var(--color-accent-light);
}
.form-list__valid-indicator{
top: 21px;
}
}
.legal__bodycopy{
.bodycopy-s{
color: var(--color-white);
}
a.link{
color: var(--color-white);
span:after{
background-color: var(--color-white);
}
}
.legal__link{
.tooltip{
.icon{
fill: var(--color-white);
}
.msg-tooltip{
.bodycopy-s{
color: var(--color-secondary);
}
a.link{
color: var(--color-secondary);
span:after{
background-color: var(--color-accent);
}
}
}
}
}
}
.legal__checkbox{
.checkbox-label{
background-color: var(--color-white);
margin-right: 10px;
margin-left: -12px;
width: 24px;
}
.checkbox-wrapper_regular .checkbox:hover+.checkbox-label:before,
.checkbox-wrapper_regular .checkbox:focus+.checkbox-label:before{
border-color: var(--color-secondary-light);
}
.error-message{
color: var(--color-white);
}
}
.recaptcha{
margin-top: 0;
.error-message{
color: var(--color-white);
}
}
@media (--viewport-sm-min) {
.form-btn{
margin-bottom: -20px;
}
}
}
@media (max-width: 350px) {
.recaptcha{
.g-recaptcha div{
width: 100%!important; /* Para machacar los estilos del propio recaptcha, que a 320px estiraba el formulario (CA) */
float: left;
iframe{
width: 100%;
}
}
}
}
}
Variantes: Default, Error y Valid