hazemKrimi/personal-website
1
0
Fork 0
mirror of https://github.com/hazemKrimi/personal-website.git synced 2026-05-01 18:00:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve contact form

Browse Source
This commit is contained in:
Hazem Krimi
2021-04-10 00:07:16 +01:00
parent e6e1386dab
commit b376fc6668
1 changed files with 5 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/about.tsx
+5 -7
View File
@@ -75,6 +75,7 @@ const About: FC = () => {
message: '' message: ''
}); });
const [state, Submit] = useForm('xoqpgyge'); const [state, Submit] = useForm('xoqpgyge');
const [submitted, setSubmitted] = useState<boolean>(false);
const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => { const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
setForm({ ...form, [event.target.name]: event.target.value }); setForm({ ...form, [event.target.name]: event.target.value });
@@ -83,7 +84,9 @@ const About: FC = () => {
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => { const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
try { try {
await Submit(event); await Submit(event);
setSubmitted(true);
} finally { } finally {
setTimeout(() => setSubmitted(false), 1000);
setForm({ name: '', email: '', message: '' }); setForm({ name: '', email: '', message: '' });
} }
}; };
@@ -126,12 +129,7 @@ const About: FC = () => {
</div> </div>
</div> </div>
<div> <div>
<h1> <h1>Contact Me {submitted && <span className='success'>Message sent ✔️</span>}</h1>
Contact Me{' '}
{state.succeeded && state.submitting && (
<span className='success'>Message sent ✔️</span>
)}
</h1>
<form className='contact' onSubmit={handleSubmit}> <form className='contact' onSubmit={handleSubmit}>
<Input <Input
type='text' type='text'
@@ -173,7 +171,7 @@ const About: FC = () => {
field='message' field='message'
errors={state.errors} errors={state.errors}
/> />
<MDXButton type='submit' variant='action' disabled={state.submitting}> <MDXButton type='submit' variant='action' disabled={state.submitting || submitted}>
Submit Submit
</MDXButton> </MDXButton>
</form> </form>