Coming Soon: страница-заглушка для сайта в разработке — готовые HTML-варианты

Домен куплен, идея есть, сайт ещё в разработке — а что показывать тем, кто уже заходит по адресу? Пустая страница «Apache default» или «It works!» убивает первое впечатление. Решение — Coming Soon страница: красивая заглушка с обратным отсчётом до запуска, формой подписки на анонс и контактами. Делается за час, работает до запуска основного сайта. В статье разберём, какие блоки нужны на странице-заглушке, дадим готовый код и расскажем, где брать дизайны.

Зачем нужна страница-заглушка

Создать ожидание. Анонс «скоро запуск» вызывает интерес.
Собрать email-базу до запуска. Первая аудитория для рассылки сразу при открытии.
Зафиксировать домен. Поисковики и пользователи видят, что домен занят и работает.
Дать контакты. Тем, кто пришёл случайно — куда писать.
Улучшить SEO с самого старта. Время существования домена считается фактором доверия.
Не показывать рабочие версии. Пока сайт не готов — публика видит финальный анонс, а не наполовину сверстанные блоки.

Что должно быть на странице

Логотип и название проекта. Узнаваемость.
Заголовок-обещание. «Скоро запуск», «Coming Soon», «Готовимся к запуску».
Краткое описание проекта. Что это и для кого.
Дата запуска или обратный отсчёт. Создаёт срочность.
Форма подписки. «Получите письмо в день запуска».
Соцсети. Иконки на ВК, Telegram, инстаграм.
Контакты. Email или Telegram для связи.
Фоновое изображение или градиент. Эстетика.

Простой код заглушки

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Скоро запуск | Yourproject</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      text-align: center;
    }
    .container { max-width: 600px; }
    .logo { font-size: 1.8rem; font-weight: 700; margin-bottom: 3rem; }
    h1 { font-size: 3rem; margin-bottom: 1rem; }
    p { font-size: 1.2rem; opacity: 0.9; margin-bottom: 2rem; }
    form {
      display: flex;
      gap: 0.5rem;
      max-width: 400px;
      margin: 0 auto;
    }
    input {
      flex: 1;
      padding: 1rem;
      border-radius: 8px;
      border: none;
      font-size: 1rem;
    }
    button {
      padding: 1rem 2rem;
      background: #ffffff;
      color: #667eea;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
    }
    .socials {
      margin-top: 3rem;
      display: flex;
      gap: 1.5rem;
      justify-content: center;
    }
    .socials a {
      color: white;
      text-decoration: none;
      font-size: 1.5rem;
    }
    @media (max-width: 600px) {
      h1 { font-size: 2rem; }
      form { flex-direction: column; }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="logo">Yourproject</div>
    <h1>Скоро запуск</h1>
    <p>Мы готовим что-то особенное. Оставьте email — пришлём анонс в день запуска.</p>
    <form id="subscribe">
      <input type="email" placeholder="Ваш email" required>
      <button type="submit">Подписаться</button>
    </form>
    <div class="socials">
      <a href="https://t.me/yourchannel">TG</a>
      <a href="https://vk.com/yourpage">VK</a>
      <a href="mailto:hello@yourdomain.ru">Email</a>
    </div>
  </div>
</body>
</html>

Сохраняете как index.html и заливаете на хостинг — заглушка работает.

Код с обратным отсчётом

Добавьте JS с таймером до конкретной даты:

<div class="countdown">
  <div><span id="days">00</span><small>дней</small></div>
  <div><span id="hours">00</span><small>часов</small></div>
  <div><span id="minutes">00</span><small>минут</small></div>
  <div><span id="seconds">00</span><small>секунд</small></div>
</div>

<script>
const launchDate = new Date('2026-06-01T10:00:00').getTime();

function updateCountdown() {
  const now = Date.now();
  const distance = launchDate - now;

  if (distance < 0) {
    document.querySelector('.countdown').innerHTML = 'Мы запустились!';
    return;
  }

  const days = Math.floor(distance / (1000 * 60 * 60 * 24));
  const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((distance % (1000 * 60)) / 1000);

  document.getElementById('days').textContent = String(days).padStart(2, '0');
  document.getElementById('hours').textContent = String(hours).padStart(2, '0');
  document.getElementById('minutes').textContent = String(minutes).padStart(2, '0');
  document.getElementById('seconds').textContent = String(seconds).padStart(2, '0');
}

setInterval(updateCountdown, 1000);
updateCountdown();
</script>

Сбор email-подписок

Чтобы при подписке email действительно куда-то отправлялся, нужен обработчик. Варианты:

Formspree / Getform — простейший вариант, описан в отдельной статье про формы.
MailChimp / Unisender / Sendsay — сразу попадает в рассылочный сервис.
Telegram-бот — email приходит вам в чат, дальше переносите в табличку.
Google Forms — встроенная форма с сохранением в Google Таблицу.

Пример с отправкой в Telegram:

document.getElementById('subscribe').addEventListener('submit', async (e) => {
  e.preventDefault();
  const email = e.target.querySelector('input').value;
  const TOKEN = '...';
  const CHAT_ID = '...';
  const url = `https://api.telegram.org/bot${TOKEN}/sendMessage`;
  await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      chat_id: CHAT_ID,
      text: `📧 Новая подписка: ${email}`
    })
  });
  alert('Спасибо! Уведомим о запуске.');
  e.target.reset();
});

Coming Soon под почту на домене

Часто заглушку ставят на новом домене, у которого уже подключена корпоративная почта. Тогда логично указать email на этом же домене:

<a href="mailto:hello@yourdomain.ru">hello@yourdomain.ru</a>

Это сразу укрепляет доверие — у компании есть свой домен и почта, а не gmail.com.

Как опубликовать заглушку

Зарегистрируйте домен и купите хостинг (или используйте уже имеющиеся).
Сохраните HTML-код заглушки в файл index.html.
Создайте папку images и положите туда фоновую картинку (если используется).
Залейте файлы через FTP в папку public_html на хостинге.
Проверьте, что страница открывается по адресу домена.

Идеи для дизайна

Минимализм. Тёмный фон, белый текст, центр. Чем меньше, тем солиднее.
Градиент. Модный современный вид. Hex-генераторы градиентов: uigradients.com.
Видео-фон. Зацикленный ролик 5–10 сек на фоне. Внимание зашкаливает, но грузится дольше.
Иллюстрация. Большой графический элемент — космонавт, ракета, мастеровая.
Один большой объект. Огромная цифра, текст или эмодзи.
Параллакс-эффект. Движение слоёв при скролле или движении мыши.
3D-сцена. Через Three.js или Spline — для премиум-проектов.

SEO: индексировать или нет

Зависит от целей.

Индексировать (да). Если хотите, чтобы поисковики «выучили» домен заранее. Добавьте обычный title, description, маленький текст с ключевыми словами.
Не индексировать (нет). Если до запуска ещё далеко и не хотите попасть в выдачу с пустой страницей. Добавьте <meta name="robots" content="noindex">.

Универсальный совет: индексировать, но с минимальным title типа «Yourproject — скоро запуск», без амбициозных ключевых слов. Когда сайт запустится — индексация уже частично прошла.

Частые ошибки

Тяжёлая страница. 5 МБ фоновое видео — пользователь уходит.
Только один способ связи. Только email или только Telegram — кому-то неудобно.
Дата запуска без обновлений. Установили «запуск через месяц», прошло три месяца — стыдно. Либо без даты, либо обновляйте.
Форма подписки не работает. Email вводится, но никуда не уходит. Обязательно протестируйте.
Нет адаптива. На мобильном вёрстка ломается — половина посетителей уходит.
Шрифт неудобный. Тонкие декоративные шрифты на тёмном фоне сложно читать.
Не оставили контакты. Никаких email/телефонов — невозможно связаться, если что-то нужно.
Заглушка стоит годами. Если проект не запустится — снимайте заглушку.

FAQ

Сколько времени можно держать заглушку?

Технически — сколько угодно. Психологически — не больше 3–6 месяцев. Заглушка год+ воспринимается как заброшенный проект.

Нужен ли SSL на заглушке?

Да. Современные браузеры показывают предупреждение «Незащищённое соединение» для http-сайтов. Заглушка должна работать через https — иначе доверие падает с первой секунды. Подключите бесплатный Let's Encrypt через панель хостинга.

Что делать с заглушкой при запуске?

Заменяете файл index.html на главную страницу нового сайта. Если собрали базу email во время заглушки — отправляете рассылку с анонсом.

Можно ли поставить заглушку на ВКонтакте/Telegram-канал?

Можно: если основной сайт не готов, ведите соцсети как «подготовку к запуску». В заглушке делайте ссылки на каналы — собирайте аудиторию там.

Как сделать обратный отсчёт без программирования?

JS-код для отсчёта простой, скопировать с любого туториала и подставить дату. Альтернатива — готовые скрипты-виджеты, которые встраиваются одной строчкой (search «countdown widget html»).

Можно ли скрыть рабочий сайт под заглушкой только для незарегистрированных?

Да, через .htaccess с basic auth: даёте пароль команде, остальные видят заглушку. Полезно при доработке существующего сайта.

Как собирать аналитику на заглушке?

Та же Яндекс.Метрика или Google Analytics — обычной установкой кода. Сразу будете знать, сколько людей зашли, откуда, сколько подписалось.

Чек-лист заглушки

☐ Сделан дизайн страницы
☐ Указан логотип/название проекта
☐ Описано, что будет на сайте
☐ Добавлен обратный отсчёт (опционально)
☐ Форма подписки настроена и работает
☐ Указан email/Telegram для связи
☐ Ссылки на соцсети
☐ Страница адаптирована под мобильные
☐ Подключен SSL (https://)
☐ Установлена аналитика
☐ Установлены OG-теги (для красивых превью в соцсетях)
☐ Тестовая подписка дошла до места назначения
☐ Проверена на разных устройствах

Заключение

Coming Soon — простая страница на час работы, которая «оживляет» домен до запуска основного сайта. Собирает первых подписчиков, фиксирует домен в поисковиках, даёт каналы связи. Минимум усилий, максимум пользы.

Подобрать готовый HTML-шаблон заглушки можно в каталоге шаблонов Zettabyte — там есть варианты с обратным отсчётом и формой подписки. А под размещение домена с заглушкой достаточно самого простого тарифа из подборщика хостингов.