DIY Wedding Website

<form id="wedding-form">
    <div class="row">
        <div class="col md-6 pb-3">
            <div class="form-group">
                <label for="name-input">Your Name(s)*</label>
                <input class="form-control" id="name-input" type="text" name="name"
                        required="required"/>
            </div>
        </div>
        <div class="col-md-6 pb-3">
            <div class="form-group">
                <label for="email-input">Your Email(s)*</label>
                <input class="form-control" id="email-input" type="email"
                        name="email" required="required"/>
            </div>
        </div>
    </div>
    <!-- <div class="row">
        <div class="col-md-6 pb-3">
            <div class="form-group">
                <label for="code-input">Invite Code*</label>
                <input class="form-control" id="code-input" type="text" name="code"
                        required="required"/>
            </div>
        </div>
    </div> -->
    <div class="row">
        <div class="col-md-6 pb-3">
            <div class="form-group">
                <label for="song-input">Song Request (optional)</label>
                <input class="form-control" id="song-input" type="text" name="song">
            </div>
        </div>
    </div>
    <div class="row">
    <div class="col text-center">
            <button class="btn btn-primary btn-submit" type="submit">Send</button>
        </div>
    </div>
</form>

<script>
    $('#wedding-form').on('submit', function (e) {
        //optional validation code here

        e.preventDefault();

        $.ajax({
            url: "https://script.google.com/macros/s/AKfycbwhFra8HB2Ycsjqyc3KjSXWwE1lQcrfhehXPlvQkJNVELBoZ94flM_Hyup2ihozggwg/exec",
            method: "POST",
            dataType: "json",
            data: $("#wedding-form").serialize(),
            success: function (response) {
                console.log("response!");
                console.log($("#wedding-form").serialize());

                if (response.result == "success") {
                    $('#wedding-form')[0].reset();
                    alert('Thank you for contacting us.');
                    return true;
                } else {
                    alert("The form was not submitted successfully. Please let Grehg know and try again later.")
                }
            },
            error: function () {
                alert("The form failed. Please let Grehg know and try again later.")
            }
        })
    });
</script>

function doGet(request){
  return handleRequest(request);
}

function doPost(request){
  return handleRequest(request);
}

//  Enter sheet name where data is to be written below
var SHEET_NAME = "Form Responses 1";

var SHEET_ID = "" // REPLACE THIS WITH YOUR OWN SHEET ID
var SCRIPT_PROP = PropertiesService.getScriptProperties(); // new property service

function handleRequest(request) {
  // shortly after my original solution Google announced the LockService[1]
  // this prevents concurrent access overwritting data
  // [1] http://googleappsdeveloper.blogspot.co.uk/2011/10/concurrency-and-google-apps-script.html
  // we want a public lock, one that locks for all invocations
  var lock = LockService.getPublicLock();
  lock.waitLock(30000);  // wait 30 seconds before conceding defeat.

  try {
    // next set where we write the data - you could write to multiple/alternate destinations
    //var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
    var doc = SpreadsheetApp.openById(SHEET_ID);
    var sheet = doc.getSheetByName(SHEET_NAME);

    // we'll assume header is in row 1 but you can override with header_row in GET/POST data
    var headRow = request.parameter.header_row || 1;
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    var nextRow = sheet.getLastRow()+1; // get next row
    var row = [];
    // loop through the header columns
    for (i in headers){
      if (headers[i] == "Timestamp"){ // special case if you include a 'Timestamp' column
        row.push(new Date());
      } else if(headers[i] == "sn") {
        row.push(sheet.getLastRow());
      } else { // else use header name to get data
        row.push(request.parameter[headers[i]]);
      }
    }
    // more efficient to set values as [][] array than individually
    sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);

    //send email
    sendEmail(request.parameter);

    // return json success results
    return ContentService
          .createTextOutput(JSON.stringify({"result":"success"}))
          .setMimeType(ContentService.MimeType.JSON);
  } catch(e){
    // if error return this
    return ContentService
          .createTextOutput(JSON.stringify({"result":"error", "error": e.toString()}))
          .setMimeType(ContentService.MimeType.JSON);
  } finally { //release lock
    lock.releaseLock();
  }
}

function setup() {
    var doc = SpreadsheetApp.getActiveSpreadsheet();
    SCRIPT_PROP.setProperty("key", doc.getId());
}

function sendEmail(data) {

  var body = '';
  for (let key in data){
   if(data.hasOwnProperty(key)){
     body = body + `<b>${key}</b> : ${data[key]}<br/>`;
   }
  }

  GmailApp.sendEmail('Grehgh@gmail.com', 'Wedding form response', '', {'name': 'Wedding Form', 'htmlBody': 'You have received a new wedding form response. <br/><br/>' + body});
}