Form: Lead

Prototype

HTML
View
Context
Info
Notes


        
        <div class="u-mb-base">

    <div class="c-stepper  u-relative u-overflow-x-auto u-mb-large">
        <div class="c-stepper__line u-size-full u-absolute u-left"></div>
        <ul class="u-flex u-row u-justify-between u-p-none u-m-none u-nowrap u-list-none u-z-base">

            <li class="c-stepper__element c-stepper__element--active o-link-primary u-flex u-items-center u-justify-center u-z-undercover">

                <span class="u-label-11">1</span>

            </li>

            <li class="c-stepper__element c-stepper__element--active o-link-primary u-flex u-items-center u-justify-center u-z-undercover">

                <span class="u-label-11">2</span>

            </li>

            <li class="c-stepper__element c-stepper__element--active o-link-primary u-flex u-items-center u-justify-center u-z-undercover">

                <span class="u-label-11">3</span>

            </li>

            <li class="c-stepper__element  o-link-primary u-flex u-items-center u-justify-center u-z-undercover">

                <span class="u-label-11">4</span>

            </li>

        </ul>
    </div>

</div>

<form id="-lead-form" action="" onsubmit="window.ga && ga( 'send', 'event', 'Community');" method="post" novalidate>
    <fieldset data-toggle="-lead-fw__step" class="fw__inputs o-divider -lead-fw__step u-pl-none u-pr-none u-mb-medium">
        <div class="u-text-center u-mb-large">
            <h1 class="u-heading-03">Informazioni personali</h1>
            <p class="u-mb-large">Inserisci le tue informazioni personali</p>
        </div>
        <div class="u-mb-base ">
            <div class="">

                <label class="u-label-04 u-color-base" for="">Nome</label>

                <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

            </div>

            <!-- TODO: REVIEW ICON POSITION -->

        </div>
        <div class="u-mb-base ">
            <div class="">

                <label class="u-label-04 u-color-base" for="">Cognome</label>

                <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

            </div>

            <!-- TODO: REVIEW ICON POSITION -->

        </div>
        <div class="u-mt-large">

            <div class="u-flex u-items-center">

                <div class="u-size-full u-size-1-2 u-text-right">
                    <input class="fw__button c-btn c-btn--primary u-label-03 u-cursor-pointer c-btn--large u-text-center" type="button" value="Avanti →" onclick="next()" />
                </div>

            </div>

        </div>
    </fieldset>
    <fieldset data-toggle="-lead-fw__step" class="fw__inputs o-divider -lead-fw__step u-pl-none u-pr-none u-mb-medium">
        <div class="u-text-center u-mb-large">
            <h1 class="u-heading-03">Informazioni aziendali</h1>
            <p class="u-mb-large">Inserisci le tue informazioni aziendali</p>
        </div>
        <div class="u-mb-base ">
            <div class="">

                <label class="u-label-04 u-color-base" for="">Ragione sociale</label>

                <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

            </div>

            <!-- TODO: REVIEW ICON POSITION -->

        </div>
        <div class="u-mb-base ">

            <label class="u-label-04 u-color-base u-inline-block" for="">Provincia</label>

            <select class=" u-block u-size-full" name="select-name" id="select-id">

                <option>option 1</option>

                <option>option 2</option>

                <option>option 3</option>

                <option>option 4</option>

            </select>

        </div>
        <div class="u-mt-large">

            <div class="u-flex u-items-center">

                <div class="u-size-full u-size-1-2 ">
                    <input class="c-btn c-btn--default u-label-03 u-cursor-pointer c-btn--large u-text-center" type="button" value="← Indietro" onclick="back()" />
                </div>

                <div class="u-size-full u-size-1-2 u-text-right">
                    <input class="fw__button c-btn c-btn--primary u-label-03 u-cursor-pointer c-btn--large u-text-center" type="button" value="Avanti →" onclick="next()" />
                </div>

            </div>

        </div>
    </fieldset>
    <fieldset data-toggle="-lead-fw__step" class="fw__inputs o-divider -lead-fw__step u-pl-none u-pr-none u-mb-medium">
        <div class="u-text-center u-mb-large">
            <h1 class="u-heading-03">Informazioni aziendali</h1>
            <p class="u-mb-large">Inserisci le tue informazioni aziendali</p>
        </div>
        <div class="u-mb-base ">
            <div class="">

                <label class="u-label-04 u-color-base" for="">Email</label>

                <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

            </div>

            <!-- TODO: REVIEW ICON POSITION -->

        </div>
        <div class="u-mb-base ">
            <div class="">

                <label class="u-label-04 u-color-base" for="">Telefono</label>

                <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

            </div>

            <!-- TODO: REVIEW ICON POSITION -->

        </div>
        <div class="u-mb-base ">

            <label class="u-label-04 u-color-base u-inline-block" for="">Orario di contatto</label>

            <select class=" u-block u-size-full" name="select-name" id="select-id">

                <option>option 1</option>

                <option>option 2</option>

                <option>option 3</option>

                <option>option 4</option>

            </select>

        </div>
        <div class="u-mt-large">

            <div class="u-flex u-items-center">

                <div class="u-size-full u-size-1-2 ">
                    <input class="c-btn c-btn--default u-label-03 u-cursor-pointer c-btn--large u-text-center" type="button" value="← Indietro" onclick="back()" />
                </div>

                <div class="u-size-full u-size-1-2 u-text-right">
                    <input class="fw__button c-btn c-btn--primary u-label-03 u-cursor-pointer c-btn--large u-text-center" type="button" value="Avanti →" onclick="next()" />
                </div>

            </div>

        </div>
    </fieldset>
    <fieldset data-toggle="-lead-fw__step" class="fw__inputs o-divider -lead-fw__step u-pl-none u-pr-none u-mb-medium">
        <div class="u-text-center u-mb-large">
            <h1 class="u-heading-03">Informazioni di contatto</h1>
            <p class="u-mb-large">Inserisci le tue informazioni di contatto</p>
        </div>
        <div class="u-mb-base ">
            <label class="c-form-switch u-relative">
                <input type="checkbox">
                <span class="c-form-switcher u-absolute u-top u-left u-right u-bottom u-cursor-pointer"></span>
                <span class="c-form-label">Ho letto e accetto l&#39;informativa sulla privacy</span>
            </label>
        </div>
        <div class="u-mb-base ">
            <label class="c-form-switch u-relative">
                <input type="checkbox">
                <span class="c-form-switcher u-absolute u-top u-left u-right u-bottom u-cursor-pointer"></span>
                <span class="c-form-label">Acconsento al trattamento dei dati personali</span>
            </label>
        </div>
        <!-- capcha -->
        <div class="u-mb-base">
            <div class="g-recaptcha" data-sitekey="6Lc-cA4UAAAAAOlLBnjwQ9SKqQ8eJLlUP-evJawo">g-recaptcha</div>

        </div>
        <!-- end capcha -->
        <div class="u-mt-large">

            <div class="u-flex u-items-center">

                <div class="u-size-full u-size-1-2 ">
                    <input class="c-btn c-btn--default u-label-03 u-cursor-pointer c-btn--large u-text-center" type="button" value="← Indietro" onclick="back()" />
                </div>

                <div class="u-size-full u-size-1-2 u-text-right">
                    <input class="fw__button c-btn c-btn--primary u-label-03 u-cursor-pointer c-btn--large u-text-center" type="submit" value="" />
                </div>

            </div>

        </div>
    </fieldset>
    <section data-toggle="-lead-fw__step" class="fw__result -lead-fw__step">

        <div class="u-mb-large">
            <h2 class="u-heading-03 u-text-center">Grazie per averci contattato</h2>
            <p class="u-mb-large u-text-center">Ti ringraziamo per il tuo contatto...</p>
            <div class="u-mb-base">
                <a href="#" class="c-btn c-btn--primary u-label-04 u-cursor-pointer c-btn--large u-text-center u-block u-no-underline">Leggi
                    le ultime notizie</a>
            </div>
        </div>
        <div id="results" class="u-mb-large u-mt-large"></div>
    </section>
</form>

<script>
    window.onload = function() {
        var stepIndex = 0;
    }
    // var modeToggle = document.getElementsByClassName("input:radio[name=c-tabs__choice]:checked");
    // const stepElements = document.querySelector('[data-toggle-step]');
    var stepElements = document.getElementsByClassName("mode-lead-fw__step");
    var form = document.getElementById("mode-lead-form");
    var breadcrumbsItems = document.getElementsByClassName("c-stepper__element");
    // Initialise the form
    function init() {
        // Reset the step
        stepIndex = 0;
        // Clear all fields
        form.reset();
        toggleBreadcrumbsStep();
        showCurrentStep();
        breadcrumbsItems.classList.add("c-stepper__element--active");
    }
    // Indicate the current step with breadcrumbs
    function toggleBreadcrumbsStep() {
        Array.from(breadcrumbsItems).forEach(function(el, index) {
            if (index <= stepIndex) {
                el.classList.add("c-stepper__element--active");
            } else {
                el.classList.remove("c-stepper__element--active");
            }
        });
    }
    // Show the current step and hide the rest
    function showCurrentStep() {
        Array.from(stepElements).forEach(function(el, index) {
            if (index !== stepIndex) {
                el.classList.add("u-none");
            } else {
                el.classList.remove("u-none");
            }
        });
    }
    // Next step action, all fields in current step must be validated before proceed to next step.
    function next() {
        const fields = stepElements[stepIndex].querySelectorAll("input:not([type=button]):not([type=submit]), select");
        // Increment step
        stepIndex++;
        toggleBreadcrumbsStep();
        showCurrentStep();
    }
    // Back button action to navigate 1 step back
    function back() {
        // Clear all fields in current step
        const fields = stepElements[stepIndex].querySelectorAll("input:not([type=button]):not([type=submit]), select");
        Array.from(fields).forEach(function(field) {
            const tagName = field.tagName;
            if (tagName.localeCompare("INPUT") === 0) {
                field.value = '';
            } else if (tagName.localeCompare("SELECT") === 0) {
                field.selectedIndex = 0;
            }
        });
        // Decrement step
        stepIndex--;
        toggleBreadcrumbsStep();
        showCurrentStep();
    }
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        const fields = stepElements[stepIndex].querySelectorAll("input:not([type=button]):not([type=submit]), select");
        // all fields in current step must be validated before submission.
        // Prepare the result in next view
        showResult();
        // Navigate to result
        stepIndex++;
        // toggleBreadcrumbsStep();
        showCurrentStep();
    }, false);

    function showResult() {
        const resultsContainer = document.getElementById("results");
        // Make sure the result page is empty
        resultsContainer.innerHTML = "";
        const fields = form.querySelectorAll("input:not([type=button]):not([type=submit]), select");
        // List out all data
        fields.forEach(field => {
            const fieldLabel = field.getAttribute("data-label");
            const fieldValue = field.value;
            const resultItem = document.createElement("li");
            resultItem.setAttribute("class", "fw__result__item");
            resultItem.innerHTML = '<span class="fw__result__label">' + fieldLabel + ':</span> <strong class="fw__result__value">' + fieldValue + '</strong>';
            resultsContainer.append(resultItem);
        });
    }
    init();
</script>


        <div class="u-mb-base">
{% render "@stepper",{steps:steps},true %}
</div>

<form id="{{mode}}-{{type}}-form" action="" onsubmit="window.ga && ga( 'send', 'event', 'Community');" method="post"
	novalidate>
	<fieldset data-toggle="{{mode}}-{{type}}-fw__step"
		class="fw__inputs o-divider {{mode}}-{{type}}-fw__step u-pl-none u-pr-none u-mb-medium">
		<div class="u-text-center u-mb-large">
			<h1 class="u-heading-03">Informazioni personali</h1>
			<p class="u-mb-large">Inserisci le tue informazioni personali</p>
		</div>
		<div class="u-mb-base {% if error %}c-form-error{% endif %}">
			{% render "@input--default", {label:'Nome', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel', helper:false}, true %}
		</div>
		<div class="u-mb-base {% if error %}c-form-error{% endif %}">
			{% render "@input--default", {label:'Cognome', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel', helper:false}, true %}
		</div>
		<div class="u-mt-large">
			{% render "@stepcontrols", {
				submitForm: 'false',
				actionLabel: actionLabel,
				prevStep: 'FALSE',
				prevStepIndex: 'FALSE',
				prevStepForLabel: '',
				nextStep: 'TRUE',
				skipStep: 'FALSE',
				backLabel:'← Indietro',
				nextLabel:'Avanti →',
				mode: mode,
				type: type
			}, true %}
		</div>
	</fieldset>
	<fieldset data-toggle="{{mode}}-{{type}}-fw__step"
		class="fw__inputs o-divider {{mode}}-{{type}}-fw__step u-pl-none u-pr-none u-mb-medium">
		<div class="u-text-center u-mb-large">
			<h1 class="u-heading-03">Informazioni aziendali</h1>
			<p class="u-mb-large">Inserisci le tue informazioni aziendali</p>
		</div>
		<div class="u-mb-base {% if error %}c-form-error{% endif %}">
			{% render "@input--default", {label:'Ragione sociale', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel', helper:false}, true %}
		</div>
		<div class="u-mb-base {% if error %}c-form-error{% endif %}">
			{% render "@select", {label:'Provincia', helper:false}, true %}
		</div>
		<div class="u-mt-large">
			{% render "@stepcontrols", {
				submitForm: 'false',
				actionLabel: actionLabel,
				prevStep: 'TRUE',
				prevStepIndex: 'FALSE',
				prevStepForLabel: '',
				nextStep: 'TRUE',
				skipStep: 'FALSE',
				backLabel:'← Indietro',
				nextLabel:'Avanti →',
				mode: mode,
				type: type
			}, true %}
		</div>
	</fieldset>
	<fieldset data-toggle="{{mode}}-{{type}}-fw__step"
		class="fw__inputs o-divider {{mode}}-{{type}}-fw__step u-pl-none u-pr-none u-mb-medium">
		<div class="u-text-center u-mb-large">
			<h1 class="u-heading-03">Informazioni aziendali</h1>
			<p class="u-mb-large">Inserisci le tue informazioni aziendali</p>
		</div>
		<div class="u-mb-base {% if error %}c-form-error{% endif %}">
			{% render "@input--default", {label:'Email', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel', helper:false}, true %}
		</div>
		<div class="u-mb-base {% if error %}c-form-error{% endif %}">
			{% render "@input--default", {label:'Telefono', placeholder:'Placeholder tex', fieldLabel:'placeholderfieldLabel', helper:false}, true %}
		</div>
		<div class="u-mb-base {% if error %}c-form-error{% endif %}">
			{% render "@select", {label:'Orario di contatto', helper:false}, true %}
		</div>
		<div class="u-mt-large">
			{% render "@stepcontrols", {
				submitForm: 'false',
				actionLabel: actionLabel,
				prevStep: 'TRUE',
				prevStepIndex: 'FALSE',
				prevStepForLabel: '',
				nextStep: 'TRUE',
				skipStep: 'FALSE',
				backLabel:'← Indietro',
				nextLabel:'Avanti →',
				mode: mode,
				type: type
			}, true %}
		</div>
	</fieldset>
	<fieldset data-toggle="{{mode}}-{{type}}-fw__step"
		class="fw__inputs o-divider {{mode}}-{{type}}-fw__step u-pl-none u-pr-none u-mb-medium">
		<div class="u-text-center u-mb-large">
			<h1 class="u-heading-03">Informazioni di contatto</h1>
			<p class="u-mb-large">Inserisci le tue informazioni di contatto</p>
		</div>
		<div class="u-mb-base {% if errors %}c-form-error{% endif %}">
			{% render "@switch", {label:"Ho letto e accetto l'informativa sulla privacy"}, true %}
		</div>
		<div class="u-mb-base {% if errors %}c-form-error{% endif %}">
			{% render "@switch", {label:'Acconsento al trattamento dei dati personali'}, true %}
		</div>
		<!-- capcha -->
		<div class="u-mb-base">
			{% render "@capcha", {}, true %}
		</div>
		<!-- end capcha -->
		<div class="u-mt-large">
			{% render "@stepcontrols", {
				submitForm: 'TRUE',
				actionLabel: actionLabel,
				prevStep: 'TRUE',
				prevStepIndex: 'FALSE',
				prevStepForLabel: '',
				nextStep: 'FALSE',
				skipStep: 'FALSE',
				backLabel:'← Indietro',
				nextLabel:'Avanti →',
				mode: mode,
				type: type
			}, true %}
		</div>
	</fieldset>
	<section data-toggle="{{mode}}-{{type}}-fw__step" class="fw__result {{mode}}-{{type}}-fw__step">
		{# <div class="u-m-large u-text-center">
			<img class="end-widzard-illustration" src="{{succededImg}}" alt=" {{actionLabel }} illustration">
		</div> #}
		<div class="u-mb-large">
			<h2 class="u-heading-03 u-text-center">Grazie per averci contattato</h2>
			<p class="u-mb-large u-text-center">Ti ringraziamo per il tuo contatto...</p>
			<div class="u-mb-base">
				<a href="#"
					class="c-btn c-btn--primary u-label-04 u-cursor-pointer c-btn--large u-text-center u-block u-no-underline">Leggi
					le ultime notizie</a>
			</div>
		</div>
		<div id="results" class="u-mb-large u-mt-large"></div>
	</section>
</form>

{% render "@js--form", {
    type:type, 
    mode:mode
}, true %}


        
            
            {
  "limit": 9,
  "stories": [
    {
      "index": 1,
      "title": "Coronavirus, la fase 2 tra sicurezza e libertà: tutte le idee per ripartire",
      "label": "Emergenza Coronavirus",
      "date": "ieri pomeriggio, 15:51",
      "author": "Violetto Gorrasi",
      "number": 1,
      "summary": "\"Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti\", dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/51380415156697/coronavirus-ansa-4-2-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/51380415156697/coronavirus-ansa-4-2-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 2,
      "title": "Casa di riposo degli orrori: anziani legati e bastonati. Le immagini shock",
      "label": "Sei arresti",
      "date": "ieri pomeriggio, 15:51",
      "author": "Matteo Scarlino",
      "number": 2,
      "summary": "\"Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti\", dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/19878683460037/casa-di-riposo-palermo-ansa-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/19878683460037/casa-di-riposo-palermo-ansa-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 3,
      "title": "Coronavirus, negli Usa 2.500 morti in un giorno ma Trump \"ha fretta\" di riaprire",
      "label": "Esteri",
      "date": "ieri pomeriggio, 15:51",
      "author": "Fabio Grilli",
      "number": 3,
      "summary": "\"Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti\", dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/31908412136750/donald-trump-coronavirus-ansa-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/31908412136750/donald-trump-coronavirus-ansa-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 4,
      "title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Ginevra Nozzoli",
      "number": 4,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 5,
      "title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Veronica Altimari",
      "number": 5,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 6,
      "title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Alberto Berlini",
      "number": 6,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 7,
      "title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Ginevra Nozzoli",
      "number": 7,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 8,
      "title": "Muore annegato nella piscina comunale il giorno prima di compiere 7 anni",
      "label": "Lo studio del Touring Club italiano",
      "date": "ieri pomeriggio, 15:51",
      "author": "Fabio Grilli",
      "number": 8,
      "summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/65846868204321/pisicina-comunale-ansa-archivio-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/65846868204321/pisicina-comunale-ansa-archivio-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    },
    {
      "index": 9,
      "title": "Riceve il reddito di cittadinanza, ma ha 40 case e percepisce 120mila euro d'affitto",
      "label": "Economia",
      "date": "ieri pomeriggio, 15:51",
      "author": "Fabio Grilli",
      "number": 9,
      "summary": "L'uomo è stato denunciato dalla Guardia di finanza a Lanciano, in provincia di Chieti. Gli immobili affittati, oltre quindici, secondo le Fiamme Gialle rendevano alla famiglia del beneficiario del sussidio oltre 120mila euro all'anno",
      "media": {
        "horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/56625536121153/evasione-fiscale-controlli-finanza-ansa-2.jpg",
        "vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/56625536121153/evasione-fiscale-controlli-finanza-ansa-2.jpg",
        "square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
      }
    }
  ],
  "opinions": [
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "17 luglio, 2020",
      "author": "Carlo Sala"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "12 luglio, 2020",
      "author": "Massimiliano Dona"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "30 giugno, 2020",
      "author": "Luciano Lanna"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "05 giugno, 2020",
      "author": "Marilia Parente"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "27 maggio, 2020",
      "author": "Dario Balotta"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "13 aprile, 2020",
      "author": "Rossella Lamina"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "11 aprile, 2020",
      "author": "Dario Balotta"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "04 marzo, 2020",
      "author": "Luciano Lanna"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "18 febbraio, 2020",
      "author": "Dario Balotta"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "01 febbraio, 2020",
      "author": "Rossella Lamina"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "25 gennaio, 2020",
      "author": "Dario Balotta"
    },
    {
      "title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
      "date": "05 gennaio, 2020",
      "author": "Luciano Lanna"
    }
  ],
  "googlePlayStoreImg": "/assets/images/site/app/google_play_store.svg",
  "iosAppStoreImg": "/assets/images/site/app/ios_app_store.svg",
  "type": "lead",
  "steps": 5,
  "switchPrivacy": "Ho letto <a>fgddg</a>",
  "switchPersonalData": "Acconsento <a>fgddg</a>",
  "succededImg": "/assets/images/site/illustrations/end_wizard_lead-min.svg"
}

Handle: @form--lead
Variants (20): Default , Avatar , Login , Logout , Delete , Recovery , Activate , Signup , Buysignup , Buysignupshort , Signup Social , Edit , Edit Profile , Edit Subscriptions , Edit Payments , Edit Arguments , Edit Notifications , Lead , Buy , Subscription
Preview:
- With layout
- Component only
Filesystem Path: src/lib/templates/form/form--lead.njk
References (7): @stepper, @input--default, @stepcontrols, @select, @switch, @capcha, @js--form
Referenced by (1): @lead

Forms templates

Items templates are used to display forms.

Parameters

type - toggle input email/phone, accepted values: login, logout, recovery, delete, activate, signup, edit, lead
mode - toggle input email/phone, accepted values: email, phone, social, user,
zoneRequired - toggle required zone fieldset, accepted values: bolean

Variants

Default - Unused
Login - Used for login form
Logout - Used for logout form
Delete - Used for delete account
Recovery - Used for recovery credentials
Activate - Used for activate account
Signup - Used for new account registration
Edit - Used for edit user profile
Lead - Used for marketing lead generation