<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>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="call-form" {{#if id}} id="{{id}}" {{/if}}>
<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{{#if isLeft}} left{{/if}}">
{{> @title-l title }}
{{> @bodycopy-m subtitle }}
</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">
{{> @form-list-different-columns form-list }}
</div>
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
{{> @form-list-different-columns form-list2 }}
</div>
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
{{> @form-btn submit-btn }}
</div>
</div>
</form>
</div>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopSmall": true,
"paddingBottomSmall": true
},
"title": {
"text": "Es el momento de llamarte"
},
"subtitle": {
"text": "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"
},
"submit-btn": {
"btn": {
"type": "submit",
"text": "Solicitar llamada"
}
},
"form-list": {
"form-list": [
{
"onecolumn": true,
"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"
}
}
}
},
{
"onecolumn": true,
"isRequired": true,
"form-select": {
"field-top": {
"label": {
"text": "¿QUÉ DÍA DE LA SEMANA PREFIERES QUE TE LLAMEMOS?"
}
},
"id": "cuando",
"select": {
"chosen-placeholder": "Seleciona un día",
"option": [
{
"id": "lunes",
"select-name": "cuando",
"text": "Lunes"
},
{
"id": "martes",
"select-name": "cuando",
"text": "Martes"
},
{
"id": "miercoles",
"select-name": "cuando",
"text": "Miércoles"
},
{
"id": "jueves",
"select-name": "cuando",
"text": "Jueves"
},
{
"id": "viernes",
"select-name": "cuando",
"text": "Viernes"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"onecolumn": true,
"isRequired": true,
"form-select": {
"field-top": {
"label": {
"text": "¿A QUÉ HORA TE VIENE BIEN?"
}
},
"id": "hora",
"select": {
"chosen-placeholder": "Selecciona una franja horaria",
"option": [
{
"id": "hora1",
"select-name": "hora",
"text": "09:00 - 11:00"
},
{
"id": "hora2",
"select-name": "hora",
"text": "11:00 - 13:00"
},
{
"id": "hora3",
"select-name": "hora",
"text": "13:00 - 15:00"
},
{
"id": "hora4",
"select-name": "hora",
"text": "15:00 - 17:00"
},
{
"id": "hora5",
"select-name": "hora",
"text": "17:00 - 19:00"
}
]
},
"field-bottom": {
"helper-text": {
"text": "Horario de atención de lunes a viernes de 09:00 a 19:00"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
},
"form-list2": {
"form-list": [
{
"onecolumn": true,
"form-textarea": {
"field-top": {
"label": {
"text": "¿En qué podemos ayudarte?"
}
},
"textarea": {
"distinguisher": "Mensaje",
"id": "randomInputId211",
"type": "text",
"title": "Mensaje",
"placeholder": "Por favor, describe brevemente el motivo de tu consulta."
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
},
"isLeft": true
}
.call-form{
.consultor{color: var(--color-primary-brand);}
&__head{
text-align: center;
.title-l, .bodycopy-m{margin-bottom: 34px;}
&.left{
text-align: left;
}
}
&__form{
.form-btn{
margin-top: 20px;
display: flex;
justify-content: flex-end;
@media (--viewport-ms-min) {
margin-top: -3px;
}
}
.form-textarea{
.textarea-field{
@media (--viewport-ms-min) {
height: 270px;
}
}
}
}
}
No notes defined.