Как получать заказы в гугл форму?

В бесплатной CMS для интернет магазина HEEG.HTML функцию отправки заказа (форма отправляет письмо на почту) и ведения таблицы заказов берет на себя бесплатный сервис "Гугл формы". Благодаря этому сервису все ваши заказы хранятся в удобной таблице, с которой могут работать одновременно несколько менеджеров по персональному доступу. Пример таблицы из демо-магазина можно посмотреть здесь https://docs.google.com/spreadsheets/d/1tkOhPUj7KpdrTNHu3Zd1qPfNrGgyp1SLDRi7-8iBlQ0/ (фома заполняется автоматически при заказе)

Также заказ может приходить на почту магазина и клиента, если к Гугл Форме установить бесплатное дополнение Email Notifications for Forms.

Начиная с версии 5.0 заказы из тестовых магазинов приходят в таблицу https://docs.google.com/spreadsheets/d/1XpwKOhR7Q4nSfBEOJxhAqAIgdCRZoHb5du7fOAxKS-A/ Вместо дополнения можно добавить скрипт гугл формы и настроить его под себя. Скрипт имеет целый ряд преимуществ перед дополнением. Например таблица товаров при отправки скриптом становится "читабельной". Так же у срипта отсутствует реклама дополнения в конце каждого письма с заказом и есть возможность отправлять разные письма в магазин и клиенту.

function onSubmit() {
var  form = FormApp.getActiveForm();
 var formResponses = form.getResponses();
 var newline ="";
 var emailQuotaRemaining = MailApp.getRemainingDailyQuota();

var clientsMail="info@heeg.ru";
var shopmail="info@heeg.ru";

var tableorders ="<br><a href='https://docs.google.com/spreadsheets/d/1XpwKOhR7Q4nSfBEOJxhAqAIgdCRZoHb5du7fOAxKS-A/'> ОТКРЫТЬ ТАБЛИЦУ С ЗАКАЗАМИ<\/a>"  
  
  
var k=formResponses.length-1;
var textlog="<tr><td>порядковый номер: <\/td><td>"+ (k + 1).toString()+"<\/td><\/tr>";

   var formResponse = formResponses[k];
   var itemResponses = formResponse.getItemResponses();
   for (var j = 0; j < itemResponses.length; j++) {
     var itemResponse = itemResponses[j];
    newline="<br><tr><td><b>"  +  itemResponse.getItem().getTitle() +":<\/b><\/td><td>" +  itemResponse.getResponse()+" <\/td><\/tr>"
   if (itemResponse.getItem().getTitle()=="manager_comments"){
     newline= "<table cellspacing='0' border='1'>" + itemResponse.getResponse().replace(/\[/g ,"<tr><td>").replace(/\|/g ,"<\/td><td>").replace(/\]/g ,"<\/td><\/tr>") +"<\/table> " ; 
      }
    if (itemResponse.getItem().getTitle()=="email"){
     clientsMail=itemResponse.getResponse();
      }  
     
     
   var textlog =  textlog + newline; 
   }




                    
  MailApp.sendEmail({to:shopmail, name:"Магазин ПОДАРКОВ" ,  subject: "Поступил заказ", htmlBody: textlog+"<br>квота:"+emailQuotaRemaining+tableorders});                 
 
  
  if(clientsMail!="info@heeg.ru"){ 
MailApp.sendEmail({to: clientsMail, name:"МагазинПОДАРКОВ" ,  subject: "Спасибо за ваш заказ!", htmlBody: textlog});  
  }  
}

После добавления скрипта к гугл форме необходимо включить тригер проекта (в скриптах кнопка с часиками) , чтобы скрипт срабатывал при появлении нового заказа.

Обратите внимание, что скрипт берет таблицу заказа из колонки manager_comments, а почту клиента из клонки email, поэтому если вам захочется переименовать эти поля, не забудьте переименовать их в скрипте.

Так же обратите внимание, что немножко изменился вид ссылки на заказ. Появился симпол "?" вместо второго "#" так как некоторые почтовые сервисы не понимали ссылки с двойным "#"

Клиенту и магазину скрипт отправляет разные письма, если клиент не заполнил свою почту и вместо нее стоит "почта заглушка", то скрипт не отправляет дубликат и квота (100 писем в день) не расходуется.

Для привязки гугл формы к вашему магазину нужна почта на G-mail. Заходим в гугл формы и создаем новую форму с текстовыми полями как в форме ниже (названия менять нельзя). поля просто текстовые безо всяких проверок и подсказок. Потом привязываем ее к гугл табличке (зеленая кнопка с крестом)

 

Если вам не удается просмотреть или отправить форму, заполните ее здесь.

Заказ в интернет магазине

Ваша корзина
* Обязательно

    order_number
    name
    email
    telephone
    delivery_adress
    link_for_your_order
    client_comments
    manager_comments


 

потом ставим себе дополнение Notify (или Email Notifications for Forms если вам нужны все данные заказа в письме) и показываем из какого поля почту брать для отправки напоминания И ПОЧТУ ВАШЕГО МАГАЗИНА (она не обязательно должна быть g-mail). Когда сделаете форму - отправляете сами себе ее на почту.

Иногда письмо с кодом формы на почту не приходит, или в полях отсутвуют (пустые) aria-label в этом случае получить код формы можно нажав кнопку "глазик" (просмотр), а потом также "показать код" формы через правый клик, заменить верхнюю часть по инструкции ниже и добавить код <input type="submit" name="rsubmit" value="Готово"> в самый конец перед </form>

Теперь пойдет самая сложная часть. В письме с формой щелкаем правой кнопкой мыши и выбираем "проинспектировать элемент" если в IE и "показать код" если ты в хроме.

из дерева нужно скопировать этот кусок кода  и немножко поменять начало и конец формы, как должно получится я выделил зеленым в двух местах. 1D4cho-vxcDc-pnLhhMSODcHMfOoc6Om9vtO9iIjsbkc - это код  формы демо-магазина, у вас будет свой код. Взять его можно из  места, которое я выделил желтым.

 

<div id="style_14569137620000000154_BODY"><div style="width: 576px; display: inline;"><div itemtype="http://schema.org/ViewAction" itemprop="action">
</div>

Если вам не удается просмотреть или отправить форму, заполните ее <a href="https://docs.google.com/forms/d/1D4cho-vxcDc-pnLhhMSODcHMfOoc6Om9vtO9iIjsbkc/viewform?c=0&amp;w=1&amp;usp=mail_form_link" target="_blank">здесь</a>.
<p></p>
<div dir="ltr"><div><h1 style="margin: 0.67em 0px;" dir="ltr">Заказ в интернет магазине</h1></div>
<div style="display: inline; white-space: pre-wrap;"><div style="font: inherit; margin: 0px 0px 1em; width: 99%; white-space: pre-wrap; -ms-word-wrap: break-word; font-size-adjust: inherit; font-stretch: inherit;" dir="ltr">Ваша корзина</div>

<div style="color: rgb(196, 59, 29);">*&nbsp;Обязательно</div></div>
<div><div>

<iframe name="my_iframe" style="display:none;"></iframe>
<form action="https://docs.google.com/forms/d/1D4cho-vxcDc-pnLhhMSODcHMfOoc6Om9vtO9iIjsbkc/formResponse" method="POST" target="my_iframe" >


<ol role="list">
/   здесь  идет код вашей формы
<input type="submit" name="rsubmit" value="Готово">
</td>
</tr></tbody></table></div></ol></form></div>
<div><div></div>
<div><div></div>
</div></div>
</div></div>
<br>
</div></div>

 

 Полученную форму нужно вставить в статью http://novye-podarki.ru/heeg.html#google_form 
(вместо novye-podarki – адрес вашего магазина) и собственно все, теперь все заказы будут уходить в вашу форму на гугле.

 

ДОПОЛНЕНИЕ:

 

вот так выглядит код одного поля в форме гугл

<div role="listitem">
<div style="margin: 12px 0px;" dir="auto"><div style="margin-top: 0px; margin-bottom: 1.5em; margin-left: 0px; vertical-align: middle; max-width: 100%;">
<div style="font-weight: bold; margin-top: 0.83em; margin-bottom: 0.83em; display: block;">order_number
</div>
<div style="margin: 0.1em 0px 0.25em; color: rgb(102, 102, 102); display: block;" dir="auto"></div>
<input name="entry.380347480" title="" dir="auto" aria-label="order_number" type="text" value="">

 

 

По номеру entry    форма в магазине связывается с гугл формой. Код этот выдается гуглом при создании формы и он уникален для каждого поля каждой формы и его менять нельзя. (у вас будут свои номера)


а в aria-label мы показываем скрипту магазина в поле с каким лейблом записывать информацию о заказе.

Позднее, для того чтобы пользователи не спамили в вашу форму напрямую. Можно добавить проверку в номер заказа, чтобы он содержал Z_ а поле со ссылкой на заказ http

Во второй части видеоурока описано как правильно подключить гугл форму.