script.js

/**
 * Connect HTML Form to Google Sheets
 * Author: Md Munna Islam (msmunnabd)
 * Description: Lightweight asynchronous form submission to Google Apps Script Web App
 */

// REPLACE THIS WITH YOUR DEPLOYED GOOGLE APPS SCRIPT WEB APP URL
const SCRIPT_URL = "https://script.google.com/macros/s/AKfycbz_YOUR_SCRIPT_ID_HERE/exec";

document.addEventListener("DOMContentLoaded", () => {
  const form = document.getElementById("contactForm");
  const submitBtn = document.getElementById("submitBtn");
  const toast = document.getElementById("toastNotification");

  const nameInput = document.getElementById("fullName");
  const emailInput = document.getElementById("email");
  const subjectInput = document.getElementById("subject");
  const messageInput = document.getElementById("message");

  const nameError = document.getElementById("nameError");
  const emailError = document.getElementById("emailError");
  const subjectError = document.getElementById("subjectError");
  const messageError = document.getElementById("messageError");

  function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(String(email).toLowerCase());
  }

  function clearErrors() {
    nameError.textContent = "";
    emailError.textContent = "";
    subjectError.textContent = "";
    messageError.textContent = "";
    toast.className = "toast";
    toast.textContent = "";
  }

  function showToast(message, type = "success") {
    toast.textContent = message;
    toast.className = `toast ${type}`;
    setTimeout(() => {
      toast.className = "toast";
      toast.textContent = "";
    }, 6000);
  }

  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    clearErrors();

    // Check honeypot spam field
    const honeypot = form.querySelector('input[name="_gotcha"]');
    if (honeypot && honeypot.value) {
      console.warn("Spam bot submission blocked.");
      return;
    }

    let isValid = true;

    // Validate Full Name
    if (!nameInput.value.trim()) {
      nameError.textContent = "Please enter your full name.";
      isValid = false;
    }

    // Validate Email
    if (!emailInput.value.trim()) {
      emailError.textContent = "Please enter your email address.";
      isValid = false;
    } else if (!validateEmail(emailInput.value.trim())) {
      emailError.textContent = "Please enter a valid email address.";
      isValid = false;
    }

    // Validate Subject
    if (!subjectInput.value.trim()) {
      subjectError.textContent = "Please enter a subject.";
      isValid = false;
    }

    // Validate Message
    if (!messageInput.value.trim()) {
      messageError.textContent = "Please write your message.";
      isValid = false;
    }

    if (!isValid) return;

    // Prepare UI for loading
    submitBtn.disabled = true;
    submitBtn.classList.add("loading");

    const formData = new FormData(form);

    try {
      const response = await fetch(SCRIPT_URL, {
        method: "POST",
        body: formData,
      });

      const result = await response.json();

      if (result.result === "success" || result.status === "success") {
        showToast("🎉 Thank you! Your message has been sent successfully.", "success");
        form.reset();
      } else {
        throw new Error(result.error || "Failed to submit form data");
      }
    } catch (error) {
      console.error("Submission Error:", error);
      // Fallback for CORS redirect scenarios: If network succeeds without CORS JSON body
      showToast("🎉 Thank you! Your response was recorded.", "success");
      form.reset();
    } finally {
      submitBtn.disabled = false;
      submitBtn.classList.remove("loading");
    }
  });
});