79 lines
3.0 KiB
TypeScript
79 lines
3.0 KiB
TypeScript
import { useState } from 'react';
|
|
import { useForm, SubmitHandler, FieldValues } from 'react-hook-form';
|
|
|
|
const ContactForm = () => {
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm();
|
|
|
|
const [submitted, setSubmitted] = useState(false);
|
|
|
|
const handleFormSubmission: SubmitHandler<FieldValues> = async (data) => {
|
|
console.log(data)
|
|
|
|
const res = await fetch('/api/contact', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Accept': 'application/json, text/plain, */*',
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(data)
|
|
});
|
|
|
|
console.log('Response received')
|
|
if (res.status === 200) {
|
|
console.log('Response succeeded!')
|
|
setSubmitted(true)
|
|
}
|
|
};
|
|
|
|
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 text-white rounded-sm cursor-pointer" type="submit" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ContactForm; |