61 lines
2.5 KiB
TypeScript
61 lines
2.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 className='w-full flex flex-row justify-center'>
|
|
<form className=" w-1/2" onSubmit={handleSubmit(handleFormSubmission, handleFormError)}>
|
|
<div className="flex flex-col justify-center h-full">
|
|
<div className=' flex flex-col justify-between space-y-4 w-full'>
|
|
<div className='flex flex-row justify-between space-x-2'>
|
|
<div className='w-1/2'>
|
|
<input placeholder='First Name' className='w-full' {...register('firstName', { required: true })} />
|
|
{errors.firstName && <p>First name is required.</p>}
|
|
</div>
|
|
<div className='w-1/2'>
|
|
<input placeholder='Last Name' className='w-full' {...register('lastName', { required: true })} />
|
|
{errors.lastName && <p>Last name is required.</p>}
|
|
</div>
|
|
</div>
|
|
<div className='flex flex-col space-y-4 w-full'>
|
|
<div>
|
|
<input placeholder='Email' type="email" className='w-full' {...register('email', { required: true })} />
|
|
{errors.email && <p>Email is required.</p>}
|
|
</div>
|
|
<div>
|
|
<select placeholder='Subject...' className='w-full' {...register('subject', { required: true })}>
|
|
<option>Subject...</option>
|
|
<option>Inquiry</option>
|
|
<option>Consultations</option>
|
|
<option>Want To Hire For Potential Job/Contract</option>
|
|
</select>
|
|
{errors.subject && <p>Subject is required.</p>}
|
|
</div>
|
|
<div className="flex flex-col w-full">
|
|
<textarea placeholder='Summary...' className="flex grow h-52" {...register('summary')} />
|
|
{errors.summary && <p>Please enter a message for your Project Inquiry.</p>}
|
|
</div>
|
|
|
|
</div>
|
|
<input className="bg-blue-600" type="submit" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ContactForm; |