How to add user input from form to google sheets after submit

JavaScript
1

What code I need to add for this so that I can save the user input to google sheet.

<!DOCTYPE html>
<html>
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  <title>Demo</title>
</head>
<body>
  <div class="container">
    <form class="needs-validation" novalidate="">
      <div class="form-row">
        <div class="col-md-6 mb-3">
          <label for="validationCustom01">First name</label>
          <input class="form-control" id="first_name" name="first_name" placeholder="First Name" required="" type="text">
          <div class="valid-feedback">
            Looks good!
          </div>
          <div class="invalid-feedback">
            This is required!
          </div>
        </div>
      </div>

      <button class="btn btn-primary btn-block" type="submit">Submit</button>
    </form>
  </div>
  
  <script>
    const form = document.querySelector('form');

    form.addEventListener('submit', function(event) {
     event.preventDefault();

     if (form.checkValidity() === false) {
       alert("failed");
       form.classList.add('was-validated');
     } else {
       alert("sucess");
       location.replace("https://www.google.com/");
     }
    }, false);
  </script>
</body>
</html>
**

`

This is the script I am currently using to call the user input from html form to google sheet but I cant integrate it with my first code

`

**


> <script>
>   // Prevent forms from submitting.
>   function preventFormSubmit() {
>     var forms = document.querySelectorAll('form');
>     for (var i = 0; i < forms.length; i++) {
>       forms[i].addEventListener('submit', function(event) {
>       event.preventDefault();
>       });
>     }
>   }
>   window.addEventListener('load', preventFormSubmit);    
>       
>       
>   function handleFormSubmit(formObject) {
>     google.script.run.processForm(formObject);
>     document.getElementById("myForm").reset();
>   }
> </script>
2

Hello again,

It seems you haven’t made much headway with this (original thread).

We’re still missing pieces of the puzzle, but based on what you posted, this would do the job.

<!DOCTYPE html>
<html>
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  <title>Demo</title>
</head>
<body>
  <div class="container">
    <form class="needs-validation" novalidate="">
      <div class="form-row">
        <div class="col-md-6 mb-3">
          <label for="validationCustom01">First name</label>
          <input class="form-control" id="first_name" name="first_name" placeholder="First Name" required="" type="text">
          <div class="valid-feedback">
            Looks good!
          </div>
          <div class="invalid-feedback">
            This is required!
          </div>
        </div>
      </div>

      <button class="btn btn-primary btn-block" type="submit">Submit</button>
    </form>
  </div>
  
  <script>
    const form = document.querySelector('form');

    form.addEventListener('submit', function(event) {
     event.preventDefault();

     if (form.checkValidity() === false) {
       alert("failed");
       form.classList.add('was-validated');
     } else {
       google.script.run.processForm(form);
       alert("sucess");
       form.reset();
     }
    }, false);
  </script>
</body>
</html>

This would of course rely on the google module being available and in scope.

3

HI! thanks for helping me a lot, yes I keep on trying buts its still not working. it always go to a dead every time I run the whole thing, again and again, no success.

I tried you code and test it but it does not save the data.
can we use this code and add the alerts and redirect?


<script>
  // Prevent forms from submitting.
  function preventFormSubmit() {
    var forms = document.querySelectorAll('form');
    for (var i = 0; i < forms.length; i++) {
      forms[i].addEventListener('submit', function(event) {
      event.preventDefault();
      });
    }
  }
  window.addEventListener('load', preventFormSubmit);    
      
      
  function handleFormSubmit(formObject) {
    google.script.run.processForm(formObject);
    document.getElementById("myForm").reset();
  }
</script>
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.