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> |
|||
|
|||
<label for="zip"> |
|||
<span>PLZ</span> |
|||
<input type="text" x-model="value.zip" id="zip"> |
|||
</label> |
|||
|
|||
<label for="location"> |
|||
<span>Ort</span> |
|||
<input type="text" x-model="value.location" id="location"> |
|||
</label> |
|||
|
|||
<label for="phone"> |
|||
<span>Telefon</span> |
|||
<input type="tel" x-model="value.phone" id="phone"> |
|||
</label> |
|||
|
|||
<label for="email"> |
|||
<span>E-Mail-Adresse</span> |
|||
<input type="email" x-model="value.email" id="email"> |
|||
</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> |
|||
</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="haushalt"> |
|||
<span>Haushaltsnetto monatlich</span> |
|||
<input type="text" x-model="value.haushalt" id="haushalt"> |
|||
</label> |
|||
<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="einnahme"> |
|||
<span>Netto-Mieteinnahme monatlich</span> |
|||
<input type="text" x-model="value.einnahme" id="einnahme"> |
|||
</label> |
|||
<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"> |
|||
|
|||
<div class="button-row"> |
|||
<button @click="slideTo($event, step-1)" type="button">Zurück</button> |
|||
<button type="submit">Absenden</button> |
|||
</div> |
|||
<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> |
|||
|
|||
</div> |
|||
<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> |
|||
</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="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> |
|||
</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 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> |
|||
@ -1,74 +1,93 @@ |
|||
<div x-show="value.kind == '{{kind}}'"> |
|||
<h2 class="gradient">Ihr Bauvorhaben</h2> |
|||
{% if kind == 'bau' %} <h4 class="sub-was-second">Schritt 2 von 3:</h4> |
|||
<h2 class="gradient" style="padding-top:0;">Das Vorhaben in Zahlen</h2>{% endif %} |
|||
{% if kind == 'kauf' %} <h4 class="sub-was-second">Schritt 2 von 3:</h4> |
|||
<h2 class="gradient" style="padding-top:0;">Das Vorhaben in Zahlen</h2>{% endif %} |
|||
|
|||
|
|||
<div class="form-container"> |
|||
<div class="form-grid"> |
|||
<label>{{main.label}}</label> |
|||
<input type="tel" {{cprop('value.' ~ kind ~ '.' ~ main.value, 'currency') | raw}}> |
|||
<span class="unit">€</span> |
|||
<label>{{main.label}} <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg"> |
|||
{% if kind == 'bau' %} <div class="open-popup">Notariell zu vereinbarender Kaufpreis.</div> {% endif %} |
|||
{% if kind == 'kauf' %} <div class="open-popup">Notariell zu vereinbarender Kaufpreis, möglichst ohne Zubehör wie Küche, Gartenmöbel, Rasenmäher etc.</div> {% endif %} |
|||
</span></label> |
|||
<input type="tel" {{cprop('value.' ~ kind ~ '.' ~ main.value, 'currency') | raw}}> |
|||
<span class="unit">€</span> |
|||
</div> |
|||
{% if bezahlt %} |
|||
<div class="form-grid"> |
|||
<label>Bereits bezahlt?</label> |
|||
<select name="bezahlt" x-model="value.{{kind}}.bezahlt"> |
|||
<option value="1">Ja</option> |
|||
<option value="0">Nein</option> |
|||
</select> |
|||
<label>Bereits bezahlt? <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg"> |
|||
<div class="open-popup">Kaufpreis fürs Grundstück, Planungskosten etc.).</div> |
|||
</span></label> |
|||
<select name="bezahlt" x-model="value.{{kind}}.bezahlt"> |
|||
<option value="1">Ja</option> |
|||
<option value="0">Nein</option> |
|||
</select> |
|||
</div> |
|||
{% endif %} |
|||
<div class="separator"></div> |
|||
<div class="form-grid"> |
|||
<label>{{second.label}}</label> |
|||
<input type="tel" {{cprop('value.' ~ kind ~ '.' ~ second.value, 'currency') | raw}}> |
|||
<span class="unit">€</span> |
|||
<label class="plus">{{second.label}} <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg"> |
|||
{% if kind == 'bau' %} <div class="open-popup">Kosten zur Herstellung des Gebäudes inkl. Baunebenkosten wie Planung durch Architekt und Fachingenieure etc.</div> {% endif %} |
|||
{% if kind == 'kauf' %} <div class="open-popup">Alle Kosten für Material + Lohn für z.B. Malerarbeiten.</div> {% endif %} |
|||
</span></label> |
|||
<input type="tel" {{cprop('value.' ~ kind ~ '.' ~ second.value, 'currency') | raw}}> |
|||
<span class="unit">€</span> |
|||
</div> |
|||
<div class="separator"></div> |
|||
<div class="form-grid"> |
|||
<label>Notar- & Gerichtskosten</label> |
|||
<span> |
|||
<span class="result-label" x-text="units.percent.to(parts.notar * 100)"></span> |
|||
<span class="result" x-text="units.currency.to(value.{{kind}}.{{main.value}} * parts.notar)"></span> |
|||
<label class="plus">Notar- & Gerichtskosten</label> |
|||
<span class="text-right"> |
|||
<span class="result-label prozent-zahl" x-text="units.percent.to(parts.notar * 100)"></span>% |
|||
<span class="result wert-zahl" x-text="units.currency.to(value.{{kind}}.{{main.value}} * parts.notar)"></span> |
|||
</span> |
|||
<span class="unit">€</span> |
|||
</div> |
|||
<div class="separator primary"></div> |
|||
<div class="separator"></div> |
|||
<div class="form-grid"> |
|||
<label>Grunderwerbsteuer</label> |
|||
<span> |
|||
<span class="result-label" x-text="units.percent.to(parts.grundsteuer * 100)"></span> |
|||
<span class="result" x-text="units.currency.to(value.{{kind}}.{{main.value}} * parts.grundsteuer)"></span> |
|||
<label class="plus">Grunderwerbsteuer</label> |
|||
<span class="text-right"> |
|||
<span class="result-label prozent-zahl" x-text="units.percent.to(parts.grundsteuer * 100)"></span>% |
|||
<span class="result wert-zahl" x-text="units.currency.to(value.{{kind}}.{{main.value}} * parts.grundsteuer)"></span> |
|||
</span> |
|||
<span class="unit">€</span> |
|||
<span class="comment">Diese Beträge sind gesetzlich vorgegeben und werden deshalb automatisch ermittelt.</span> |
|||
</div> |
|||
<div class="separator"></div> |
|||
<div class="form-grid"> |
|||
<label> |
|||
<label class="plus"> |
|||
Makler |
|||
<span x-html="`${units.percent.to(parts.makler * 100)} %`"></span> |
|||
</label> |
|||
<input type="tel" :value="units.currency.to(value.{{kind}}.{{main.value}} * parts.makler)" |
|||
@focus="$event.target.value = Math.round(value.{{kind}}.{{main.value}} * parts.makler)" |
|||
@blur="console.log($event); ($event.target || $event.originalTarget).value = units.currency.to(value.{{kind}}.{{main.value}} * parts.makler);" |
|||
@change="console.log('change'); parts.makler = units.currency.from($event.target.value) / value.{{kind}}.{{main.value}};" |
|||
> |
|||
<span class="unit">€</span> |
|||
<span class="comment">Die vorgeschlagene Maklercourtage gentspricht der regional üblichen Höhe. Sie können diese jedoch bei Bedarf verändern oder auch komplett entfallen lassen.</span> |
|||
<span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg"> |
|||
<div class="open-popup">s.o.</div> |
|||
</span></label> |
|||
<input type="tel" :value="units.currency.to(value.{{kind}}.{{main.value}} * parts.makler)" @focus="$event.target.value = Math.round(value.{{kind}}.{{main.value}} * parts.makler)" |
|||
@blur="console.log($event); ($event.target || $event.originalTarget).value = units.currency.to(value.{{kind}}.{{main.value}} * parts.makler);" |
|||
@change="console.log('change'); parts.makler = units.currency.from($event.target.value) / value.{{kind}}.{{main.value}};"> |
|||
<span class="unit">€</span> |
|||
<span class="comment">Die vorgeschlagene Maklercourtage entspricht der regional üblichen Höhe. Sie können diese jedoch bei Bedarf verändern oder auch komplett entfallen lassen.</span> |
|||
</div> |
|||
<div class="separator"></div> |
|||
<div class="form-grid"> |
|||
<label>Eigenkapital</label> |
|||
<input type="tel" {{cprop('value.' ~ kind ~ '.eigenkapital', 'currency') | raw}}> |
|||
<span class="unit">€</span> |
|||
<label class="minus">Eigenkapital <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg"> |
|||
<div class="open-popup">Bitte nur das Kapital ansetzen, dass Sie wirklich auch einsetzen wollen.</div> |
|||
</span></label> |
|||
<input type="tel" {{cprop('value.' ~ kind ~ '.eigenkapital', 'currency') | raw}}> |
|||
<span class="unit">€</span> |
|||
</div> |
|||
<div class="separator primary"></div> |
|||
<div> |
|||
<div><span>=</span>Darlehensbetrag</div> |
|||
<div x-text="units.currency.to( Math.round((value.{{kind}}.{{main.value}} * (1+parts.notar+parts.grundsteuer+parts.makler) + value.{{kind}}.{{second.value}} - value.{{kind}}.eigenkapital) / 1000)*1000 )"></div> |
|||
<div class="form-grid darlehen-grid"> |
|||
<div class="darlehen-name"><span class="yellow-darlehen">=</span>Darlehensbetrag <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg"> |
|||
<div class="open-popup">Der Betrag, der durch die Bank finanziert wird.</div> |
|||
</span></div> |
|||
<div class="text-right darlehen-zahl" |
|||
x-text="units.currency.to( Math.round((value.{{kind}}.{{main.value}} * (1+parts.notar+parts.grundsteuer+parts.makler) + value.{{kind}}.{{second.value}} - value.{{kind}}.eigenkapital - (value.{{kind}}.bezahlt == 1 ? value.{{kind}}.grundstueckspreis : 0)) / 1000)*1000 )"> |
|||
</div><span class="unit" style="font-weight:bold;">€</span> |
|||
</div> |
|||
<div class="separator gray"></div> |
|||
<div class="button-row"> |
|||
<button @click="slideTo($event, step-1)" type="button">Zurück</button> |
|||
<button @click="slideTo($event, step+1)" type="button">Werte übernehmen und weiter zum letzten Schritt</button> |
|||
<button @click="slideTo($event, step-1)" type="button" class="zurueck-step">Zurück</button> |
|||
<button @click="slideTo($event, step+1)" type="button" class="weiter-step">Weiter zum letzten Schritt</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
Loading…
Reference in new issue