gitea
/
multilingualfamily
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

formspree fix

Browse Source
main
gitea 1 month ago
parent 71b1064aa9
commit b9fca68b30
2 changed files with 286 additions and 106 deletions
Show Stats Download Patch File Download Diff File

196
app/feedback/page.tsx
Unescape View File

@ -21,12 +21,12 @@ export default function FeedbackPage() {
setErrorMessage(''); setErrorMessage('');
const form = e.currentTarget; const form = e.currentTarget;
const data = new FormData(form); const formDataObj = new FormData(form);
try { try {
const response = await fetch(form.action, { const response = await fetch(form.action, {
method: form.method, method: form.method,
body: data, body: formDataObj,
headers: { headers: {
'Accept': 'application/json', 'Accept': 'application/json',
}, },
@ -41,21 +41,22 @@ export default function FeedbackPage() {
}); });
form.reset(); form.reset();
// Reset success message after 5 seconds // Reset success message after 6 seconds
setTimeout(() => { setTimeout(() => {
setStatus('idle'); setStatus('idle');
}, 5000); }, 6000);
} else { } else {
const data = await response.json(); const responseData = await response.json();
if (data.errors) { if (responseData.errors) {
setErrorMessage(data.errors.map((error: { message: string }) => error.message).join(', ')); setErrorMessage(responseData.errors.map((error: { message: string }) => error.message).join(', '));
} else { } else {
setErrorMessage('Oops! There was a problem submitting your form.'); setErrorMessage('Oops! There was a problem submitting your form. Please try again.');
} }
setStatus('error'); setStatus('error');
} }
} catch (error) { } catch (error) {
setErrorMessage('Oops! There was a problem submitting your form.'); console.error('Form submission error:', error);
setErrorMessage('Oops! There was a problem submitting your form. Please check your connection and try again.');
setStatus('error'); setStatus('error');
} }
}; };
@ -95,60 +96,149 @@ export default function FeedbackPage() {
{status === 'success' ? ( {status === 'success' ? (
<motion.div <motion.div
key="success" key="success"
initial={{ opacity: 0, scale: 0.8, y: 20 }} initial={{ opacity: 0 }}
animate={{ opacity: 1, scale: 1, y: 0 }} animate={{ opacity: 1 }}
exit={{ opacity: 0, scale: 0.8 }} exit={{ opacity: 0 }}
transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }} className="relative overflow-hidden"
className="text-center py-12 px-6 rounded-2xl"
style={{ backgroundColor: '#FBF7F4' }}
> >
{/* Animated background circles */}
<motion.div
initial={{ scale: 0, opacity: 0 }}
animate={{ scale: 1, opacity: 0.1 }}
transition={{ duration: 0.8, ease: 'easeOut' }}
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 rounded-full"
style={{ backgroundColor: '#EED2CC' }}
/>
<motion.div
initial={{ scale: 0, opacity: 0 }}
animate={{ scale: 1, opacity: 0.15 }}
transition={{ duration: 0.8, delay: 0.2, ease: 'easeOut' }}
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 rounded-full"
style={{ backgroundColor: '#7D6E5E' }}
/>
<motion.div <motion.div
initial={{ scale: 0 }} initial={{ opacity: 0, scale: 0.5, y: 50 }}
animate={{ scale: 1 }} animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.8 }}
transition={{ transition={{
type: 'spring', type: 'spring',
stiffness: 200, stiffness: 200,
damping: 15, damping: 20,
delay: 0.2 duration: 0.6
}} }}
className="w-20 h-20 mx-auto mb-6 rounded-full flex items-center justify-center" className="relative text-center py-16 px-6 rounded-2xl"
style={{ backgroundColor: '#EED2CC' }} style={{ backgroundColor: '#FBF7F4' }}
> >
<motion.svg {/* Success icon with multiple animations */}
initial={{ pathLength: 0 }} <motion.div
animate={{ pathLength: 1 }} initial={{ scale: 0, rotate: -180 }}
transition={{ duration: 0.5, delay: 0.4 }} animate={{ scale: 1, rotate: 0 }}
className="w-10 h-10" transition={{
fill="none" type: 'spring',
stroke="#00171F" stiffness: 200,
strokeWidth="3" damping: 15,
viewBox="0 0 24 24" delay: 0.2
}}
className="relative w-24 h-24 mx-auto mb-8"
> >
<motion.path <motion.div
strokeLinecap="round" initial={{ scale: 0 }}
strokeLinejoin="round" animate={{ scale: [0, 1.2, 1] }}
d="M5 13l4 4L19 7" transition={{ duration: 0.6, delay: 0.3 }}
className="absolute inset-0 rounded-full"
style={{ backgroundColor: '#EED2CC' }}
/> />
</motion.svg> <motion.div
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ duration: 0.4, delay: 0.5 }}
className="absolute inset-0 flex items-center justify-center"
>
<motion.svg
initial={{ pathLength: 0, opacity: 0 }}
animate={{ pathLength: 1, opacity: 1 }}
transition={{ duration: 0.6, delay: 0.6 }}
className="w-12 h-12"
fill="none"
stroke="#00171F"
strokeWidth="3"
strokeLinecap="round"
strokeLinejoin="round"
viewBox="0 0 24 24"
>
<motion.path
d="M5 13l4 4L19 7"
initial={{ pathLength: 0 }}
animate={{ pathLength: 1 }}
transition={{ duration: 0.5, delay: 0.7 }}
/>
</motion.svg>
</motion.div>
</motion.div>
{/* Confetti effect using dots */}
{[...Array(12)].map((_, i) => (
<motion.div
key={i}
initial={{
opacity: 0,
scale: 0,
x: 0,
y: 0,
}}
animate={{
opacity: [0, 1, 0],
scale: [0, 1, 0],
x: Math.cos((i * Math.PI * 2) / 12) * 100,
y: Math.sin((i * Math.PI * 2) / 12) * 100,
}}
transition={{
duration: 1.5,
delay: 0.8 + i * 0.05,
ease: 'easeOut',
}}
className="absolute top-1/2 left-1/2 w-2 h-2 rounded-full"
style={{
backgroundColor: ['#EED2CC', '#7D6E5E', '#00171F'][i % 3]
}}
/>
))}
<motion.h3
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.9, type: 'spring', stiffness: 100 }}
style={{ color: '#00171F' }}
className="text-3xl md:text-4xl font-bold mb-4 relative z-10"
>
Thanks for your submission!
</motion.h3>
<motion.p
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 1.0 }}
style={{ color: '#00171F' }}
className="text-lg md:text-xl opacity-90 relative z-10"
>
Your feedback helps me improve my services.
</motion.p>
{/* Subtle pulse animation */}
<motion.div
animate={{
scale: [1, 1.05, 1],
opacity: [0.3, 0.5, 0.3]
}}
transition={{
duration: 2,
repeat: Infinity,
ease: 'easeInOut'
}}
className="absolute inset-0 rounded-2xl pointer-events-none"
style={{ backgroundColor: '#EED2CC' }}
/>
</motion.div> </motion.div>
<motion.h3
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3 }}
style={{ color: '#00171F' }}
className="text-2xl md:text-3xl font-bold mb-3"
>
Thanks for your submission!
</motion.h3>
<motion.p
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.4 }}
style={{ color: '#00171F' }}
className="text-lg opacity-90"
>
Your feedback helps me improve my services.
</motion.p>
</motion.div> </motion.div>
) : ( ) : (
<motion.form <motion.form

196
components/Contact.tsx
Unescape View File

@ -21,12 +21,12 @@ export default function Contact() {
setErrorMessage(''); setErrorMessage('');
const form = e.currentTarget; const form = e.currentTarget;
const data = new FormData(form); const formDataObj = new FormData(form);
try { try {
const response = await fetch(form.action, { const response = await fetch(form.action, {
method: form.method, method: form.method,
body: data, body: formDataObj,
headers: { headers: {
'Accept': 'application/json', 'Accept': 'application/json',
}, },
@ -43,21 +43,22 @@ export default function Contact() {
}); });
form.reset(); form.reset();
// Reset success message after 5 seconds // Reset success message after 6 seconds
setTimeout(() => { setTimeout(() => {
setStatus('idle'); setStatus('idle');
}, 5000); }, 6000);
} else { } else {
const data = await response.json(); const responseData = await response.json();
if (data.errors) { if (responseData.errors) {
setErrorMessage(data.errors.map((error: { message: string }) => error.message).join(', ')); setErrorMessage(responseData.errors.map((error: { message: string }) => error.message).join(', '));
} else { } else {
setErrorMessage('Oops! There was a problem submitting your form.'); setErrorMessage('Oops! There was a problem submitting your form. Please try again.');
} }
setStatus('error'); setStatus('error');
} }
} catch (error) { } catch (error) {
setErrorMessage('Oops! There was a problem submitting your form.'); console.error('Form submission error:', error);
setErrorMessage('Oops! There was a problem submitting your form. Please check your connection and try again.');
setStatus('error'); setStatus('error');
} }
}; };
@ -100,60 +101,149 @@ export default function Contact() {
{status === 'success' ? ( {status === 'success' ? (
<motion.div <motion.div
key="success" key="success"
initial={{ opacity: 0, scale: 0.8, y: 20 }} initial={{ opacity: 0 }}
animate={{ opacity: 1, scale: 1, y: 0 }} animate={{ opacity: 1 }}
exit={{ opacity: 0, scale: 0.8 }} exit={{ opacity: 0 }}
transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }} className="relative overflow-hidden"
className="text-center py-12 px-6 rounded-2xl"
style={{ backgroundColor: '#FBF7F4' }}
> >
{/* Animated background circles */}
<motion.div
initial={{ scale: 0, opacity: 0 }}
animate={{ scale: 1, opacity: 0.1 }}
transition={{ duration: 0.8, ease: 'easeOut' }}
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 rounded-full"
style={{ backgroundColor: '#EED2CC' }}
/>
<motion.div
initial={{ scale: 0, opacity: 0 }}
animate={{ scale: 1, opacity: 0.15 }}
transition={{ duration: 0.8, delay: 0.2, ease: 'easeOut' }}
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 rounded-full"
style={{ backgroundColor: '#7D6E5E' }}
/>
<motion.div <motion.div
initial={{ scale: 0 }} initial={{ opacity: 0, scale: 0.5, y: 50 }}
animate={{ scale: 1 }} animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.8 }}
transition={{ transition={{
type: 'spring', type: 'spring',
stiffness: 200, stiffness: 200,
damping: 15, damping: 20,
delay: 0.2 duration: 0.6
}} }}
className="w-20 h-20 mx-auto mb-6 rounded-full flex items-center justify-center" className="relative text-center py-16 px-6 rounded-2xl"
style={{ backgroundColor: '#EED2CC' }} style={{ backgroundColor: '#FBF7F4' }}
> >
<motion.svg {/* Success icon with multiple animations */}
initial={{ pathLength: 0 }} <motion.div
animate={{ pathLength: 1 }} initial={{ scale: 0, rotate: -180 }}
transition={{ duration: 0.5, delay: 0.4 }} animate={{ scale: 1, rotate: 0 }}
className="w-10 h-10" transition={{
fill="none" type: 'spring',
stroke="#00171F" stiffness: 200,
strokeWidth="3" damping: 15,
viewBox="0 0 24 24" delay: 0.2
}}
className="relative w-24 h-24 mx-auto mb-8"
> >
<motion.path <motion.div
strokeLinecap="round" initial={{ scale: 0 }}
strokeLinejoin="round" animate={{ scale: [0, 1.2, 1] }}
d="M5 13l4 4L19 7" transition={{ duration: 0.6, delay: 0.3 }}
className="absolute inset-0 rounded-full"
style={{ backgroundColor: '#EED2CC' }}
/> />
</motion.svg> <motion.div
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ duration: 0.4, delay: 0.5 }}
className="absolute inset-0 flex items-center justify-center"
>
<motion.svg
initial={{ pathLength: 0, opacity: 0 }}
animate={{ pathLength: 1, opacity: 1 }}
transition={{ duration: 0.6, delay: 0.6 }}
className="w-12 h-12"
fill="none"
stroke="#00171F"
strokeWidth="3"
strokeLinecap="round"
strokeLinejoin="round"
viewBox="0 0 24 24"
>
<motion.path
d="M5 13l4 4L19 7"
initial={{ pathLength: 0 }}
animate={{ pathLength: 1 }}
transition={{ duration: 0.5, delay: 0.7 }}
/>
</motion.svg>
</motion.div>
</motion.div>
{/* Confetti effect using dots */}
{[...Array(12)].map((_, i) => (
<motion.div
key={i}
initial={{
opacity: 0,
scale: 0,
x: 0,
y: 0,
}}
animate={{
opacity: [0, 1, 0],
scale: [0, 1, 0],
x: Math.cos((i * Math.PI * 2) / 12) * 100,
y: Math.sin((i * Math.PI * 2) / 12) * 100,
}}
transition={{
duration: 1.5,
delay: 0.8 + i * 0.05,
ease: 'easeOut',
}}
className="absolute top-1/2 left-1/2 w-2 h-2 rounded-full"
style={{
backgroundColor: ['#EED2CC', '#7D6E5E', '#00171F'][i % 3]
}}
/>
))}
<motion.h3
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.9, type: 'spring', stiffness: 100 }}
style={{ color: '#00171F' }}
className="text-3xl md:text-4xl font-bold mb-4 relative z-10"
>
Thank you for your message!
</motion.h3>
<motion.p
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 1.0 }}
style={{ color: '#00171F' }}
className="text-lg md:text-xl opacity-90 relative z-10"
>
I&apos;ll get back to you soon.
</motion.p>
{/* Subtle pulse animation */}
<motion.div
animate={{
scale: [1, 1.05, 1],
opacity: [0.3, 0.5, 0.3]
}}
transition={{
duration: 2,
repeat: Infinity,
ease: 'easeInOut'
}}
className="absolute inset-0 rounded-2xl pointer-events-none"
style={{ backgroundColor: '#EED2CC' }}
/>
</motion.div> </motion.div>
<motion.h3
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3 }}
style={{ color: '#00171F' }}
className="text-2xl md:text-3xl font-bold mb-3"
>
Thank you for your message!
</motion.h3>
<motion.p
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.4 }}
style={{ color: '#00171F' }}
className="text-lg opacity-90"
>
I&apos;ll get back to you soon.
</motion.p>
</motion.div> </motion.div>
) : ( ) : (
<motion.form <motion.form

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.