|
1 | 1 | # Contact Us |
2 | 2 |
|
3 | | -<script> |
4 | | - const form = document.getElementById("contactForm"); |
5 | | - const submitBtn = document.getElementById("submitBtn"); |
6 | | - const messageStatus = document.getElementById("messageStatus"); |
7 | | - |
8 | | - form.addEventListener("submit", async function (event) { |
9 | | - event.preventDefault(); |
10 | | - |
11 | | - // Clear old messages & set button state |
12 | | - messageStatus.style.display = "none"; |
13 | | - messageStatus.classList.remove("success", "error"); |
14 | | - messageStatus.textContent = ""; |
15 | | - submitBtn.disabled = true; |
16 | | - submitBtn.innerText = "Sending..."; |
17 | | - |
18 | | - const formData = new FormData(form); |
19 | | - |
20 | | - try { |
21 | | - const response = await fetch("https://api.web3forms.com/submit", { |
22 | | - method: "POST", |
23 | | - body: formData, |
24 | | - }); |
25 | | - const json = await response.json(); |
26 | | - |
27 | | - if (json.success) { |
28 | | - // Show success block |
29 | | - messageStatus.textContent = "✓ Message sent successfully!"; |
30 | | - messageStatus.classList.add("success"); |
31 | | - messageStatus.style.display = "block"; |
32 | | - |
33 | | - // Optionally reset the form |
34 | | - form.reset(); |
35 | | - } else { |
36 | | - // Show error block |
37 | | - messageStatus.textContent = |
38 | | - "✗ An error occurred: " + (json.message || "Please try again later."); |
39 | | - messageStatus.classList.add("error"); |
40 | | - messageStatus.style.display = "block"; |
41 | | - } |
42 | | - } catch (error) { |
43 | | - // Network or unexpected error |
44 | | - messageStatus.textContent = "✗ Could not send message. " + error.message; |
45 | | - messageStatus.classList.add("error"); |
46 | | - messageStatus.style.display = "block"; |
47 | | - } finally { |
48 | | - submitBtn.disabled = false; |
49 | | - submitBtn.innerText = "Send Message"; |
50 | | - } |
51 | | - }); |
52 | | -</script> |
53 | | - |
54 | 3 | <form |
55 | 4 | action="https://api.web3forms.com/submit" |
56 | 5 | method="POST" |
57 | 6 | class="contact-form" |
58 | 7 | id="contactForm" |
59 | 8 | > |
60 | 9 | <!-- 1) Your Access Key from Web3Forms --> |
61 | | - <input type="hidden" name="access_key" value="9c04327a-dea1-4938-8b84-37de91941a7b" /> |
| 10 | + <!-- <input type="hidden" name="access_key" value="9c04327a-dea1-4938-8b84-37de91941a7b" /> --> |
62 | 11 |
|
63 | 12 | <!-- Uncomment below to test emails without sending them --> |
64 | 13 | <!-- <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE"> --> |
| 14 | + <input type="hidden" name="access_key" value="473220fe-064b-4ae1-a212-7a8458491ea5"> |
65 | 15 |
|
66 | 16 | <!-- 2) Optional honeypot field for spam control --> |
67 | | - <input type="hidden" name="honeypot" value="" /> |
| 17 | + <input type="checkbox" name="botcheck" class="hidden" style="display: none;"> |
68 | 18 |
|
69 | 19 | <!-- Optional: But Recommended: To Prevent SPAM Submission. Make sure its hidden by default --> |
70 | 20 | <input type="checkbox" name="botcheck" id="" style="display: none;"> |
|
73 | 23 | <!-- <input type="hidden" name="redirect" value="https://example.com/thank-you" /> --> |
74 | 24 |
|
75 | 25 | <!-- 4) Form "from" name --> |
76 | | - <input type="hidden" name="RocPy Contact Noticfication" value="Mission Control"> |
| 26 | + <input type="hidden" name="from_name" value="RocPy Contact Notification"> |
77 | 27 |
|
78 | 28 | <div class="input-group"> |
79 | 29 | <label for="name">Name</label> |
|
124 | 74 |
|
125 | 75 | <!-- Hidden by default; shown on success or error --> |
126 | 76 | <div id="messageStatus" class="message-status" style="display: none;"></div> |
| 77 | + |
| 78 | + |
| 79 | +<script> |
| 80 | + const form = document.getElementById("contactForm"); |
| 81 | + const submitBtn = document.getElementById("submitBtn"); |
| 82 | + const messageStatus = document.getElementById("messageStatus"); |
| 83 | + |
| 84 | + form.addEventListener("submit", async function (event) { |
| 85 | + event.preventDefault(); |
| 86 | + |
| 87 | + // Clear old messages & set button state |
| 88 | + messageStatus.style.display = "none"; |
| 89 | + messageStatus.classList.remove("success", "error"); |
| 90 | + messageStatus.textContent = ""; |
| 91 | + submitBtn.disabled = true; |
| 92 | + submitBtn.innerText = "Sending..."; |
| 93 | + |
| 94 | + const formData = new FormData(form); |
| 95 | + |
| 96 | + try { |
| 97 | + const response = await fetch("https://api.web3forms.com/submit", { |
| 98 | + method: "POST", |
| 99 | + body: formData, |
| 100 | + }); |
| 101 | + const json = await response.json(); |
| 102 | + |
| 103 | + if (json.success) { |
| 104 | + // Show success block |
| 105 | + messageStatus.textContent = "✓ Message sent successfully!"; |
| 106 | + messageStatus.classList.add("success"); |
| 107 | + messageStatus.style.display = "block"; |
| 108 | + |
| 109 | + // Optionally reset the form |
| 110 | + form.reset(); |
| 111 | + } else { |
| 112 | + // Show error block |
| 113 | + messageStatus.textContent = |
| 114 | + "✗ An error occurred: " + (json.message || "Please try again later."); |
| 115 | + messageStatus.classList.add("error"); |
| 116 | + messageStatus.style.display = "block"; |
| 117 | + } |
| 118 | + } catch (error) { |
| 119 | + // Network or unexpected error |
| 120 | + messageStatus.textContent = "✗ Could not send message. " + error.message; |
| 121 | + messageStatus.classList.add("error"); |
| 122 | + messageStatus.style.display = "block"; |
| 123 | + } finally { |
| 124 | + submitBtn.disabled = false; |
| 125 | + submitBtn.innerText = "Send Message"; |
| 126 | + } |
| 127 | + }); |
| 128 | +</script> |
0 commit comments