Google Forms в Blogger: встроить и кастомизировать

Панорамное изображение шаблона блога с формой

firstimage=”https://www.makeuseof.com/wp-content/uploads/2011/08/bloglogo.jpg”

Логотип Google Forms на демонстрационном скриншоте

Многие перешли на WordPress или Tumblr, но часть пользователей всё ещё выбирает Blogger. Google поддерживает Blogger и Google Forms — это недорогой способ добавить форму обратной связи с возможностью размещения на собственном домене. В этой инструкции — детальный, понятный процесс: от создания формы в Google Docs (Forms) до встраивания и кастомизации в Blogger.

Кого это касается

Владельцы блогов на Blogger, которым нужна простая форма контакта.
Новички, которые хотят минимально программировать и использовать только веб-интерфейсы.
Те, кто хочет сохранить дизайн сайта, убрав стандартную оболочку Google Forms.

Что нужно знать в одно предложение

Google Forms сохраняет ответы в таблице Google Sheets; мы получаем HTML-форму из исходников страницы «Live form» и вставляем её в страницу Blogger, при необходимости правим атрибуты и CSS для внешнего вида.

Шаг 1 — Создание формы в Google Forms

Войдите в Google Docs (Google Drive) и создайте новый «Форму».
Задайте заголовок формы — для удобства управления, но можно оставить «Без названия».
Добавьте вопрос типа «Абзац» для поля сообщения, чтобы пользователи могли писать длинные комментарии.
При необходимости добавьте остальные поля (Email, имя, чекбоксы, множественный выбор). Для контактной страницы сделайте поле Email обязательным.

Создание новой формы в Google Forms

Параметры вопросов в Google Forms

Important: по умолчанию Google вставляет два примерных вопроса. Удалите ненужный, чтобы не получать «фантомные» ответы.

Пример пустой формы перед публикацией

Шаг 2 — Извлечение «сырых» HTML-элементов формы (ripping the form)

В Google Drive откройте таблицу, привязанную к вашей форме (она автоматически создаётся и содержит вкладку «Ответы»).
В меню выберите «Форма» → «Перейти к опубликованной форме» (Go to live form).

Кнопка перехода к живой форме в таблице ответов

Живая форма открыта в браузере

Просмотрите исходный код страницы — в большинстве браузеров это «Просмотр исходного кода страницы» (View Page Source).

Просмотр исходного кода формы в браузере

В исходниках найдите строку с “form action”. Обычно она выглядит так:

Найдите следующий маркер окончания секции формы в коде:

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

Важно: не копируйте лишние скрипты, если вы не уверены, зачем они нужны. Для базового встраивания достаточно указанного фрагмента.

Шаг 3 — Вставка кода в Blogger

Войдите в панель управления Blogger.
Создайте новую страницу и назовите её, например, «Связаться со мной» или «Контакты».
Переключитесь в режим HTML-редактора страницы и вставьте ранее скопированный фрагмент.

Вставка HTML-кода формы в редактор Blogger

Просмотр вставленной формы в редакторе

Сохраните страницу и откройте её превью — форма должна отображаться в теле страницы. Внешний вид превью зависит от темы Blogger и браузера.

Шаг 4 — Кастомизация внешнего вида и размера полей

Частые проблемы: слишком большое расстояние между заголовком страницы и формой, поля слишком широкие или узкие. Доправки делаются прямо в HTML-фрагменте.

Если между заголовком и формой лишние отступы — удалите теги
в HTML.

br

Чтобы изменить ширину текстового поля, найдите элемент textarea и измените атрибут cols:

</code></pre></div><p class="">Уменьшите cols (например, до 50) для узких колонок блога или увеличьте для широких макетов.</p><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">Цвета и шрифты можно подправить через встроенные теги <font> в самой вставке (если они есть) или добавить небольшой блок <style> в HTML-страницу. Пример простого правила, которое можно добавить в HTML до/после вставленного фрагмента:</li></ul><div class="code-ui group"><pre class=""><code class=""><style>
  #ss-form .ss-form-entry { font-family: "Arial", sans-serif; font-size: 14px; }
  #ss-form textarea { max-width: 100%; box-sizing: border-box; }
</style></code></pre></div><p class="">Важно: некоторые темы Blogger имеют собственные правила CSS, которые могут переопределять ваши стили. Используйте более специфичные селекторы или !important аккуратно.</p><h2 class="text-2xl font-bold py-2" id="h2-6">Отладка и частые проблемы</h2><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">Проблема: форма не отправляет. Проверьте, не удалили ли вы часть тега <form> или атрибут action.</li><li class="">Проблема: ответы не попадают в таблицу. Убедитесь, что вы открыли именно «живую» форму из связанной таблицы, а не редактирование шаблона.</li><li class="">Проблема: внешний вид ломается на мобильных. Проверьте правило textarea { max-width: 100%; } и cols.</li></ul><p class="">Если требуется отправлять файлы или реализовать сложную логику (валидация на сервере, CAPTCHA, уведомления по e‑mail с собственными шаблонами), стандартных Google Forms+Blogger будет недостаточно — рассмотрите серверную обработку или сервисы форм.</p><h2 class="text-2xl font-bold py-2" id="h2-7">Альтернативные подходы и когда они лучше</h2><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">Встроить Google Forms через <iframe> — самый быстрый путь, но вид остаётся стандартным.</li><li class="">Использовать JotForm, Typeform, Formstack — подходят, если нужны продвинутые виджеты, процессинг платежей или встроенные уведомления.</li><li class="">Плагин/скрипт с серверной обработкой — опция для большей гибкости (валидация, база данных, файлы).</li></ul><p class="">Кейс: если вам нужна простая контактная форма без сложной логики — Google Forms + Blogger полностью покрывает задачу. Если нужна брендовость, логирование и интеграция с CRM — рассмотрите платные сервисы.</p><h2 class="text-2xl font-bold py-2" id="h2-8">Ментальные модели и чек-листы</h2><p class="">Модель: «Простота → Контроль → Масштаб»</p><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">Начните с простого (строим форму в Google Forms).</li><li class="">Получите контроль над внешним видом (извлекаем HTML и правим размеры/стили).</li><li class="">Если надо масштабировать — добавляйте интеграции и серверную обработку.</li></ul><p class="">Чек-лист перед публикацией</p><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="task-list-item"><input type="checkbox" class=""/> Форма отправляется и ответы сохраняются в таблице Google Sheets.</li><li class="task-list-item"><input type="checkbox" class=""/> Поле Email помечено как обязательное (если нужно).</li><li class="task-list-item"><input type="checkbox" class=""/> На мобильных ширина полей адекватна (cols или max-width).</li><li class="task-list-item"><input type="checkbox" class=""/> Нет лишних <br> или пустых блоков между заголовком и формой.</li><li class="task-list-item"><input type="checkbox" class=""/> Публичная страница защищена от спама (опция: включить CAPTCHA в платных сервисах).</li></ul><p class="">Ролевые заметки</p><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">Для автора блога: проверяйте формат писем и внешний вид.</li><li class="">Для разработчика: используйте специфичные селекторы и минимальные CSS-правки.</li><li class="">Для дизайнера: проверьте читаемость шрифтов и соответствие брендбуку.</li></ul><h2 class="text-2xl font-bold py-2" id="h2-9">Критерии приёмки</h2><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">Форма успешно отправляет данные и ответы видны в связанной таблице Google Sheets.</li><li class="">Форма корректно отображается в трёх популярных браузерах (Chrome, Firefox, Safari) и на мобильных.</li><li class="">Поля имеют необходимые проверки и обязательные поля отмечены.</li><li class="">Визуальные отступы и ширина полей соответствуют теме блога.</li></ul><h2 class="text-2xl font-bold py-2" id="h2-10">Тестовые сценарии и приёмочные тесты</h2><ol class="my-6 space-y-2 list-decimal pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">Отправка: заполнить все поля и отправить — проверить, что запись появилась в Google Sheets.</li><li class="">Пустая отправка: попытаться отправить без заполнения обязательного поля — должна быть блокировка.</li><li class="">Мобильный просмотр: открыть страницу с формой на смартфоне и проверить читабельность и работу отправки.</li><li class="">Валидация Email: введите неправильный формат email — проверка должна сработать (если настроена).</li></ol><h2 class="text-2xl font-bold py-2" id="h2-11">Быстрые рекомендации по безопасности и приватности</h2><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">Google Forms хранит ответы в Google аккаунте — учитывайте политику приватности и GDPR, если собираете персональные данные жителей ЕС.</li><li class="">Для чувствительных данных используйте шифрование, серверную обработку и минимизацию собираемых полей.</li></ul><h2 class="text-2xl font-bold py-2" id="h2-12">Быстрый план внедрения (SOP)</h2><ol class="my-6 space-y-2 list-decimal pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">Создать форму в Google Forms и настроить обязательные поля.</li><li class="">Перейти к связанной таблице → открыть живую форму → просмотреть исходники.</li><li class="">Скопировать HTML-фрагмент формы от <form action=…> до </script></div>.</li><li class="">Создать страницу Blogger → переключиться в HTML → вставить код.</li><li class="">Отредактировать cols/rows/стили → сохранить → протестировать в трёх браузерах и на мобильных.</li></ol><h2 class="text-2xl font-bold py-2" id="h2-13">Decision tree для выбора способа встраивания</h2><div class=""><pre class="not-prose"><code class="mermaid" class="">flowchart TD
  A[Нужна простая контактная форма?] -->|Да| B[Google Forms + встроенный HTML]
  A -->|Нет| C[Нужна интеграция с CRM/оплата?]
  C -->|Да| D[Платные сервисы: JotForm/Typeform/Formstack]
  C -->|Нет| E[Серверная реализация с кастомной логикой]
  B --> F[Проверить дизайн и мобильность]
  F --> G[Публикация]
</code></pre></div><h2 class="text-2xl font-bold py-2" id="h2-14">Примеры кода и подборка подсказок</h2><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">Изменение ширины поля:</li></ul><div class="code-ui group"><pre class=""><code class=""><textarea name="entry.0.single" rows="8" cols="50" class="ss-q-long" id="entry_0"></code></pre></div><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">Мини-стили для улучшения адаптивности:</li></ul><div class="code-ui group"><pre class=""><code class=""><style>
  #ss-form .ss-form-entry { font-family: "Helvetica", Arial, sans-serif; }
  #ss-form textarea, #ss-form input[type="text"] { max-width: 100%; width: 100%; box-sizing: border-box; }
</style></code></pre></div><h2 class="text-2xl font-bold py-2" id="h2-15">Заключение</h2><p class="">Это простой и надёжный способ встроить Google Forms в Blogger и при этом сохранить визуальную целостность блога. Если вам нужен быстрый контактный блок — это оптимальное решение. Для продвинутых потребностей рассмотрите платные конструкторы форм или собственную серверную обработку.</p><p class="">Какие сервисы вы используете для форм? Напишите кратко в комментариях — какие ограничения вы встретили и какие решения помогли.</p><p class=""><img src="/files/70092e5c-c029-4554-939f-1b045f4a85f3.5" alt="Пример кастомизированной формы в блоге" class="block w-auto max-w-full h-auto mx-auto py-2 rounded-xl "/></p>
</div>
      </div>

      <div class="mt-8">
        <div class="flex flex-wrap items-center gap-2">
  <span class="text-sm text-slate-600 dark:text-slate-300">Поделиться:</span>
  <a href="https://twitter.com/intent/tweet?url=https://techhaps.com/ru/p/how-to-add-a-google-docs-contact-form-to-your-blogger-blog-100688516&text=Google%20Forms%20%D0%B2%20Blogger:%20%D0%B2%D1%81%D1%82%D1%80%D0%BE%D0%B8%D1%82%D1%8C%20%D0%B8%20%D0%BA%D0%B0%D1%81%D1%82%D0%BE%D0%BC%D0%B8%D0%B7%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D1%82%D1%8C" target="_blank" class="rounded-xl border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800">
    X/Twitter
  </a>
  <a href="https://www.facebook.com/sharer/sharer.php?u=https://techhaps.com/ru/p/how-to-add-a-google-docs-contact-form-to-your-blogger-blog-100688516" target="_blank" class="rounded-xl border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800">
    Facebook
  </a>
  <a href="https://www.linkedin.com/sharing/share-offsite/?url=https://techhaps.com/ru/p/how-to-add-a-google-docs-contact-form-to-your-blogger-blog-100688516" target="_blank" class="rounded-xl border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800">
    LinkedIn
  </a>
  <a href="https://t.me/share/url?url=https://techhaps.com/ru/p/how-to-add-a-google-docs-contact-form-to-your-blogger-blog-100688516&text=Google%20Forms%20%D0%B2%20Blogger:%20%D0%B2%D1%81%D1%82%D1%80%D0%BE%D0%B8%D1%82%D1%8C%20%D0%B8%20%D0%BA%D0%B0%D1%81%D1%82%D0%BE%D0%BC%D0%B8%D0%B7%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D1%82%D1%8C" target="_blank" class="rounded-xl border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800">
    Telegram
  </a>
  <button type="button" id="copyLink" data-url="https://techhaps.com/ru/p/how-to-add-a-google-docs-contact-form-to-your-blogger-blog-100688516" class="rounded-xl border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800 cursor-pointer">
    Скопировать ссылку
  </button>
</div>
      </div>

      <div class="mt-10 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 flex items-center gap-4">
  <img src="/images/avatar-78998a9e25a46e051fea19306867798d.svg?vsn=d" alt="" class="h-12 w-12 rounded-full ring-1 ring-slate-200 dark:ring-slate-700" loading="lazy">
  <div>
    <div class="text-sm text-slate-500">Автор</div>
    <div class="text-base font-semibold text-slate-900 dark:text-white">
      Редакция
    </div>
  </div>
</div>

      <nav class="mt-10 grid gap-4 md:grid-cols-2">
  <a href="/ru/p/how-to-enable-or-disable-the-adaptive-brightness-on-steam-deck-659478" class="group rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4 hover:bg-slate-50/70 dark:hover:bg-slate-800/50 transition">
    <div class="text-xs text-slate-500">Предыдущая статья</div>
    <div class="mt-1 font-semibold text-slate-900 dark:text-white line-clamp-2 group-hover:text-indigo-600">
      Адаптивная яркость на Steam Deck — включение и советы
    </div>
  </a>
  <a href="/ru/p/how-to-link-to-cells-or-spreadsheets-in-google-sheets-6747093" class="group rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4 hover:bg-slate-50/70 dark:hover:bg-slate-800/50 transition">
    <div class="text-xs text-slate-500">Следующая статья</div>
    <div class="mt-1 font-semibold text-slate-900 dark:text-white line-clamp-2 group-hover:text-indigo-600">
      Ссылки на ячейки и листы в Google Таблицах
    </div>
  </a>
</nav>

      <div class="mt-12">
  <h2 class="text-xl md:text-2xl font-bold tracking-tight text-slate-900 dark:text-white">
    Похожие материалы
  </h2>
  <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4">
    
      <article class="group relative grid grid-cols-[96px_1fr] gap-4 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-3 hover:bg-slate-50/70 dark:hover:bg-slate-800/50 transition">
        <a href="/ru/p/how-to-use-remote-desktop-connections-like-an-it-pro-10820559" class="absolute inset-0 z-10" aria-label="RDP: полный гид по настройке и безопасности">
        </a>
        <div class="overflow-hidden rounded-xl">
          <img src="/files/9f4675ab-f790-4622-b31f-ae5a7a641948.png" alt="RDP: полный гид по настройке и безопасности" class="h-24 w-full object-cover" loading="lazy">
        </div>
        <div class="min-w-0">
          <div class="mb-1 flex items-center gap-2">
            <span class="inline-flex items-center rounded-full bg-slate-100 dark:bg-slate-800 px-2.5 py-1 text-xs font-medium text-slate-700 dark:text-slate-200 ring-1 ring-inset ring-slate-200/60 dark:ring-slate-700/60">
              Инфраструктура
            </span>
            <time class="text-xs text-slate-500">10 Jan 2026</time>
          </div>
          <h3 class="text-sm font-semibold text-slate-900 dark:text-white line-clamp-2">
            RDP: полный гид по настройке и безопасности
          </h3>
        </div>
      </article>
    
      <article class="group relative grid grid-cols-[96px_1fr] gap-4 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-3 hover:bg-slate-50/70 dark:hover:bg-slate-800/50 transition">
        <a href="/ru/p/how-to-turn-your-android-phone-or-tablet-into-a-mouse-and-keyboard-for-windows-10788900" class="absolute inset-0 z-10" aria-label="Android как клавиатура и трекпад для Windows">
        </a>
        <div class="overflow-hidden rounded-xl">
          <img src="/files/b043e59c-0d12-41bb-9162-70aeca1e7685.jpg" alt="Android как клавиатура и трекпад для Windows" class="h-24 w-full object-cover" loading="lazy">
        </div>
        <div class="min-w-0">
          <div class="mb-1 flex items-center gap-2">
            <span class="inline-flex items-center rounded-full bg-slate-100 dark:bg-slate-800 px-2.5 py-1 text-xs font-medium text-slate-700 dark:text-slate-200 ring-1 ring-inset ring-slate-200/60 dark:ring-slate-700/60">
              Гайды
            </span>
            <time class="text-xs text-slate-500">10 Jan 2026</time>
          </div>
          <h3 class="text-sm font-semibold text-slate-900 dark:text-white line-clamp-2">
            Android как клавиатура и трекпад для Windows
          </h3>
        </div>
      </article>
    
      <article class="group relative grid grid-cols-[96px_1fr] gap-4 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-3 hover:bg-slate-50/70 dark:hover:bg-slate-800/50 transition">
        <a href="/ru/p/how-to-edit-combine-and-sign-a-pdf-file-for-free-11142266" class="absolute inset-0 z-10" aria-label="Советы и приёмы для работы с PDF">
        </a>
        <div class="overflow-hidden rounded-xl">
          <img src="/files/4fd3a55c-b07f-4408-9361-263c5c1fd8d0.jpg" alt="Советы и приёмы для работы с PDF" class="h-24 w-full object-cover" loading="lazy">
        </div>
        <div class="min-w-0">
          <div class="mb-1 flex items-center gap-2">
            <span class="inline-flex items-center rounded-full bg-slate-100 dark:bg-slate-800 px-2.5 py-1 text-xs font-medium text-slate-700 dark:text-slate-200 ring-1 ring-inset ring-slate-200/60 dark:ring-slate-700/60">
              Документы
            </span>
            <time class="text-xs text-slate-500">10 Jan 2026</time>
          </div>
          <h3 class="text-sm font-semibold text-slate-900 dark:text-white line-clamp-2">
            Советы и приёмы для работы с PDF
          </h3>
        </div>
      </article>
    
      <article class="group relative grid grid-cols-[96px_1fr] gap-4 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-3 hover:bg-slate-50/70 dark:hover:bg-slate-800/50 transition">
        <a href="/ru/p/what-is-the-calibration-tool-in-adobe-lightroom-and-how-to-use-it-11622718" class="absolute inset-0 z-10" aria-label="Calibration в Lightroom Classic: как и когда использовать">
        </a>
        <div class="overflow-hidden rounded-xl">
          <img src="/files/a21ba77d-aabd-415f-8a77-8f84bc476cd1.jpg" alt="Calibration в Lightroom Classic: как и когда использовать" class="h-24 w-full object-cover" loading="lazy">
        </div>
        <div class="min-w-0">
          <div class="mb-1 flex items-center gap-2">
            <span class="inline-flex items-center rounded-full bg-slate-100 dark:bg-slate-800 px-2.5 py-1 text-xs font-medium text-slate-700 dark:text-slate-200 ring-1 ring-inset ring-slate-200/60 dark:ring-slate-700/60">
              Фото
            </span>
            <time class="text-xs text-slate-500">10 Jan 2026</time>
          </div>
          <h3 class="text-sm font-semibold text-slate-900 dark:text-white line-clamp-2">
            Calibration в Lightroom Classic: как и когда использовать
          </h3>
        </div>
      </article>
    
      <article class="group relative grid grid-cols-[96px_1fr] gap-4 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-3 hover:bg-slate-50/70 dark:hover:bg-slate-800/50 transition">
        <a href="/ru/p/how-to-turn-off-siri-suggestions-on-your-iphone-10882419" class="absolute inset-0 z-10" aria-label="Отключить Siri Suggestions на iPhone">
        </a>
        <div class="overflow-hidden rounded-xl">
          <img src="/files/285888a2-435c-465a-ab6f-29f0f18900aa.jpg" alt="Отключить Siri Suggestions на iPhone" class="h-24 w-full object-cover" loading="lazy">
        </div>
        <div class="min-w-0">
          <div class="mb-1 flex items-center gap-2">
            <span class="inline-flex items-center rounded-full bg-slate-100 dark:bg-slate-800 px-2.5 py-1 text-xs font-medium text-slate-700 dark:text-slate-200 ring-1 ring-inset ring-slate-200/60 dark:ring-slate-700/60">
              iOS
            </span>
            <time class="text-xs text-slate-500">10 Jan 2026</time>
          </div>
          <h3 class="text-sm font-semibold text-slate-900 dark:text-white line-clamp-2">
            Отключить Siri Suggestions на iPhone
          </h3>
        </div>
      </article>
    
      <article class="group relative grid grid-cols-[96px_1fr] gap-4 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-3 hover:bg-slate-50/70 dark:hover:bg-slate-800/50 transition">
        <a href="/ru/p/how-to-use-the-draw-table-feature-in-microsoft-word-10851092" class="absolute inset-0 z-10" aria-label="Рисование таблиц в Microsoft Word — руководство">
        </a>
        <div class="overflow-hidden rounded-xl">
          <img src="/files/75a1b221-c3b4-4b6e-b3cb-667f7798c705.jpg" alt="Рисование таблиц в Microsoft Word — руководство" class="h-24 w-full object-cover" loading="lazy">
        </div>
        <div class="min-w-0">
          <div class="mb-1 flex items-center gap-2">
            <span class="inline-flex items-center rounded-full bg-slate-100 dark:bg-slate-800 px-2.5 py-1 text-xs font-medium text-slate-700 dark:text-slate-200 ring-1 ring-inset ring-slate-200/60 dark:ring-slate-700/60">
              Office
            </span>
            <time class="text-xs text-slate-500">10 Jan 2026</time>
          </div>
          <h3 class="text-sm font-semibold text-slate-900 dark:text-white line-clamp-2">
            Рисование таблиц в Microsoft Word — руководство
          </h3>
        </div>
      </article>
    
  </div>
</div>
    </div>

    <div class="hidden lg:block">
      <aside class="lg:sticky lg:top-24">
  <div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4">
    <h2 class="text-sm font-semibold text-slate-900 dark:text-white">
      Содержание
    </h2>
    <ul class="mt-3 space-y-1 text-sm">
      
        <li class="leading-5 ml-0">
          <a href="#h2-0" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
             Кого это касается
          </a>
        </li>
      
        <li class="leading-5 ml-0">
          <a href="#h2-1" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
             Что нужно знать в одно предложение
          </a>
        </li>
      
        <li class="leading-5 ml-0">
          <a href="#h2-2" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
             Шаг 1 — Создание формы в Google Forms
          </a>
        </li>
      
        <li class="leading-5 ml-0">
          <a href="#h2-3" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
             Шаг 2 — Извлечение «сырых» HTML-элементов формы (ripping the form)
          </a>
        </li>
      
        <li class="leading-5 ml-0">
          <a href="#h2-4" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
             Шаг 3 — Вставка кода в Blogger
          </a>
        </li>
      
        <li class="leading-5 ml-0">
          <a href="#h2-5" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
             Шаг 4 — Кастомизация внешнего вида и размера полей
          </a>
        </li>
      
        <li class="leading-5 ml-0">
          <a href="#h2-6" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
             Отладка и частые проблемы
          </a>
        </li>
      
        <li class="leading-5 ml-0">
          <a href="#h2-7" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
             Альтернативные подходы и когда они лучше
          </a>
        </li>
      
        <li class="leading-5 ml-0">
          <a href="#h2-8" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
             Ментальные модели и чек-листы
          </a>
        </li>
      
        <li class="leading-5 ml-0">
          <a href="#h2-9" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
             Критерии приёмки
          </a>
        </li>
      
        <li class="leading-5 ml-0">
          <a href="#h2-10" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
             Тестовые сценарии и приёмочные тесты
          </a>
        </li>
      
        <li class="leading-5 ml-0">
          <a href="#h2-11" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
             Быстрые рекомендации по безопасности и приватности
          </a>
        </li>
      
        <li class="leading-5 ml-0">
          <a href="#h2-12" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
             Быстрый план внедрения (SOP)
          </a>
        </li>
      
        <li class="leading-5 ml-0">
          <a href="#h2-13" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
             Decision tree для выбора способа встраивания
          </a>
        </li>
      
        <li class="leading-5 ml-0">
          <a href="#h2-14" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
             Примеры кода и подборка подсказок
          </a>
        </li>
      
        <li class="leading-5 ml-0">
          <a href="#h2-15" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
             Заключение
          </a>
        </li>
      
    </ul>
  </div>
</aside>
    </div>
  </div>
</article>
    </main>

    <footer class="mt-10 border-t border-zinc-200 dark:border-zinc-800">
      <div class="mx-auto max-w-7xl px-4 py-10 text-sm text-zinc-500 grid md:grid-cols-2 align-middle">
        <div>
          <img src="/logo.svg" alt="Гид по технологиям" width="280" height="40" class="w-full md:w-[280px]">
        </div>
        <div class="mt-4 md:mt-0">
          <ul>
            <li class="mt-1">
              <a href="/about" class="hover:underline">О нас</a>
            </li>
            <li class="mt-1">
              <a href="/privacy" class="hover:underline">
                Политика конфиденциальности
              </a>
            </li>
            <li class="mt-1">
              <a href="/ru/feed" class="hover:underline">
                Лента статей
              </a>
            </li>
          </ul>
          <div class="mt-1">
            © 2026 Google Forms в Blogger — встраивание и кастомизация
          </div>
        </div>
      </div>
    </footer>
  </body>
</html>