<ul class="form-list">
<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="">Nombre</label>
<div class="field-top__wrap">
<a class="link
link_inline
" href="#">
<span>Link</span>
</a>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<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ítulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div> <input class="input
input-distinguisher_name
" id="randomInputId211" type="text" name="" title="Name" autocomplete="" placeholder="¿Cómo te llamas?" />
<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 class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
</li>
<li class="form-list__item ">
<div class="form-list__field required">
<div class="form-select " id="where">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Provincia</label>
<div class="field-top__wrap">
<a class="link
link_inline
" href="#">
<span>Link</span>
</a>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<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ítulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</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">¿Dónde quieres comprar?</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="where1" type="radio" title="Provincia 1" name="where" value="">
<label class="access-select__option access-select__label" for="where1">
Provincia 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where2" type="radio" title="Provincia 2" name="where" value="">
<label class="access-select__option access-select__label" for="where2">
Provincia 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where3" type="radio" title="Provincia 3" name="where" value="">
<label class="access-select__option access-select__label" for="where3">
Provincia 3
</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
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
</li>
<li class="form-list__item ">
<div class="form-list__field required">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<div class="field-top__wrap">
<a class="link
link_inline
" href="#">
<span>Link</span>
</a>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<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ítulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="Example form input" value="5.000">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
€
</div>
</div>
</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
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
</li>
<li class="form-list__item ">
<div class="form-list__field required">
<div class="form-range-slider" id="ageRangeSlider">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<div class="field-top__wrap">
<a class="link
link_inline
" href="#">
<span>Link</span>
</a>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<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ítulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="range-slider" id="ageRangeInput">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="" type="text" name="" title="Cuál es tu edad" min='18' max='74' data-default='30'>
<div class="range-slider__symbol" for="">
<div class="bodycopy-xs
">
años
</div>
</div>
</div>
<div class="range-slider__slider" id=""></div>
<div class="range-slider__legend">
<div class="range-slider__legend-start">
<div class="bodycopy-xs
">
18 años
</div>
</div>
<div class="range-slider__legend-end">
<div class="bodycopy-xs
">
74 años
</div>
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="form-list__item ">
<div class="form-list__field required">
<div class="form-radio-group " id="reasonBuying">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">Field Text</fieldset>
<div class="field-top__wrap">
<a class="link
link_inline
" href="#">
<span>Link</span>
</a>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<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ítulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="reasonBuyingSecond" type="radio" title="Second Home" name="reasonBuying" value="SECOND HOME" checked>
<label class="radio-label " for="reasonBuyingSecond" id="" value="">
<span class="caption-placeholder-m">SECOND HOME</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="reasonBuyingRelocation" type="radio" title="Relocation" name="reasonBuying" value="RELOCATION">
<label class="radio-label " for="reasonBuyingRelocation" id="" value="">
<span class="caption-placeholder-m">RELOCATION</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="reasonBuyingOther" type="radio" title="Other" name="reasonBuying" value="OTHER">
<label class="radio-label " for="reasonBuyingOther" id="" value="">
<span class="caption-placeholder-m">OTHER</span>
</label>
</div>
</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
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
</li>
<li class="form-list__item ">
<div class="form-list__field required">
<div class="form-checkbox-group" id="moreInfo">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">Field Text</fieldset>
<div class="field-top__wrap">
<a class="link
link_inline
" href="#">
<span>Link</span>
</a>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<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ítulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="checkbox-group" id="">
<ul>
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="moreInfoReform" type="checkbox" name="House needs a reform" title="House needs a reform">
<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="moreInfoReform">
<span class="caption-placeholder-m">LA VIVIENDA NECESITA UNA REFORMA</span>
</label>
</div>
</li>
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="moreInfoNotYetBuilt" type="checkbox" name="House is not yet built" title="House is not yet built">
<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="moreInfoNotYetBuilt">
<span class="caption-placeholder-m">LA CASA QUE QUIERO COMPRAR NO HA EMPEZADO A CONSTRUIRSE</span>
</label>
</div>
</li>
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="moreInfoSwitchHouseActiveMortgage" type="checkbox" name="I want to switch the house, but I have an active mortgage" title="I want to switch the house, but I have an active mortgage">
<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="moreInfoSwitchHouseActiveMortgage">
<span class="caption-placeholder-m">QUIERO CAMBIAR DE CASA Y YA TENGO UNA HIPOTECA ACTIVA</span>
</label>
</div>
</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
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
</li>
<li class="form-list__item ">
<div class="form-list__field required">
<div class="form-textarea" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<div class="field-top__wrap">
<a class="link
link_inline
" href="#">
<span>Link</span>
</a>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<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ítulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="textarea">
<textarea class="textarea-field
input-distinguisher_Mensaje
" id="randomInputId211" name="Mensaje" title="Mensaje" placeholder="Placeholder"></textarea>
</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
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="form-list">
{{#each this.form-list}}
<li class="form-list__item {{#if this.extraClasses}} {{ this.extraClasses }}{{/if}}">
{{#if this.isThreeColumn}}
<div class="row">
<div class="{{ this.col-1 }}">
<div class="form-list__field {{#if this.distinguisher-1}}form-list__field_{{ distinguisher-1 }}{{/if}} {{#if this.extraClassnames-1}}{{ this.extraClassnames-1 }}{{/if}} {{#if this.isHidden-1}}hidden{{/if}} {{#if this.isRequired-1}}required{{/if}}"
{{#if this.id-1}} id="{{ id-1 }}" {{/if}}>
{{#if this.form-fieldset-1}}
{{> @form-fieldset this.form-fieldset-1 }}
{{/if}}
{{#if this.form-radio-group-1}}
{{> @form-radio-group this.form-radio-group-1 }}
{{/if}}
{{#if this.form-checkbox-group-1}}
{{> @form-checkbox-group this.form-checkbox-group-1 }}
{{/if}}
{{#if this.form-select-1}}
{{> @form-select this.form-select-1 }}
{{/if}}
{{#if this.form-input-1}}
{{> @form-input this.form-input-1 }}
{{/if}}
{{#if this.form-range-slider-1}}
{{> @form-range-slider this.form-range-slider-1 }}
{{/if}}
{{#if this.form-switch-1}}
{{> @form-switch this.form-switch-1 }}
{{/if}}
{{#if this.form-textarea-1}}
{{> @form-textarea this.form-textarea-1 }}
{{/if}}
</div>
</div>
<div class="{{ this.col-2 }}">
<div class="form-list__field {{#if this.distinguisher-2}}form-list__field-distinguisher_{{ distinguisher-2 }}{{/if}} {{#if this.extraClassnames-2}}{{ this.extraClassnames-2 }}{{/if}} {{#if this.isHidden-2}}hidden{{/if}} {{#if this.isRequired-2}}required{{/if}}"
{{#if this.id-2}}id="{{ id-2 }}" {{/if}}>
{{#if this.form-fieldset-2}}
{{> @form-fieldset this.form-fieldset-2 }}
{{/if}}
{{#if this.form-radio-group-2}}
{{> @form-radio-group this.form-radio-group-2 }}
{{/if}}
{{#if this.form-checkbox-group-2}}
{{> @form-checkbox-group this.form-checkbox-group-2 }}
{{/if}}
{{#if this.form-select-2}}
{{> @form-select this.form-select-2 }}
{{/if}}
{{#if this.form-input-2}}
{{> @form-input this.form-input-2 }}
{{/if}}
{{#if this.form-range-slider-2}}
{{> @form-range-slider this.form-range-slider-2 }}
{{/if}}
{{#if this.form-switch-2}}
{{> @form-switch this.form-switch-2 }}
{{/if}}
{{#if this.form-textarea-2}}
{{> @form-textarea this.form-textarea-2 }}
{{/if}}
</div>
</div>
<div class="{{ this.col-3 }}">
<div class="form-list__field
{{#if this.distinguisher-3}}form-list__field-distinguisher_{{ distinguisher-3 }}{{/if}}
{{#if this.extraClassnames-3}}{{ this.extraClassnames-3 }}{{/if}}
{{#if this.isHidden-3}}hidden{{/if}}
{{#if this.isRequired-3}}required{{/if}}" {{#if this.id-3}} id="{{ id-3 }}" {{/if}}>
{{#if this.form-fieldset-3}}
{{> @form-fieldset this.form-fieldset-3 }}
{{/if}}
{{#if this.form-radio-group-3}}
{{> @form-radio-group this.form-radio-group-3 }}
{{/if}}
{{#if this.form-checkbox-group-3}}
{{> @form-checkbox-group this.form-checkbox-group-3 }}
{{/if}}
{{#if this.form-select-3}}
{{> @form-select this.form-select-3 }}
{{/if}}
{{#if this.form-input-3}}
{{> @form-input this.form-input-3 }}
{{/if}}
{{#if this.form-range-slider-3}}
{{> @form-range-slider this.form-range-slider-3 }}
{{/if}}
{{#if this.form-switch-3}}
{{> @form-switch this.form-switch-3 }}
{{/if}}
{{#if this.form-textarea-3}}
{{> @form-textarea this.form-textarea-3 }}
{{/if}}
</div>
</div>
</div>
{{else if this.isTwoColumn}}
<div class="row">
<div class="{{ this.col-1 }}">
<div class="form-list__field {{#if this.distinguisher-1}}form-list__field_{{ distinguisher-1 }}{{/if}} {{#if this.extraClassnames-1}}{{ this.extraClassnames-1 }}{{/if}} {{#if this.isHidden-1}}hidden{{/if}} {{#if this.isRequired-1}}required{{/if}}"
{{#if this.id-1}} id="{{ id-1 }}" {{/if}}>
{{#if this.form-fieldset-1}}
{{> @form-fieldset this.form-fieldset-1 }}
{{/if}}
{{#if this.form-radio-group-1}}
{{> @form-radio-group this.form-radio-group-1 }}
{{/if}}
{{#if this.form-checkbox-group-1}}
{{> @form-checkbox-group this.form-checkbox-group-1 }}
{{/if}}
{{#if this.form-select-1}}
{{> @form-select this.form-select-1 }}
{{/if}}
{{#if this.form-input-1}}
{{> @form-input this.form-input-1 }}
{{/if}}
{{#if this.form-range-slider-1}}
{{> @form-range-slider this.form-range-slider-1 }}
{{/if}}
{{#if this.form-switch-1}}
{{> @form-switch this.form-switch-1 }}
{{/if}}
{{#if this.form-textarea-1}}
{{> @form-textarea this.form-textarea-1 }}
{{/if}}
</div>
</div>
<div class="{{ this.col-2 }}">
<div class="form-list__field{{#if this.distinguisher-2}}form-list__field-distinguisher_{{ distinguisher-2 }}{{/if}} {{#if this.extraClassnames-2}}{{ this.extraClassnames-2 }}{{/if}} {{#if this.isHidden-2}}hidden{{/if}} {{#if this.isRequired-2}}required{{/if}}"
{{#if this.id-2}}id="{{ id-2 }}" {{/if}}>
{{#if this.form-fieldset-2}}
{{> @form-fieldset this.form-fieldset-2 }}
{{/if}}
{{#if this.form-radio-group-2}}
{{> @form-radio-group this.form-radio-group-2 }}
{{/if}}
{{#if this.form-checkbox-group-2}}
{{> @form-checkbox-group this.form-checkbox-group-2 }}
{{/if}}
{{#if this.form-select-2}}
{{> @form-select this.form-select-2 }}
{{/if}}
{{#if this.form-input-2}}
{{> @form-input this.form-input-2 }}
{{/if}}
{{#if this.form-range-slider-2}}
{{> @form-range-slider this.form-range-slider-2 }}
{{/if}}
{{#if this.form-switch-2}}
{{> @form-switch this.form-switch-2 }}
{{/if}}
{{#if this.form-textarea-2}}
{{> @form-textarea this.form-textarea-2 }}
{{/if}}
</div>
</div>
</div>
{{else if this.isOneColumn}}
<div class="row">
<div class="{{ col }}">
<div class="form-list__field {{#if this.distinguisher}}form-list__field_{{ distinguisher }}{{/if}}{{#if this.extraClassnames}}{{ this.extraClassnames }}{{/if}} {{#if this.isHidden}}hidden{{/if}} {{#if this.isRequired}}required{{/if}}"
{{#if this.id}} id="{{ id }}" {{/if}}>
{{#if this.form-fieldset}}
{{> @form-fieldset this.form-fieldset }}
{{/if}}
{{#if this.form-radio-group}}
{{> @form-radio-group this.form-radio-group }}
{{/if}}
{{#if this.form-checkbox-group}}
{{> @form-checkbox-group this.form-checkbox-group }}
{{/if}}
{{#if this.form-select}}
{{> @form-select this.form-select }}
{{/if}}
{{#if this.form-input}}
{{> @form-input this.form-input }}
{{/if}}
{{#if this.form-range-slider}}
{{> @form-range-slider this.form-range-slider }}
{{/if}}
{{#if this.form-switch}}
{{> @form-switch this.form-switch }}
{{/if}}
{{#if this.form-textarea}}
{{> @form-textarea this.form-textarea }}
{{/if}}
</div>
</div>
</div>
{{else if this.hasTwoFields}}
{{#each this.field}}
<div class="form-list__field {{#if this.distinguisher}}form-list__field_{{ distinguisher }}{{/if}}{{#if this.extraClassnames}}{{ this.extraClassnames }}{{/if}} {{#if this.isHidden}}hidden{{/if}} {{#if this.isRequired}}required{{/if}}"{{#if this.id}} id="{{ id }}" {{/if}}s>
{{#if this.form-fieldset}}
{{> @form-fieldset this.form-fieldset }}
{{/if}}
{{#if this.form-radio-group}}
{{> @form-radio-group this.form-radio-group }}
{{/if}}
{{#if this.form-checkbox-group}}
{{> @form-checkbox-group this.form-checkbox-group }}
{{/if}}
{{#if this.form-select-}}
{{> @form-select this.form-select }}
{{/if}}
{{#if this.form-input}}
{{> @form-input this.form-input }}
{{/if}}
{{#if this.form-range-slider}}
{{> @form-range-slider this.form-range-slider }}
{{/if}}
{{#if this.form-switch}}
{{> @form-switch this.form-switch }}
{{/if}}
{{#if this.form-textarea}}
{{> @form-textarea this.form-textarea }}
{{/if}}
{{#if this.form-input}}
{{> @form-input this.form-input }}
{{/if}}
</div>
{{/each}}
{{else if this.isFieldsetGroup}}
<div class="row">
<div class="{{ this.col-1 }}">
<div class="form-list__field">
{{#if this.form-fieldset-1}}
{{> @form-fieldset this.form-fieldset-1 }}
{{/if}}
{{#if this.form-radio-group-1}}
{{> @form-radio-group this.form-radio-group-1 }}
{{/if}}
{{#if this.form-checkbox-group-1}}
{{> @form-checkbox-group this.form-checkbox-group-1 }}
{{/if}}
{{#if this.form-select-1}}
{{> @form-select this.form-select-1 }}
{{/if}}
{{#if this.form-input-1}}
{{> @form-input this.form-input-1 }}
{{/if}}
{{#if this.form-range-slider-1}}
{{> @form-range-slider this.form-range-slider-1 }}
{{/if}}
{{#if this.form-switch-1}}
{{> @form-switch this.form-switch-1 }}
{{/if}}
{{#if this.form-textarea-1}}
{{> @form-textarea this.form-textarea-1 }}
{{/if}}
</div>
</div>
</div>
<div class="row">
<div class="{{ this.col-3 }}">
<div class="form-list__field">
{{#if this.form-fieldset-2}}
{{> @form-fieldset this.form-fieldset-2 }}
{{/if}}
{{#if this.form-radio-group-2}}
{{> @form-radio-group this.form-radio-group-2 }}
{{/if}}
{{#if this.form-checkbox-group-2}}
{{> @form-checkbox-group this.form-checkbox-group-2 }}
{{/if}}
{{#if this.form-select-2}}
{{> @form-select this.form-select-2 }}
{{/if}}
{{#if this.form-input-2}}
{{> @form-input this.form-input-2 }}
{{/if}}
{{#if this.form-range-slider-2}}
{{> @form-range-slider this.form-range-slider-2 }}
{{/if}}
{{#if this.form-switch-2}}
{{> @form-switch this.form-switch-2 }}
{{/if}}
{{#if this.form-textarea-2}}
{{> @form-textarea this.form-textarea-2 }}
{{/if}}
</div>
</div>
<div class="{{ this.col-3 }}">
<div class="form-list__field">
{{#if this.form-fieldset-3}}
{{> @form-fieldset this.form-fieldset-3 }}
{{/if}}
{{#if this.form-radio-group-3}}
{{> @form-radio-group this.form-radio-group-3 }}
{{/if}}
{{#if this.form-checkbox-group-3}}
{{> @form-checkbox-group this.form-checkbox-group-3 }}
{{/if}}
{{#if this.form-select-3}}
{{> @form-select this.form-select-3 }}
{{/if}}
{{#if this.form-input-3}}
{{> @form-input this.form-input-3 }}
{{/if}}
{{#if this.form-range-slider-3}}
{{> @form-range-slider this.form-range-slider-3 }}
{{/if}}
{{#if this.form-switch-3}}
{{> @form-switch this.form-switch-3 }}
{{/if}}
{{#if this.form-textarea-3}}
{{> @form-textarea this.form-textarea-3 }}
{{/if}}
</div>
</div>
<div class="{{ this.col-3 }}">
<div class="form-list__field">
{{#if this.form-fieldset-4}}
{{> @form-fieldset this.form-fieldset-4 }}
{{/if}}
{{#if this.form-radio-group-4}}
{{> @form-radio-group this.form-radio-group-4 }}
{{/if}}
{{#if this.form-checkbox-group-4}}
{{> @form-checkbox-group this.form-checkbox-group-4 }}
{{/if}}
{{#if this.form-select-4}}
{{> @form-select this.form-select-4 }}
{{/if}}
{{#if this.form-input-4}}
{{> @form-input this.form-input-4 }}
{{/if}}
{{#if this.form-range-slider-4}}
{{> @form-range-slider this.form-range-slider-4 }}
{{/if}}
{{#if this.form-switch-4}}
{{> @form-switch this.form-switch-4 }}
{{/if}}
{{#if this.form-textarea-4}}
{{> @form-textarea this.form-textarea-4 }}
{{/if}}
</div>
</div>
</div>
<div class="row">
<div class="{{ this.col-2 }}">
<div class="form-list__field">
{{#if this.form-fieldset-5}}
{{> @form-fieldset this.form-fieldset-5 }}
{{/if}}
{{#if this.form-radio-group-5}}
{{> @form-radio-group this.form-radio-group-5 }}
{{/if}}
{{#if this.form-checkbox-group-5}}
{{> @form-checkbox-group this.form-checkbox-group-5 }}
{{/if}}
{{#if this.form-select-5}}
{{> @form-select this.form-select-5 }}
{{/if}}
{{#if this.form-input-5}}
{{> @form-input this.form-input-5 }}
{{/if}}
{{#if this.form-range-slider-5}}
{{> @form-range-slider this.form-range-slider-5 }}
{{/if}}
{{#if this.form-switch-6}}
{{> @form-switch this.form-switch-5 }}
{{/if}}
{{#if this.form-textarea-5}}
{{> @form-textarea this.form-textarea-5 }}
{{/if}}
</div>
</div>
<div class="{{ this.col-2 }}">
<div class="form-list__field">
{{#if this.form-fieldset-6}}
{{> @form-fieldset this.form-fieldset-6 }}
{{/if}}
{{#if this.form-radio-group-6}}
{{> @form-radio-group this.form-radio-group-6 }}
{{/if}}
{{#if this.form-checkbox-group-6}}
{{> @form-checkbox-group this.form-checkbox-group-6 }}
{{/if}}
{{#if this.form-select-6}}
{{> @form-select this.form-select-6 }}
{{/if}}
{{#if this.form-input-6}}
{{> @form-input this.form-input-6 }}
{{/if}}
{{#if this.form-range-slider-6}}
{{> @form-range-slider this.form-range-slider-6 }}
{{/if}}
{{#if this.form-switch-6}}
{{> @form-switch this.form-switch-6 }}
{{/if}}
{{#if this.form-textarea-6}}
{{> @form-textarea this.form-textarea-6 }}
{{/if}}
</div>
</div>
</div>
{{else if this.hasThreeFields}}
{{#each this.field}}
<div class="form-list__field {{#if this.distinguisher}}form-list__field_{{ distinguisher }}{{/if}} {{#if this.extraClassnames}}{{ this.extraClassnames }}{{/if}} {{#if this.isHidden}}hidden{{/if}} {{#if this.isRequired}}required{{/if}}" {{#if this.id}}id="{{ id }}"{{/if}}>
{{#if this.form-fieldset}}
{{> @form-fieldset this.form-fieldset }}
{{/if}}
{{#if this.form-radio-group}}
{{> @form-radio-group this.form-radio-group }}
{{/if}}
{{#if this.form-checkbox-group}}
{{> @form-checkbox-group this.form-checkbox-group }}
{{/if}}
{{#if this.form-select}}
{{> @form-select this.form-select }}
{{/if}}
{{#if this.form-input}}
{{> @form-input this.form-input }}
{{/if}}
{{#if this.form-range-slider}}
{{> @form-range-slider this.form-range-slider }}
{{/if}}
{{#if this.form-switch}}
{{> @form-switch this.form-switch }}
{{/if}}
{{#if this.form-textarea}}
{{> @form-textarea this.form-textarea }}
{{/if}}
{{#if this.form-input}}
{{> @form-input this.form-input }}
{{/if}}
</div>
{{/each}}
{{else}}
<div class="form-list__field {{#if this.distinguisher}}form-list__field_{{ distinguisher }}{{/if}} {{#if this.extraClassnames}}{{ this.extraClassnames }}{{/if}} {{#if this.isHidden}}hidden{{/if}} {{#if this.isRequired}}required{{/if}}"
{{#if this.id}} id="{{ id }}" {{/if}}>
{{#if this.form-fieldset}}
{{> @form-fieldset this.form-fieldset }}
{{/if}}
{{#if this.form-radio-group}}
{{> @form-radio-group this.form-radio-group }}
{{/if}}
{{#if this.form-checkbox-group}}
{{> @form-checkbox-group this.form-checkbox-group }}
{{/if}}
{{#if this.form-select}}
{{> @form-select this.form-select }}
{{/if}}
{{#if this.form-input}}
{{> @form-input this.form-input }}
{{/if}}
{{#if this.form-range-slider}}
{{> @form-range-slider this.form-range-slider }}
{{/if}}
{{#if this.form-switch}}
{{> @form-switch this.form-switch }}
{{/if}}
{{#if this.form-textarea}}
{{> @form-textarea this.form-textarea }}
{{/if}}
</div>
{{/if}}
</li>
{{/each}}
</ul>
{
"form-list": [
{
"isRequired": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "Nombre"
},
"link": {
"isInline": true,
"href": "#",
"text": "Link"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"input": {
"placeholder": "¿Cómo te llamas?",
"distinguisher": "name",
"id": "randomInputId211",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"form-select": {
"field-top": {
"label": {
"text": "Provincia"
},
"link": {
"isInline": true,
"href": "#",
"text": "Link"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"id": "where",
"select": {
"chosen-placeholder": "¿Dónde quieres comprar?",
"option": [
{
"id": "where1",
"select-name": "where",
"text": "Provincia 1"
},
{
"id": "where2",
"select-name": "where",
"text": "Provincia 2"
},
{
"id": "where3",
"select-name": "where",
"text": "Provincia 3"
}
]
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"form-input": {
"field-top": {
"label": {
"text": "Field Text"
},
"link": {
"isInline": true,
"href": "#",
"text": "Link"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"hasID": false,
"inputTitle": "Example form input",
"idComponent": "ingresosMes",
"inputValue": "5.000",
"symbol": {
"text": "€"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"form-range-slider": {
"field-top": {
"label": {
"text": "Field Text"
},
"link": {
"isInline": true,
"href": "#",
"text": "Link"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"id": "ageRangeSlider",
"range-slider": {
"id": "ageRangeInput",
"inputTitle": "Cuál es tu edad",
"validationAttributes": "min='18' max='74' data-default='30'",
"symbol": {
"text": "años"
},
"legend-start": {
"text": "18 años"
},
"legend-end": {
"text": "74 años"
}
}
}
},
{
"isRequired": true,
"form-radio-group": {
"Column": false,
"field-top": {
"fieldset": true,
"label": {
"text": "Field Text",
"fieldset": true
},
"link": {
"isInline": true,
"href": "#",
"text": "Link"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"id": "reasonBuying",
"radio-group": {
"radio-group": [
{
"id": "reasonBuyingSecond",
"isColumn": true,
"title": "Second Home",
"name": "reasonBuying",
"additionalAttributes": "checked",
"label": {
"text": "SECOND HOME",
"type": "-placeholder-m"
}
},
{
"id": "reasonBuyingRelocation",
"isColumn": true,
"title": "Relocation",
"name": "reasonBuying",
"label": {
"text": "RELOCATION",
"type": "-placeholder-m"
}
},
{
"id": "reasonBuyingOther",
"title": "Other",
"name": "reasonBuying",
"label": {
"text": "OTHER",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"form-checkbox-group": {
"field-top": {
"fieldset": true,
"label": {
"text": "Field Text",
"fieldset": true
},
"link": {
"isInline": true,
"href": "#",
"text": "Link"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"id": "moreInfo",
"checkbox-group": {
"checkbox-group": [
{
"id": "moreInfoReform",
"title": "House needs a reform",
"name": "More info",
"label": {
"text": "LA VIVIENDA NECESITA UNA REFORMA",
"type": "-placeholder-m"
}
},
{
"id": "moreInfoNotYetBuilt",
"title": "House is not yet built",
"name": "More info",
"label": {
"text": "LA CASA QUE QUIERO COMPRAR NO HA EMPEZADO A CONSTRUIRSE",
"type": "-placeholder-m"
}
},
{
"id": "moreInfoSwitchHouseActiveMortgage",
"title": "I want to switch the house, but I have an active mortgage",
"name": "More info",
"label": {
"text": "QUIERO CAMBIAR DE CASA Y YA TENGO UNA HIPOTECA ACTIVA",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"form-textarea": {
"field-top": {
"label": {
"text": "Field Text"
},
"link": {
"isInline": true,
"href": "#",
"text": "Link"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"textarea": {
"distinguisher": "Mensaje",
"id": "randomInputId211",
"type": "text",
"title": "Mensaje",
"placeholder": "Placeholder"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
}
.form-list {
&__item {
&:first-child {
.form-list {
&__field {
margin-top: 0;
}
}
}
}
&__field {
display: flex;
flex-direction: column;
height: 100%;
margin-bottom: 0;
@media (--viewport-ms-min) {
margin-bottom: 0;
}
}
&__show-password {
opacity: 0;
display: none;
}
&__valid-indicator {
position: absolute;
top: 67px;
/*top: 50%;*/
right: 10px;
opacity: 0;
transform: translate(0, -50%);
display: flex;
transition: opacity 0.3s;
@media (--viewport-ms-min) {
right: 20px;
}
.icon {
fill: var(--color-valid);
}
}
&__error-message {
position: absolute;
left: 0;
opacity: 0;
display: flex;
/*padding-top: 8px;*/
transition: opacity 0.3s;
}
&__helper-text {
position: relative;
left: 0;
display: flex;
/*padding-top: 8px;*/
.bodycopy-xs{color: var(--color-grey2);}
}
&__tooltip-label {
&_option {
&_2 {
display: none;
}
}
}
.hidden {
display: none;
&-xs {
@media (--viewport-xs-max) {
display: none;
}
&-ms {
@media (--viewport-ms-max) {
display: none;
}
}
}
&-ms {
@media (--viewport-ms-only) {
display: none;
}
&-min {
@media (--viewport-ms-min) {
display: none;
}
}
}
&-sm {
@media (--viewport-sm-only) {
display: none;
}
&-min {
@media (--viewport-sm-min) {
display: none;
}
}
}
}
}
No notes defined.