Philipp Lang
4 years ago
5 changed files with 185 additions and 145 deletions
@ -1,81 +1,66 @@ |
|||
<div> |
|||
<h2 class="gradient">Geben Sie Ihre persönlichen Daten ein</h2> |
|||
|
|||
<div class="form-container"> |
|||
<div class="field-grid"> |
|||
|
|||
<label for="greeting"> |
|||
<span>Anrede</span> |
|||
<select x-model="value.greeting" id="greeting"> |
|||
<template x-for="greeting in greetings"> |
|||
<option :value="greeting.value" x-text="greeting.label"></option> |
|||
</template> |
|||
</select> |
|||
</label> |
|||
|
|||
<label for="title"> |
|||
<span>Titel</span> |
|||
<select x-model="value.title" id="title"> |
|||
<template x-for="title in titles"> |
|||
<option :value="title.value" x-text="title.label"></option> |
|||
</template> |
|||
</select> |
|||
</label> |
|||
|
|||
<label for="firstname"> |
|||
<span>Vorname</span> |
|||
<input type="text" x-model="value.firstname" id="firstname"> |
|||
</label> |
|||
|
|||
<label for="lastname"> |
|||
<span>Nachname</span> |
|||
<input type="text" x-model="value.lastname" id="lastname"> |
|||
</label> |
|||
<div class="geschafft"> |
|||
<div class="check-geschafft"> |
|||
<h3>Fast geschafft!</h3> |
|||
<p>Wir ermitteln jetzt das passende Finanzierungsangebot für Sie und prüfen Ihre Finanzierung bei der Bank innerhalb 48 Stunden.</p> |
|||
</div> |
|||
</div> |
|||
<h2 class="gradient">Für die Angebotserstellung benötigen wir noch Kontaktdaten von Ihnen</h2> |
|||
|
|||
<label for="zip"> |
|||
<span>PLZ</span> |
|||
<input type="text" x-model="value.zip" id="zip"> |
|||
<div class="form-container last-step"> |
|||
<div class="field-grid stepper-contact"> |
|||
<div class="one-half"> |
|||
<label for="firstname" :class="{'is-invalid': error('firstname')}"> |
|||
<span>Vorname <span class="required-star">*</span></span> |
|||
<input type="text" x-model="value.firstname" id="firstname" placeholder="Max"> |
|||
<var class="field-error" x-show="error('firstname')" x-text="error('firstname')"></var> |
|||
</label> |
|||
|
|||
<label for="location"> |
|||
<span>Ort</span> |
|||
<input type="text" x-model="value.location" id="location"> |
|||
<label for="lastname" :class="{'is-invalid': error('lastname')}"> |
|||
<span>Nachname <span class="required-star">*</span></span> |
|||
<input type="text" x-model="value.lastname" id="lastname" placeholder="Mustermann"> |
|||
<var class="field-error" x-show="error('lastname')" x-text="error('lastname')"></var> |
|||
</label> |
|||
</div> |
|||
<div class="one-half"> |
|||
|
|||
<label for="phone"> |
|||
<span>Telefon</span> |
|||
<input type="tel" x-model="value.phone" id="phone"> |
|||
<label for="phone" :class="{'is-invalid': error('phone')}"> |
|||
<span>Telefon <span class="required-star">*</span></span> |
|||
<input type="tel" x-model="value.phone" id="phone" placeholder="0212 123456"> |
|||
<var class="field-error" x-show="error('phone')" x-text="error('phone')"></var> |
|||
</label> |
|||
|
|||
<label for="email"> |
|||
<span>E-Mail-Adresse</span> |
|||
<input type="email" x-model="value.email" id="email"> |
|||
<label for="email" :class="{'is-invalid': error('email')}"> |
|||
<span>E-Mail-Adresse <span class="required-star">*</span></span> |
|||
<input type="email" x-model="value.email" id="email" placeholder="max@mustermann.de"> |
|||
<var class="field-error" x-show="error('email')" x-text="error('email')"></var> |
|||
</label> |
|||
|
|||
<label for="job"> |
|||
<span>Beruf des Hauptverdieners</span> |
|||
<select x-model="value.job" id="job"> |
|||
<template x-for="job in jobs"> |
|||
<option :value="job.value" x-text="job.label"></option> |
|||
</template> |
|||
</select> |
|||
</div> |
|||
<h4>Optionale Bedürfnisse (Förderung & Modernisierungsarbeiten)</h4> |
|||
<div class="open-query"> |
|||
<label for="modernisierung" class="fancy-checkbox"> |
|||
<input type="checkbox" x-model="value.modernisierung" id="modernisierung"> |
|||
<span>Ich benötige Hilfe bei der Planung der Modernisierungsarbeiten sowie der dazugehörigen Kostenaufstellung. RCK stellt den Hauseigenen Architekten für ein Informationsgespräch kostenfrei zur Verfügung.</span> |
|||
</label> |
|||
|
|||
<label for="haushalt"> |
|||
<span>Haushaltsnetto monatlich</span> |
|||
<input type="text" x-model="value.haushalt" id="haushalt"> |
|||
<label for="energetisch" class="fancy-checkbox"> |
|||
<input type="checkbox" x-model="value.energetisch" id="energetisch"> |
|||
<span>Ich interessiere mich für die energetische Förderung durch Photovoltaik, Solar, Erdwärme etc.. RCK verfügt über hervorragende Verbindungen zu Fördermittelberatern und Produktanbietern (made in Germany).</span> |
|||
</label> |
|||
|
|||
<label for="einnahme"> |
|||
<span>Netto-Mieteinnahme monatlich</span> |
|||
<input type="text" x-model="value.einnahme" id="einnahme"> |
|||
</div> |
|||
<label for="datenschutz" class="fancy-checkbox" :class="{'is-invalid': error('datenschutz')}"> |
|||
<input type="checkbox" x-model="value.datenschutz" id="datenschutz"> |
|||
<span>Ich habe die <a href="/datenschutzerklaerung/" target="_blank">Datenschutzerklärung</a> zur Kenntnis genommen.</span> |
|||
<var class="field-error" x-show="error('datenschutz')" x-text="error('datenschutz')"></var> |
|||
</label> |
|||
|
|||
<div class="button-row"> |
|||
<button @click="slideTo($event, step-1)" type="button">Zurück</button> |
|||
<button type="submit">Absenden</button> |
|||
<div class="button-row letzter-step"> |
|||
<button type="submit" class="weiter-step">Finanzierungsangebot erhalten</button> |
|||
</div> |
|||
<div class="usp-form"> |
|||
<ul> |
|||
<li>SSL Verschlüsselt</li> |
|||
<li>Schnelle Rückmeldung</li> |
|||
</ul> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
Loading…
Reference in new issue