@@ -644,9 +644,9 @@ <h2>Connect With Me</h2>
644
644
< h3 > Send a Message</ h3 >
645
645
< form id ="contactForm ">
646
646
< div style ="display: grid; gap: 1rem; ">
647
- < input type ="text " class ="search-input " placeholder ="Your Name " required >
648
- < input type ="email " class ="search-input " placeholder ="Your Email " required >
649
- < textarea class ="search-input " placeholder ="Your Message " rows ="5 " required style ="resize: vertical; "> </ textarea >
647
+ < input type ="text " name =" name " class ="search-input " placeholder ="Your Name " required >
648
+ < input type ="email " name =" email " class ="search-input " placeholder ="Your Email " required >
649
+ < textarea name =" message " class ="search-input " placeholder ="Your Message " rows ="5 " required style ="resize: vertical; "> </ textarea >
650
650
< button type ="submit " class ="button ">
651
651
< i class ="fas fa-paper-plane "> </ i > Send Message
652
652
</ button >
@@ -771,40 +771,35 @@ <h3>Send a Message</h3>
771
771
contactForm . addEventListener ( 'submit' , async ( e ) => {
772
772
e . preventDefault ( ) ;
773
773
774
- const submitBtn = contactForm . querySelector ( 'button' ) ;
775
- const originalText = submitBtn . innerHTML ;
776
- submitBtn . innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...' ;
777
- submitBtn . disabled = true ;
778
-
779
- // Collect form data
780
774
const formData = new FormData ( contactForm ) ;
775
+ const name = formData . get ( 'name' ) . trim ( ) ;
776
+ const email = formData . get ( 'email' ) . trim ( ) ;
777
+ const message = formData . get ( 'message' ) . trim ( ) ;
778
+
779
+ // Basic validation
780
+ if ( ! name || ! email || ! message ) {
781
+ alert ( 'Please fill in all fields' ) ;
782
+ return ;
783
+ }
784
+
785
+ // Email validation
786
+ const emailRegex = / ^ [ ^ \s @ ] + @ [ ^ \s @ ] + \. [ ^ \s @ ] + $ / ;
787
+ if ( ! emailRegex . test ( email ) ) {
788
+ alert ( 'Please enter a valid email address' ) ;
789
+ return ;
790
+ }
791
+
792
+ // Sanitize message content
793
+ const sanitizedMessage = message
794
+ . replace ( / [ < > ] / g, '' ) // Remove HTML tags
795
+ . replace ( / ( \r \n | \n | \r ) / gm, ' ' ) ; // Replace newlines
781
796
782
797
try {
783
- const response = await fetch ( '/contact.php' , {
784
- method : 'POST' ,
785
- body : formData
786
- } ) ;
787
-
788
- if ( response . ok ) {
789
- submitBtn . innerHTML = '<i class="fas fa-check"></i> Message Sent!' ;
790
- submitBtn . style . background = 'var(--success)' ;
791
- setTimeout ( ( ) => {
792
- contactForm . reset ( ) ;
793
- submitBtn . innerHTML = originalText ;
794
- submitBtn . style . background = '' ;
795
- submitBtn . disabled = false ;
796
- } , 3000 ) ;
797
- } else {
798
- throw new Error ( 'Submission failed' ) ;
799
- }
798
+ const mailtoUrl = `mailto:[email protected] ?subject=Portfolio Contact: ${ encodeURIComponent ( name ) } &body=${ encodeURIComponent ( sanitizedMessage ) } %0D%0A%0D%0AFrom: ${ encodeURIComponent ( name ) } %0D%0AEmail: ${ encodeURIComponent ( email ) } ` ;
799
+ window . location . href = mailtoUrl ;
800
+ contactForm . reset ( ) ;
800
801
} catch ( err ) {
801
- submitBtn . innerHTML = '<i class="fas fa-exclamation-triangle"></i> Error!' ;
802
- submitBtn . style . background = 'var(--error)' ;
803
- setTimeout ( ( ) => {
804
- submitBtn . innerHTML = originalText ;
805
- submitBtn . style . background = '' ;
806
- submitBtn . disabled = false ;
807
- } , 3000 ) ;
802
+ alert ( 'There was an error sending your message. Please try again.' ) ;
808
803
}
809
804
} ) ;
810
805
0 commit comments