41 lines
1.5 KiB
TypeScript
41 lines
1.5 KiB
TypeScript
import { useForm, SubmitHandler, FieldValues } from 'react-hook-form';
|
|
|
|
const ContactForm = () => {
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm();
|
|
|
|
const handleFormSubmission: SubmitHandler<FieldValues> = (data) => {
|
|
console.log(data)
|
|
};
|
|
|
|
const handleFormError: SubmitHandler<FieldValues> = (error) => {
|
|
console.log(error)
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<form className="flex justify-center" onSubmit={handleSubmit(handleFormSubmission, handleFormError)}>
|
|
<div className="w-full">
|
|
<div className=' flex flex-col justify-between space-y-4 w-full'>
|
|
<div className='flex flex-row space-x-2'>
|
|
<input placeholder='First Name' className='w-1/2' {...register('firstName', { required: true })} />
|
|
<input placeholder='Last Name' className='w-1/2' {...register('lastName', { required: true })} />
|
|
{errors.firstName && <p>First name is required.</p>}
|
|
{errors.lastName && <p>Last name is required.</p>}
|
|
</div>
|
|
<div className="flex flex-row w-full">
|
|
<textarea placeholder='Summary...' className="flex grow" {...register('summary')} />
|
|
{errors.summary && <p>Please enter a message for your Project Inquiry.</p>}
|
|
</div>
|
|
<input className="bg-blue-600" type="submit" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ContactForm; |