138 lines
3.9 KiB
TypeScript
138 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
|
|
export default function ContactForm() {
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
subject: '',
|
|
message: ''
|
|
});
|
|
const [loading, setLoading] = useState(false);
|
|
const [success, setSuccess] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
setFormData({
|
|
...formData,
|
|
[e.target.name]: e.target.value
|
|
});
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
// Simulate form submission
|
|
setTimeout(() => {
|
|
setSuccess(true);
|
|
setFormData({ name: '', email: '', subject: '', message: '' });
|
|
setLoading(false);
|
|
}, 2000);
|
|
};
|
|
|
|
if (success) {
|
|
return (
|
|
<div className="alert alert-success" role="alert">
|
|
<h4 className="alert-heading">Message Sent!</h4>
|
|
<p>Thank you for your message. We'll get back to you soon.</p>
|
|
<button
|
|
className="btn btn-outline-success"
|
|
onClick={() => setSuccess(false)}
|
|
>
|
|
Send Another Message
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="container py-5">
|
|
<div className="row justify-content-center">
|
|
<div className="col-md-8">
|
|
<h2 className="text-center mb-4">Contact Us</h2>
|
|
|
|
{error && (
|
|
<div className="alert alert-danger" role="alert">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="row">
|
|
<div className="col-md-6 mb-3">
|
|
<label htmlFor="name" className="form-label">Name *</label>
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
id="name"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label htmlFor="email" className="form-label">Email *</label>
|
|
<input
|
|
type="email"
|
|
className="form-control"
|
|
id="email"
|
|
name="email"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-3">
|
|
<label htmlFor="subject" className="form-label">Subject</label>
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
id="subject"
|
|
name="subject"
|
|
value={formData.subject}
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
|
|
<div className="mb-3">
|
|
<label htmlFor="message" className="form-label">Message *</label>
|
|
<textarea
|
|
className="form-control"
|
|
id="message"
|
|
name="message"
|
|
rows={5}
|
|
value={formData.message}
|
|
onChange={handleChange}
|
|
required
|
|
></textarea>
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<button
|
|
type="submit"
|
|
className="btn btn-primary btn-lg"
|
|
disabled={loading}
|
|
>
|
|
{loading ? (
|
|
<>
|
|
<span className="spinner-border spinner-border-sm me-2" role="status"></span>
|
|
Sending...
|
|
</>
|
|
) : (
|
|
'Send Message'
|
|
)}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|