javascript html google-sheets google-apps-script sweetalert2

Contact us form using Google Sheets and Apps Script

i updated the code now its working but unable to send email to receiver and sender(copy of email) with all data entered in form(name,email,phone,message,file)

I tryied to write code in Apps Script for making contactus form.

Here is whats not working:

i tryed to add feature like if user submit form the email send to receiver email address as well sender(copy of email). but didnt worked so i removed that code part please implement this feature. here is what i tryed to send email

MailApp.sendEmail({ to: receiver_email@gmail.com, to: formObject.email,
 subject: "message submited",
 body: "name,email,phone,messsage,file" });

and i noticed there is time delay after submiting form to show success message. so i tryed to show loading animation in that during time delay. here is code i tryed for loading animation but unable to implement in html because i wrote css seperately thats the problem

$(document).ready(function(){
  $("#myform").on("submit", function(){
    $("#preloder").fadeIn();
  });//submit
});//document ready

/* Preloder */

#preloder {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999999;
    /* background: #000; */
    background: #ffffff;
}

.loader {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
    border-radius: 60px;
    animation: loader 0.8s linear infinite;
    -webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        border: 4px solid #056d4d;      
        /* border: 4px solid #f44336; */
        border-left-color: transparent;
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border: 4px solid #056d4d;
        /* border: 4px solid #673ab7; */
        border-left-color: transparent;
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        border: 4px solid #056d4d;
        border-left-color: transparent;
    }
}

@-webkit-keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        border: 4px solid #056d4d;
        border-left-color: transparent;
    }
    50% {
        -webkit-transform: rotate(180deg);
        border: 4px solid #056d4d;
        border-left-color: transparent;
    }
    100% {
        -webkit-transform: rotate(360deg);
        border: 4px solid #056d4d;
        border-left-color: transparent;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Page Preloder -->
<div id="preloder">
    <div class="loader"></div>
</div>

<form id="myform">
  <input type="text" name="fname" id="fname" value="" />
  <input type="submit" value="Submit" />
</form>

Here is code i tryed to add loading animation to show loading animation during timedelay after submiting form to show success message (i am using swal.fire() to show success message)and tryed to add email sending feature in this appscript but unable to achive: (Two file 'code.js' & 'index.html')

code.js :

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate()
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}

var url = '#'
var sh = 'file1'
var folderId = '#'

function processForm(formdata) {
  var superscript = SuperScript.initSuper(url, sh);
  var formObject = {};
  formdata.forEach(element => formObject[element.name] = element.value);
  formdata.forEach(element => formObject[element.message] = element.value);
  formdata.forEach(element => formObject[element.email] = element.value);
  formdata.forEach(element => formObject[element.phone] = element.value);

  var f = formdata.find(({ name }) => name == "myfile");
  var file = (f && f.value?.name && f.value?.data) ? superscript.uploadFile(folderId, formObject.myfile.data, formObject.myfilename) : "";
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheets()[0];
  ws.appendRow([
    new Date(),
    formObject.name,
    "'" + formObject.message,
    formObject.email,
    formObject.phone,
    file && file.getUrl()
  ]);

}

and 2. index.html :

<!DOCTYPE html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
        integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  
  
</head>
<body>
    <div class="container py-5">
        <div class="row">
            <div class="col-lg-5 col-md-8 mx-auto shadow border bg-white p-4 rounded">
                <nav class="navbar navbar-dark bg-primary">
                    <a class="navbar-brand" href="#" fw-bold mb-3>WRITE YOUR QUERY / MESSAGE</a>
                </nav>
                <br>
                <form id="myForm" onsubmit="handleFormSubmit()">
                    <div id="form_alerts"></div>
                    <div class="form-group mb-3">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" id="name" placeholder="Enter your Name here|" name="name"required>
            </div>

            <div class="form-group mb-3">
            <label for="email" >Email</label>
                        <input type="email"  class="form-control" id="email"
            placeholder="Enter your email address here|" name="email" required>
            </div>

            <div class="form-group mb-3">
           <label for="phone">phone number</label>
  <input type="tel" id="phone" class="form-control" name="phone" placeholder="Enter your phone number here with country code|" pattern="[+]{1}[0-9]{2}[0-9]{10}" required>
  <small>requested example Format: +919263943858</small>
            </div>

            <div class="form-group mb-3">
              <label for="message">Message</label>
    <textarea class="form-control" id="message" placeholder="Write your message here|" name="message" required ></textarea>
              </div>

                         <div class="form-group mb-3">
                            <label for="uploadFile">Upload File</label>
                            <input type="file" class="form-control" File="file" id="file">
              <small>For multiple/bigger file size please attach/share via google drive link in message section.</small>
                            </div>

                            <button type="submit" class= "btn btn-primary btn-block">SEND</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
  <script>
        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() {
                var formdata = $('#myForm').serializeArray()
                formdata.push({
                  name: 'myfile',
                  value: myfile
                })
                google.script.run.withSuccessHandler(success).processForm(formdata);
            }
            function success(){
                 document.getElementById("myForm").reset()
                 Swal.fire({
                  position: 'center',
                  icon: 'success',
                  title: 'Sended successfully! Be ready we will contact you shortly',
                  showConfirmButton: true,
      
                })
            }
        var myfile ={},file, reader = new FileReader();
      reader.onloadend = function(e) {
          myfile.data = e.target.result
          myfile.name = file.name
          console.log(myfile)
      };
     $('#file').change(function(){
       file = $('#file')[0].files[0]
        reader.readAsDataURL(file);
     })
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script src="sweetalert2.all.min.js"></script>
</body>
</html>

Solution

Try this Approach

In line with @C3roe, this means you need to match the Id , name in the attribute that you're using in appendRow.

Code.gs

sheet.appendRow([
  new Date(),
  formObject.name,
  formObject.message,
  formObject.email
]);

index.html

<form id="myForm">
   <label for="name" class="form-label">Name</label><br>
  <input type="text" id="name" name="name" class="form-control" placeholder="Enter your Name here" required>
  <label for="message" class="form-label">Message</label><br>
  <input type="text" id="message" name="message" class="form-control" placeholder="Enter your Message" required>
  <label for="email" class="form-label">Email</label><br>
  <input type="email" id="email" name="email" class="form-control" placeholder="Enter your Email" required>

  <button type="submit" class="btn btn-primary btn-block">SEND</button>
 </div>
                        
</form>

Code.gs

function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate()
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function processForm(formObject) {
  try {
    var sheetId = 'SpreadsheetId'; 
    var sheet = SpreadsheetApp.openById(sheetId).getActiveSheet();
    
    Logger.log("Form Data: ", formObject);
    
    
    sheet.appendRow([
      new Date(),
      formObject.name,
      formObject.message,
      formObject.email
    ]);

    return "Form submitted successfully";
  } catch (error) {
    Logger.log("Error: " + error.message);
    return "Error: " + error.message;
  }
}

index.html

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
          integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
          crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
  
 <div class="container py-5">
    <div class="row">
      <div class="col-lg-5 col-md-8 mx-auto shadow border bg-white p-4 rounded">
        <nav class="navbar navbar-dark bg-primary">
          <a class="navbar-brand" href="#">WRITE YOUR Query/Message</a>
        </nav>
        <br>
 <form id="myForm">
   <label for="name" class="form-label">Name</label><br><br>
  <input type="text" id="name" name="name" class="form-control" placeholder="Enter your Name here" required>
  <label for="message" class="form-label">Message</label><br><br>
  <input type="text" id="message" name="message" class="form-control" placeholder="Enter your Message" required>
  <label for="email" class="form-label">Email</label><br><br>
  <input type="email" id="email" name="email" class="form-control" placeholder="Enter your Email" required>

  <button type="submit" class="btn btn-primary btn-block">SEND</button>
 </div>
                        
</form>

<script>
  document.getElementById('myForm').onsubmit = function(event) {
    event.preventDefault();

    var formData = new FormData(this);

  
    google.script.run.withSuccessHandler(function(response) {
      alert(response);
      document.getElementById('myForm').reset();
    }).processForm(Object.fromEntries(formData));
  };
</script>

</body>
</html>

Sample Output

FrontEnd output

Spreadsheet

PS. I didn't include the file uploading. because the priority is on the Name, Message, and Email. The file upload feature is already working.

Reference

appendRow(rowContents)