i tryied to write code in appscript for making contactus form. but getting error.
Here is frontend looks like : 
Here is whats working:
- file upload working and properly entry visible in google sheet cell named file.
Here is whats not working:
- after submiting data in frontend form, the ‘name ,message, email’, are not visible in google sheet cells.
- also overlaping url text in another cell.
- after submiting the success message not showing.
here is google sheet screenshot:
Here is code i tryed in appscript: (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 = 'paste google sheet link here'
var sh = 'sheet1'
var folderId = 'Paste google drive folder link here'
function processForm(formdata){
var superscript = SuperScript.initSuper(url,sh)
var formObject = {}
formdata.forEach(element => formObject[element.name] = element.value)
var file = superscript.uploadFile(folderId,formObject.myfile.data,formObject.myfile.name)
var ss= SpreadsheetApp.openByUrl(url);
var ws=ss.getSheets()[0]
ws.appendRow([
new Date(),
formObject.name,
"'"+formObject.message,
formObject.email,
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/[email protected]/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" class="form-label">Name</label>
<input type="text" id="Name" name="Name" class="form-control" placeholder="Enter your Name here" required>
</div>
<div class="form-group mb-3">
<label for="Message" class="form-label">Message</label>
<input type="text" id="Message" name="Message" class="form-control" required>
</div>
<div class="form-group mb-3">
<label for="Email" class="form-label">Email</label>
<input type="email" id="Email" name="Email" class="form-control" required>
</div>
<div class="form-group">
<label for="uploadFile">Upload File</label>
<input type="file" class="form-control" name="file" id="file">
</div>
<button type="SEND" 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('SEND', 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!!',
showConfirmButton: false,
timer: 1500
})
}
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="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</body>
</html>Note here is tutorial i followed : https://youtu.be/LKLIVLha2OI
