Задать вопрос директору
Telegram
VK
Звонок

Первый экран для сайта стоматологии

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

Живое демо — блок работает прямо здесь

Код блока

Скачать файлом
<section class="vbpst">
  <div class="vbpst-wrap">
    <div class="vbpst-left">
      <h1 class="vbpst-h1">Лечим так, чтобы вы <span>перестали бояться</span> стоматологов</h1>
      <p class="vbpst-lead">Показываем снимок до начала работы, называем итоговую сумму до лечения и не находим «ещё три кариеса» в процессе.</p>

      <ul class="vbpst-marks">
        <li>
          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l8 3v7c0 5.2-3.4 8.6-8 10-4.6-1.4-8-4.8-8-10V5z"/><path d="M9 12l2 2 4-4.5"/></g></svg>
          <b>Лицензия Л041-01234-66/00123456</b><span>от 14 марта 2019 года</span>
        </li>
        <li>
          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="4"/><path d="M2 21c0-4 3-6.5 7-6.5s7 2.5 7 6.5"/><path d="M17 10h5M19.5 7.5v5"/></g></svg>
          <b>9 врачей, средний стаж 14 лет</b><span>четверо — высшей категории</span>
        </li>
        <li>
          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M8 21h8M12 18v3M7 9h4M7 13h7"/></g></svg>
          <b>Компьютерный томограф в клинике</b><span>снимок сразу, без поездок</span>
        </li>
      </ul>
    </div>

    <div class="vbpst-card">
      <h2 class="vbpst-card__ttl">Записаться на приём</h2>
      <p class="vbpst-card__sub">Первичная консультация с осмотром и планом лечения — бесплатно.</p>

      <form class="vbpst-form t-form js-form-proccess" role="form" action="#" method="POST"
            data-vibeblock-form="true" data-formactiontype="2" data-error-popup="y" data-success-popup="y"
            data-success-callback="vbpstSuccess" data-inputbox=".vbpst-inp, .vbpst-consent-inp" novalidate>
        <input type="hidden" name="formservices[]" value="HASH_EMAIL" class="js-formaction-services">
        <input type="hidden" name="form_source" value="Первый экран — стоматология">
        <input type="text" name="Name" class="vbpst-inp js-tilda-rule" data-tilda-req="1" data-tilda-rule="name" placeholder="Ваше имя">
        <input type="tel" name="Phone" class="vbpst-inp js-tilda-rule js-tilda-mask" data-tilda-req="1"
               data-tilda-rule="phone" data-tilda-mask="+7 (999) 999-99-99" inputmode="tel" placeholder="+7 (___) ___-__-__">
        <label class="vbpst-consent">
          <input type="checkbox" name="Privacy" value="Da" class="vbpst-consent-inp js-tilda-rule" data-tilda-req="1">
          <span class="vbpst-consent__box"></span>
          <span>Даю согласие на обработку персональных данных, <a href="/policy" target="_blank" rel="noopener">политика конфиденциальности</a></span>
        </label>
        <button type="submit" class="vbpst-submit t-submit">Записаться на консультацию</button>
      </form>

      <p class="vbpst-note">Перезвоним в течение 15 минут в рабочее время. Есть противопоказания, необходима консультация специалиста.</p>
    </div>
  </div>
</section>

<style>
.vbpst, .vbpst *, .vbpst *::before, .vbpst *::after { box-sizing: border-box; }
.vbpst {
  --acc: #1c7f8c; --acc-dark: #166874; --ink: #1d2b2e; --muted: #5f7276; --line: #dfe8e9; --soft: #f2f7f7;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: var(--soft); color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 84px) 20px;
}
.vbpst-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(26px, 4vw, 56px); align-items: start; }
.vbpst-h1 { font-family: var(--fh); font-size: clamp(30px, 4.3vw, 54px); line-height: 1.07; font-weight: 700; letter-spacing: -.022em; margin: 0 0 18px; }
.vbpst-h1 span { color: var(--acc); }
.vbpst-lead { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; color: var(--muted); margin: 0 0 30px; max-width: 30em; }

.vbpst-marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.vbpst-marks li { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px;
  align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; }
.vbpst-marks svg { grid-row: 1 / 3; width: 26px; height: 26px; color: var(--acc); }
.vbpst-marks b { font-size: 15px; font-weight: 600; }
.vbpst-marks span { font-size: 13px; color: var(--muted); }

.vbpst-card { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: clamp(22px, 2.6vw, 32px); }
.vbpst-card__ttl { font-family: var(--fh); font-size: 22px; line-height: 1.25; font-weight: 700; margin: 0 0 8px; }
.vbpst-card__sub { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 20px; }
.vbpst-inp { width: 100%; height: 54px; padding: 0 16px; margin-bottom: 10px; font: inherit; font-size: 16px;
  -webkit-appearance: none; appearance: none; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
.vbpst-inp:focus { outline: 2px solid var(--acc); outline-offset: -2px; }
.vbpst-consent { display: flex; align-items: flex-start; gap: 9px; margin: 6px 0 16px; cursor: pointer; font-size: 12px; line-height: 1.45; color: var(--muted); }
.vbpst-consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.vbpst-consent__box { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid #c3d2d4; border-radius: 5px; background: #fff; position: relative; }
.vbpst-consent input:checked + .vbpst-consent__box { background: var(--acc); border-color: var(--acc); }
.vbpst-consent input:checked + .vbpst-consent__box::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vbpst-consent a, .vbpst-consent a:link, .vbpst-consent a:visited, .vbpst-consent a:hover, .vbpst-consent a:active, .vbpst-consent a:focus { color: var(--ink) !important; text-decoration: underline !important; }
.vbpst-submit { width: 100%; min-height: 56px; border: 0; margin: 0; -webkit-appearance: none; appearance: none; font: inherit; font-size: 16px;
  font-weight: 600; cursor: pointer; border-radius: 12px; background: var(--acc) !important; color: #fff !important; transition: background .2s ease; }
.vbpst-submit:hover { background: var(--acc-dark) !important; }
.vbpst-note { margin: 16px 0 0; font-size: 11.5px; line-height: 1.5; color: #8ba0a3; }
.vbpst-done { text-align: center; padding: 28px 6px; }
.vbpst-done b { display: block; font-family: var(--fh); font-size: 20px; margin-bottom: 6px; }
.vbpst-done span { font-size: 14px; color: var(--muted); }

@media (max-width: 900px) { .vbpst-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .vbpst-h1 { font-size: clamp(25px, 7vw, 33px); } }
@media (prefers-reduced-motion: reduce) { .vbpst * { transition: none !important; } }
</style>

<script>
(function () {
  var roots = document.querySelectorAll('.vbpst');
  for (var i = 0; i < roots.length; i++) init(roots[i]);

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var form = root.querySelector('.vbpst-form');
    if (form && !form.__b) {
      form.__b = 1;
      form.addEventListener('submit', function (e) {
        e.preventDefault();
        var btn = form.querySelector('button[type="submit"], .t-submit');
        if (btn && typeof window.t_forms__initBtnClick === 'function') {
          try { window.t_forms__initBtnClick({ target: btn, srcElement: btn, preventDefault: function () {} }); } catch (_) {}
        }
      });
    }
    if (!window.vbpstSuccess) {
      window.vbpstSuccess = function (f) {
        try { f.innerHTML = '<div class="vbpst-done"><b>Заявка принята<\/b><span>Администратор перезвонит и подберёт удобное время приёма.<\/span><\/div>'; } catch (e) {}
      };
    }
  }
})();
</script>

Вставляется целиком в блок T123 «HTML-код». Внутри уже есть стили и скрипт, подключать ничего не нужно. В форме замените HASH_EMAIL на хеш приёмника из Tilda → Site Settings → Forms.

Как вставить блок в Tilda

  1. Скопируйте кодКнопка «Скопировать код» выше кладёт всё содержимое в буфер обмена.
  2. Добавьте блок T123В редакторе страницы: «Библиотека блоков» → «Другое» → T123 «HTML-код».
  3. Вставьте и сохранитеНажмите «Контент», вставьте код в поле, сохраните и обновите страницу.
  4. ОпубликуйтеВ превью скрипты Tilda работают не всегда — проверяйте на опубликованной странице.

Подробная инструкция с граблями — как вставить вайб-блок в Tilda.

Что менять под себя

Где в кодеЗа что отвечает
строка с номером лицензииномер и дата вашей лицензии
три маркера доверия под формойстаж, врачи, оборудование
--accакцент кнопки и подчёркивания в заголовке
formservices[]приёмники заявок Tilda

Первый экран стоматологии: зачем он нужен

Медицина продаётся доверием, а не скидкой. Поэтому первый экран построен на проверяемых фактах: номер лицензии, годы работы, количество врачей высшей категории. Всё это стоит рядом с формой, а не в подвале.

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

Вопросы по этому блоку

  • Для медицинской деятельности в России это требование к сайту. Блок специально выводит строку с лицензией на первом экране — так вы и требование закрываете, и доверие получаете.

  • Можно, но в медицине это заметно снижает конверсию. Если поле нужно, скопируйте существующий контейнер поля и не забудьте добавить его селектор в атрибут data-inputbox формы.

  • Да. Код на этой странице копируется целиком, без регистрации и подписки. Указывать авторство не нужно, использовать можно в коммерческих проектах.

  • Нет. Все классы внутри имеют собственный префикс vbpst, поэтому не пересекаются ни со стилями Tilda, ни с другими блоками. Скрипт привязан к своему элементу и запускается один раз, даже если блок вставлен дважды.

  • Раскладка перестраивается под узкие экраны, размеры заданы через clamp, поля ввода имеют шрифт 16 пикселей — iOS не будет зумить страницу при фокусе. Отдельной мобильной версии подключать не нужно.

Другие главные экраны

Ещё блоки для медицины и стоматологии

Собрать сайт целиком, а не по блокам

Дровосеки делают сайты на Tilda под ключ: структура, тексты, дизайн, вёрстка и вайб-блоки под задачи бизнеса.