diff --git a/frontend/components/Contact/Section/ContactFormSection.tsx b/frontend/components/Contact/Section/ContactFormSection.tsx index 61073cf..79dc36f 100644 --- a/frontend/components/Contact/Section/ContactFormSection.tsx +++ b/frontend/components/Contact/Section/ContactFormSection.tsx @@ -1,11 +1,13 @@ 'use client' -import React, {useState} from 'react' +import React, {useRef, useState} from 'react' import {motion} from 'framer-motion' import {Button} from '@/components/ui/button' -import ReCAPTCHA from 'react-google-recaptcha' +import HCaptcha from '@hcaptcha/react-hcaptcha' const ContactFormSection = () => { + const captchaRef = useRef(null) + const [form, setForm] = useState({ name: '', email: '', @@ -54,6 +56,7 @@ const ContactFormSection = () => { message: '', }) setCaptchaToken('') + captchaRef.current?.resetCaptcha() } else { const resJson = await res.json() setError( @@ -84,7 +87,8 @@ const ContactFormSection = () => { 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. + Wir freuen uns über dein Interesse und melden uns schnellstmöglich bei + dir zurück. {submitted ? ( @@ -100,35 +104,35 @@ const ContactFormSection = () => { name: 'name', type: 'text', required: true, - placeholder: 'Max Mustermann' + placeholder: 'Max Mustermann', }, { label: 'Deine E-Mail *', name: 'email', type: 'email', required: true, - placeholder: 'max@example.com' + placeholder: 'max@example.com', }, { label: 'Firmenname (optional)', name: 'company', type: 'text', required: false, - placeholder: 'Mustermann GmbH' + placeholder: 'Mustermann GmbH', }, { label: 'Telefonnummer (optional)', name: 'phone', type: 'tel', required: false, - placeholder: '+49 123 456789' + placeholder: '+49 123 456789', }, { label: 'Webseite (optional)', name: 'website', type: 'url', required: false, - placeholder: 'https://...' + placeholder: 'https://...', }, ].map((field, index) => ( { viewport={{once: true}} transition={{duration: 0.5, delay: 0.7}} > - setCaptchaToken(token ?? '')} + setCaptchaToken(token)} + ref={captchaRef} /> {error && ( -
- ❌ {error} -
+
❌ {error}
)}