11import React , { useState , useEffect , useCallback } from "react" ;
2+ import AlertComponent from "./AlertComponent" ;
23
34function ContactForm ( ) {
45 const isDevelopment = process . env . NODE_ENV === "development" ;
56 const [ name , setName ] = useState ( "" ) ;
67 const [ email , setEmail ] = useState ( "" ) ;
78 const [ message , setMessage ] = useState ( "" ) ;
8- const handleSubmit = useCallback ( async ( event ) => {
9- event . preventDefault ( ) ;
10- let data = { name, email, message } ;
11- try {
12- // clear form
13- setName ( '' ) ;
14- setEmail ( '' ) ;
15- setMessage ( '' ) ;
16- if ( isDevelopment ) {
17- data = {
18- name : "testUser1" ,
19- email : "test@test.com" ,
20- message : "Hello, this is a test message."
21- } ;
9+ const [ animateAlert , setAnimateAlert ] = useState ( false ) ;
10+
11+ useEffect ( ( ) => {
12+ const timer = setTimeout ( ( ) => {
13+ setAnimateAlert ( true ) ;
14+ } , 500 ) ;
15+ return ( ) => clearTimeout ( timer ) ;
16+ } , [ ] ) ;
17+
18+ const handleSubmit = useCallback (
19+ async ( event ) => {
20+ event . preventDefault ( ) ;
21+ let data = { name, email, message } ;
22+ try {
23+ setName ( "" ) ;
24+ setEmail ( "" ) ;
25+ setMessage ( "" ) ;
26+ if ( isDevelopment ) {
27+ data = {
28+ name : "testUser1" ,
29+ email : "test@test.com" ,
30+ message : "Hello, this is a test message." ,
31+ } ;
32+ }
33+ console . log ( "Form submission successful:" , data ) ;
34+ } catch ( error ) {
35+ console . error ( "Form submission error:" , error ) ;
2236 }
23- console . log ( 'Form submission successful:' , data ) ;
24- } catch ( error ) {
25- console . error ( 'Form submission error:' , error ) ;
26- console . log ( 'Error caught' ) ;
27- }
28- } , [ name , email , message , isDevelopment ] ) ;
37+ } ,
38+ [ name , email , message , isDevelopment ]
39+ ) ;
2940
3041 useEffect ( ( ) => {
3142 if ( isDevelopment ) {
@@ -43,13 +54,26 @@ function ContactForm() {
4354
4455 return (
4556 < >
46- < form name = "contact" netlify = "true" netlify-honeypot = "bot-field" data-netlify-recaptcha = "true" hidden >
57+ < form name = "contact" netlify = "true" netlify-honeypot = "bot-field" data-netlify-recaptcha = "true" hidden >
4758 < input type = "text" name = "name" />
4859 < input type = "email" name = "email" />
4960 < textarea name = "message" > </ textarea >
5061 </ form >
5162
5263 < div className = "formFlex" >
64+
65+ { /* Alert Message */ }
66+ < AlertComponent message = {
67+ < >
68+ This website serves as a showcase of my development work. The source code is hosted on GitHub and deployed via my personal Netlify account.
69+ Therefore, all emails sent through this form will be directed to me. For inquiries related to
70+ < strong className = "purple" > Studio Zed</ strong > , please contact
71+ < a href = "https://www.newcastle.edu.au/profile/simone-ocallaghan" > Dr. Simone O'Callaghan</ a > .
72+ </ >
73+ }
74+ animateAlert = { animateAlert } />
75+
76+ { /* Form */ }
5377 < div className = "form" >
5478 < div className = "top-bar" >
5579 < span > </ span >
@@ -59,35 +83,21 @@ function ContactForm() {
5983 < div className = "title" > Get in touch!</ div >
6084 < form name = "contact" method = "POST" data-netlify-recaptcha = "true" >
6185 < input type = "hidden" name = "form-name" value = "contact" />
62-
63- { /* Name */ }
6486 < div className = "input-container ic1" >
65- < label className = "form-label" htmlFor = "name" > </ label >
66- < input className = "form-control input" type = "text" id = "name" name = "name" value = { name } onChange = { ( e ) => setName ( e . target . value ) }
67- placeholder = "Name"
68- required />
87+ < input className = "form-control input" type = "text" id = "name" name = "name" value = { name }
88+ onChange = { ( e ) => setName ( e . target . value ) } placeholder = "Name" required />
6989 </ div >
70-
71- { /* Email */ }
7290 < div className = "input-container ic2" >
73- < label className = "form-label" htmlFor = "email" > </ label >
74- < input className = "form-control input" type = "email" id = "email" name = "email" value = { email } onChange = { ( e ) => setEmail ( e . target . value ) }
75- placeholder = "Email"
76- required
77- pattern = "[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"
78- title = "Please enter a valid email address"
79- />
91+ < input className = "form-control input" type = "email" id = "email" name = "email" value = { email }
92+ onChange = { ( e ) => setEmail ( e . target . value ) } placeholder = "Email"
93+ required pattern = "[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"
94+ title = "Please enter a valid email address" />
8095 </ div >
81-
82- { /* Message */ }
8396 < div className = "input-container ic2" >
84- < label className = "form-label" htmlFor = "message" > </ label >
85- < textarea className = "form-control input from-textarea" id = "message" name = "message" value = { message } onChange = { ( e ) => setMessage ( e . target . value ) }
86- placeholder = "Message"
87- required />
97+ < textarea className = "form-control input from-textarea" id = "message" name = "message"
98+ value = { message } onChange = { ( e ) => setMessage ( e . target . value ) } placeholder = "Message" required />
8899 </ div >
89100 < div data-netlify-recaptcha = "true" className = "reCaptcha" > </ div >
90- { /* Submit */ }
91101 < button title = "submit" className = "btn btn-danger submit" type = "submit" style = { { position : "relative" , marginTop : "68px" } } >
92102 Submit
93103 </ button >
0 commit comments