Html - loading animation after submiting contact form google sheet

Ankit
October 15, 2024
223 views
0 votes
2 Answers

**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/[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>
  <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>

Answers

Have you tried activating the animation right before submitting? Also make sure you are preventing the default form submit behavior.

change to:

<form id="myForm" onsubmit="handleFormSubmit(); return false">

function handleFormSubmit() {
  var formdata = $('#myForm').serializeArray()
  formdata.push({
    name: 'myfile',
    value: 12
  })

  // here
  $("#preloder").fadeIn();

  // just in case
  try {
    google.script.run.withSuccessHandler(success).processForm(formdata);
  } catch (ex) {
    console.error(ex.message)
  }

}

/* 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" onsubmit="handleFormSubmit(); return false">
  <input type="text" name="fname" id="fname" value="" />
  <input type="submit" value="Submit" />
</form>

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";
  document.getElementById("myForm").reset()
  var formdata = $('#myForm').serializeArray()
  formdata.push({
    name: 'myfile',
    value: myfile
  })
  google.script.run.withSuccessHandler(success).processForm(formdata);
}

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/[email protected]/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";
              document.getElementById("myForm").reset()
              var formdata = $('#myForm').serializeArray()
              formdata.push({
                name: 'myfile',
                value: myfile
              })
              google.script.run.withSuccessHandler(success).processForm(formdata);
            }
            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>

Html – loading animation after submiting contact form google sheet

Answers

Modifying CSS using HTML DOM Document getElementById()