Интерактивный договор на оказание услуг

Mini-сервис для фрилансера или агентства: исполнитель заполняет данные проекта, клиент подписывает договор в браузере и скачивает PDF.

Rolle Разработка сервиса «под ключ»: UX, фронтенд, интеграции
Kunde Фрилансеры, небольшие студии и сервисные компании
Stack HTML, CSS, JavaScript, Google Apps Script (опционально)

Задача

Обычно договоры подписываются вручную: правка Word-файлов, пересылка по почте, ожидание сканов. Это долго и часто откладывается, хотя договор нужен до начала работы.

Решение

Как работает для исполнителя

  • На странице prepare.html исполнитель заполняет свои данные, описание проекта, сроки и стоимость.
  • Сервис генерирует длинную ссылку на contract.html с зашитым в хэш текстом договора.
  • Эту ссылку можно отправить клиенту в мессенджер или по e-mail.

Как выглядит для клиента

  • Клиент открывает contract.html и видит уже собранный договор с данными проекта.
  • Он добавляет свои реквизиты, ставит галочку согласия и рисует подпись прямо в браузере.
  • После этого договор можно скачать в PDF; при необходимости данные уходят в Google Таблицу или на почту.

Логика и UX

Инструмент сделан максимально простым: минимум полей, всё на одной странице и без регистрации. Цель — чтобы договор можно было оформить за несколько минут.

  • Два экрана: подготовка договора (для исполнителя) и подписание (для клиента).
  • Передача данных через location.hash — без базы данных и сложного backend-а.
  • Опциональное логирование в Google Sheets или CRM через Google Apps Script.

Скриншоты сервиса

Несколько экранов из инструмента: подготовка договора исполнителем и подписание клиентом прямо в браузере.

Онлайн-инструмент на моём сайте

Этот сервис работает как внутренняя страница сайта: вы можете открыть подготовку договора, заполнить тестовые данные и пройти весь путь от генерации ссылки до подписания PDF.

Открыть подготовку договора

Технологии и расширения

  • HTML/CSS
  • JavaScript
  • Подпись на canvas
  • Генерация PDF
  • Google Apps Script