Кастомизация формы через дополнительный код

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

Для этого на вкладке Основные есть блок Вставка дополнительного кода:

Доступны три области для вставки кода:

В тег <head> — для стилей и скриптов
После открывающего тега <body> — для дополнительных элементов
Перед закрывающим тегом </body> — для скриптов аналитики

Все примеры ниже вставляются в поле В тег <head>.

Добавление логотипа

Вставьте код в поле В тег <head>:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var firstElement = document.querySelector('.form .element');
    if (firstElement) {
      var logo = document.createElement('div');
      logo.style.textAlign = 'center';
      logo.style.marginBottom = '20px';
      logo.innerHTML = '<img src="https://example.com/logo.png" width="150" />';
      firstElement.parentNode.insertBefore(logo, firstElement);
    }
  });
</script>

Что заменить:

https://example.com/logo.png — прямая HTTPS-ссылка на ваш логотип
width="150" — ширина в пикселях (также можно задать в процентах, например width="20%")
'center' — выравнивание ('left', 'center', 'right')
'20px' — отступ между логотипом и первым элементом формы

подсказка

Используйте PNG с прозрачным фоном для лучшего результата.

Фоновое изображение или градиент

В интерфейсе "Оформление" доступен только сплошной цвет фона. Через код можно поставить картинку или градиент.

Фоновое изображение

<style>
  body {
    background-image: url("https://example.com/background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    margin: 0;
  }
</style>

Замените ссылку на ваше изображение. background-size: cover растянет картинку на весь экран, contain покажет целиком с возможными пустыми областями по краям.

Градиент

<style>
  body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    margin: 0;
  }
</style>

Замените цвета на цвета вашего бренда. 135deg — диагональный градиент. Можно использовать 180deg (сверху вниз), 90deg (слева направо), 0deg (снизу вверх).

Радиальный градиент:

<style>
  body {
    background: radial-gradient(circle, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    margin: 0;
  }
</style>

Изображение с градиентом поверх

Полупрозрачный градиент поверх картинки улучшит читаемость:

<style>
  body {
    background:
      linear-gradient(180deg, rgba(102,126,234,0.7) 0%, rgba(118,75,162,0.7) 100%),
      url("https://example.com/background.jpg");
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    margin: 0;
  }
</style>

Число 0.7 в rgba — прозрачность градиента (от 0 до 1). Уменьшите, чтобы картинка была ярче; увеличьте, чтобы градиент перекрывал сильнее.

Оформление карточки формы

Карточка формы — это белый блок с полями. Через код можно добавить тень, рамку, изменить ширину и отступы.

Тень и рамка

<style>
  .form {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.2);
  }
</style>

box-shadow — тень (смещение по X, смещение по Y, размытие, цвет)
border — рамка (толщина, стиль, цвет)

Ширина и центрирование

<style>
  .form {
    max-width: 600px;
    margin: 40px auto;
    padding: 30px;
  }
</style>

max-width — максимальная ширина формы
margin: 40px auto — отступ сверху/снизу и центрирование по горизонтали
padding — внутренние отступы

Скругление углов

<style>
  .form {
    border-radius: 16px;
  }
</style>

примечание

В интерфейсе "Оформление" есть настройка "Скругление элементов" — она скругляет поля и кнопки внутри формы. border-radius на .form скругляет саму карточку.

Полный пример карточки

<style>
  body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    margin: 0;
  }

  .form {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.2);
    max-width: 600px;
    margin: 40px auto;
    padding: 30px;
    border-radius: 16px;
  }
</style>

Как проверить результат

После добавления кода нажмите кнопку предпросмотра в правом верхнем углу:

Изменения применяются мгновенно. Если что-то выглядит не так, вернитесь на вкладку Основные, отредактируйте код и снова откройте предпросмотр.

подсказка

После публикации формы изменения могут отображаться с задержкой до 3 минут из-за кэширования.

Добавление логотипа​

Фоновое изображение или градиент​

Фоновое изображение​

Градиент​

Изображение с градиентом поверх​

Оформление карточки формы​

Тень и рамка​

Ширина и центрирование​

Скругление углов​

Полный пример карточки​

Как проверить результат​

Рекомендации​