Skip to content

Instantly share code, notes, and snippets.

@ByteCrak07
Created July 17, 2023 13:18
Show Gist options
  • Save ByteCrak07/64cbe56d338a073d897c2db64e358b3d to your computer and use it in GitHub Desktop.
Save ByteCrak07/64cbe56d338a073d897c2db64e358b3d to your computer and use it in GitHub Desktop.
'use client';
import { FC } from 'react';
import { useForm } from 'react-hook-form';
import { sendEmail } from '@/utils/send-email';
export type FormData = {
name: string;
email: string;
message: string;
};
const Contact: FC = () => {
const { register, handleSubmit } = useForm<FormData>();
function onSubmit(data: FormData) {
sendEmail(data);
}
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div className='mb-5'>
<label
htmlFor='name'
className='mb-3 block text-base font-medium text-black'
>
Full Name
</label>
<input
type='text'
placeholder='Full Name'
className='w-full rounded-md border border-gray-300 bg-white py-3 px-6 text-base font-medium text-gray-700 outline-none focus:border-purple-500 focus:shadow-md'
{...register('name', { required: true })}
/>
</div>
<div className='mb-5'>
<label
htmlFor='email'
className='mb-3 block text-base font-medium text-black'
>
Email Address
</label>
<input
type='email'
placeholder='example@domain.com'
className='w-full rounded-md border border-gray-300 bg-white py-3 px-6 text-base font-medium text-gray-700 outline-none focus:border-purple-500 focus:shadow-md'
{...register('email', { required: true })}
/>
</div>
<div className='mb-5'>
<label
htmlFor='message'
className='mb-3 block text-base font-medium text-black'
>
Message
</label>
<textarea
rows={4}
placeholder='Type your message'
className='w-full resize-none rounded-md border border-gray-300 bg-white py-3 px-6 text-base font-medium text-gray-700 outline-none focus:border-purple-500 focus:shadow-md'
{...register('message', { required: true })}
></textarea>
</div>
<div>
<button className='hover:shadow-form rounded-md bg-purple-500 py-3 px-8 text-base font-semibold text-white outline-none'>
Submit
</button>
</div>
</form>
);
};
export default Contact;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment