How to send static HTML form data to google sheets via Vanilla JavaScript

send-contact-data-to-contact-form.md

Basic HTML structure

<form action="{ADD APPSCRIPT URL}" method="post" role="form" class="php-email-form">
  <div class="row">
    <div class="col-md-6 form-group">
      <input type="text" name="name" class="form-control" id="name"
        placeholder="Your Name" required>
      <div class="validate"></div>
    </div>
    <div class="col-md-6 form-group mt-3 mt-md-0">
      <input type="email" class="form-control" name="email" id="email"
        placeholder="Your Email" required>
      <div class="validate"></div>
    </div>
  </div>
  <div class="form-group mt-3">
    <input type="text" class="form-control" name="subject" id="subject"
      placeholder="Subject" data-rule="minlen:4" required>
    <div class="validate"></div>
  </div>
  <div class="form-group mt-3">
    <textarea class="form-control" name="message" rows="5" placeholder="Message"
      required></textarea>
    <div class="validate"></div>
  </div>
  <div class="my-3">
    <div class="loading">Loading</div>
    <div class="error-message"></div>
    <div class="sent-message">Your message has been sent. Thank you!</div>
  </div>
  <div class="text-center"><button type="submit">Send Message</button></div>
</form>

Form Data Submit function in javascript

  function php_email_form_submit(thisForm, action, formData) {
    var APPSSCRIPT_URL = 
    fetch(action, {
      redirect: follow, // VERY Important
      method: 'POST',
      //body: JSON.stringify(Object.fromEntries(formData )),
      body: formData,
      //headers: {'Content-type': 'application/x-www-form-urlencoded'}
    }).then(response => response.json())
    .then(response => {
      if( response.ok ) {
        return response
      } else {
        throw new Error(`${response.status} ${response.statusText} ${response.url}`); 
      }
    })
    .then(data => {
      thisForm.querySelector('.loading').classList.remove('d-block');
      if (data.ok) {
        thisForm.querySelector('.sent-message').classList.add('d-block');
        thisForm.reset(); 
      } else {
        throw new Error(data ? data : 'Form submission failed and no error message returned from: ' + action); 
      }
    })
    .catch((error) => {
      displayError(thisForm, error);
    });
  }

  function displayError(thisForm, error) {
    thisForm.querySelector('.loading').classList.remove('d-block');
    thisForm.querySelector('.error-message').innerHTML = error;
    thisForm.querySelector('.error-message').classList.add('d-block');
  }

})();

Steps for below sheet

• create google sheet
• open appscript enditor from the google sheets
• paste below code
• than deploy as web app , execute as me, and Anyone can run this script option
• than copy the url and paste to the form action url.

Form data handle in the google appscript

appscript.gs

const toEmail = "ADD EMAIL here...";

function doGet(e = ''){
  var sheet = SpreadsheetApp.getActiveSheet();
  return ContentService
  .createTextOutput('thank you Fir Checking Out :- you can contact me -> vanpariyar.github.io');
}

function doPost(e){
  const lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {

    var sheet = SpreadsheetApp.getActiveSheet();
    var d = new Date();
    var currentTime = d.toLocaleString();
    

    sheet.appendRow([currentTime, e.parameter.name, e.parameter.email, e.parameter.subject , e.parameter.message, e.parameter]);
    
    MailApp.sendEmail({
      to: toEmail,
      subject: "Contact form Submission",
      htmlBody: `
      <table>
        <tr>
            <th>Name</th>
            <td>${e.parameter.name}</td>
        </tr>
        <tr>
            <th>Email</th>
            <td>${e.parameter.email}</td>
        </tr>
        <tr>
            <th>Subject</th>
            <td>${e.parameter.subject}</td>
        </tr>
        <tr>
            <th>Message</th>
            <td>${e.parameter.message}</td>
        </tr>
      </table>
      `,
    });

    var result = {
      ok: true,
      message: 'Thank You... Your Message has been recorded..',
    }
    return ContentService
    .createTextOutput(JSON.stringify(result));
  }
  catch (e) {
    var result = {
      ok: false,
      message: `Something went wrong please contact to ${toEmail}`,
    }
    return ContentService
    .createTextOutput(JSON.stringify(result));
  }
  finally {
    lock.releaseLock()
  }
  
}