389389
390390
391391< h1 id ="contact-us "> Contact Us</ h1 >
392- < script >
393- const form = document . getElementById ( "contactForm" ) ;
394- const submitBtn = document . getElementById ( "submitBtn" ) ;
395- const messageStatus = document . getElementById ( "messageStatus" ) ;
396-
397- form . addEventListener ( "submit" , async function ( event ) {
398- event . preventDefault ( ) ;
399-
400- // Clear old messages & set button state
401- messageStatus . style . display = "none" ;
402- messageStatus . classList . remove ( "success" , "error" ) ;
403- messageStatus . textContent = "" ;
404- submitBtn . disabled = true ;
405- submitBtn . innerText = "Sending..." ;
406-
407- const formData = new FormData ( form ) ;
408-
409- try {
410- const response = await fetch ( "https://api.web3forms.com/submit" , {
411- method : "POST" ,
412- body : formData ,
413- } ) ;
414- const json = await response . json ( ) ;
415-
416- if ( json . success ) {
417- // Show success block
418- messageStatus . textContent = "✓ Message sent successfully!" ;
419- messageStatus . classList . add ( "success" ) ;
420- messageStatus . style . display = "block" ;
421-
422- // Optionally reset the form
423- form . reset ( ) ;
424- } else {
425- // Show error block
426- messageStatus . textContent =
427- "✗ An error occurred: " + ( json . message || "Please try again later." ) ;
428- messageStatus . classList . add ( "error" ) ;
429- messageStatus . style . display = "block" ;
430- }
431- } catch ( error ) {
432- // Network or unexpected error
433- messageStatus . textContent = "✗ Could not send message. " + error . message ;
434- messageStatus . classList . add ( "error" ) ;
435- messageStatus . style . display = "block" ;
436- } finally {
437- submitBtn . disabled = false ;
438- submitBtn . innerText = "Send Message" ;
439- }
440- } ) ;
441- </ script >
442-
443392< p > < form
444393 action ="https://api.web3forms.com/submit "
445394 method ="POST "
@@ -453,7 +402,7 @@ <h1 id="contact-us">Contact Us</h1>
453402 <!-- <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE"> -->
454403
455404 <!-- 2) Optional honeypot field for spam control -->
456- < input type ="hidden " name ="honeypot " value ="" / >
405+ < input type ="checkbox " name ="botcheck " class =" hidden " style =" display: none; " >
457406
458407 <!-- Optional: But Recommended: To Prevent SPAM Submission. Make sure its hidden by default -->
459408 < input type ="checkbox " name ="botcheck " id ="" style ="display: none; ">
@@ -462,7 +411,7 @@ <h1 id="contact-us">Contact Us</h1>
462411 <!-- <input type="hidden" name="redirect" value="https://example.com/thank-you" /> -->
463412
464413 <!-- 4) Form "from" name -->
465- < input type ="hidden " name ="RocPy Contact Noticfication " value ="Mission Control ">
414+ < input type ="hidden " name ="from_name " value ="RocPy Contact Notification ">
466415
467416 < div class ="input-group ">
468417 < label for ="name "> Name</ label >
@@ -514,6 +463,57 @@ <h1 id="contact-us">Contact Us</h1>
514463<!-- Hidden by default; shown on success or error -->
515464< div id ="messageStatus " class ="message-status " style ="display: none; "> </ div >
516465
466+ < script >
467+ const form = document . getElementById ( "contactForm" ) ;
468+ const submitBtn = document . getElementById ( "submitBtn" ) ;
469+ const messageStatus = document . getElementById ( "messageStatus" ) ;
470+
471+ form . addEventListener ( "submit" , async function ( event ) {
472+ event . preventDefault ( ) ;
473+
474+ // Clear old messages & set button state
475+ messageStatus . style . display = "none" ;
476+ messageStatus . classList . remove ( "success" , "error" ) ;
477+ messageStatus . textContent = "" ;
478+ submitBtn . disabled = true ;
479+ submitBtn . innerText = "Sending..." ;
480+
481+ const formData = new FormData ( form ) ;
482+
483+ try {
484+ const response = await fetch ( "https://api.web3forms.com/submit" , {
485+ method : "POST" ,
486+ body : formData ,
487+ } ) ;
488+ const json = await response . json ( ) ;
489+
490+ if ( json . success ) {
491+ // Show success block
492+ messageStatus . textContent = "✓ Message sent successfully!" ;
493+ messageStatus . classList . add ( "success" ) ;
494+ messageStatus . style . display = "block" ;
495+
496+ // Optionally reset the form
497+ form . reset ( ) ;
498+ } else {
499+ // Show error block
500+ messageStatus . textContent =
501+ "✗ An error occurred: " + ( json . message || "Please try again later." ) ;
502+ messageStatus . classList . add ( "error" ) ;
503+ messageStatus . style . display = "block" ;
504+ }
505+ } catch ( error ) {
506+ // Network or unexpected error
507+ messageStatus . textContent = "✗ Could not send message. " + error . message ;
508+ messageStatus . classList . add ( "error" ) ;
509+ messageStatus . style . display = "block" ;
510+ } finally {
511+ submitBtn . disabled = false ;
512+ submitBtn . innerText = "Send Message" ;
513+ }
514+ } ) ;
515+ </ script >
516+
517517
518518
519519
0 commit comments