У вас уже есть лендинг с формой заявки, а клиенты в Direct спрашивают «где вы на карте?» и «как позвонить?». Страшно снова открыть Cursor: агент может затянуть Next.js, сломать общее меню или продублировать Formspree. Олег попросил «добавь контакты» и получил отдельный React-проект, из-за которого заявки перестали уходить. За один вечер можно добавить contacts.html с телефоном, адресом, картой и кнопкой «Написать» — без npm, без второй формы и без программиста.
Страница контактов в Cursor AI — это отдельный contacts.html с блоком NAP (название, адрес, телефон), ссылками tel: и mailto:, iframe Яндекс.Карты и кнопкой «Оставить заявку» на якорь формы на index.html. Правило contacts.mdc с alwaysApply: true запрещает npm, React и новые формы. Agent копирует header и footer с главной, вы добавляете пункт «Контакты» в меню на обоих файлах.
По Яндекс Вордстат запрос «страница контакты на сайт» набирает около 1693 показов в месяц — почти в шесть раз больше, чем «как пользоваться cursor ai» (130). Люди ищут контакты организации на сайте, но в выдаче десятки статей про дизайн без ИИ. Типичная ошибка: просить агента «сделай контакты» без правил и получить вторую форму без endpoint. Контакты отвечают за доверие и маршрут, заявка остаётся одна на главной.
Проверьте проект после лендинга: index.html и форма без изменений
Если вы собирали главную по гайду B11, в корне лежит index.html, стили через Tailwind Play CDN, заявки на Formspree. Перед contacts.html проверьте рабочий endpoint в form на главной — Make и почту не трогаем. Agent (Ctrl+I / Cmd+I) создаёт файлы по вашим фразам.
На практике убедитесь, что нет package.json. Типичная ошибка: думать, что «контакты» — это ещё одна форма. Для старта хватит телефона, почты, адреса и ссылки на заявку на главной.
| Критерий | Страница контактов (contacts.html) | Форма заявки на главной | Блок «Контакты» в Tilda |
|---|---|---|---|
| Задача | Доверие, адрес, звонок, карта | Сбор заявки в одну воронку | Визуальный блок на платформе |
| Файл у вас на диске | Да, contacts.html в папке | index.html с form action | Нет отдельного HTML |
| Нужен endpoint Formspree | Нет, только ссылка на форму | Да, обязательно | Встроено в тариф |
| Кликабельный tel: на телефоне | Да, через ссылку tel:+7… | Часто только поле ввода | Зависит от настройки |
Зафиксируйте правило contacts.mdc, чтобы Agent не тянул React
Без ограничений Cursor снова предложит React или npm — ровно то, что сломало проект Олега. Решение: .cursor/rules/contacts.mdc с alwaysApply: true. Legacy .cursorrules в Agent может не сработать — нужен формат .mdc из документации Cursor.
В правиле: только contacts.html, тот же Tailwind CDN, копия header/footer с index.html, запрет трогать form на главной и создавать новые формы.
Шаблон промпта для Agent после contacts.mdc:
Создай contacts.html: заголовок «Контакты», блок NAP (телефон tel:, email mailto:, адрес, часы работы), иконки Telegram и WhatsApp, iframe Яндекс.Карты с loading=»lazy», кнопка «Оставить заявку» ведёт на index.html#zayavka. Скопируй header и footer с index.html. Один статический HTML, Tailwind CDN, без npm и без новых форм.
Соберите contacts.html в Agent: телефон, почта, адрес и мессенджеры
Откройте Agent, вставьте промпт, подставив телефон, почту на домене, адрес и график. NAP — стандарт «имя — адрес — телефон»: три точки, по которым клиент видит, что вы настоящая организация.
- Шаг 1: Создайте contacts.mdc и перезапустите Agent с промптом на contacts.html.
- Шаг 2: Проверьте, что телефон оформлен ссылкой tel:+79001234567, а не картинкой или простым текстом.
- Шаг 3: Добавьте mailto: для email и ссылки на Telegram/WhatsApp с вашими username.
- Шаг 4: Убедитесь, что кнопка заявки ведёт на index.html#zayavka (или ваш якорь формы), а не на пустую form.
- Шаг 5: Откройте contacts.html двойным кликом в браузере и сузьте окно до ширины телефона.
- Шаг 6: Попросите Agent добавить пункт «Контакты» в nav на index.html и contacts.html с относительными ссылками contacts.html и index.html.
В реальном проекте мастер на дому после contacts.mdc за час получил карту и кнопку «Написать» на якорь формы — без второй Formspree.
Встройте Яндекс.Карту через iframe без API-ключа и backend
Откройте конструктор Яндекс.Карт, найдите адрес, скопируйте iframe map-widget/v1. В Agent: «Вставь iframe под адресом, loading=lazy, ширина 100% на мобильном». Типичная ошибка — карта-картинка: маршрут не построить. На GitHub в шаблонах для салонов требуют NAP, карту и tel:, а форму выносят отдельно — тот же принцип: контакты не равны заявка.
Синхронизируйте шапку и меню: один бренд на двух страницах
Разные цвета шапки или адрес в меню и на странице убивают доверие. Попросите Agent скопировать header/footer и добавить «Контакты» в nav на обоих файлах. Ссылки contacts.html и index.html работают локально и на Vercel Drop.
Схема вечера с контактами:
Проверка index.html и Formspree → contacts.mdc → промпт в Agent → contacts.html с NAP и картой → пункт «Контакты» в меню → тест tel: с телефона → оба HTML в папке на Vercel Drop
Если делаете страницу услуг по тому же принципу, смотрите материал про страницу услуг в Cursor AI. Лендинг с нуля — в гайде Cursor AI лендинг без кода. Настройка одной формы заявки — в статье про форму заявки, Cursor и Make.
Пройдите чек-лист запуска: кликабельный телефон и карта на мобильном
Критерий успеха: contacts.html в папке; из меню на главной открывается страница контактов; тап по номеру набирает звонилку; карта без горизонтальной прокрутки; кнопка «Оставить заявку» ведёт на форму index.html, а не создаёт вторую.
- Шаг 1: Title вкладки на contacts.html говорит «Контакты» и название бизнеса, не «Document».
- Шаг 2: Телефон, email и мессенджеры видны в первом экране на узком экране.
- Шаг 3: Адрес на странице совпадает с адресом в подвале и на карте.
- Шаг 4: Карта загружается по https-ссылке с телефона, не только при локальном открытии файла.
- Шаг 5: Тестовый звонок по tel: и тестовое письмо по mailto: открывают нужные приложения.
- Шаг 6: Кнопка заявки ведёт на якорь формы; тестовая заявка с главной по-прежнему приходит на почту.
При публикации положите оба HTML в папку и перетащите на vercel.com/drop. Откройте contacts.html с телефона и пройдите чек-лист. Если лимит Agent закончился — contacts.mdc защитит проект завтра. В курсе Make.com и вайбкодинга разбираем Cursor и автоматизацию заявок без команды разработчиков.
Материал проверен: Артур Хорошев (CEO Maya AI, автор курса по Make.com и вайбкодингу).
Достоверность данных: формат Project Rules .mdc и alwaysApply — по cursor.com/docs/rules; NAP и click-to-call — по kokoc.com и seojazz.ru; iframe Яндекс.Карт — по yandex.ru/dev/maps/mapstools/constructor; Tailwind Play CDN — по tailwindcss.com/docs/installation/play-cdn; разделение контактов и формы — по github.com/andreev09/beauty_site_course/issues/102; частотность «страница контакты на сайт» (1693), «контакты на сайте» (11199) и «как пользоваться cursor ai» (130) — по Яндекс Вордстат, регион 225, 08.07.2026.
Частые вопросы
Как сделать страницу контактов на сайте без программиста?
Откройте готовый лендинг в Cursor, создайте правило contacts.mdc и в Agent опишите contacts.html с телефоном, адресом, картой и кнопкой на форму главной. Добавьте пункт «Контакты» в меню и проверьте tel: с телефона.
Нужен ли отдельный плагин WordPress для страницы контактов?
Нет, если вы ведёте статический сайт из HTML-файлов в Cursor. Плагины нужны для CMS-сайтов; здесь достаточно contacts.html, Tailwind CDN и публикации папки, как в гайде по лендингу.
Чем страница контактов отличается от формы заявки?
Контакты показывают, где вы и как связаться напрямую: NAP, карта, мессенджеры, tel:. Форма заявки собирает лид в одну воронку через Formspree. Дублировать form на contacts.html не нужно — дайте кнопку-ссылку на якорь формы на главной.
Какие примеры страницы контактов на сайте считаются хорошими для старта?
Заголовок «Контакты», блок с телефоном-ссылкой, почтой, адресом и часами, карта под адресом, иконки мессенджеров и одна кнопка «Оставить заявку» на главную. Без десяти полей формы и без React-сборки.
Почему телефон на сайте не набирается с мобильного?
Номер оформлен текстом или картинкой вместо ссылки tel:+7XXXXXXXXXX. Попросите Agent заменить на кликабельный tel: и проверьте тапом на реальном смартфоне.
Можно ли в Cursor добавить контакты, не ломая index.html?
Да. Правило contacts.mdc запрещает трогать форму на главной и создавать npm-проект. Agent копирует только header и footer, а contacts.html — новый файл рядом с index.html.
Как встроить карту Яндекса без своего сервера?
Соберите виджет в конструкторе Яндекс.Карт, скопируйте iframe и вставьте через Agent. API-ключ не нужен для map-widget/v1.
