220 lines
9.0 KiB
TypeScript
220 lines
9.0 KiB
TypeScript
'use client';
|
|
|
|
import React, {useState} from "react";
|
|
import {motion} from "framer-motion";
|
|
import {useThemeColors} from "@/utils/useThemeColors";
|
|
import HCaptcha from "@hcaptcha/react-hcaptcha";
|
|
|
|
const ContactFormSection = () => {
|
|
const colors = useThemeColors();
|
|
|
|
const [form, setForm] = useState({
|
|
name: "",
|
|
email: "",
|
|
company: "",
|
|
phone: "",
|
|
website: "",
|
|
message: "",
|
|
});
|
|
|
|
const [captchaToken, setCaptchaToken] = useState("");
|
|
const [submitted, setSubmitted] = useState(false);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState("");
|
|
|
|
const hCaptchaSiteKey: string = process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY ?? "null";
|
|
|
|
console.log(hCaptchaSiteKey);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
setForm({...form, [e.target.name]: e.target.value});
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setError("");
|
|
|
|
if (!captchaToken) {
|
|
setError("Bitte löse das CAPTCHA, um fortzufahren.");
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
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);
|
|
};
|
|
|
|
return (
|
|
<div className="w-full px-6 sm:px-12 py-20 text-left transition-theme">
|
|
<motion.h2
|
|
className="text-2xl sm:text-3xl font-bold mb-2"
|
|
style={{color: colors.primaryText}}
|
|
initial={{opacity: 0, y: 20}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5}}
|
|
>
|
|
Schreib uns eine Nachricht
|
|
</motion.h2>
|
|
|
|
<motion.p
|
|
className="text-sm mb-8 max-w-xl"
|
|
style={{color: colors.secondaryText}}
|
|
initial={{opacity: 0, y: 10}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: 0.2}}
|
|
>
|
|
Wir freuen uns über dein Interesse und melden uns schnellstmöglich bei dir zurück.
|
|
</motion.p>
|
|
|
|
{submitted ? (
|
|
<div className="text-green-600 font-semibold text-lg">✅ Deine Nachricht wurde erfolgreich
|
|
gesendet!</div>
|
|
) : (
|
|
<form className="space-y-6" onSubmit={handleSubmit}>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{[
|
|
{
|
|
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) => (
|
|
<motion.div
|
|
key={field.name}
|
|
initial={{opacity: 0, y: 10}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: index * 0.1}}
|
|
>
|
|
<label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
|
|
{field.label}
|
|
</label>
|
|
<input
|
|
type={field.type}
|
|
name={field.name}
|
|
value={form[field.name as keyof typeof form]}
|
|
onChange={handleChange}
|
|
required={field.required}
|
|
placeholder={field.placeholder}
|
|
className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
|
|
style={{
|
|
backgroundColor: colors.inputFieldBg,
|
|
border: `1px solid ${colors.inputBorder}`,
|
|
color: colors.primaryText,
|
|
}}
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
<motion.div
|
|
initial={{opacity: 0, y: 10}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: 0.6}}
|
|
>
|
|
<label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
|
|
Deine Nachricht *
|
|
</label>
|
|
<textarea
|
|
name="message"
|
|
rows={4}
|
|
required
|
|
value={form.message}
|
|
onChange={handleChange}
|
|
placeholder="Worum geht es?"
|
|
className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
|
|
style={{
|
|
backgroundColor: colors.inputFieldBg,
|
|
border: `1px solid ${colors.inputBorder}`,
|
|
color: colors.primaryText,
|
|
}}
|
|
/>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
className="pt-2"
|
|
initial={{opacity: 0, y: 10}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: 0.7}}
|
|
>
|
|
<HCaptcha sitekey={hCaptchaSiteKey} onVerify={setCaptchaToken}/>
|
|
</motion.div>
|
|
|
|
{error && (
|
|
<div className="text-red-600 font-medium pt-2">
|
|
❌ {error}
|
|
</div>
|
|
)}
|
|
|
|
<motion.div
|
|
className="pt-4 flex justify-end"
|
|
initial={{opacity: 0, y: 10}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: 0.8}}
|
|
>
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="px-6 py-3 bg-blue-600 text-white text-sm sm:text-base font-semibold rounded-lg shadow-md hover:bg-blue-700 transition-all disabled:opacity-50"
|
|
>
|
|
{loading ? "Sende..." : "📩 Nachricht senden"}
|
|
</button>
|
|
</motion.div>
|
|
</form>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ContactFormSection;
|