Add initial README.md for Astro Starter Kit: Minimal
This commit is contained in:
46
src/components/ContactForm.jsx
Normal file
46
src/components/ContactForm.jsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ContactForm() {
|
||||
const [status, setStatus] = useState("");
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
// Honeypot check
|
||||
if (form.honey.value !== "") {
|
||||
setStatus("Spam detected.");
|
||||
return;
|
||||
}
|
||||
setStatus("Sending...");
|
||||
// Placeholder: would POST to /api/contact
|
||||
setTimeout(() => setStatus("Message sent (placeholder, not yet implemented)."), 1000);
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="max-w-xl mx-auto bg-base-100 p-8 rounded-xl shadow-lg" onSubmit={handleSubmit} autoComplete="off">
|
||||
<div className="mb-4">
|
||||
<label htmlFor="name" className="block font-bold mb-1">Name</label>
|
||||
<input type="text" id="name" name="name" className="input input-bordered w-full" required autoComplete="off" />
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label htmlFor="email" className="block font-bold mb-1">Email</label>
|
||||
<input type="email" id="email" name="email" className="input input-bordered w-full" required autoComplete="off" />
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label htmlFor="subject" className="block font-bold mb-1">Subject</label>
|
||||
<input type="text" id="subject" name="subject" className="input input-bordered w-full" required autoComplete="off" />
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label htmlFor="message" className="block font-bold mb-1">Message</label>
|
||||
<textarea id="message" name="message" className="textarea textarea-bordered w-full" rows={5} required></textarea>
|
||||
</div>
|
||||
{/* Honeypot field for spam protection */}
|
||||
<div style={{ display: "none" }}>
|
||||
<label htmlFor="honey">Do not fill this out</label>
|
||||
<input type="text" id="honey" name="honey" tabIndex="-1" autoComplete="off" />
|
||||
</div>
|
||||
<button type="submit" className="btn btn-primary w-full">Send Message</button>
|
||||
{status && <div className="mt-4 text-center text-sm text-success">{status}</div>}
|
||||
</form>
|
||||
);
|
||||
}
|
Reference in New Issue
Block a user