Как сделать страницу контактов в WordPress с картой и формой заявки?

Андрей открыл салон ремонта телефонов: в подвале был один e-mail, в чатах спрашивали «куда звонить?». Поставил Contact Form 7, вставил шорткод обычным абзацем — на сайте квадратные скобки вместо полей. Карту вставил в «HTML», на телефоне серый прямоугольник. Не хватало порядка: страница, форма, карта, тест письма. Ниже — как за вечер собрать страницу контактов WordPress с картой и формой на своём хостинге, без кода.

Страница контактов — последний шаг перед заявкой, а не строка в подвале. На self-hosted: отдельная страница в меню, Contact Form 7 через блок «Шорткод», Яндекс.Карта через YaMaps или iframe без API-ключа для одной метки. Проверка: тестовая заявка на почту за пару минут и карта с меткой на мобильном.

Главная продаёт услугу, контакты снимают сомнения: адрес, режим, как написать. На WordPress.com форма есть блоком «Форма»; на reg.ru и Timeweb тот же блок — после Jetpack. Ниже путь CF7 (10+ млн установок, 6.1.7) и карта без кабинета разработчика Яндекса для одной метки.

Выделите контакты в отдельную страницу, а не в подвал

Типичная ошибка — спрятать телефон и адрес только в футере. Клиент с рекламы не скроллит до низа, а поисковик и нейроответы любят явный блок NAP: название, адрес, режим. Для сайта услуг достаточно короткого текста «как добраться» и кнопки «Написать в Telegram» рядом с формой, без перегруженной главной.

На практике хватает одной страницы со slug kontakty: она открывается из меню, дублируется ссылкой в подвале и не конкурирует с прайсом на главной. Если форма уже стоит на лендинге услуги, отдельные контакты всё равно нужны — человек ищет «где вы» и «как связаться», а не читает весь каталог.

Соберите каркас в Gutenberg: текст, кнопка, две колонки

Страницы в WordPress — это не записи блога: они не попадают в ленту /stati/ и живут по постоянной ссылке. Создайте страницу, задайте заголовок «Контакты» и ярлык kontakty, затем соберите макет сверху вниз так, как его читает телефон.

1. Шаг 1. Админка → Страницы → Добавить → заголовок и ярлык kontakty → опубликовать черновик можно позже.
2. Шаг 2. Абзац с адресом, режимом и ссылкой на мессенджер (кнопка или текстовая ссылка).
3. Шаг 3. Блок «Колонки»: слева форма, справа карта — или наоборот; на мобильном блоки встанут друг под другом.
4. Шаг 4. Паттерн «Страница контактов» с wordpress.org/patterns — быстрый старт, если не хотите верстать с нуля.
5. Шаг 5. Строка про обработку персональных данных и ссылка на политику рядом с кнопкой отправки, если форма собирает имя и телефон.
6. Шаг 6. Внешний вид → Меню → добавить страницу «Контакты» в шапку и при желании в подвал.

Workflow:
Страница kontakty → NAP-текст и мессенджер → колонки (форма + карта) → меню → проверка в инкогнито

Первый результат сегодня — опубликованная страница с реальным адресом в тексте, даже если форма и карта подключатся на следующем шаге. Без этого карта на сайте выглядит «висящей в воздухе», а клиент не доверяет метке.

Сравните три пути к форме заявки

Contact Form 7 — отдельный плагин с пунктом Contact в меню админки. Блок «Форма» из справки WordPress.com на своём хостинге требует Jetpack. WPForms и платные конструкторы уместны, если вы уже купили лицензию; для одной страницы контактов чаще хватает CF7.

Итог: сайт на reg.ru или Timeweb — ставьте CF7, копируйте шорткод из Contact → копировать, вставляйте блоком, а не текстом.

Подключите Contact Form 7 и настройте вкладку «Письмо»

Удивительный, но частый сюжет 2026 года: в отзывах пишут «SMTP тест ок, а форма молчит». Чаще виновато поле From на вкладке Mail или хостинг, который режет встроенную отправку wp_mail, а не сам плагин с 10+ млн установок.

1. Шаг 1. Плагины → Добавить → Contact Form 7 → установить и активировать.
2. Шаг 2. Contact → открыть форму по умолчанию → скопировать шорткод вида [contact-form-7 id=»123″].
3. Шаг 3. На странице контактов: блок «+» → «Шорткод» или «Contact Form 7» → вставить код. Если видите скобки на сайте — вы вставили обычным абзацем.
4. Шаг 4. Вкладка «Письмо»: в To указать вашу рабочую почту вместо плейсхолдера; From — адрес на домене сайта, не случайный gmail.
5. Шаг 5. Отправить тест с телефона; пусто — проверить «Спам», затем SMTP-плагин (отдельная тема, без ухода в админку сервера).

Типичная ошибка — радоваться надписи «Спасибо» и не открыть почту. Зафиксируйте время: письмо должно прийти за пару минут. Спам с формы с первого дня снижают honeypot, Akismet или Turnstile — см. материал про защиту формы от спама.

Встройте Яндекс.Карту без API-ключа для одной метки

Шорткод — короткая команда для WordPress: плагин подменяет её готовым блоком на странице. YaMaps (версия 0.6.41, 10 000+ установок) для простой карты с меткой офиса ключ JavaScript API не требует; ключ нужен в основном для поиска и маршрутов, как пишут FAQ разработчика на GitHub yhunter-ru/yamaps.

Два рабочих пути. Плагин YaMaps: установить, на странице иногда удобнее блок «Классический редактор» или шорткод [yamap], поставить метку по адресу, высоту карты не меньше 300 px на телефоне — иначе «белый прямоугольник». Альтернатива без плагина: конструктор карт Яндекса → Поделиться → iframe в блок «Произвольный HTML». На мобильном проверьте, что карта не обрезана по высоте.

Карта без адреса в тексте выше формы снижает доверие — дублируйте улицу текстом.

Добавьте пункт меню и цель в Метрике

Страница не работает как контакт, пока её не видно из шапки. Внешний вид → Меню → отметить «Контакты», сохранить. В подвале достаточно текстовой ссылки — не обязательно дублировать всю форму.

Для локального бизнеса имеет смысл связать страницу со разметкой LocalBusiness и счётчиком: цель «просмотр /kontakty/» и отдельно клик по кнопке мессенджера — см. Яндекс Метрику на WordPress. Title и description в SEO-плагине: «Контакты + город», без спама ключами.

Разберите типичные поломки до отказа от WordPress

• Шорткод CF7 виден как текст — нужен блок «Шорткод», не абзац.
• Серая карта — неверная высота iframe, конфликт блоков Gutenberg или блок карты не в том режиме.
• Форма «отправлена», почта пустая — вкладка Mail, From на домене, папка «Спам».
• Только e-mail в подвале — клиенты не находят путь к заявке с главной.
• Тяжёлая карта на первом экране — опустите её под текст и форму на мобильном.

Андрей мог уложиться в один вечер: страница, CF7, YaMaps, тест письма — последовательность кликов, не программирование.

Проверьте, что контакты действительно работают

Успех выглядит так: /kontakty/ открывается из меню и в инкогнито; на странице видны адрес, режим, ссылка на мессенджер, живая форма и карта с меткой; тестовая заявка пришла на почту; рядом с кнопкой отправки есть фраза про персональные данные и ссылка на политику конфиденциальности. Запишите время отправки теста — если через пять минут тишина, возвращайтесь к вкладке «Письмо», а не к смене темы.

Некогда ловить почту и карту — на странице услуг закажите сборку WordPress под заявки или задайте вопрос через контакты. Другие пошаговые гайды — в разделе статей.

Материал проверен: Андрей Дикий (создаёт сайты и продвигает их статьями, SEO/GEO).
Достоверность данных: каталог CF7 ru.wordpress.org (6.1.7, 17.08.2026); contactform7.com/docs; справка WordPress.com по блоку «Форма»; YaMaps en-au.wordpress.org (0.6.41); GitHub rocklobster-in/contact-form-7 и yhunter-ru/yamaps; паттерн contact-page-ru_ru на WordPress.org; help.reg.ru по CF7. Частотность запросов — Яндекс Вордстат на 2026-10-02 (MCP недоступен, LSI по SERP).

Частые вопросы

Как создать страницу контактов в WordPress?

Страницы → Добавить → заголовок «Контакты», ярлык kontakty, блоки с адресом и формой, опубликовать и добавить пункт в меню. Это страница, не запись блога.

Как вставить карту на страницу контактов WordPress?

Установите YaMaps и поставьте метку шорткодом или через классический блок, либо вставьте iframe из конструктора Яндекса в «Произвольный HTML». Задайте высоту не меньше 300 px и продублируйте адрес текстом.

Какая форма лучше для страницы контактов?

На своём хостинге чаще берут Contact Form 7: бесплатно, много инструкций на русском. На WordPress.com проще блок «Форма». Jetpack даёт тот же блок на .org, если не хотите CF7.

Нужна ли отдельная страница контактов, если форма уже на главной?

Да. Люди ищут адрес и режим отдельно от прайса; отдельный URL проще дать в рекламе, на визитке и в LocalBusiness. Форма на главной не заменяет карту и NAP-текст.

Как добавить кнопку Telegram на страницу контактов?

Блок «Кнопки» или обычная ссылка с текстом «Написать в Telegram» рядом с формой. Укажите ссылку t.me/ваш_ник; не делайте звонок единственным способом связи, если клиенты пишут в мессенджеры.

Почему на сайте виден текст [contact-form-7], а не форма?

Шорткод вставлен как обычный текст. Удалите абзац, добавьте блок «Шорткод» или «Contact Form 7» и вставьте код из меню Contact.

Обязателен ли API-ключ Яндекса для карты на сайте?

Для одной метки офиса через YaMaps или iframe конструктора — нет. Ключ в кабинете developer.tech.yandex.ru нужен, если на карте хотите поиск адресов или маршруты для посетителя.