<div class="lightbox-content-generic">
<div class="modal-body">
<section class="splitter splitter_bg-color_white ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<section class="splitter splitter_bg-color_white splitter_padding_top_small 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">
<div class="call-form">
<div class="row">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="call-form__head left">
<h2 class="
title-l
">
Es el momento de llamarte
</h2>
<div class="
bodycopy-m
">
Indícanos tus preferencias y confirma tus datos de contacto para que <span class='consultor'>John Doe</span> pueda ponerse en contacto contigo lo antes posible
</div>
</div>
<div class="call-form__form">
<form>
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
<ul class="form-list form-list-different-columns row">
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12
">
<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="col
form-list__item
col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12
">
<div class="form-list__field
required">
<div class="form-select " id="cuando">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">¿QUÉ DÍA DE LA SEMANA PREFIERES QUE TE LLAMEMOS?</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">Seleciona un día</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="lunes" type="radio" title="Lunes" name="cuando" value="">
<label class="access-select__option access-select__label" for="lunes">
Lunes
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="martes" type="radio" title="Martes" name="cuando" value="">
<label class="access-select__option access-select__label" for="martes">
Martes
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="miercoles" type="radio" title="Miércoles" name="cuando" value="">
<label class="access-select__option access-select__label" for="miercoles">
Miércoles
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="jueves" type="radio" title="Jueves" name="cuando" value="">
<label class="access-select__option access-select__label" for="jueves">
Jueves
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="viernes" type="radio" title="Viernes" name="cuando" value="">
<label class="access-select__option access-select__label" for="viernes">
Viernes
</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-12 col-sm-12 col-md-12 col-lg-12
">
<div class="form-list__field
required">
<div class="form-select " id="hora">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">¿A QUÉ HORA TE VIENE BIEN?</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">Selecciona una franja horaria</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="hora1" type="radio" title="09:00 - 11:00" name="hora" value="">
<label class="access-select__option access-select__label" for="hora1">
09:00 - 11:00
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="hora2" type="radio" title="11:00 - 13:00" name="hora" value="">
<label class="access-select__option access-select__label" for="hora2">
11:00 - 13:00
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="hora3" type="radio" title="13:00 - 15:00" name="hora" value="">
<label class="access-select__option access-select__label" for="hora3">
13:00 - 15:00
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="hora4" type="radio" title="15:00 - 17:00" name="hora" value="">
<label class="access-select__option access-select__label" for="hora4">
15:00 - 17:00
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="hora5" type="radio" title="17:00 - 19:00" name="hora" value="">
<label class="access-select__option access-select__label" for="hora5">
17:00 - 19:00
</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 class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Horario de atención de lunes a viernes de 09:00 a 19:00
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
<ul class="form-list form-list-different-columns row">
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12
">
<div class="form-list__field
">
<div class="form-textarea" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">¿En qué podemos ayudarte?</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="Por favor, describe brevemente el motivo de tu consulta."></textarea>
</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="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="form-btn">
<div class="form-btn__submit">
<button id="" class="btn
" type="submit">
Solicitar llamada
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div {{#if hasID}}id="{{idComponent}}" {{/if}} class="lightbox-content-generic">
<div class="modal-body">
{{#if img-url}}
<div class="row">
<div class="col-xs-12 col-ms-12">
<img src="{{img-url}}" />
</div>
</div>
{{/if}}
{{#if splitter}}
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
{{#if isDocumentsUploadLightbox}}
{{ render '@cards-grid--upload-multiple-photos' }}
{{else if isSolicitudLlamadaLightbox}}
{{ render '@contact--two-items-without-title' }}
{{ render '@call-form--default' }}
{{else if isSolicitudLlamadaSimpleLightbox}}
{{ render '@call-form--con-consultor-y-encabezado-a-la-izquierda' }}
{{else if isSolicitudLlamadaSuccessLightbox}}
{{ render '@form-success' }}
{{else if isBankflipLightbox}}
{{ render '@product--with-bullets-list-and-reversed-just-for-mobile' }}
{{else if isDeleteDocumentLightbox}}
{{ render '@delete-document--default' }}
{{else if isPreloader}}
{{ render '@preloader--as-component' }}
{{else if isRequisitosICO}}
{{ render '@description-list--text-list' }}
{{else}}
Contenido splitter
{{/if}}
{{/content}}
{{/extend}}
{{/if}}
</div>
</div>
{
"hasID": false,
"img-url": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true
},
"isSolicitudLlamadaSimpleLightbox": true
}
.lightbox-content-generic {
.modal-body {
/*.row {
background-color: var(--color-white); Lo comento porque genera error al meter dentro del splitter un componente producto, por ejemplo (CA)
}*/
.splitter{
.container{
padding:0;
}
}
& > .row{
margin: 0;
}
& > .row > .col-xs-12,
& > .row > .col-ms-12{
padding: 0;
}
}
.modal-head {
margin-bottom: var(--gutter-width);
& > .row{
margin: 0;
}
& > .row > .col-xs-12,
& > .row > .col-ms-12{
padding: 0;
}
}
.modal__title {
&.small {
margin-bottom: 20px;
.title-m {
color: var(--color-secondary);
}
}
}
}
El título, descripción, imagen y texto bajo la imagen son opcionales