Lease Plus Form

No notes defined.

<section class="sds-contentSection -elevated">
    <div class="sds-contentSection__innerWrapper">
        <div class="sds-contentSection__inner">
            <div class="container">
                <div class="">
                    <div class="row flex-lg-row-reverse">
                        <div class="col-12 offset-lg-1 col-lg-4">
                            <div class="sds-box -insetLg -elevated sds-stackMd">
                                <h2 class="h2">
                                    Jeep

                                    <span class="sds-headingLight">Avenger Longitude BEV</span>

                                </h2>

                                <div class="sds-stackMd -stackBorder">
                                    <img class="img-fluid d-block mx-auto" src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=23&width=800&zoomType=fullscreen" alt="">
                                    <div>

                                        <table class="sds-infoTable table -noBorder">
                                            <tbody>

                                                <tr>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div class="sds-label">
                                                                Kilométrage annuel

                                                            </div>

                                                        </div>
                                                    </td>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div class="sds-textSemiBold">
                                                                10.000km/an
                                                            </div>

                                                        </div>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div class="sds-label">
                                                                Durée du leasing

                                                            </div>

                                                        </div>
                                                    </td>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div class="sds-textSemiBold">
                                                                60 mois
                                                            </div>

                                                        </div>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div class="sds-label">
                                                                mensuellement TTC

                                                            </div>

                                                        </div>
                                                    </td>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div class="sds-textSemiBold">
                                                                535,00€
                                                            </div>

                                                        </div>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div class="sds-label">
                                                                Pays

                                                            </div>

                                                        </div>
                                                    </td>
                                                    <td class="">
                                                        <div class="sds-infoTable__cellContent">

                                                            <div>
                                                                Luxembourg
                                                            </div>

                                                        </div>
                                                    </td>
                                                </tr>

                                            </tbody>
                                        </table>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-7">
                            <div class="sds-box -insetLg sds-stackLg">
                                <fieldset>
                                    <div class="form-group-xl">
                                        <label for="agence-pref-select" class="sds-label -form -large">
                                            Agence préférentielle

                                        </label>
                                        <div class="sds-select">
                                            <select id="agence-pref-select" class="sds-select form-control">

                                                <option value="opt-0">Option 1</option>

                                                <option value="opt-1">Option 2</option>

                                                <option value="opt-2">Option 3</option>

                                            </select>
                                            <span class="sds-select__arrow sds-icon sds-icon-chevrondown" aria-hidden="true"></span>

                                        </div>

                                    </div>
                                    <div class="form-group-xl">
                                        <label for="lease-plus-form-firstname" class="sds-label -form -large">
                                            Prénom

                                        </label>
                                        <div class="sds-input">
                                            <input id="lease-plus-form-firstname" class="sds-input form-control" type="text" placeholder="Entrez une communication" value="">

                                        </div>
                                    </div>
                                    <div class="form-group-xl">
                                        <label for="lease-plus-form-lastname" class="sds-label -form -large">
                                            Nom

                                        </label>
                                        <div class="sds-input">
                                            <input id="lease-plus-form-lastname" class="sds-input form-control" type="text" placeholder="Entrez une communication" value="">

                                        </div>
                                    </div>
                                    <div class="form-group-xl">
                                        <fieldset class="sds-input -phone">
                                            <label for="phone-number" class="sds-label -form -large">
                                                Numéro

                                            </label>
                                            <div class="sds-input__phoneWrapper">
                                                <div class="sds-input__phonePrefixWrapper">
                                                    <label for="phonePrefixSelect" class="sds-label sr-only">
                                                        Phone Prefix Selection

                                                    </label>
                                                    <div class="sds-select sds-input__phoneSelect">
                                                        <select id="phonePrefixSelect" class="sds-select form-control">

                                                            <option value="opt-0">+352</option>

                                                            <option value="opt-1">+33</option>

                                                            <option value="opt-2">+32</option>

                                                        </select>
                                                        <span class="sds-select__arrow sds-icon sds-icon-chevrondown" aria-hidden="true"></span>

                                                    </div>

                                                    <label for="phonePrefixCustomInput" class="sds-label sr-only">
                                                        Phone Prefix Input

                                                    </label>
                                                    <div class="sds-input__phoneCustomPrefixWrapper">
                                                        <span class="sds-input__phoneNumberPrefix">+</span>
                                                        <input class="sds-input__phoneCustomPrefix form-control" id="phonePrefixCustomInput" type="tel" placeholder="" value="">
                                                    </div>
                                                </div>
                                                <input class="form-control" id="phone-number" type="tel" placeholder="Téléphone" value="">
                                            </div>

                                        </fieldset>
                                    </div>
                                    <div class="form-group-xl">
                                        <label for="lease-plus-form-mail" class="sds-label -form -large">
                                            E-mail

                                        </label>
                                        <div class="sds-input">
                                            <input id="lease-plus-form-mail" class="sds-input form-control" type="email" placeholder="Entrez une communication" value="">

                                        </div>
                                    </div>
                                    <div class="form-group-xl">
                                        <div class="sds-checkbox custom-control custom-checkbox -alert">
                                            <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="checkbox-alert-link"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                            <label class="custom-control-label" for="checkbox-alert-link">Les données à caractère personnel collectées sont traitées dans le strict respect de la législation relative à la protection des personnes physiques à l'égard du traitement des données à caractère personnel. Vous disposez notamment d'un droit d'accès et de rectification de ces données en envoyant votre demande par message S-Net, e-mail ou courrier à l'<a href='https://www.spuerkeess.lu'>adresse suivante</a>.<br> Pour plus d'informations : <a href='https://www.spuerkeess.lu'>Data Protection Policy</a></label>

                                            <div class="sds-checkbox__error invalid-feedback">Error message</div>
                                        </div>
                                    </div>
                                </fieldset>
                                <a href="" class="sds-btn -btnPrimary">

                                    <span class="sds-btn__text">Envoyer ma demande</span>

                                    <span class="sds-icon sds-icon-arrownext"></span>

                                </a>
                                <div class="form-group-xl d-none d-lg-block">
                                    <p class="sds-formDisclaimer -small">
                                        *Devises des pays membres de l’Union européenne + CHF + ISK + NOK
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="{{ namespace }}contentSection -elevated">
	<div class="{{ namespace }}contentSection__innerWrapper">
		<div class="{{ namespace }}contentSection__inner">
			<div class="container">
				<div class="{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
					<div class="row flex-lg-row-reverse">
						<div class="col-12 offset-lg-1 col-lg-4">
							<div class="{{ namespace }}box -insetLg -elevated {{ namespace }}stackMd">
								{% render "@heading--h2-subtext",{
									text: "Jeep",
									subText: "Avenger Longitude BEV"
								},true %}
								<div class="{{ namespace }}stackMd -stackBorder">
									<img class="img-fluid d-block mx-auto" src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=23&width=800&zoomType=fullscreen" alt="">
									<div>
										{% render '@snet-info-table',{
											classes: ["-noBorder"],
											tableItems: tableItems
										}, true %}
									</div>
								</div>
							</div>
						</div>
						<div class="col-12 col-lg-7">
							<div class="{{ namespace }}box -insetLg {{ namespace }}stackLg">
								<fieldset>
									<div class="form-group-xl">
										{% render "@label--form",{
											classes: ["-large"],
											text: "Agence préférentielle",
											labelFor: "agence-pref-select"
										},true %}
										{% render "@select",{
											options: selectOptions,
											id: "agence-pref-select"
										},true %}
									</div>
									<div class="form-group-xl">
										{% render "@label--form",{
											classes: ["-large"],
											text: "Prénom",
											labelFor: "lease-plus-form-firstname"
										},true %}
										{% render "@input",{
											id: "lease-plus-form-firstname"
										},true %}
									</div>
									<div class="form-group-xl">
										{% render "@label--form",{
											classes: ["-large"],
											text: "Nom",
											labelFor: "lease-plus-form-lastname"
										},true %}
										{% render "@input",{
											id: "lease-plus-form-lastname"
										},true %}
									</div>
									<div class="form-group-xl">
										{% render "@input--phone",{
											labelClasses: ["-large"],
											labelFor: "phone-number"
										},true %}
									</div>
									<div class="form-group-xl">
										{% render "@label--form",{
											classes: ["-large"],
											text: "E-mail",
											labelFor: "lease-plus-form-mail"
										},true %}
										{% render "@input",{
											type: "email",
											id: "lease-plus-form-mail"
										},true %}
									</div>
									<div class="form-group-xl">
										{% render "@checkbox--alert-link" %}
									</div>
								</fieldset>
								{% render '@btn-primary--icon-right',{
									eltType: "a",
									icon: "icon-arrownext",
									text: "Envoyer ma demande"
								}, true %}
								<div class="form-group-xl d-none d-lg-block">
									{% render "@form-disclaimer--small",{
										text: "*Devises des pays membres de l’Union européenne + CHF + ISK + NOK"
									},true %}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>