i tryed this code its almost working. but there is an issue with this code.
whats not working
without uploading file the send button not working.
trying to acheive
all input field should have required(name,email,phone,message).
but uploading file must be optional field.
Addditiional : i tryed to add feature like auto sending email to receiver after user submit form successfully. but i unable to code that part,if someone know how to do that is most welcome to add this auto email feature.
here is code i tryed [ (code.gs), (index.html), (library id) ]
library id
1CcBYkrGSeBRgphHUE92vWInyULOcJ1Ub6eFUR0_gI1h9I6whLjXtDA-P
code.gs
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
var url = 'google sheet url here'
var sh = 'sheet1'<!-- current google sheet name here -->
var folderId = 'google drive folder id here'
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 file = 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.getUrl()
]);
};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">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><br><br>
<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><br><br>
<small>Format: +919234567898</small><br><br>
</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">
</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 sucessfully 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>
