How to add HTML to App Script

 Bhai SHEET_ENDPOINT me aapka Apps Script Web App URL daalna hota hai — woh URL jo aapko Apps Script deploy karne ke baad milta hai.

Main step-by-step batata hoon taaki confusion ZERO ho jaye:

✅ SHEET_ENDPOINT kya hota hai?

Ye woh URL hota hai jisme aapka form data bheja jaata hai → jise Apps Script receive karta hai → jise Google Sheet me write karta hai.

HTML me aapka code aisa hota hai:

const SHEET_ENDPOINT = "REPLACE_WITH_YOUR_APPS_SCRIPT_WEB_APP_URL";

Yahi string aapko replace karni hai — sirf yahi line.

✅ URL kahan milta hai? (Apps Script Web App deploy karke)

  1. Apps Script khol lijiye

  2. Deploy → New deployment

  3. Select type → Web app


  4. Set:

    • Description: anything

    • Execute as: Me (your email)

    • Who has access: Anyone

  5. Deploy par click karein.

  6. Aapko ek URL milega jaise:

https://script.google.com/macros/s/AKfycxyz12345ABCDEFG/exec

Yahi URL aapka SHEET_ENDPOINT hai.

✅ HTML me exactly kya replace karna hai?

Aapki current line:

const SHEET_ENDPOINT = "REPLACE_WITH_YOUR_APPS_SCRIPT_WEB_APP_URL";

Isko replace karke aise likhna hai:

const SHEET_ENDPOINT = "https://script.google.com/macros/s/AKfycxyz12345ABCDEFG/exec";

(Example URL mat use karna — apna deploy kiya hua web app URL hi paste karna.)

💯 Example (final)

Aapka final code aise dikhna chahiye:

const SHEET_ENDPOINT = "https://script.google.com/macros/s/AKfycby1udE-dUUnrBf1P6b665PWCvr-H0JK8Z3vpztGmdduQVXFboJRvVGk8DGbDa2bqxfeYA/exec";

(Ye main example ke liye aapki existing URL copy karke likh raha hoon. Agar aapne naye script deploy kiya hai to naya URL paste karna.)

❗ IMPORTANT

Agar SHEET_ENDPOINT wrong hoga to:

  • type server tak nahi pahunchega

  • dono form ka data ek hi sheet me jayega

  • Debug sheet me empty / unexpected data dikhega

Isliye sabse pehla aur sabse important step → SHEET_ENDPOINT correct set karna.

🔥 Agar aap chaho:

Aap mujhe apna current Apps Script deploy URL bhej do (koi personal info nahi hota),
main aapko EXACT line ready bana ke de dunga → bas copy paste karo, ho gaya.

Chaaho to screenshot bhi bhej sakte ho.

Theek hai — main seedha aur simple fix de raha hoon jo 100% guarantee karega ke dispatch form ka payload type: "dispatch" bheje aur meeting form ka payload type: "meeting" bheje. Aapko bas niche diye gaye JS snippets apne HTML file ke <script> block me existing postFormData, dispatchForm submit handler, aur meetingForm submit handler se replace karne hain.

✔️ Pehle check: ensure SHEET_ENDPOINT constant aapke HTML me correct Apps Script Web App URL pe set ho (example: "https://script.google.com/macros/s/XXX/exec").
✔️ Apps Script ko dobara deploy karne ki zaroorat nahi jab tak aapne Apps Script me kuch change nahi kiya.

1) Replace postFormData (use JSON and include headers)

Paste/replace this function in your HTML <script> (same place where old postFormData is):

/* POST helper: send JSON to Apps Script (ensures content-type and type field preserved) */
async function postFormData(payload){
  if(!SHEET_ENDPOINT || SHEET_ENDPOINT.includes("REPLACE_WITH")) {
    throw new Error("SHEET_ENDPOINT not configured. Replace SHEET_ENDPOINT with your Apps Script web app URL.");
  }
  const resp = await fetch(SHEET_ENDPOINT, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(payload)
  });
  const text = await resp.text().catch(()=>null);
  if(!resp.ok) throw new Error("Server error " + resp.status + " — " + text);
  try { return JSON.parse(text); } catch(e){ return text; }
}

2) Replace dispatchForm submit handler

Find your current $('dispatchForm').addEventListener('submit', ...) block and replace entire handler with this:

/* Dispatch form submit — sends explicit type: "dispatch" */
$('dispatchForm').addEventListener('submit', async function(e){
  e.preventDefault();
  showMsg('dispatchMsg','Submitting...', 'muted');

  const name = ($('name').value || '').trim();
  const company = ($('company').value || '').trim();
  const designation = ($('designation').value || '').trim();
  const email = ($('email').value || '').trim();
  const phoneRaw = ($('phone').value || '').replace(/\D/g,'');
  const projectName = ($('projectName').value || '').trim();
  const projectAddress = ($('projectAddress').value || '').trim();

  // required validation
  if(!name || !company || !designation || !email || !phoneRaw || !projectName || !projectAddress){
    showMsg('dispatchMsg','Please fill all required fields.', 'error');
    return;
  }
  if(phoneRaw.length !== 10){
    showMsg('dispatchMsg','Please enter a valid 10-digit mobile number.', 'error');
    $('phone').focus();
    return;
  }

  // explicit type here
  const payload = {
    type: "dispatch",
    name,
    company,
    designation,
    email,
    phone: phoneRaw,
    projectName,
    projectAddress,
    submittedAt: new Date().toISOString()
  };

  try {
    const res = await postFormData(payload);
    console.log('Dispatch response:', res);
    showMsg('dispatchMsg','Submitted successfully. Preparing next step...', 'success');

    toggleDisplay($('thankyou-page'), 'block');
    toggleDisplay($('meetingForm'), 'block');

    showOnlyMeetingAndFAQ();
    setTimeout(() => focusFirstInput('meetingForm'), 300);

  } catch (err) {
    console.error('Dispatch error:', err);
    showMsg('dispatchMsg','Submission failed. Please try again or contact admin.', 'error');
  }
});

3) Replace meetingForm submit handler

Replace the meeting handler with this:

/* Meeting form submit — sends explicit type: "meeting" */
$('meetingForm').addEventListener('submit', async function(e){
  e.preventDefault();
  showMsg('meetingMsg','Booking...', 'muted');

  const name = ($('mName').value || '').trim();
  const project = ($('mProject').value || '').trim();
  const preferredTime = ($('mTime').value || '').trim();
  const challenge = ($('mChallenge').value || '').trim();

  if(!name || !project || !preferredTime || !challenge){
    showMsg('meetingMsg','Please fill all required fields.', 'error');
    return;
  }

  const payload = {
    type: "meeting",
    name,
    project,
    preferredTime,
    challenge,
    submittedAt: new Date().toISOString()
  };

  try {
    const res = await postFormData(payload);
    console.log('Meeting response:', res);
    showMsg('meetingMsg','Meeting request received. Redirecting...', 'success');

    // hide meeting/thankyou, show redirect
    toggleDisplay($('thankyou-page'), 'none');
    toggleDisplay($('redirect-page'), 'block');
    setTimeout(()=> $('redirect-page').scrollIntoView({ behavior:'smooth' }), 180);

    // countdown to redirect
    let count = 10;
    const cd = $('countdown');
    if(cd) cd.textContent = count;
    const interval = setInterval(()=> {
      count--;
      if(cd) cd.textContent = count;
      if(count <= 0){ clearInterval(interval); window.location.href = PROJECTS_URL; }
    }, 1000);

  } catch (err) {
    console.error('Meeting error:', err);
    showMsg('meetingMsg','Booking failed. Please try again or contact admin.', 'error');
  }
});

4) EXACT paste locations

  1. Open your landing page HTML file.

  2. Inside the <script> tag, find and replace:

    • old postFormData function → with snippet (1) above.

    • old dispatchForm submit handler → with snippet (2) above.

    • old meetingForm submit handler → with snippet (3) above.

(Do not change other helper functions unless you want — just replace these three blocks.)

5) After paste — test steps (quick)

  1. Save HTML and reload the landing page.

  2. Enter code, fill dispatch form and submit.

  3. Open your Google Sheet — check Dispatch sheet (not the "Landing Page Responsive" sheet).

    • If nothing appears in Dispatch: open the Debug sheet in the spreadsheet and look at the last debug row — check e.postData.contents column to confirm {"type":"dispatch",...} was received.

  4. Then fill meeting form and submit — check Meetings sheet (or Debug if not).

6) If still not splitting — quick debug steps I will ask you to check (but try above first)

  • Open the spreadsheet and look at Debug sheet: confirm the JSON content shows "type":"dispatch" for the dispatch submission and "type":"meeting" for meeting submission. If type is present but data still goes to wrong sheet, paste the last Debug row content here and I will parse it.

  • Ensure your browser console (F12 → Console) shows no CORS or network errors. If postFormData throws, you'll see message in page.

Ye changes karte hi aapka problem solve ho jayega kyunki ab client clearly type send kar raha hai aur Apps Script usko sheet wise likh raha hai. Agar aap paste karke bata denge (ya paste karne me dikkat aaye) to main aapko line-by-line guide kar dunga — ya agar chaho to main aapke Debug sheet ka last row ka output check kar ke bata doon kya galat aa raha hai.

Comments

Post a Comment