diff --git a/frontend/components/Contact/Section/ContactFormSection.tsx b/frontend/components/Contact/Section/ContactFormSection.tsx index 0e383f1..4dce009 100644 --- a/frontend/components/Contact/Section/ContactFormSection.tsx +++ b/frontend/components/Contact/Section/ContactFormSection.tsx @@ -1,8 +1,8 @@ 'use client'; -import React, { useState } from "react"; -import { motion } from "framer-motion"; -import { useThemeColors } from "@/utils/useThemeColors"; +import React, {useState} from "react"; +import {motion} from "framer-motion"; +import {useThemeColors} from "@/utils/useThemeColors"; import HCaptcha from "@hcaptcha/react-hcaptcha"; const ContactFormSection = () => { @@ -28,7 +28,7 @@ const ContactFormSection = () => { : "ES_ff59a664dc764f92870bf2c7b4eab7c5"; const handleChange = (e: React.ChangeEvent) => { - setForm({ ...form, [e.target.name]: e.target.value }); + setForm({...form, [e.target.name]: e.target.value}); }; const handleSubmit = async (e: React.FormEvent) => { @@ -42,24 +42,22 @@ const ContactFormSection = () => { return; } - try { - const res = await fetch("/api/contact", { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ ...form, captcha: captchaToken }), - }); - if (res.ok) { - setSubmitted(true); - setForm({ name: "", email: "", company: "", phone: "", website: "", message: "" }); - } else { - const resJson = await res.json(); - setError(resJson?.error || "Ein Fehler ist aufgetreten. Bitte versuche es später erneut."); - } - } catch (_err) { - setError("Serverfehler. Bitte versuche es später erneut."); + const res = await fetch("/api/contact", { + method: "POST", + headers: {"Content-Type": "application/json"}, + body: JSON.stringify({...form, captcha: captchaToken}), + }); + + if (res.ok) { + setSubmitted(true); + setForm({name: "", email: "", company: "", phone: "", website: "", message: ""}); + } else { + const resJson = await res.json(); + setError(resJson?.error || "Ein Fehler ist aufgetreten. Bitte versuche es später erneut."); } + setLoading(false); }; @@ -67,46 +65,77 @@ const ContactFormSection = () => {
Schreib uns eine Nachricht Wir freuen uns über dein Interesse und melden uns schnellstmöglich bei dir zurück. {submitted ? ( -
✅ Deine Nachricht wurde erfolgreich gesendet!
+
✅ Deine Nachricht wurde erfolgreich + gesendet!
) : (
{[ - { label: "Dein Name *", name: "name", type: "text", required: true, placeholder: "Max Mustermann" }, - { label: "Deine E-Mail *", name: "email", type: "email", required: true, placeholder: "max@example.com" }, - { label: "Firmenname (optional)", name: "company", type: "text", required: false, placeholder: "Mustermann GmbH" }, - { label: "Telefonnummer (optional)", name: "phone", type: "tel", required: false, placeholder: "+49 123 456789" }, - { label: "Webseite (optional)", name: "website", type: "url", required: false, placeholder: "https://..." }, + { + label: "Dein Name *", + name: "name", + type: "text", + required: true, + placeholder: "Max Mustermann" + }, + { + label: "Deine E-Mail *", + name: "email", + type: "email", + required: true, + placeholder: "max@example.com" + }, + { + label: "Firmenname (optional)", + name: "company", + type: "text", + required: false, + placeholder: "Mustermann GmbH" + }, + { + label: "Telefonnummer (optional)", + name: "phone", + type: "tel", + required: false, + placeholder: "+49 123 456789" + }, + { + label: "Webseite (optional)", + name: "website", + type: "url", + required: false, + placeholder: "https://..." + }, ].map((field, index) => ( -
-