oonyeje/oonyeje-portfolio
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

- fixed form styling for contact form

Browse Source
This commit is contained in:
oonyeje 2023-11-28 23:01:23 -05:00
parent 294ddf90da
commit a3899325b8
3 changed files with 33 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
components/form/ContactForm/index.tsx
View File

@ -16,19 +16,39 @@ const ContactForm = () => {
}; };
return ( return (
<div> <div className='w-full flex flex-row justify-center'>
<form className="flex flex-row justify-center w-full" onSubmit={handleSubmit(handleFormSubmission, handleFormError)}> <form className=" w-1/2" onSubmit={handleSubmit(handleFormSubmission, handleFormError)}>
<div className="flex flex-col justify-center h-full"> <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-col justify-between space-y-4 w-full'>
<div className='flex flex-row space-x-2'> <div className='flex flex-row justify-between space-x-2'>
<input placeholder='First Name' className='w-1/2' {...register('firstName', { required: true })} /> <div className='w-1/2'>
<input placeholder='Last Name' className='w-1/2' {...register('lastName', { required: true })} /> <input placeholder='First Name' className='w-full' {...register('firstName', { required: true })} />
{errors.firstName && <p>First name is required.</p>} {errors.firstName && <p>First name is required.</p>}
{errors.lastName && <p>Last 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>
<div className="flex flex-row w-full"> <div className='flex flex-col space-y-4 w-full'>
<textarea placeholder='Summary...' className="flex grow h-52" {...register('summary')} /> <div>
{errors.summary && <p>Please enter a message for your Project Inquiry.</p>} <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> </div>
<input className="bg-blue-600" type="submit" /> <input className="bg-blue-600" type="submit" />
</div> </div>

1
package.json
View File

@ -17,6 +17,7 @@
"@fortawesome/react-fontawesome": "^0.2.0", "@fortawesome/react-fontawesome": "^0.2.0",
"iframe-resizer-react": "^1.1.0", "iframe-resizer-react": "^1.1.0",
"next": "latest", "next": "latest",
"nodemailer": "^6.9.7",
"pdfjs-dist": "^4.0.269", "pdfjs-dist": "^4.0.269",
"react": "latest", "react": "latest",
"react-dom": "latest", "react-dom": "latest",

4
pages/index.tsx
View File

@ -120,13 +120,13 @@ export default function Home() {
<div className='flex flex-col h-full w-full justify-center'> <div className='flex flex-col h-full w-full justify-center'>
<ContactForm/> <ContactForm/>
</div> </div>
<span className="cursor-pointer" onClick={() => { <span className="cursor-pointer self-end" onClick={() => {
executeScrollToLandiing(); executeScrollToLandiing();
setTimeout(() => { setTimeout(() => {
setContactClicked(false); setContactClicked(false);
}, 10); }, 10);
}}> }}>
<FontAwesomeIcon width={25} height={50} icon={faChevronCircleUp} className="fas fa-chevron-circle-up" style={{ color: "white" }} /> <FontAwesomeIcon width={25} height={200} icon={faChevronCircleUp} className="fas fa-chevron-circle-up" style={{ color: "white" }} />
</span> </span>
</div> </div>
</div> </div>