Kontaktformular Neuanfang. Navbar Kontakt im Navbar führt auf das Kontaktformular
Niels Yannick Tietze
parent
6d121aa434
commit
8746856086
25244
KontaktInfo.html
25244
KontaktInfo.html
File diff suppressed because one or more lines are too long
99
KontaktJS.js
99
KontaktJS.js
|
|
@ -1,99 +0,0 @@
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
|
||||||
const form = document.querySelector("form");
|
|
||||||
|
|
||||||
if (!form) {
|
|
||||||
console.error("Kontaktformular wurde nicht gefunden.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const nameInput = form.querySelector('input[name="name"]');
|
|
||||||
const emailInput = form.querySelector('input[name="email"]');
|
|
||||||
const inquiryTypeSelect = form.querySelector('select[name="inquiryType"]');
|
|
||||||
const subjectInput = form.querySelector('input[name="subject"]');
|
|
||||||
const messageInput = form.querySelector('textarea[name="message"]');
|
|
||||||
const submitButton = form.querySelector('button[type="submit"]');
|
|
||||||
|
|
||||||
const MIN_MESSAGE_LENGTH = 10;
|
|
||||||
|
|
||||||
// Container der Nachricht
|
|
||||||
const messageContainer = messageInput?.closest("div");
|
|
||||||
|
|
||||||
// Hinweis "Nachricht ist lang genug"
|
|
||||||
const messageValidElement =
|
|
||||||
messageContainer?.querySelector(".message-valid");
|
|
||||||
|
|
||||||
if (
|
|
||||||
!nameInput ||
|
|
||||||
!emailInput ||
|
|
||||||
!inquiryTypeSelect ||
|
|
||||||
!subjectInput ||
|
|
||||||
!messageInput ||
|
|
||||||
!submitButton
|
|
||||||
) {
|
|
||||||
console.error("Ein oder mehrere Formularfelder wurden nicht gefunden.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
function validateForm() {
|
|
||||||
const name = nameInput.value.trim();
|
|
||||||
const email = emailInput.value.trim();
|
|
||||||
const inquiryType = inquiryTypeSelect.value.trim();
|
|
||||||
const subject = subjectInput.value.trim();
|
|
||||||
const message = messageInput.value.trim();
|
|
||||||
|
|
||||||
// E-Mail-Adresse prüfen
|
|
||||||
const emailIsValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
|
||||||
|
|
||||||
// Nachricht auf Mindestlänge prüfen
|
|
||||||
const messageIsLongEnough = message.length >= MIN_MESSAGE_LENGTH;
|
|
||||||
|
|
||||||
// Gesamtes Formular prüfen
|
|
||||||
const formIsValid =
|
|
||||||
name.length > 0 &&
|
|
||||||
emailIsValid &&
|
|
||||||
inquiryType.length > 0 &&
|
|
||||||
subject.length > 0 &&
|
|
||||||
messageIsLongEnough;
|
|
||||||
|
|
||||||
// Button aktivieren/deaktivieren
|
|
||||||
submitButton.disabled = !formIsValid;
|
|
||||||
|
|
||||||
// Nachrichten-Zähler aktualisieren
|
|
||||||
const messageLabel = messageContainer?.querySelector("label");
|
|
||||||
|
|
||||||
if (messageLabel) {
|
|
||||||
messageLabel.textContent = `Nachricht * (${message.length}/${MIN_MESSAGE_LENGTH} Min.)`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// "Nachricht ist lang genug" anzeigen/verstecken
|
|
||||||
if (messageValidElement) {
|
|
||||||
messageValidElement.style.display = messageIsLongEnough
|
|
||||||
? "block"
|
|
||||||
: "none";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Alle relevanten Felder überwachen
|
|
||||||
[
|
|
||||||
nameInput,
|
|
||||||
emailInput,
|
|
||||||
inquiryTypeSelect,
|
|
||||||
subjectInput,
|
|
||||||
messageInput,
|
|
||||||
].forEach((field) => {
|
|
||||||
field.addEventListener("input", validateForm);
|
|
||||||
field.addEventListener("change", validateForm);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Formular-Submit zusätzlich absichern
|
|
||||||
form.addEventListener("submit", (event) => {
|
|
||||||
validateForm();
|
|
||||||
|
|
||||||
if (submitButton.disabled) {
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Initialen Zustand setzen
|
|
||||||
validateForm();
|
|
||||||
});
|
|
||||||
84
index.html
84
index.html
|
|
@ -1102,6 +1102,90 @@
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- Kontaktaufnahme -->
|
||||||
|
<section class="section" id="kontakt">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-heading">
|
||||||
|
<div>
|
||||||
|
<div class="eyebrow">KONTAKT AUFNEHMEN</div>
|
||||||
|
<h2
|
||||||
|
style="
|
||||||
|
font-family: "Inter", sans-serif;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
Schreib uns.
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="section-intro">
|
||||||
|
Du hast Fragen oder möchtest einen Termin
|
||||||
|
vereinbaren? Schreib uns einfach. Wir melden uns
|
||||||
|
schnellstmöglich bei dir.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form class="review-form" id="contactForm">
|
||||||
|
<div class="field" style="margin-top: 0">
|
||||||
|
<label for="contactName">Dein Name</label>
|
||||||
|
<input
|
||||||
|
id="contactName"
|
||||||
|
name="name"
|
||||||
|
type="text"
|
||||||
|
autocomplete="name"
|
||||||
|
placeholder="z. B. Thomas Müller"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<label for="contactEmail"
|
||||||
|
>Deine E-Mail-Adresse</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
id="contactEmail"
|
||||||
|
name="email"
|
||||||
|
type="text"
|
||||||
|
autocomplete="email"
|
||||||
|
placeholder="z. B. thomas@müller.de"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<label for="contactSubject">Betreff</label>
|
||||||
|
<input
|
||||||
|
id="contactSubject"
|
||||||
|
name="subject"
|
||||||
|
type="text"
|
||||||
|
placeholder="Worum geht es?"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<label for="contactMessage">Deine Nachricht</label>
|
||||||
|
<textarea
|
||||||
|
id="contactMessage"
|
||||||
|
name="message"
|
||||||
|
placeholder="Wie können wir dir helfen?"
|
||||||
|
required
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="button button-primary" type="submit">
|
||||||
|
Nachricht senden
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="form-status"
|
||||||
|
id="contactFormStatus"
|
||||||
|
role="status"
|
||||||
|
aria-live="polite"
|
||||||
|
></div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue