Osadź Google Forms, Calendly i Typeform na swojej stronie
Osadzanie Google Forms, Calendly i Typeform
Osadź Google Forms, Calendly i Typeform na stronie internetowej | We.Inc
Gdzie znaleźć kod osadzania w Google Forms, Calendly i Typeform, jak dopasować każdy z nich do telefonów i narzędzie, które uporządkuje kod za Ciebie.
Każda usługa daje Ci fragment kodu do wklejenia na stronę. Google Forms udostępnia iframe w opcji Embed HTML; Calendly daje div i skrypt w opcji Add to website; Typeform daje div z data-tf-widget oraz swój skrypt osadzania. Ustaw rozsądną wysokość, tytuł i szerokość 100%, aby formularz mieścił się na telefonach.
Gdzie znajduje się kod osadzania każdej usługi (stan na październik 2026)
Usługa
Gdzie kliknąć
Co wklejasz
Google Forms
Menu Więcej (trzy kropki) > Embed HTML > Copy
Element iframe
Calendly
Strona planowania > trzy kropki > Add to website
Element div i znacznik script
Typeform
Opcje osadzania w ustawieniach udostępniania formularza
Element div z data-tf-widget i znacznik script
Skopiowanie kodu to łatwa część. Problemy pojawiają się później: formularz ucięty na telefonach, podwójny pasek przewijania, iframe bez tytułu dla czytników ekranu albo widżet rezerwacji spowalniający stronę. Ten poradnik pokazuje, gdzie znajduje się każdy kod i jak sprawić, by działał poprawnie.
Wybierz usługę w narzędziu poniżej.
Wklej to, co dała Ci usługa: kod iframe od Google, link do Calendly albo link do formularza Typeform.
Ustaw wysokość i krótki tytuł opisujący formularz, a jeśli formularz znajduje się niżej na stronie, włącz leniwe ładowanie.
Skopiuj uporządkowany kod do bloku HTML lub bloku osadzania na swojej stronie i przetestuj go na telefonie.
Nadaj każdemu elementowi iframe tytuł, na przykład Formularz kontaktowy albo Umów rozmowę. Użytkownicy czytników ekranu słyszą go, zanim zdecydują, czy wejść do środka.
Dodaj loading="lazy" do elementów iframe umieszczonych niżej na stronie, aby formularz ładował się dopiero, gdy odwiedzający przewinie w jego stronę.
Ustaw szerokość na 100% i ogranicz ją przez max-width zamiast stałej szerokości w pikselach, inaczej formularz wyjdzie poza małe ekrany.
Po osadzeniu wyślij prawdziwe zgłoszenie testowe. Formularz, który wygląda dobrze, może nadal wysyłać dane na niewłaściwe konto lub do wersji roboczej.
Najczęściej zadawane pytania
Dlaczego mój osadzony formularz Google ma dwa paski przewijania?
Element iframe jest niższy niż formularz, więc formularz przewija się w jego wnętrzu, a strona przewija się równocześnie. Zwiększaj atrybut height, aż cały formularz się zmieści, i sprawdzaj ponownie po dodaniu pytań, ponieważ ramka sama nie rośnie.
Czy mogę ostylować osadzony formularz Google własnym CSS?
Nie. Formularz to strona serwowana przez Google wewnątrz ramki i Twój arkusz stylów nie ma do niej dostępu. Możesz zmienić jego motyw w Google Forms albo zbudować własny formularz, który wysyła dane gdzie indziej.
Jak sprawić, by widżet inline Calendly nie był ucięty?
Kod Calendly ustawia minimalną szerokość 320px i stałą wysokość. Zwiększ wysokość, jeśli Twoje wydarzenie zadaje dodatkowe pytania, albo użyj opcji popup text lub popup widget, aby kalendarz otwierał się nad stroną.
Którego osadzenia Typeform powinienem użyć?
Typeform oferuje osadzenia inline, full page, popup, slider, popover i side tab. Użyj inline, gdy formularz jest głównym celem strony, a popup lub slider, gdy to działanie dodatkowe obok innych treści.
Czy te osadzenia działają na stronie zbudowanej w We.Inc?
Tak. Dodaj kod w bloku HTML lub bloku osadzania albo poproś edytor, aby umieścił formularz w sekcji. Kod to zwykły HTML, więc działa tak samo jak na każdej innej stronie.
Google Forms
Otwórz formularz, wybierz menu Więcej w prawym górnym rogu, kliknij Embed HTML i naciśnij Copy. Te kroki opisuje strona pomocy Google. Otrzymujesz pojedynczy element iframe wskazujący na Twój formularz.
Skopiowany iframe ma stałe wymiary w pikselach. Zamień szerokość na 100% z max-width, aby zmniejszał się na telefonach, utrzymaj wysokość wystarczającą dla najdłuższej wersji formularza i dodaj tytuł.
Calendly
Na swojej stronie planowania otwórz menu z trzema kropkami obok wydarzenia i wybierz Add to website. Calendly oferuje wtedy trzy style: inline embed, popup widget (pływający przycisk) i popup text (link). Przed skopiowaniem możesz też ukryć swoje zdjęcie lub szczegóły wydarzenia.
Kod inline to div z klasą calendly-inline-widget, Twoim linkiem w data-url i jednym skryptem z assets.calendly.com. Ładuj ten skrypt raz na stronę, nawet jeśli pokazujesz kilka widżetów.
Typeform
Biblioteka osadzania Typeform odczytuje każdy element z data-tf-widget i zamienia go w formularz, więc kod to div i skrypt. Identyfikator formularza to ostatnia część adresu Twojego formularza Typeform po /to/.
Dla przycisku otwierającego formularz w okienku biblioteka udostępnia window.tf.createPopup, które zwraca funkcje open, close i toggle, które możesz podpiąć pod własny przycisk.
Szybkość i prywatność
Każde osadzenie ładuje kod innej witryny i może ustawiać jej pliki cookie, więc wspomnij o tych usługach w swojej polityce prywatności. Jeśli formularz jest daleko w dół strony, leniwe ładowanie lub przycisk, który go otwiera, utrzymują szybkie pierwsze wyświetlenie.
Porównanie trzech usług
Style osadzania oferowane przez każdą usługę (według ich dokumentacji pomocy, październik 2026)
Usługa
Style osadzania
Czy sam zmienia rozmiar?
Google Forms
Iframe inline
Nie, wysokość ustawiasz sam
Calendly
Inline, popup widget, popup text
Wysokość inline jest stała, chyba że użyjesz zaawansowanego osadzenia JavaScript ze zmianą rozmiaru
Typeform
Inline, full page, popup, slider, popover, side tab
Inline wypełnia pole, które mu dasz
Uporządkowane fragmenty kodu na start
Zastąp przykładowe adresy własnymi. Każdy fragment jest dopasowany do telefonów.
Formularz Google na pełną szerokość z tytułem
Zachowaj src od Google; zmieniają się tylko wymiary, tytuł i leniwe ładowanie.
Kalendarz inline Calendly
Struktura osadzenia inline Calendly: jeden div z Twoim linkiem i jeden skrypt.
Typeform inline
Zamień abc123 na identyfikator swojego formularza. Skrypt sam styluje widżet.
Wybierz Google Forms, Calendly lub Typeform, wklej kod lub link otrzymany od usługi i otrzymaj fragment z tytułem, szerokością przyjazną telefonom i ustawioną przez Ciebie wysokością. Narzędzie tylko przepisuje tekst; nie ładuje formularza.
Wklej kod iframe z Embed HTML
Wklej swój link do planowania
Wklej link do formularza Typeform lub jego identyfikator
Wklej kod iframe z Google Forms (wskazuje na docs.google.com/forms).
Wklej swój link do planowania Calendly, na przykład https://calendly.com/your-name/30min.
Wklej link do formularza Typeform, na przykład https://form.typeform.com/to/abc123, albo sam identyfikator formularza.