Меню

Данные из формы ниже сохраняю в таблице google sheets (гугл таблицы) и папке google drive (гугл диск).

По средствам javascript функции fetch() отправляется post запрос с данными из формы к платформе google apps script, которая, в свою очередь, служит обработчиком. Получив данные из запроса на стороне apps script, использую класс SpreadsheetApp (google sheets) для добавления новой строки в таблицу. Тут же обрабатываю файлы из запроса и с использованием класса DriveApp (google drive) создаю файл в необходимой папке.

В результате на e-mail приходит уведомление о новой записи с помощью класса MailApp (gmail api).

Форма:

Все поля обязательны для заполнения. Отправляя данные, вы соглашаетесь со всеми правилами.

Функция отправки данных в google sheets


function sendData() {
    let data = new FormData(),
        uploadFiles = [],
        promiseList = [];
    const photos = document.querySelector('#photofile'),
    scriptId = 'идентификатор развертывания',
    url = `https://script.google.com/macros/s/${scriptId}/exec`;
    form.querySelectorAll('input').forEach(input => {
        if (input.type === "text" || input.type === "email") {
            data.append(input.name, input.value)
        }
    })
    for (let file of photos.files) {
        const fr = new FileReader();
        fr.readAsArrayBuffer(file);
        let promise = new Promise((resolve) => {
            fr.onload = f => {
                let fileInfo = {
                    fileArray: [...new Int8Array(f.target.result)],
                    filename: file.name,
                    mimeType: file.type,
                }
                resolve(uploadFiles.push(fileInfo))
            }
        })
        promiseList.push(promise)
    }
    Promise.all(promiseList).then(result => {
        data.append('files', JSON.stringify(uploadFiles))
        fetch(`${url}`, { method: "POST", mode: 'no-cors', body: data })
            .then(response => {
                document.querySelector('.success').classList.add('show');
                toggleFormDisabled(false)
                sendButton.textContent = sendButton.dataset.text
                form.querySelectorAll('input').forEach(input => {
                    input.value = '';
                    input.classList.remove('is-valid')
                })
                setTimeout(function(){
                    document.querySelector('.success').classList.remove('show');
                }, 4000)
            })
            .catch(err => {
                document.querySelector('.error').classList.add('show');
                setTimeout(function(){
                    document.querySelector('.error').classList.remove('show');
                }, 5000)
            })
    })
}
// Смотри код этой страницы

Функция обработки запроса code.gs


function doPost(e) {
  const FOLDER_ID = 'идентификатор папки',
        SHEET_ID = 'идентификатор таблицы',
        now = new Date();
  let linkList = [];
  if(e.parameter.files) {
    for(let fileInfo of JSON.parse(e.parameter.files)){
      try{
        const blob = Utilities.newBlob(fileInfo.fileArray, fileInfo.mimeType, fileInfo.filename);
        const file = DriveApp.getFolderById(FOLDER_ID).createFile(blob);
        file.setDescription(`Витрина от ${e.parameter.company} (now). Загрузил ${e.parameter.name} (${e.parameter.email}, ${e.parameter.phone})`);
        linkList.push(file.getUrl())
      } catch(err){
        linkList.push(`Ошибка загрузки файла ${err || ''}`)
      }
    }
  }
  const sheet = SpreadsheetApp.openById(SHEET_ID);
  const ws = sheet.getSheetByName('form')
        ws.appendRow([
            new Date(), 
            e.parameter.name, 
            e.parameter.email, 
            e.parameter.phone, 
            e.parameter.city, 
            e.parameter.address, 
            e.parameter.shopName, 
            e.parameter.company
        ].concat(linkList))
  MailApp.sendEmail({
    to: "e-mail для уведомлений",
    subject: "Новая регистрация!",
    htmlBody: `${e.parameter.name} (${e.parameter.email}) добавил данные в таблицу.
Таблица, Папка.`, }); }