Форма: заявка на замер

Собрать форму

1. Откройте Формы в шапке менеджера и нажмите Новая форма.
2. Название: «Заявка на замер». Имя для вставки на страницу соберётся из него латиницей само.
3. Нажмите Создать.

Форма начинается с готового набора полей: имя, телефон, комментарий и согласие на обработку данных. Справа видно, как её увидит посетитель.

Под полями есть блок Добавить в форму с кнопками видов полей. Нажмите Строка, а потом Дата. Щёлкните по новому полю, чтобы раскрыть его настройки:

• у строки подпись «Адрес» и галочка «Обязательное»: замерщику нужно знать, куда ехать;
• у даты подпись «Удобная дата».

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

На вкладке После отправки напишите, что увидит посетитель: «Спасибо! Перезвоним в течение часа и договоримся о времени замера». Сохраните форму.

Поставить на страницу

Откройте страницу «Контакты». Под текстом нажмите Добавить блок, выберите Форма и в списке «Заявка на замер». Сохраните.

В HTML страницы блок формы выглядит как тег [#Form:имя-формы]. Его можно вписать и вручную: готовый тег виден в шапке редактора формы, рядом с кнопкой, которая его копирует.

Форма возьмёт цвета сайта из CSS-переменных --t-accent и --t-radius. Зададим их в рамке, чтобы кнопка стала графитовой, как остальные кнопки сайта. Замените код компонента Layout:

<!-- @component
Рамка сайта: заголовок вкладки, шапка, подвал и общие стили. Шаблон кладёт внутрь свою часть.
-->
<script>
  import Footer from '$components/Footer';
  import Header from '$components/Header';
  import { site } from '$core';

  let { page, children } = $props();
</script>

<svelte:head>
  <title>{page.longTitle || page.title} — {site().name}</title>
</svelte:head>

<Header />

<main>
  {@render children()}
</main>

<Footer note="кухни по вашим размерам" />

<style>
  :global(:root) {
    --t-accent: #1f1e1c;
    --t-radius: 0.75rem;
  }

  :global(body) {
    margin: 0;
    background: #f1efeb;
    color: #1f1e1c;
    font: 18px/1.6 system-ui, sans-serif;
  }

  :global(h1) {
    font-size: 2.75rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
  }

  :global(img) {
    max-width: 100%;
    height: auto;
  }

  main {
    max-width: 48rem;
    margin: 0 auto;
    padding: 0 1.5rem 2rem;
  }
</style>

Новое здесь только :global(:root) { … } в начале стилей: переменные для всей страницы.

Заявки

Откройте «Контакты» на сайте, заполните форму и отправьте. Форма работает и без JavaScript, а если он есть, отправляет заявку без перезагрузки страницы.

В менеджере на конверте в шапке появится цифра 1. Щёлкните по нему: там новая заявка. В ней всё, что заполнил посетитель, страница, с которой он пришёл, и кнопки Позвонить и Написать. Отметьте заявку В работе, когда перезвоните, и Готово, когда замер назначен.

Уведомления в Telegram

1. В Telegram напишите боту @BotFather команду /newbot и придумайте имя. Он пришлёт токен: длинную строку с двоеточием.
2. Откройте своего нового бота и напишите ему что угодно, например «привет». Без этого бот не сможет писать вам первым.
3. В менеджере откройте Настройки → Уведомления, вставьте токен и нажмите «Найти чаты». Выберите свой чат и сохраните.

Отправьте с сайта ещё одну заявку: она придёт в Telegram. Туда же сайт напишет, если у него что-то сломается.