next-cochise/src/components/CommentForm.tsx

77 lines
2.2 KiB
TypeScript
Raw Normal View History

2025-02-02 12:07:44 +07:00
"use client";
export default function CommentForm() {
return (
<form className="form" onSubmit={(e) => e.preventDefault()}>
<div className="row mb-30 mb-md-20">
<div className="col-md-6 mb-md-20">
{/* Name */}
<label htmlFor="name">Name *</label>
<input
type="text"
name="name"
id="name"
className="input-lg input-circle form-control"
placeholder="Enter your name"
maxLength={100}
required
aria-required="true"
/>
</div>
<div className="col-md-6">
{/* Email */}
<label htmlFor="email">Email *</label>
<input
type="email"
name="email"
id="email"
className="input-lg input-circle form-control"
placeholder="Enter your email"
maxLength={100}
required
aria-required="true"
/>
</div>
</div>
<div className="mb-30 mb-md-20">
{/* Website */}
<label htmlFor="website">Website</label>
<input
type="text"
name="website"
id="website"
className="input-lg input-circle form-control"
placeholder="Enter your website"
maxLength={100}
/>
</div>
{/* Comment */}
<div className="mb-30 mb-md-20">
<label htmlFor="comment">Comment</label>
<textarea
name="comment"
id="comment"
className="input-lg input-circle form-control"
rows={6}
placeholder="Enter your comment"
maxLength={400}
defaultValue={""}
/>
</div>
{/* Send Button */}
<button
type="submit"
className="submit_btn btn btn-mod btn-color btn-medium btn-circle btn-hover-anim"
>
<span>Send Comment</span>
</button>
{/* Inform Tip */}
<div className="form-tip form-tip-2 bg-gray-light-1 round mt-30 p-3">
* - these fields are required. By sending the form you agree to the{" "}
<a href="#">Terms &amp; Conditions</a> and{" "}
<a href="#">Privacy Policy</a>.
</div>
</form>
);
}