Gitlab-Migration/rheinsw-mono-repo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace reCAPTCHA with hCaptcha in contact form and implement captcha reset functionality

Browse Source
This commit is contained in:
Thatsaphorn
2025-06-29 17:46:28 +09:00
parent 9e28977e38
commit e7ff00f062
1 changed files with 17 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/components/Contact/Section/ContactFormSection.tsx
View File

@@ -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<HCaptcha | null>(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.
</motion.p>
{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) => (
<motion.div
@@ -181,16 +185,15 @@ const ContactFormSection = () => {
viewport={{once: true}}
transition={{duration: 0.5, delay: 0.7}}
>
<ReCAPTCHA
sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY!}
onChange={(token) => setCaptchaToken(token ?? '')}
<HCaptcha
sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY!}
onVerify={(token) => setCaptchaToken(token)}
ref={captchaRef}
/>
</motion.div>
{error && (
<div className="text-red-600 font-medium pt-2">
❌ {error}
</div>
<div className="text-red-600 font-medium pt-2">❌ {error}</div>
)}
<motion.div