Code.gs
function doGet(request) {
return HtmlService.createTemplateFromFile('Index').evaluate();
}
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function processForm(formObject){
var url="";
var ss= SpreadsheetApp.openByUrl(url);
var ws=ss.getSheetByName("Data");
ws.appendRow([
formObject.first_name,
formObject.last_name,
formObject.gender,
formObject.dateOfBirth,
formObject.email,
formObject.phone
]);
}
Index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
<?!= include('JavaScript'); ?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<form id="myForm" onsubmit="handleFormSubmit(this)">
<p class="h4 mb-4 text-center">Contact Details</p>
<div class="form-row">
<div class="form-group col-md-6">
<label for="first_name">First Name</label>
<input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name">
</div>
<div class="form-group col-md-6">
<label for="last_name">Last Name</label>
<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<p>Gender</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="male" value="male">
<label class="form-check-label" for="male">Male</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="female" value="female">
<label class="form-check-label" for="female">Female</label>
</div>
</div>
<div class="form-group col-md-6">
<label for="dateOfBirth">Date of Birth</label>
<input type="date" class="form-control" id="dateOfBirth" name="dateOfBirth">
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" class="form-control" id="phone" name="phone" placeholder="Phone Number">
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
<div id="output"></div>
</div>
</div>
</div>
</body>
</html>
JavaScript
<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(formObject){
google.script.run.processForm(formObject);
document.getElementById("myForm").reset();
}
</script>
thank you so much for this code sir.
ReplyDeleteThanks so much
ReplyDeleteThank Bro
ReplyDeleteReferenceError: window is not defined (line 11, file "Javascript") is error
ReplyDeletecheck your "Javascript" spelling. case-sensitive...needs to match spelling/case of the .gs file you created
Deletetks bro! you saved my life!
ReplyDeletegood job thenk you so much
ReplyDeleteThank you Sir :)
ReplyDeleteCan you upload another video like this one (https://youtu.be/v2X-fArILPA) using HTML
ReplyDeleteThanks so much
ReplyDeleteMuchas gracias amigo!!
ReplyDeleteSir how to create submit after redirect to new/next page please tell me Sir..
ReplyDeletecan you tell how to add search and update option in this code?
ReplyDeleteYou brilliant
ReplyDeleteIn
index file is not found. Can I know why?
ReplyDeletecheck your "index" spelling. case-sensitive...needs to match spelling/case of the .html file you created
DeleteException: Malformed HTML content: function preventFormSubmit(){
ReplyDeleteThanks!
ReplyDeleteawesome
ReplyDeleteDear Author, I follow your instruction, Everything is Fine But My Upload File Not Working, How can i Upload File Also With THis Form Please? Code On Google Drive, Please See.
ReplyDeletehttps://drive.google.com/drive/folders/1Xey_j-QzHShpCJNqWxS8qrVfGLmXZjl8?usp=sharing
.
ReplyDeletei need Multiple image file upload fields. help me please.
ReplyDeletei need Multiple image file upload fields. help me please.
ReplyDeleteHey Khalid, did you find how can we add images also in spreadsheet? If yes can you please provide me source code?
DeleteHello, can anyone help me how to validate the email and phone number entered by the user. (Form validation)
ReplyDeleteaita? my wife 99 had seks with maj siste r f 54 i want seks? so i shoo t her with the gaj gan an shie diied omg
ReplyDeleteHow to send a google slide when finish the form
ReplyDeleteIs it possible to clear(reset) only some field not all form
ReplyDeleteHay only my url is not working on mobile view any changes required ?
ReplyDeletePrevent users from submitting a form by hitting Enter
ReplyDeleteand Allow enter key on textareas only
$(document).on("keydown", ":input:not(textarea)", function(event) {
if (event.key == "Enter") {
event.preventDefault();
}
});
Want to downloaad thumbnails from youtube click here grab-thumbnail.blogspot.com
ReplyDeleteReferenceError: window is not defined (line 9, file "JavaScript")
ReplyDeleteI get the same error:
DeleteReferenceError: window is not defined (line 9, file "JavaScript")
create html file named JavaScript and enclose js code within script tag
DeleteI get an error on this line:
ReplyDeletereturn HtmlService.createTemplateFromFile('Index').evaluate();
Line two
Me too :(
DeleteMake sure your html file index has a capital I. I had this issue as well.
Deletenot working
ReplyDeleteCan you share a code for a message alert that info has been saved after form submission? I would highly appreciate that.
ReplyDeleteI'm the OP above, nvm the code, I found a way to do it. Now I am figuring out how to make a data from a checkbox, appear in one column of my sheet. Thank you for sharing this anyway.
DeleteI'm glad I find this but I still need a mentor
ReplyDeletePlease let talk I needs your help I'm a full bigginner
Great video. But I stuck at end. please guide me where I go wrong. form website is not accessible to other people when I shared. it is specified...
ReplyDeleteExecute as
User accessing the web app
Who has access
Anyone with Google account
Also excel sheet is shared to public
Is it possible to add a message box below with 5 line display box. I added it but I can't alter size of box?
Most excellent introduction into Web Apps using Google Sheets. Thank you very much.
ReplyDeleteThanks for this tutorial. But do you mind helping out? I've followed the steps here but the form still shows blank screen after submit. I've added some dropdowns on the form that you've created but. I'm having issues at the end after submitting it still shows as blank screen.
ReplyDeleteI followed everything but the data being inputted still didn't reflected to the spreadsheets.
ReplyDeletePlease help me how to make it work.
Delete