1

I have a website here having two Forms. One under RESERVE VIP TABLE and another in the footer where it says JOIN OUR NEWSLETTER. I've used the following code to submit data from the FORM to Google Sheets. Question is that the first form is working fine but how can I submit the data from Newsletter section to Google Sheets in a separate Tab named "Subscribe"?

Newsletter HTML:

<form method="POST" name="google-sheet">
    <input type="text" name="subscribeEmail" placeholder="Your Email Address">
        <div class="gold-button small">
                    <button type="submit">Submit →</button>
                    <span class="bttn-border left virticle"></span>
                    <span class="bttn-border right virticle"></span>
                    <span class="bttn-border top horizontal"></span>
                    <span class="bttn-border bottom horizontal"></span>
       </div>
</form>

Script I'm using for Reservation Form:

<script>
        const scriptURL = 'https://script.google.com/macros/s/AKfycbzJA2cZGROFNCwLuPnJjECW21zXMZs8nT4Xo0Nzjy5ETlOVQ3gHgyjE3wzzmHky_0I_/exec'
        const form = document.forms['google-sheet']
      
        form.addEventListener('submit', e => {
          e.preventDefault()
          fetch(scriptURL, { method: 'POST', body: new FormData(form)})
            .catch(error => console.error('Error!', error.message))
        })
</script>
Obaid
  • 79
  • 1
  • 9

1 Answers1

3

If it were me, I'd have to tackle it like this:

HTML:

<form action="https://script.google.com/macros/s/[SCRIPT ID]/exec" method="post">
  <input type="text" name="subscribeEmail" placeholder="Your Email Address">
  <div class="gold-button small">
    <button type="submit">Submit →</button>
    <span class="bttn-border left virticle"></span>
    <span class="bttn-border right virticle"></span>
    <span class="bttn-border top horizontal"></span>
    <span class="bttn-border bottom horizontal"></span>
  </div>
</form>

Apps Script:

function doPost(e) {
  var ss = SpreadsheetApp.openById("SHEET ID");
  var sheet = ss.getSheetByName("Subscribe");
  // or use getRange().setValue() if something specific
  sheet.appendRow([e.parameter.subscribeEmail])
}

Reference:

NightEye
  • 10,634
  • 2
  • 5
  • 24
  • I tried that using Fiddle but couldn't get it work. What am I doing wrong here? Here's the JSFiddle: https://jsfiddle.net/3L4etn9b/ – Obaid Aug 24 '21 at 20:35
  • hi @Obaid, the `doPost` should be in apps script, not plain javascript. also, you can only have 1 `doPost`. To use `doPost` for 2 differentiate forms, create a condition in `doPost` that will identify if the data you are trying to process is from newsletter or vip. then from there, have it write to where the data should belong. – NightEye Aug 24 '21 at 20:45
  • Can you please explain using the fiddle I shared? – Obaid Aug 24 '21 at 21:10
  • see this doPost [conditions](https://jsfiddle.net/m42z0cre/). Note that this should be in google script, not javascript. – NightEye Aug 24 '21 at 21:22