Отправка электронной почты и загрузка анимации в контактную форму Google Sheet ⇐ Jquery

[Anonymous]

попытался добиться

• отправить электронное письмо на адреса электронной почты получателя и отправителя или хотя бы отправить электронное письмо получателю с помощью все данные, введенные в форму (например: имя, адрес электронной почты, телефон, сообщение, файл).
  вот изображение для электронной почты со всеми данными, отправленными в форму.
  [img]https://i. sstatic.net/82beMmWT.png[/img]
• также показывает анимацию загрузки во время задержки между отправкой формы и отображением сообщения об успехе (я использую swal.fire(), чтобы показать сообщение об успехе).

что не работает

• Я пытался добавить функцию, например, если пользователь отправляет форму электронного письма, отправляет его на адрес электронной почты получателя, а также отправителя (копия электронного письма) со всеми введенными данными в форме (например: имя, адрес электронной почты, телефон, сообщение, файл). но не сработало, вот код:

Код: Выделить всё

MailApp.sendEmail({ to: [email protected], to: formObject.email,
subject: "message submited",
body: "name,email,phone,messsage,file" });

• также я успешно написал код для задержки загрузки анимация между «после отправки формы и отображения сообщения об успехе» (я использую sval.fire() для отображения сообщения об успехе), но не могу добавить этот отдельный CSS и коды в одном HTML в скрипте Google.

вот что я попробовал для анимации загрузки с задержкой

Код: Выделить всё

$(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;
}
}

Код: Выделить всё

Вот скрипт приложения. Я пытался добавить функцию отправки электронной почты и временную задержку. функция анимации загрузки. {файлы, созданные в appscript: (code.gs и index.html и идентификатор библиотеки)}.
идентификатор библиотеки

Код: Выделить всё

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

Код: Выделить всё

[url=#]WRITE YOUR QUERY / MESSAGE[/url]





Name


Email


phone number

requested example Format: +919263943858

Message


Upload File

For multiple/bigger file size please attach/share via google drive link in message section.

SEND







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);
})

Подробнее здесь: https://stackoverflow.com/questions/790 ... ogle-sheet