loading animation after submiting contact form google sheet
**Here is what worked **
- i tryed to show loading animation during timedelay between after submiting form and showing success message(i am using swal.fire()to show success message) in my appscript just within index.html . but didn't worked.
here is what i successfully wrote code for loading animation
its working in standalone, i unable to add this loading animation feature in appscript index.html.
$(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 appscript i tryed to add timedelay loading animation feature. {files made in appscript: (code.gs and index.html and 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 = '#'
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()
]);
}
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
Modifying CSS using HTML DOM Document getElementById()
Use document.getElementById() to modify the CSS Element, Add your full style and attach it to the head element.
Modify the #Preloader Id Style:
Modify your function handFormSubmit() and call the CSS ID of #preloder and change the display from none to block to show the #preloder.
function handleFormSubmit() {
document.getElementById('preloder').style.display="block";
var formdata = $('#myForm').serializeArray()
formdata.push({
name: 'myfile',
value: myfile
})
google.script.run.withSuccessHandler(success).processForm(formdata);
document.getElementById("myForm").reset()
}
To return it to display: none; modify your function success() and then change the display to none.
function success(){
Swal.fire({
position: 'center',
icon: 'success',
title: 'Sended successfully! Be ready we will contact you shortly',
showConfirmButton: true
})
document.getElementById('preloder').style.display="none";
}
Whole Html Code 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">
<style>
/* 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;
}
}
</style>
</head>
<body>
<div class="container py-5">
<div class="row">
<div id="preloder">
<div class="loader"></div>
</div>
<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() {
document.getElementById('preloder').style.display="block";
var formdata = $('#myForm').serializeArray()
formdata.push({
name: 'myfile',
value: myfile
})
google.script.run.withSuccessHandler(success).processForm(formdata);
document.getElementById("myForm").reset()
}
function success(){
Swal.fire({
position: 'center',
icon: 'success',
title: 'Sended successfully! Be ready we will contact you shortly',
showConfirmButton: true
})
document.getElementById('preloder').style.display="none";
}
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>Sample Output:
Reference:
- PDF file creation using html-pdf is not working in my deployment server?
- Not iterating over map in node js
- Select text in textarea, delete it by backspace/delete to add CSS for another element
- Jquery : Uncaught SyntaxError: Failed to execute 'appendChild' on 'Node': missing ) after argument list
- center megamenu div under nav button
- Firebase Authentication: Where is the token stored in web?
- plugin:vite:import-analysis - Failed to parse source for import analysis because the content contains invalid JS syntax. - Vue 3
- SCRAM-SERVER-FIRST-MESSAGE: client password must be a string
- Where Am I Going Wrong Here - JAVASCRIPT
- Why does the function expression in an IIFE have to be wrapped in parentheses?
- In an object-destructuring declaration, what do the identifiers on the target side refer to?
- Can I destructure an object property into a property of another object?
- How does the object destructuring syntax work in ES6?
- How does nested destructuring work in ES6?
- Why does choosing module imports not work like destructuring?
- What is “fail-soft destructuring”?
- navigator.clipboard.readText() is not working in Firefox
- Why does console.log on a WeakSet give <items unknown> in node.js?
- Why do I need a WeakMap to store private data, as opposed to just closing over a variable with limited scope?
- Get url params in API route handler in Next.js
- How to move all Custom Element related into separate file to be imported & reused
- How to fetch data server-side in the latest Next.js? Tried getStaticProps but it's not running and getting undefined
- How to render my components in a tree structure, like default file structure in IDE using React
- Contentful API returning 'version mismatch' on entry update
- jqGrid dynamically change search operator type on button click
- JS making loop animation for a progress-bar
- Given an array of numbers(arr) and the length of the array(n) as arguments, how do you create a tribonacci sequence?
- "Could not read source map for chrome-error..." when using Visual Studio Code to debug JavaScript in Edge
- LeetCode Question - 2634. Filter Elements from Array
- How to get {[space][caret][space]} and {{[space][caret][space]}}