<div class="lightbox-content-resources-form">
<div class="modal-head">
<div class="row">
<div class="col-xs-10 col-ms-10 col-xs-mr-ml col-sm-9 col-lg-9 col">
<div class="modal__title small">
<h2 class="
title-m
">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
</div>
<div class="modal__description">
<div class="
bodycopy-m
">
<p>Nullam ultrices pulvinar fringilla. Quisque mollis lectus sed orci egestas finibus. Sed ac neque non felis auctor semper et eget augue. In eget tincidunt dolor.</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12">
<div class="resources-form">
<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">
<form id="" action="" method="post" class="validation">
<div class="row columns-form">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="columns-form__form form-distinguisher_columns-form" id="" action="#" method="post" novalidate>
<ul class="form-list form-list-different-columns row">
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-6 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=""></label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_
" type="" name="" title="" 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>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-6 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=""></label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_
" type="" name="" title="" 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>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-6 col-md-6 col-lg-6
">
<div class="form-list__field
required">
<div class="form-select " id="utilizador">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></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"></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="utilizador1" type="radio" title="Particular" name="utilizador" value="">
<label class="access-select__option access-select__label" for="utilizador1">
Particular
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="utilizador2" type="radio" title="Profissional" name="utilizador" value="">
<label class="access-select__option access-select__label" for="utilizador2">
Profissional
</label>
</li>
</ul>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-6 col-md-6 col-lg-6
">
<div class="form-list__field
required">
<div class="form-select " id="select2">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></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"></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="opcion1" type="radio" title="Opción 1" name="select2" value="">
<label class="access-select__option access-select__label" for="opcion1">
Opción 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="opcion2" type="radio" title="Opción 2" name="select2" value="">
<label class="access-select__option access-select__label" for="opcion2">
Opción 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="opcion3" type="radio" title="Opción 3" name="select2" value="">
<label class="access-select__option access-select__label" for="opcion3">
Opción 3
</label>
</li>
</ul>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-6 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=""></label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_
" type="" name="" title="" 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>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-6 col-md-6 col-lg-6
">
<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=""></label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_
" type="" name="" title="" 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>
</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=""></label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_
" type="" name="" title="" 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>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="columns-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
">
</h2>
</div>
<div class="success__description">
<div class="
bodycopy-m
">
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-10 col-lg-10 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>Para poder atenderte, contactaremos contigo en el teléfono y correo electrónico.</p>
</div>
<div class="legal__link">
<a class="link
" href="#">
<span>A long line for a link</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 class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="form-btn">
<div class="form-btn__submit">
<button id="" class="btn
" type="submit">
Confirmar
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="lightbox-content-resources-form">
<div class="modal-head">
<div class="row">
<div class="col-xs-10 col-ms-10 col-xs-mr-ml col-sm-9 col-lg-9 col">
{{#if title}}
<div class="modal__title small">
{{> @title-m title }}
</div>
{{/if}}
{{#if description}}
<div class="modal__description">
{{> @bodycopy-m description }}
</div>
{{/if}}
</div>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12">
<div class="resources-form">
{{> @columns-form resources-form }}
</div>
</div>
</div>
</div>
</div>
{
"hasID": false,
"title": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"isH2": true
},
"description": {
"text": "<p>Nullam ultrices pulvinar fringilla. Quisque mollis lectus sed orci egestas finibus. Sed ac neque non felis auctor semper et eget augue. In eget tincidunt dolor.</p>"
},
"resources-form": {
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": false,
"paddingBottomSmall": false
},
"isWideMS": true,
"isCheckWithLegal": true,
"legal": {
"isCheckbox": true,
"isLinkTooltip": true,
"isLink": true,
"bodycopy": {
"text": "<p>Para poder atenderte, contactaremos contigo en el teléfono y correo electrónico.</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."
},
"link": {
"href": "#",
"text": "Enlace"
}
}
},
"form-list": {
"form-list": [
{
"isRequired": true,
"twocolumns-b": true,
"form-fieldset": {
"tooltip-label": {
"notit": true
},
"fieldset": {
"label": {
"for": "randomInputId211",
"text": "NOME"
},
"input": {
"distinguisher": "name",
"id": "randomInputId211",
"type": "text",
"title": "Name"
}
},
"error-message": {
"text": "Put a correct name, please*"
}
}
},
{
"isRequired": true,
"twocolumns-b": true,
"form-fieldset": {
"tooltip-label": {
"notit": true
},
"fieldset": {
"label": {
"for": "randomInputId211",
"text": "APELIDO"
},
"input": {
"distinguisher": "apelido",
"id": "randomInputId211",
"type": "text",
"title": "LastName"
}
},
"error-message": {
"text": "Put a correct last name, please*"
}
}
},
{
"isRequired": true,
"twocolumns-b": true,
"form-select": {
"tooltip-label": {
"notit": true
},
"id": "utilizador",
"select": {
"chosen-label": "TIPO DE UTILIZADOR",
"option": [
{
"id": "utilizador1",
"select-name": "utilizador",
"text": "Particular"
},
{
"id": "utilizador2",
"select-name": "utilizador",
"text": "Profissional"
}
]
},
"error-message": {
"text": "Elige utilizador, por favor*"
}
}
},
{
"isRequired": true,
"twocolumns-b": true,
"form-select": {
"tooltip-label": {
"notit": true
},
"id": "select2",
"select": {
"chosen-label": "Estou a procura da casa",
"option": [
{
"id": "opcion1",
"select-name": "select2",
"text": "Opción 1"
},
{
"id": "opcion2",
"select-name": "select2",
"text": "Opción 2"
},
{
"id": "opcion3",
"select-name": "select2",
"text": "Opción 3"
}
]
},
"error-message": {
"text": "Elige una opción, por favor*"
}
}
},
{
"isRequired": true,
"twocolumns-b": true,
"form-fieldset": {
"tooltip-label": {
"notit": true
},
"fieldset": {
"label": {
"for": "randomInputId211",
"text": "EMAIL"
},
"input": {
"distinguisher": "email",
"id": "randomInputId211",
"type": "text",
"title": "EMail"
}
},
"error-message": {
"text": "Put a correct email, please*"
}
}
},
{
"isRequired": true,
"twocolumns-b": 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": {
"tooltip-label": {
"notit": true
},
"fieldset": {
"label": {
"for": "randomInputId3",
"text": "PREFIJO"
},
"input": {
"distinguisher": "prefix",
"id": "randomInputId3",
"type": "text",
"title": "Phone prefix",
"value": "+34",
"validationAttributes": "minlength='3'"
}
},
"error-message": {
"text": "Min length: 2*"
}
},
"col-2": "col-xs-7 col-ms-7 col-sm-7 col-md-6 col-lg-6",
"isRequired-2": true,
"form-fieldset-2": {
"tooltip-label": {
"notit": true
},
"fieldset": {
"label": {
"for": "randomInputId4",
"text": "TELÉFONO"
},
"input": {
"distinguisher": "phone-number",
"id": "randomInputId4",
"type": "text",
"title": "Phone number",
"validationAttributes": "minlength='11'"
}
},
"error-message": {
"text": "Min length: 9*"
}
}
}
]
},
"submit-btn": {
"btn": {
"type": "submit",
"text": "Confirmar"
}
}
}
}
.lightbox-content-resources-form {
.resources-form{padding-bottom:40px;
.tooltip-label{
height: auto;
}
/*input, .access-select__chosen-option{border-color: var(--color-accent-dark);}
.access-select__chosen-icon .icon{fill: var(--color-accent);} LO QUITAMOS POR PETICION DE DS (CA)*/
.recaptcha{margin-top: 0;}
.form-list__valid-indicator{
top: 31px;
}
}
}
Título y descripción opcionales