Как сделать страницу контактов сайта: каналы, форма, проверка

Страница «Контакты» должна отвечать на три вопроса: кому пишут, каким способом и когда ждать ответ. Для простого сайта хватит подтверждённого адреса почты или телефона и ясной подписи. Форма нужна только тогда, когда у сайта есть работающий способ принять, сохранить и обработать обращение.

Какие данные подготовить до оформления

Составьте список действующих каналов связи и назначьте ответственного за каждый. Для каждого канала запишите, какие вопросы туда направлять, кто видит сообщения и как вы проверите доставку. Не добавляйте адрес офиса, часы приёма или аккаунт в мессенджере, если эти сведения не актуальны. Если посетителю нужен выбор между заявкой и сообщением, укажите разницу в одном предложении.

Минимальная карта страницы: название организации или автора, основной способ связи, запасной способ, ожидаемый режим ответа и сведения о местоположении только если очный визит действительно возможен. HTML-элемент <address> предназначен для контактных данных автора или организации, включая почту, телефон и социальные аккаунты, что подтверждает справка MDN.

Как собрать страницу без формы

Сначала создайте отдельную страницу и дайте ей понятное имя «Контакты». Добавьте её в меню и подвал, чтобы способ связи находился из разных частей сайта. Если сайт многостраничный, проверьте связи между страницами и не оставляйте страницу контактов доступной только из одной статьи.

1. Напишите, кому адресовано обращение: название проекта или имя специалиста.
2. Добавьте один основной канал связи и резервный, если он регулярно проверяется. Для почты используйте ссылку с mailto:, для телефона ссылку с tel:.
3. Рядом напишите, по каким вопросам лучше обращаться и когда обычно возможен ответ. Не обещайте точное время, если нет процесса его соблюдать.
4. Опубликуйте страницу и поставьте ссылку «Контакты» в навигацию сайта.
5. Откройте сайт на телефоне и компьютере, нажмите ссылки и отправьте тестовое письмо или выполните тестовый звонок на свой номер.

Ссылки mailto: и tel: запускают подходящее приложение на устройстве, но конкретное поведение зависит от его настроек. Это описано в справке MDN о ссылках. Поэтому рядом со ссылкой оставьте сам адрес почты или номер видимым текстом: посетитель сможет скопировать его, если приложение не открылось.

Когда добавлять форму обратной связи

Форма полезна, если нужно заранее собрать тему обращения и дать человеку ответ на странице после отправки. Она не равна работающему приёму сообщений: требуется обработчик, место доставки, проверка ошибок и защита от автоматических отправок. Если этих частей пока нет, используйте проверенную почту. Статья о формах и заявках поможет спланировать отдельный процесс, когда он понадобится.

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

Если форма всё же нужна, спросите только сведения, необходимые для ответа, подпишите поля и покажите, какие из них обязательны. Руководство W3C по доступным формам рекомендует связывать поля с подписями и давать понятные инструкции. Обработку личных данных согласуйте с ответственным за сайт до запуска формы; конкретные юридические требования зависят от вашей ситуации.

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

По теме: Как сделать сайт одежды: каталог, размеры и запуск продаж

Как проверить страницу и устранить сбои

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

W3C предлагает при проверке форм оценивать доступ с клавиатуры, подписи и понятность ошибок. Такой тест полезен даже для короткой формы обратной связи. При неполучении сообщения сначала проверьте правильность адреса и папку нежелательной почты, затем журнал обработчика формы. Не объявляйте форму рабочей только потому, что браузер показал сообщение «Отправлено».

Если номер скрыт изображением, на телефоне его сложно нажать и скопировать; замените картинку текстом. Если адрес офиса изменился, обновите страницу, подвал и остальные места сайта одновременно. Если сообщения остаются без ответа, сократите число каналов до тех, которые реально обслуживаются.

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

Обязателен ли адрес офиса?

Для удалённой работы физический адрес не нужен для самой функции связи. Указывайте его, только если посетителя действительно принимают там. Отдельно проверьте требования, применимые к вашей деятельности.

Можно ли оставить только мессенджер?

Можно, если он доступен вашей аудитории и сообщения регулярно обрабатываются. Почта или другой резервный канал снижает зависимость от одной площадки.

Почему форма пишет «Отправлено», а письма нет?

Проверьте адрес доставки, спам, ошибки серверной обработки и тестовую запись. Подтверждение в интерфейсе не доказывает доставку.