Merge pull request #2 from RocPy/fix-contact-form

Fix contact form
RocPy · Dec 31, 2024 · eda2b45 · eda2b45
2 parents 31761a7 + dbf8ed4
commit eda2b45
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 53 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,14 @@
+# RocPy Website
+
+This is the website for the Rochester Python "RocPy" Meetup, a Python user group in Rochester, NY. This website is statically generated with with Material for MkDocs and GitHub Actions. Additionally, we use Web3Forms for a simple submission to send its organizers an email.
+
+## How to Contribute
+Pull requests are welcome! If you'd like to contribute to the website, please follow these steps:
+1. Clone the repository
+2. Create a new branch for your changes
+3. Make your changes
+4. Test your changes locally
+5. Push your changes to your fork
+6. Create a pull request
+
+Your PR must be approved before merging. It will be reviewed for content, style, and adherence to the code of conduct. After merging, the GitHub Action defined in `.github/workflows/ci.yml` will publish the changes to RocPy's organization GitHub Page.
diff --git a/docs/contact.md b/docs/contact.md
@@ -1,56 +1,5 @@
 # Contact Us
 
-<script>
-  const form = document.getElementById("contactForm");
-  const submitBtn = document.getElementById("submitBtn");
-  const messageStatus = document.getElementById("messageStatus");
-
-  form.addEventListener("submit", async function (event) {
-    event.preventDefault();
-
-    // Clear old messages & set button state
-    messageStatus.style.display = "none";
-    messageStatus.classList.remove("success", "error");
-    messageStatus.textContent = "";
-    submitBtn.disabled = true;
-    submitBtn.innerText = "Sending...";
-
-    const formData = new FormData(form);
-
-    try {
-      const response = await fetch("https://api.web3forms.com/submit", {
-        method: "POST",
-        body: formData,
-      });
-      const json = await response.json();
-
-      if (json.success) {
-        // Show success block
-        messageStatus.textContent = "✓ Message sent successfully!";
-        messageStatus.classList.add("success");
-        messageStatus.style.display = "block";
-
-        // Optionally reset the form
-        form.reset();
-      } else {
-        // Show error block
-        messageStatus.textContent =
-          "✗ An error occurred: " + (json.message || "Please try again later.");
-        messageStatus.classList.add("error");
-        messageStatus.style.display = "block";
-      }
-    } catch (error) {
-      // Network or unexpected error
-      messageStatus.textContent = "✗ Could not send message. " + error.message;
-      messageStatus.classList.add("error");
-      messageStatus.style.display = "block";
-    } finally {
-      submitBtn.disabled = false;
-      submitBtn.innerText = "Send Message";
-    }
-  });
-</script>
-
 <form
   action="https://api.web3forms.com/submit"
   method="POST"
@@ -64,7 +13,7 @@
   <!-- <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE"> -->
 
   <!-- 2) Optional honeypot field for spam control -->
-  <input type="hidden" name="honeypot" value="" />
+  <input type="checkbox" name="botcheck" class="hidden" style="display: none;">
 
   <!-- Optional: But Recommended: To Prevent SPAM Submission.  Make sure its hidden by default -->
   <input type="checkbox" name="botcheck" id="" style="display: none;">
@@ -73,7 +22,7 @@
   <!-- <input type="hidden" name="redirect" value="https://example.com/thank-you" /> -->
 
   <!-- 4) Form "from" name -->
-  <input type="hidden" name="RocPy Contact Noticfication" value="Mission Control">
+  <input type="hidden" name="from_name" value="RocPy Contact Notification">
 
   <div class="input-group">
     <label for="name">Name</label>
@@ -124,3 +73,55 @@
 
 <!-- Hidden by default; shown on success or error -->
 <div id="messageStatus" class="message-status" style="display: none;"></div>
+
+
+<script>
+  const form = document.getElementById("contactForm");
+  const submitBtn = document.getElementById("submitBtn");
+  const messageStatus = document.getElementById("messageStatus");
+
+  form.addEventListener("submit", async function (event) {
+    event.preventDefault();
+
+    // Clear old messages & set button state
+    messageStatus.style.display = "none";
+    messageStatus.classList.remove("success", "error");
+    messageStatus.textContent = "";
+    submitBtn.disabled = true;
+    submitBtn.innerText = "Sending...";
+
+    const formData = new FormData(form);
+
+    try {
+      const response = await fetch("https://api.web3forms.com/submit", {
+        method: "POST",
+        body: formData,
+      });
+      const json = await response.json();
+
+      if (json.success) {
+        // Show success block
+        messageStatus.textContent = "✓ Message sent successfully!";
+        messageStatus.classList.add("success");
+        messageStatus.style.display = "block";
+
+        // Optionally reset the form
+        form.reset();
+      } else {
+        // Show error block
+        messageStatus.textContent =
+          "✗ An error occurred: " + (json.message || "Please try again later.");
+        messageStatus.classList.add("error");
+        messageStatus.style.display = "block";
+      }
+    } catch (error) {
+      // Network or unexpected error
+      messageStatus.textContent = "✗ Could not send message. " + error.message;
+      messageStatus.classList.add("error");
+      messageStatus.style.display = "block";
+    } finally {
+      submitBtn.disabled = false;
+      submitBtn.innerText = "Send Message";
+    }
+  });
+</script>