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

Все главы  [1 Перед началом](https://eile.site/cookbook/nachalo)[2 Установка](https://eile.site/cookbook/ustanovka)[3 Страницы](https://eile.site/cookbook/stranitsy)[4 Первый шаблон](https://eile.site/cookbook/pervyi-shablon)[5 Компоненты](https://eile.site/cookbook/komponenty)[6 Рамка сайта](https://eile.site/cookbook/ramka)[7 Поля страниц](https://eile.site/cookbook/polya)[8 Списки страниц](https://eile.site/cookbook/spiski)[9 Свои настройки](https://eile.site/cookbook/nastroiki)[10 Заявка на замер](https://eile.site/cookbook/forma)[11 Живые части](https://eile.site/cookbook/zhivye-chasti)[12 В интернет](https://eile.site/cookbook/v-internet)[13 Что дальше](https://eile.site/cookbook/dalshe)

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

Посетитель оставляет имя, телефон, адрес и удобную дату, а заявка приходит в менеджер и в Telegram. Соберём форму без строчки кода и поставим её на страницу контактов.

Глава 10 из 13 · 3 минуты чтения

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

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

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

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

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

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

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

![Редактор формы «Заявка на замер» и её предпросмотр](https://eile.site/media/screens/cook-form-light.webp?v=5335f3d8494d5b45)  ![Редактор формы «Заявка на замер» и её предпросмотр](https://eile.site/media/screens/cook-form-dark.webp?v=edf00f3c8ec7999c)

Редактор формы «Заявка на замер» и её предпросмотр

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

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

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

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

Компонент 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](https://t.me/BotFather) команду `/newbot` и придумайте имя. Он пришлёт токен: длинную строку с двоеточием.
2. Откройте своего нового бота и напишите ему что угодно, например «привет». Без этого бот не сможет писать вам первым.
3. В менеджере откройте **Настройки** → **Уведомления**, вставьте токен и нажмите «Найти чаты». Выберите свой чат и сохраните.

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