Вопрос или проблема
попытался добиться
-
отправить электронное письмо как на адрес получателя, так и на адрес отправителя, или по крайней мере отправить электронное письмо получателю со всеми данными, введенными в форме (например: имя, электронная почта, телефон, сообщение, файл). вот изображение электронного письма со всеми данными, введенными в форму.
-
также показать анимацию загрузки во время задержки между отправкой формы и показом сообщения об успехе (я использую swal.fire() для показа сообщения об успехе).
что не работает
- я попытался добавить функцию, чтобы, если пользователь отправляет форму, электронное письмо отправляется на адрес электронной почты получателя, а также отправителя (копия электронного письма) со всеми введенными данными в форме (например: имя, электронная почта, телефон, сообщение, файл). но это не сработало, вот код:
MailApp.sendEmail({ to: [email protected], to: formObject.email,
subject: "сообщение отправлено",
body: "имя, электронная почта, телефон, сообщение, файл" });- также я успешно написал код для анимации загрузки с задержкой между ‘после отправки формы и показом сообщения об успехе’ (я использую swal.fire() для показа сообщения об успехе), но не смог добавить этот отдельный css и коды в один html в google appscript.
вот что я попытался сделать для анимации загрузки с задержкой
$(document).ready(function(){
$("#myform").on("submit", function(){
$("#preloder").fadeIn();
});//submit
});//документ готов/* Прелоадер */
#preloder {
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 999999;
/* фон: #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>
<!-- Прелоадер страницы -->
<div id="preloder">
<div class="loader"></div>
</div>
<form id="myform">
<input type="text" name="fname" id="fname" value="" />
<input type="submit" value="Отправить" />
</form>Вот appscript, который я пытался добавить, чтобы реализовать функцию отправки электронной почты и функцию анимации загрузки с задержкой. {файлы, созданные в 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
<!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>НАПИШИТЕ ВАШ ВОПРОС / СООБЩЕНИЕ</a>
</nav>
<br>
<form id="myForm" onsubmit="handleFormSubmit()">
<div id="form_alerts"></div>
<div class="form-group mb-3">
<label for="name">Имя</label>
<input type="text" class="form-control" id="name" placeholder="Введите ваше имя здесь|" name="name"required>
</div>
<div class="form-group mb-3">
<label for="email" >Электронная почта</label>
<input type="email" class="form-control" id="email"
placeholder="Введите ваш адрес электронной почты здесь|" name="email" required>
</div>
<div class="form-group mb-3">
<label for="phone">номер телефона</label>
<input type="tel" id="phone" class="form-control" name="phone" placeholder="Введите номер телефона здесь с кодом страны|" pattern="[+]{1}[0-9]{2}[0-9]{10}" required>
<small>пример запрашиваемого формата: +919263943858</small>
</div>
<div class="form-group mb-3">
<label for="message">Сообщение</label>
<textarea class="form-control" id="message" placeholder="Напишите ваше сообщение здесь|" name="message" required ></textarea>
</div>
<div class="form-group mb-3">
<label for="uploadFile">Загрузить файл</label>
<input type="file" class="form-control" File="file" id="file">
<small>Для большего/меньшего размера файла, пожалуйста, прикрепите/поделитесь через ссылку на google drive в разделе сообщения.</small>
</div>
<button type="submit" class= "btn btn-primary btn-block">ОТПРАВИТЬ</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: 'Успешно отправлено! Будьте готовы, мы свяжемся с вами в ближайшее время',
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="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="sweetalert2.all.min.js"></script>
</body>
</html>.
Ответ или решение
Решение проблемы: Отправка электронной почты и анимация загрузки в форме контактов Google Sheets
Введение
Создание контактной формы, которая отправляет электронные письма и отображает анимацию загрузки, является распространенной задачей для разработчиков. Ниже представлены решения для двух основных проблем, с которыми вы столкнулись: отправка электронной почты после отправки формы и реализация анимации загрузки во время ожидания ответа сервера.
Отправка электронной почты
Для того чтобы отправить электронные письма как отправителю, так и получателю с данными, введенными в форме (имя, email, телефон, сообщение, файл), необходимо использовать сервис MailApp на Google Apps Script. Ваш текущий код не совсем корректен. В нем дважды используется параметр to. Ниже представлен исправленный код:
function processForm(formdata) {
var formObject = {};
formdata.forEach(function(element) {
formObject[element.name] = element.value;
});
// Отправка электронной почты получателю и отправителю
var recipientEmail = "[email protected]"; // Замените на свой адрес
var senderEmail = formObject.email;
var subject = "Сообщение отправлено";
var body = "Имя: " + formObject.name + "\n" +
"Email: " + formObject.email + "\n" +
"Телефон: " + formObject.phone + "\n" +
"Сообщение: " + formObject.message + "\n" +
"Файл: " + (formObject.myfile ? formObject.myfile.name : "Нет файла");
MailApp.sendEmail({
to: recipientEmail,
cc: senderEmail,
subject: subject,
body: body
});
// Здесь следует добавить код для сохранения данных в Google Sheets...
}Пояснения:
- Параметр
toтеперь содержит только один адрес, и добавлен параметрccдля отправки копии на адрес отправителя. - Тело письма формируется с использованием переменных, полученных из формы.
Анимация загрузки
Чтобы реализовать анимацию загрузки после отправки формы и до получения ответа сервера, можно использовать код jQuery, который вы уже начали разрабатывать. Вам нужно включить анимацию перед вызовом серверного метода и скрыть ее в обработчике успешного выполнения. Вот обновленная версия вашего кода JavaScript:
$(document).ready(function(){
$("#myForm").on("submit", function(e){
e.preventDefault(); // Предотвращаем отправку формы
$("#preloder").fadeIn(); // Показываем анимацию загрузки
var formdata = $(this).serializeArray();
google.script.run.withSuccessHandler(function() {
$("#preloder").fadeOut(); // Скрываем анимацию загрузки
success(); // Вызываем функцию успешного завершения
}).processForm(formdata);
});
});Пояснения:
- Используйте
e.preventDefault()для предотвращения стандартной отправки формы. - Анимация загрузки (
#preloder) отображается с помощью методаfadeIn, а после успешного завершения выполнения серверного кода скрывается с помощьюfadeOut.
CSS для анимации загрузки
Ваш CSS-код для анимации загрузки можно оставить без изменений. Убедитесь, что ваш HTML-код для анимации правильно встроен в index.html:
<div id="preloder">
<div class="loader"></div>
</div>Итог
Теперь ваша форма будет отправлять электронные письма с введенными данными пользователю и вам, а также будет отображаться анимация загрузки во время ожидания ответа от сервера. Обязательно протестируйте изменения в вашей среде Google Apps Script, чтобы убедиться, что все работает должным образом.