Skip to content

Commit

Permalink
Add form functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@AmirAgassi
AmirAgassi committed Dec 13, 2024
1 parent 6ddb0a1 commit 023956a
Showing 1 changed file with 136 additions and 52 deletions.
188 changes: 136 additions & 52 deletions src/components/sections/Contact.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { motion } from 'framer-motion'
import { FaXTwitter, FaTelegram } from 'react-icons/fa6'
import { useState } from 'react'
import { FiCheckCircle, FiAlertCircle } from 'react-icons/fi'

const socialLinks = [
{
Expand Down Expand Up @@ -30,6 +32,35 @@ const socialLinks = [
]

export const Contact = () => {
const [isSubmitting, setIsSubmitting] = useState(false)
const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle')

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
setIsSubmitting(true)
setSubmitStatus('idle')

try {
const formElement = e.currentTarget
const formData = new FormData(formElement)

const response = await fetch('https://formsubmit.co/[email protected]', {
method: 'POST',
body: formData,
})

if (!response.ok) throw new Error('Failed to send message')

setSubmitStatus('success')
formElement.reset()
} catch (error) {
console.error('Failed to send message:', error)
setSubmitStatus('error')
} finally {
setIsSubmitting(false)
}
}

return (
<section id="contact" className="relative py-32 bg-[rgb(var(--color-background))]">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
Expand Down Expand Up @@ -60,58 +91,111 @@ export const Contact = () => {
transition={{ duration: 0.6 }}
className="space-y-6"
>
<div>
<label htmlFor="name" className="block text-sm font-medium text-gray-300">
Name
</label>
<input
type="text"
name="name"
id="name"
className="mt-1 block w-full rounded-lg bg-white/5 border border-white/10 px-4 py-2 text-white placeholder-gray-400 focus:border-purple-500 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50"
placeholder="John Doe"
/>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-300">
Email
</label>
<input
type="email"
name="email"
id="email"
className="mt-1 block w-full rounded-lg bg-white/5 border border-white/10 px-4 py-2 text-white placeholder-gray-400 focus:border-purple-500 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50"
placeholder="[email protected]"
/>
</div>
<div>
<label htmlFor="company" className="block text-sm font-medium text-gray-300">
Company
</label>
<input
type="text"
name="company"
id="company"
className="mt-1 block w-full rounded-lg bg-white/5 border border-white/10 px-4 py-2 text-white placeholder-gray-400 focus:border-purple-500 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50"
placeholder="Company Inc."
/>
</div>
<div>
<label htmlFor="message" className="block text-sm font-medium text-gray-300">
Message
</label>
<textarea
id="message"
name="message"
rows={4}
className="mt-1 block w-full rounded-lg bg-white/5 border border-white/10 px-4 py-2 text-white placeholder-gray-400 focus:border-purple-500 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50"
placeholder="Tell us about your interests..."
/>
</div>
<button className="w-full relative overflow-hidden group bg-gradient-to-br from-purple-600 to-purple-800 hover:from-purple-500 hover:to-purple-700 px-8 py-3 rounded-lg transition-all duration-300">
<div className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/10 to-white/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
<span className="relative text-white font-medium">Send Message</span>
</button>
<form
onSubmit={handleSubmit}
className="space-y-6"
action="https://formsubmit.co/[email protected]"
method="POST"
>
{/* Honeypot field to prevent spam */}
<input type="text" name="_honey" style={{ display: 'none' }} />
{/* Disable captcha */}
<input type="hidden" name="_captcha" value="false" />
{/* Success page */}
<input type="hidden" name="_next" value={window.location.href} />

<div>
<label htmlFor="name" className="block text-sm font-medium text-gray-300">
Name
</label>
<input
type="text"
name="name"
id="name"
required
className="mt-1 block w-full rounded-lg bg-white/5 border border-white/10 px-4 py-2 text-white placeholder-gray-400 focus:border-purple-500 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50"
placeholder="John Doe"
/>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-300">
Email
</label>
<input
type="email"
name="email"
id="email"
required
className="mt-1 block w-full rounded-lg bg-white/5 border border-white/10 px-4 py-2 text-white placeholder-gray-400 focus:border-purple-500 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50"
placeholder="[email protected]"
/>
</div>
<div>
<label htmlFor="company" className="block text-sm font-medium text-gray-300">
Company
</label>
<input
type="text"
name="company"
id="company"
required
className="mt-1 block w-full rounded-lg bg-white/5 border border-white/10 px-4 py-2 text-white placeholder-gray-400 focus:border-purple-500 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50"
placeholder="Company Inc."
/>
</div>
<div>
<label htmlFor="message" className="block text-sm font-medium text-gray-300">
Message
</label>
<textarea
id="message"
name="message"
rows={4}
required
className="mt-1 block w-full rounded-lg bg-white/5 border border-white/10 px-4 py-2 text-white placeholder-gray-400 focus:border-purple-500 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50"
placeholder="Tell us about your interests..."
/>
</div>
<button
type="submit"
disabled={isSubmitting}
className="w-full relative overflow-hidden group bg-gradient-to-br from-purple-600 to-purple-800 hover:from-purple-500 hover:to-purple-700 px-8 py-3 rounded-lg transition-all duration-300 disabled:opacity-50"
>
<div className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/10 to-white/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
<span className="relative text-white font-medium">
{isSubmitting ? 'Sending...' : 'Send Message'}
</span>
</button>

{/* Status Messages */}
{submitStatus === 'success' && (
<motion.div
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
className="flex items-center gap-2 p-4 rounded-lg bg-purple-500/10 border border-purple-500/20"
>
<FiCheckCircle className="text-purple-400 text-xl flex-shrink-0" />
<div>
<p className="text-purple-400 font-medium">Message sent successfully!</p>
<p className="text-purple-400/80 text-sm">We'll get back to you soon.</p>
</div>
</motion.div>
)}

{submitStatus === 'error' && (
<motion.div
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
className="flex items-center gap-2 p-4 rounded-lg bg-purple-900/20 border border-purple-800/30"
>
<FiAlertCircle className="text-purple-300 text-xl flex-shrink-0" />
<div>
<p className="text-purple-300 font-medium">Failed to send message</p>
<p className="text-purple-400/80 text-sm">Please try again or contact us directly.</p>
</div>
</motion.div>
)}
</form>
</motion.div>

{/* Contact Info */}
Expand Down

0 comments on commit 023956a

Please sign in to comment.