Menu
Допомога ЗСУ

Як зробити Google Form адаптивною: простий код для корекції форми під будь-який екран

Ви коли-небудь вбудовували Google Form на свій сайт і бачили… це? 🙈 Форма з горизонтальним скролом, обрізана, а на мобілках узагалі — пиши пропало! Але хороша новина: усе це легко виправити за допомогою простого коду, який зробить вашу Google Form адаптивною та гарною на будь-якому пристрої.

У цій статті покажу, як саме це зробити своїми руками — без зайвих плагінів, без кодування з нуля. Просто скопіюйте мій варіант і вперед! 🚀

Чому Google Form на сайті поводить себе некоректно?

Google Forms за замовчуванням не має адаптивної верстки при вставці через <iframe>. Вона заточена під десктоп, і саме тому виглядає дивно на мобільних пристроях. А в наш час адаптивність — це вже не «бажано», це маст-хев для SEO та зручності користувачів.

Код для адаптивної Google форми 🌟

Ось перевірений стиль (CSS), який робить Google Form гнучкою та приємною для ока на будь-яких екранах:

html
<style>
.responsive-form {
max-width: 850px;
margin: 0 auto;
padding: 5px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
}

 

.responsive-form iframe {
width: 100%;
height: 150vh;
min-height: 700px;
border: none;
}

@media (max-width: 900px) {
.responsive-form {
padding: 5px;
}
.responsive-form iframe {
height: 200vh;
min-height: 600px;
}
}
</style>

<div class="responsive-form">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLScUBeIdmPU1EptRBcysr0rtu1MX923AQWmFm1BQkIdiYgMmkA/viewform?embedded=true" frameborder="0" marginheight="0" marginwidth="0">Завантаження…</iframe>
</div>

Що робить цей код?

  • 📏 Максимальна ширина форми обмежена до 850px — тому на широких моніторах виглядає акуратно.

  • 📱 Медіа-запит під мобільні телефони робить висоту форми більшою, щоб вона гарно вписувалася на маленьких екранах.

  • 🌈 Додає приємний фон, тінь і заокруглення кутів, щоб форма виглядала сучасно.

  • 🕶️ І головне — iframe стає 100% ширини, що і забезпечує оту заповітну адаптивніст

Лайфхак від мене:

Хочете ще сильніше покращити вигляд форми? Додайте трохи анімації при наведенні або використовуйте Google Forms themes перед вставкою форми на сайт.

Потрібен сайт, консультація, анімація або графічний дизайн? Лишіть заявку і я з вами зв'яжуся!
Підтримати розвиток ресурсу



Підтримати проєкт через Monobank

Hosting CityHost
Коментарі
    Copyright © 2025 Web-Master "TWS" | Powered by Web-Master "TWS"
    Translate »