Как создать генератор договора на своём сайте: инструкция и готовый шаблон

<!-- Расширенный генератор договора с расчётом стоимости и редактируемым текстом -->

<style>
  .form-block {
    max-width: 600px;
    margin: 0 auto 40px auto;
    padding: 20px;
    background: #f7f7f7;
    border-radius: 8px;
  }
  .form-block input,
  .form-block button {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 16px;
  }
  .result-block {
    background: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 6px;
    width: 90%;
    margin: 0 auto;
  }
  #contractText {
    min-height: 400px;
    white-space: pre-wrap;
    border: 1px solid #ccc;
    padding: 15px;
    outline: none;
    font-family: inherit;
  }
</style>

<div class="form-block">
  <h3>Генератор договора на обслуживание дома (с расчётом)</h3>
  <input type="text" id="orgName" placeholder="Название исполнителя (организация)" oninput="updateContract()">
  <input type="text" id="clientName" placeholder="Название заказчика (ТСЖ / ЖЭУ)" oninput="updateContract()">
  <input type="text" id="address" placeholder="Адрес дома" oninput="updateContract()">
  <input type="text" id="date" placeholder="Дата (например: 01.07.2025)" oninput="updateContract()">
  <input type="number" id="squareMeters" placeholder="Общая площадь дома (м²)" oninput="updateContract()">
  <input type="number" id="pricePerMeter" placeholder="Цена за м² (BYN)" oninput="updateContract()">
</div>

<div class="result-block">
  <h4>Предпросмотр договора (можно редактировать):</h4>
  <div id="contractText" contenteditable="true"></div>
  <br>
  <button onclick="downloadContract()">📄 Скачать договор (.doc)</button>
</div>

<script>
  function updateContract() {
    const org = document.getElementById('orgName').value || '[Исполнитель]';
    const client = document.getElementById('clientName').value || '[Заказчик]';
    const address = document.getElementById('address').value || '[Адрес дома]';
    const date = document.getElementById('date').value || '[Дата]';
    const area = parseFloat(document.getElementById('squareMeters').value) || 0;
    const price = parseFloat(document.getElementById('pricePerMeter').value) || 0;
    const total = (area * price).toFixed(2);

    const contract = `ДОГОВОР №___

г. ________, ${date}

${client}, именуемое в дальнейшем "Заказчик", и ${org}, именуемое в дальнейшем "Исполнитель", заключили настоящий договор о нижеследующем:

1. Предмет договора
Исполнитель оказывает услуги по техническому и санитарному обслуживанию многоквартирного жилого дома, расположенного по адресу: ${address}.

2. Виды работ:
- Уборка подъездов и придомовой территории
- Обслуживание систем отопления, водоснабжения, канализации
- Поддержание работы лифтов
- Вывоз мусора
- Освещение мест общего пользования
- Проведение дератизации и дезинсекции
- Проверка пожарной сигнализации
- Очистка кровли от снега и наледи (в зимний период)

3. Стоимость работ:
Общая площадь дома: ${area} м²
Ставка за 1 м²: ${price} BYN
ИТОГО к оплате: ${total} BYN (ежемесячно)

4. Срок действия договора
Срок действия — 12 месяцев с даты подписания. Договор может быть продлён по соглашению сторон.

5. Реквизиты сторон:
Заказчик: ${client}
Исполнитель: ${org}

Подписи сторон:
____________________ /${client}/
____________________ /${org}/`;

    document.getElementById('contractText').textContent = contract;
  }

  function downloadContract() {
    const text = document.getElementById('contractText').innerText;
    const blob = new Blob([text], { type: 'application/msword' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'dogovor_na_obsluzhivanie.doc';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

  document.addEventListener('DOMContentLoaded', updateContract);
</script>