How to submit forms to Google Sheets using Javascript

If you want to keep your visitor on the same page when they submit your form, then using Javascript is your best best. With Sheet Monkey, you can easily submit data from your webpage to Google Sheets, using Javascript. No backend coding required.

Once you create a form in the Sheet Monkey dashboard, Sheet Monkey will provide a form url or "form action" where you can start posting data. This unique action is all you need to post data into the Google Sheet.

Then you just need to use the Sheet Monkey action with your Javascript HTTP query as in the following example:

<h2>Contact Form</h2>
<form id="myForm">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </div>
  <div>
    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea>
  </div>
  <button type="submit">Submit</button>
</form>

<script type="text/javascript">
  document.getElementById('myForm').addEventListener('submit', async function(event) {
    event.preventDefault();

    const formData = new FormData(this);
    const url = 'https://api.sheetmonkey.io/form/vB1pUYCBvUqnSarEvAgsd6';

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

      if (response.ok) {
        console.log('Form submitted successfully!');
        // Reset form fields if needed
        this.reset();
      } else {
        console.error('Form submission failed:', response.status);
      }
    } catch (error) {
      console.error('Network error:', error);
    }
  });
</script>

Once you submit this form, the data will appear in the linked sheet like this: