Своя форма записи на Тильде

Пять экранов на вашей странице: формат встречи, дата, время, контакты и подтверждение. Посетитель записывается, не уходя с сайта.

15 минутНужен первый рецепт

Живое демоОткрыть в отдельной вкладке

Это тот самый блок, который вы вставите себе. Он работает прямо здесь: выберите формат, дату и время — запись уйдёт в Планёрку.

Сначала первый рецепт

Здесь понадобится ссылка на прослойку, которая получилась в рецепте «Где хранить ключ». Без неё форма работать не будет.

01Форматсписок встреч

02Дататри недели

03Времячасы на день

04Контактыимя и почта

05Готовопечать с датой

Экраны сменяют друг друга внутри одного блока. Полоски сверху показывают, сколько шагов осталось, кнопка «назад» возвращает на предыдущий.

Добавить блок в Тильду

В нужном месте страницы: «Добавить блок» → раздел «Другое» → блок T123 «HTML-код» → «Контент».

Вставить код

Скопируйте готовый блок и вставьте его в поле целиком. Это разметка, стили и скрипт формы — 489 строк, править в них ничего не нужно.

Скачать файлом

Ключа в этом коде нет — на страницу он не попадает. Наружу видна только ссылка на прослойку, по которой можно узнать свободное время и записаться.

Подставить свою ссылку

В начале вставленного кода найдите data-proxy и замените адрес на ссылку вашей прослойки из первого рецепта.

<div id="plnbook"
     data-proxy="https://script.google.com/macros/s/ВАША_ССЫЛКА/exec">

Единственное место, которое нужно менять.

Что здесь происходит

Форматспрашивает у прослойки открытые типы встреч

Датаничего не спрашивает, календарь рисуется сразу

Времязапрашивает свободное время на выбранный день

Контактыничего не спрашивает

Готовоотправляет запись

Время запрашивается по одному дню, а не на месяц вперёд: длинный диапазон Планёрка отдаёт заметно дольше. Первый день грузится около четырёх секунд, дальше форма подтягивает соседние дни фоном, поэтому переключение между датами обычно мгновенное. Дни, где всё занято, гаснут и зачёркиваются.

Если посетитель выбрал время, а его успели занять, пока он заполнял поля, форма вернёт его на экран времени с обновлённым списком, а не покажет ошибку.

Если что-то не так

На первом экране крутятся серые полосыПрослойка не отвечает. Откройте её ссылку с ?action=types в браузере — там будет причина. Разбор ответов есть в первом рецепте.

«Прослойка ответила не тем, чего ждём»Развёрнута старая версия скрипта. Проверьте, что код в Apps Script сохранён, и опубликуйте новую версию: «Управление развёртываниями» → карандаш → «Версия: Новая».

«Не удалось связаться с прослойкой»Опечатка в data-proxy либо ссылка обрезана — она должна заканчиваться на /exec.

Форма выглядит не так, как в предпросмотреТильда добавляет свои отступы и выравнивание. Проверяйте только на опубликованной странице, а не в редакторе.

Шрифты не теПервая строка блока подгружает Literata и Golos Text. Если её удалить, форма возьмёт шрифты вашей страницы — работать будет, выглядеть иначе.

Следующий рецептСтраница записи с котомПример кастомизации, где за посетителем следит кот: смотрит в поле, которое заполняют, и радуется удачной записи.