<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
">
Suscríbete a nuestra newsletter
</h2>
</div>
<div class="newsletter__description">
<div class="
bodycopy-m
bodycopy_color_light
">
En las próximas semanas se resolverá una de las grandes incógnitas que mantiene en vilo a la política internacional…
</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-8 col-sm-9_5 center-sm col-lg-9_5">
<form class="newsletter__form" action="#" method="post">
<div class="newsletter__fieldset">
<div class="input-wrapper">
<input class="input input_submit " type="email" name="Email" title="Email" placeholder="Email" value="" autocomplete="" />
<button class="input-submit input-submit_light " type="submit" title="Submit">
<svg class="icon icon-chebron-left ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
</svg>
</button>
</div>
</div>
<div class="newsletter__fieldset">
<div class="checkbox">
<input class="checkbox-input" id="" type="checkbox" name="" title="">
<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 checkbox-label_light" for="">
<span class="caption">
<p>Acepto las <a href='#'>condiciones de uso y la política de privacidad</a></p>
</span>
</label>
</div>
</div>
</form>
<div class="error-message-wrapper
error-message-wrapper_accent">
<svg class="icon icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#check"></use>
</svg>
<div class="error-message">
<div class="
bodycopy-s
">
Gracias por suscribirte, te hemos enviado un mail para que confirmes tu suscripción. En breve podrás disfrutar de nuestros contenidos.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="line"></div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#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": "Suscríbete a nuestra newsletter",
"colorLight": true
},
"description": {
"text": "En las próximas semanas se resolverá una de las grandes incógnitas que mantiene en vilo a la política internacional…",
"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"
}
},
"error-message": {
"isAccent": true,
"isValid": true,
"bodycopy": {
"text": "Gracias por suscribirte, te hemos enviado un mail para que confirmes tu suscripción. En breve podrás disfrutar de nuestros contenidos."
}
}
}
.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