Move extended contact form to contact.html, remove anfrage.html, increase distance between form columns.

(cherry picked from commit 99981b7a16)
dev
Harald Wolff 2022-02-06 18:30:13 +01:00
parent e10a93eb39
commit 0b9898285a
1 changed files with 601 additions and 208 deletions

View File

@ -107,32 +107,425 @@
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 text-center">
<!-- Contact Form -->
<div class="contact-form">
<form method="post" id="contactform">
<div class="form-row">
<div class="col-12 col-sm-6">
<input type="text" id="name" name="name" placeholder="Name" required>
<form action="anfrage.html" method="post" enctype="multipart/form-data">
<div class="row flex-wrap form col-spacing-70">
<div class="flex-nowrap d-flex col-lg-6">
<label class="mandatory" for="name">Name *</label>
<input required="required" type="text" value="" id="name"/>
</div>
<div class="col-12 col-sm-6">
<input type="email" id="email" name="email" placeholder="E-Mail" required>
<div class="flex-nowrap d-flex col-lg-6">
<label class="mandatory" for="lastname">Nachname *</label>
<input required="required" type="text" value="" id="lastname"/>
</div>
<div class="flex-nowrap d-flex col-lg-6">
<label class="mandatory" for="email">E-Mail *</label>
<input required="required" type="email" value="" id="email" />
</div>
<div class="flex-nowrap d-flex col-lg-6">
<label class="mandatory" for="phone">Telefonnummer *</label>
<input required="required" type="text" value="" id="phone"/>
</div>
<div class="flex-nowrap d-flex col-lg-6">
<label class="mandatory" for="postcode">PLZ *</label>
<input required="required" min="1000" max="9999" type="number" value="" id="postcode"/>
</div>
<div class="flex-nowrap d-flex col-12 center">
Tragen Sie hier die Daten für Ihr Wunschhaus ein:
</div>
<div class="flex-nowrap d-flex col-lg-6">
<label class="mandatory" for="ngform-w7e0b0f0a361ae2c7e86752786034181-1-3">Wohnfläche *</label>
<input required="required" min="1" max="10000" type="number" value="" id="ngform-w7e0b0f0a361ae2c7e86752786034181-1-3" name="ngform-w7e0b0f0a361ae2c7e86752786034181-1-3"/>
</div>
<div class="flex-nowrap d-flex col-lg-6">
<label for="ngform-w7e0b0f0a361ae2c7e86752786034181-0-4">Rohbaumaterial </label>
<div class="ngformright ngformnopad" style="width: 349px;">
<div class="ngradiogroup">
<input type="radio" value="Ziegel 25 cm" checked="checked" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-4" id="ngform-w7e0b0f0a361ae2c7e86752786034181-0-4" />
Ziegel 25 cm
</div>
<div class="ngradiogroup">
<input type="radio" value="Ziegel 50 cm" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-4" />
Ziegel 50 cm
</div>
<div class="ngradiogroup">
<input type="radio" value="Ziegel 38 cm" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-4" />
Ziegel 38 cm
</div>
<div class="ngradiogroup">
<input type="radio" value="Fertigteile Ziegelit" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-4" />
Fertigteile Ziegelit
</div>
<div class="ngradiogroup">
<input type="radio" value="Fertigteile Holzriegel" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-4" />
Fertigteile Holzriegel
</div>
<div class="ngradiogroup">
<input type="radio" value="Fertigteile Holz massiv" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-4" />
Fertigteile Holz massiv
</div>
</div>
<input type="text" id="subject" name="subject" placeholder="Subjekt" required>
<textarea name="message" id="message" placeholder="Nachricht"></textarea>
<button class="button button-lg button-rounded button-outline-dark-2" type="submit">Anfrage senden</button>
</div>
<div class="flex-nowrap d-flex col-lg-6">
<label for="ngform-w7e0b0f0a361ae2c7e86752786034181-0-5">Ausbaustufe </label>
<div class="ngformright ngformnopad" style="width: 349px;">
<div class="ngradiogroup">
<input type="radio" value="Rohbau mit Dach" checked="checked" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-5" id="ngform-w7e0b0f0a361ae2c7e86752786034181-0-5" />
Rohbau mit Dach
</div>
<div class="ngradiogroup">
<input type="radio" value="Außenfertig" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-5" />
Außenfertig
</div>
<div class="ngradiogroup">
<input type="radio" value="Belagsfertig" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-5" />
Belagsfertig
</div>
<div class="ngradiogroup">
<input type="radio" value="Schlüsselfertig" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-5" />
Schlüsselfertig
</div>
</div>
</div>
<div class="flex-nowrap d-flex col-lg-6">
<label for="ngform-w7e0b0f0a361ae2c7e86752786034181-0-6">Außen </label>
<div class="ngformright ngformnopad" style="width: 349px;">
<div class="ngradiogroup">
<input type="radio" value="Fassade" checked="checked" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-6" id="ngform-w7e0b0f0a361ae2c7e86752786034181-0-6" />
Fassade
</div>
<div class="ngradiogroup">
<input type="radio" value="Putz" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-6" />
Putz
</div>
<div class="ngradiogroup">
<input type="radio" value="Teilflächen Putz/Holz" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-6" />
Teilflächen Putz/Holz
</div>
</div>
</div>
<div class="flex-nowrap d-flex col-lg-6">
<label for="ngform-w7e0b0f0a361ae2c7e86752786034181-0-7">Haustür </label>
<div class="ngformright ngformnopad" style="width: 349px;">
<div class="ngradiogroup">
<input type="radio" value="Ohne Seitenteil" checked="checked" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-7" id="ngform-w7e0b0f0a361ae2c7e86752786034181-0-7" />
Ohne Seitenteil
</div>
<div class="ngradiogroup">
<input type="radio" value="Mit Seitenteil" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-7" />
Mit Seitenteil
</div>
</div>
</div>
<div class="flex-nowrap d-flex col-lg-6">
<label for="ngform-w7e0b0f0a361ae2c7e86752786034181-0-8">Heizung </label>
<div class="ngformright ngformnopad" style="width: 349px;">
<div class="ngradiogroup">
<input type="radio" value="Luftwärmepumpe" checked="checked" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-8" id="ngform-w7e0b0f0a361ae2c7e86752786034181-0-8" />
Luftwärmepumpe
</div>
<div class="ngradiogroup">
<input type="radio" value="Wasserwärmepumpe" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-8" />
Wasserwärmepumpe
</div>
<div class="ngradiogroup">
<input type="radio" value="Erdwärme Flächenkollektor" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-8" />
Erdwärme Flächenkollektor
</div>
<div class="ngradiogroup">
<input type="radio" value="Gas" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-8" />
Gas
</div>
<div class="ngradiogroup">
<input type="radio" value="Holz" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-8" />
Holz
</div>
<div class="ngradiogroup">
<input type="radio" value="Pellets und Andere" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-8" />
Pellets und Andere
</div>
<div class="ngradiogroup">
<input type="radio" value="Fernwärme" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-8" />
Fernwärme
</div>
<div class="ngradiogroup">
<input type="radio" value="Öl" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-8" />
Öl
</div>
<div class="ngradiogroup">
<input type="radio" value="Anderes..." name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-8" />
Anderes...
</div>
</div>
</div>
<div class="flex-nowrap d-flex col-lg-6">
<label for="ngform-w7e0b0f0a361ae2c7e86752786034181-0-9">Spezielle Heizung: </label>
<input type="text" value="Optional" id="ngform-w7e0b0f0a361ae2c7e86752786034181-0-9" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-9"/>
</div>
<div class="flex-nowrap d-flex col-lg-6">
<label for="ngform-w7e0b0f0a361ae2c7e86752786034181-0-10">Treppe </label>
<div class="ngformright ngformnopad" style="width: 349px;">
<div class="ngradiogroup">
<input type="radio" value="Holz" checked="checked" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-10" id="ngform-w7e0b0f0a361ae2c7e86752786034181-0-10" />
Holz
</div>
<div class="ngradiogroup">
<input type="radio" value="Beton mit Fliesen" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-10" />
Beton mit Fliesen
</div>
<div class="ngradiogroup">
<input type="radio" value="Beton mit Naturstein" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-10" />
Beton mit Naturstein
</div>
</div>
</div>
<div class="flex-nowrap d-flex col-lg-6">
<label for="ngform-w7e0b0f0a361ae2c7e86752786034181-0-11">Boden </label>
<div class="ngformright ngformnopad" style="width: 349px;">
<div class="ngradiogroup">
<input type="radio" value="Fliesen komplett" checked="checked" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-11" id="ngform-w7e0b0f0a361ae2c7e86752786034181-0-11" />
Fliesen komplett
</div>
<div class="ngradiogroup">
<input type="radio" value="Fliesen/Fertigparkett" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-11" />
Fliesen/Fertigparkett
</div>
<div class="ngradiogroup">
<input type="radio" value="Parkett, Schlafzimmer in Eigenleistung" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-11" />
Parkett, Schlafzimmer in Eigenleistung
</div>
</div>
</div>
<div class="flex-nowrap d-flex col-lg-6">
<label for="ngform-w7e0b0f0a361ae2c7e86752786034181-0-12">Pflasterungen </label>
<input type="text" value="" id="ngform-w7e0b0f0a361ae2c7e86752786034181-0-12" name="ngform-w7e0b0f0a361ae2c7e86752786034181-0-12"/>
</div>
<div class="flex-nowrap d-flex col-lg-6">
<label for="ngform-w7e0b0f0a361ae2c7e86752786034181-1-4">Grabungsarbeiten </label>
<div class="ngformright ngformnopad" style="width: 349px;">
<div class="ngradiogroup">
<input type="radio" value="Ja" checked="checked" name="ngform-w7e0b0f0a361ae2c7e86752786034181-1-4" id="ngform-w7e0b0f0a361ae2c7e86752786034181-1-4" />
Ja
</div>
<div class="ngradiogroup">
<input type="radio" value="Nein" name="ngform-w7e0b0f0a361ae2c7e86752786034181-1-4" />
Nein
</div>
</div>
</div>
<div class="flex-nowrap d-flex col-lg-6">
<label for="ngform-w7e0b0f0a361ae2c7e86752786034181-1-5">Dachform </label>
<div class="ngformright ngformnopad" style="width: 349px;">
<div class="ngradiogroup">
<input type="radio" value="Satteldach" checked="checked" name="ngform-w7e0b0f0a361ae2c7e86752786034181-1-5" id="ngform-w7e0b0f0a361ae2c7e86752786034181-1-5" />
Satteldach
</div>
<div class="ngradiogroup">
<input type="radio" value="Pultdach" name="ngform-w7e0b0f0a361ae2c7e86752786034181-1-5" />
Pultdach
</div>
<div class="ngradiogroup">
<input type="radio" value="Walmdach" name="ngform-w7e0b0f0a361ae2c7e86752786034181-1-5" />
Walmdach
</div>
<div class="ngradiogroup">
<input type="radio" value="Flachdach" name="ngform-w7e0b0f0a361ae2c7e86752786034181-1-5" />
Flachdach
</div>
</div>
</div>
<div class="flex-nowrap d-flex col-lg-6">
<label for="ngform-w7e0b0f0a361ae2c7e86752786034181-1-6">Keller </label>
<div class="ngformright ngformnopad" style="width: 349px;">
<div class="ngradiogroup">
<input type="radio" value="Bodenplatte, kein Keller" checked="checked" name="ngform-w7e0b0f0a361ae2c7e86752786034181-1-6" id="ngform-w7e0b0f0a361ae2c7e86752786034181-1-6" />
Bodenplatte, kein Keller
</div>
<div class="ngradiogroup">
<input type="radio" value="Komplett unterkellert" name="ngform-w7e0b0f0a361ae2c7e86752786034181-1-6" />
Komplett unterkellert
</div>
</div>
</div>
<div class="flex-nowrap d-flex col-lg-6">
<label for="ngform-w7e0b0f0a361ae2c7e86752786034181-1-7">Fenster </label>
<div class="ngformright ngformnopad" style="width: 349px;">
<div class="ngradiogroup">
<input type="radio" value="Kunststoff-Weiß" checked="checked" name="ngform-w7e0b0f0a361ae2c7e86752786034181-1-7" id="ngform-w7e0b0f0a361ae2c7e86752786034181-1-7" />
Kunststoff-Weiß
</div>
<div class="ngradiogroup">
<input type="radio" value="Kunststoff-Alu" name="ngform-w7e0b0f0a361ae2c7e86752786034181-1-7" />
Kunststoff-Alu
</div>
<div class="ngradiogroup">
<input type="radio" value="Holz-Alu" name="ngform-w7e0b0f0a361ae2c7e86752786034181-1-7" />
Holz-Alu
</div>
</div>
</div>
<div class="flex-nowrap d-flex col-lg-6">
<label for="ngform-w7e0b0f0a361ae2c7e86752786034181-1-8">Zusätze </label>
<div class="ngformright ngformnopad" style="width: 349px;">
<div class="ngradiogroup">
<input type="radio" value="Keine" checked="checked" name="ngform-w7e0b0f0a361ae2c7e86752786034181-1-8" id="ngform-w7e0b0f0a361ae2c7e86752786034181-1-8" />
Keine
</div>
<div class="ngradiogroup">
<input type="radio" value="Photovoltaik" name="ngform-w7e0b0f0a361ae2c7e86752786034181-1-8" />
Photovoltaik
</div>
<div class="ngradiogroup">
<input type="radio" value="Solarpanele" name="ngform-w7e0b0f0a361ae2c7e86752786034181-1-8" />
Solarpanele
</div>
<div class="ngradiogroup">
<input type="radio" value="Kontrollierte Be- und Entlüftung" name="ngform-w7e0b0f0a361ae2c7e86752786034181-1-8" />
Kontrollierte Be- und Entlüftung
</div>
</div>
</div>
<div class="flex-nowrap d-flex col-lg-6">
<label for="ngform-w7e0b0f0a361ae2c7e86752786034181-1-9">Weitere Zusätze </label>
<input type="text" value="Optional" id="ngform-w7e0b0f0a361ae2c7e86752786034181-1-9" name="ngform-w7e0b0f0a361ae2c7e86752786034181-1-9"/>
</div>
<div class="flex-nowrap d-flex col-lg-6">
<label for="phone0">Ausstattung Sanitär (WC, Bad) </label>
<input type="text" value="" id="phone0" name="phone0"/>
</div>
<div class="flex-nowrap d-flex col-lg-6">
<label for="phone1">Extrawünsche Elektro </label>
<input type="text" value="" id="phone1" name="phone1"/>
</div>
<div class="flex-nowrap d-flex col-lg-6">
<label for="phone2">Zubauten </label>
<div class="ngformright ngformnopad" style="width: 349px;">
<div class="ngradiogroup">
<input type="radio" value="Keine" checked="checked" name="phone2" id="phone2" />
Keine
</div>
<div class="ngradiogroup">
<input type="radio" value="Carport" name="phone2" />
Carport
</div>
<div class="ngradiogroup">
<input type="radio" value="Geräteraum" name="phone2" />
Geräteraum
</div>
<div class="ngradiogroup">
<input type="radio" value="Carport + Geräteraum" name="phone2" />
Carport + Geräteraum
</div>
<div class="ngradiogroup">
<input type="radio" value="Garage" name="phone2" />
Garage
</div>
</div>
</div>
<div class="flex-nowrap d-flex col-lg-6">
<label class="mandatory" for="phone3">Budgetvorstellungen *</label>
<input required="required" type="text" value="" id="phone3" name="phone3"/>
</div>
<div class="flex-nowrap d-flex col-lg-6">
<label for="phone4">Finanzierungswunsch </label>
<div class="ngformright ngformnopad" style="width: 349px;">
<div class="ngradiogroup">
<input type="radio" value="Ja" checked="checked" name="phone4" id="phone4" />
Ja
</div>
<div class="ngradiogroup">
<input type="radio" value="Nein" name="phone4" />
Nein
</div>
</div>
</div>
<div class="flex-nowrap d-flex col-lg-6">
<label for="phone5">Pool </label>
<div class="ngformright ngformnopad" style="width: 349px;">
<div class="ngradiogroup">
<input type="radio" value="Keiner" checked="checked" name="phone5" id="phone5" />
Keiner
</div>
<div class="ngradiogroup">
<input type="radio" value="Skimmerbecken" name="phone5" />
Skimmerbecken
</div>
<div class="ngradiogroup">
<input type="radio" value="Überlaufbecken" name="phone5" />
Überlaufbecken
</div>
</div>
</div>
<div class="flex-nowrap d-flex col-12">
<a href="../../common/info/datenschutz.html">Datenschutz</a>
</div>
<div class="flex-nowrap d-flex col-12">
<label class="mandatory" for="acceptprivacyrules">Persönliche Daten *</label>
<div>
<input type="checkbox" value="true" id="acceptprivacyrules"/>
Ich habe die Hinweise zum Datenschutz gelesen und akzeptiere diese.
</div>
</div>
<div class="col-12">
<button class="float-right button button-lg button-radius button-dark button-font-2" type="submit">Absenden</button>
</div>
</div>
</form>
<!-- Submit result -->
<div class="submit-result">
<span id="success">Thank you! Your Message has been sent.</span>
<span id="error">Something went wrong, Please try again!</span>
</div>
</div><!-- end contact-form -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- Contact Info section -->
<div class="section padding-top-0">