Data ostatniej aktualizacji: 5 sierpnia 2026
Dostępne z każdą z następujących podpisów, z wyjątkiem miejsc, w których zaznaczono:
Wykorzystaj formularze HubSpot na swojej zewnętrznej stronie internetowej, aby pozyskiwać potencjalnych klientów i automatycznie synchronizować dane kontaktowe z kontem HubSpot. Możesz dostosować wygląd formularza w HubSpot i dodać go do swojej witryny za pomocą kodu osadzania. Możesz też skorzystać z linku udostępniającego, aby wysłać samodzielny formularz do odbiorców.
Osadzenie formularza gwarantuje, że przesłane dane zostaną zsynchronizowane bezpośrednio z kontem HubSpot, gdzie możesz zarządzać kontaktami, uruchamiać automatyzacje i analizować wyniki. Na przykład możesz dodać formularz HubSpot do strony produktu w witrynie swojej firmy, aby pozyskiwać prośby o prezentacje i wysyłać automatyczne wiadomości e-mail w ramach działań następczych.
Jeśli formularz został utworzony w starszej wersji edytora formularzy, dowiedz się, jak skonfigurować i dostosować wygląd starszego formularza na stronie zewnętrznej.
Zanim zaczniesz
Zanim zaczniesz korzystać z tej funkcji, zapoznaj się z wymaganiami technicznymi i uwagami dotyczącymi korzystania z formularzy na stronach zewnętrznych.
Wymagania
Wymagane uprawnienia Do tworzenia lub edytowania formularzy wymagane są uprawnienia do edycji formularzy.
- Aby śledzić statystyki dotyczące osadzonego formularza, zainstaluj kod śledzenia HubSpot na swojej zewnętrznej stronie.
- Podczas osadzania formularza HubSpot na stronie zewnętrznej konieczne jest dodanie domeny tej strony do ustawień śledzenia. Przesłane formularze z domen, które nie zostały dodane, będą oznaczane jako spam.
Ograniczenia i kwestie, które należy wziąć pod uwagę
- W zaktualizowanym edytorze formularzy nie ma możliwości ustawienia formularza jako surowego kodu HTML. Tylko formularze utworzone przy użyciu starszej wersji edytora formularzy można ustawić jako surowy kod HTML.
- Dostosowanie kodu osadzania formularza wymaga pomocy programisty znającego się na JavaScript. Bardziej zaawansowane dostosowania można wykonać za pomocą formularza stworzonego na zamówienie oraz interfejsu API HubSpot Forms.
Dostosuj wygląd formularza
Dostosuj tekst, pola wprowadzania danych, przyciski i tło formularza oraz poszczególnych kroków formularza. Dostosowania stylu formularza są stosowane do wszystkich kroków formularza. Nie można osobno dostosowywać stylu poszczególnych kroków formularza.
- Na koncie HubSpot kliknij Więcej, a następnie przejdź do Marketing > Formularze. Jeśli opcja Więcej się nie pojawia, przejdź bezpośrednio do sekcji Marketing > Formularze.
- Utwórz nowy formularz lub najedź kursorem na istniejący formularz i kliknij „Edytuj”.
- W menu na lewym pasku bocznym kliknij ikonę „Stylizacja”( ).
- W panelu „Style formularza ” możesz dostosować następujące elementy:
- Pola: dostosuj wygląd pola, w tym tło i obramowania. Możesz również dostosować czcionkę, rozmiar czcionki i kolory etykiet, a także kolory tekstu pomocy, symboli zastępczych i tekstu błędów.
- Przyciski: dostosuj wysokość przycisku, zaokrąglenie narożników, tło, gradient oraz dodaj cień do przycisku. Możesz również dostosować czcionkę, rozmiar czcionki i kolor tekstu przycisku.
- Akapit (tekst sformatowany): dostosuj czcionkę, rozmiar czcionki i kolor tekstu głównego.
- Nagłówek: dostosuj czcionkę i kolor tekstu nagłówka. Możesz dodać cień do tekstu nagłówka.
- Tło: dostosuj tło formularza i poszczególnych etapów formularza. Możesz ustawić kolor tła lub użyć obrazu jako tła. Do generowania obrazów możesz skorzystać z asystentów AI. Możesz również ustawić obramowanie formularza.
- Pasek postępu: dostosuj pasek postępu w formularzu, w tym kolor linii postępu oraz czcionkę paska postępu.
Udostępnij samodzielną stronę formularza
Użyj linku udostępniającego, aby wyświetlić formularz na osobnej stronie. Każdy, kto posiada ten link, może uzyskać dostęp do formularza. Adresy URL linków udostępniających są generowane automatycznie i nie można ich edytować ani dostosowywać.
Aby skopiować link do udostępniania:
- Na koncie HubSpot kliknij Więcej, a następnie przejdź do Marketing > Formularze. Jeśli opcja Więcej się nie pojawia, przejdź bezpośrednio do sekcji Marketing > Formularze.
- Najed ź kursorem na formularz i kliknij Edytuj.
- W prawym górnym rogu kliknij „Przejrzyj i zaktualizuj”.
- W prawym panelu, na dole, kliknij „Zaktualizuj”.
- W oknie dialogowym kliknij opcję „Skopiuj link do udostępnienia”.
- Na dole kliknij „Kopiuj”. Spowoduje to skopiowanie adresu strony do schowka.
- W przeglądarce otwórz nowe okno lub kartę i wklej adres URL strony w pasku adresu, aby ją załadować. Możesz również udostępnić adres URL strony z formularzem bezpośrednio innym osobom, aby zapewnić im dostęp do formularza.
Skopiuj kod osadzania formularza
Osadź formularz na swojej zewnętrznej stronie, kopiując kod osadzania formularza i wklejając go na tej stronie. Aby śledzić statystyki dotyczące osadzonego formularza, na zewnętrznej stronie, na której osadzasz formularz HubSpot, musi być zainstalowany kod śledzenia HubSpot.
Aby skopiować kod osadzania:
- Na koncie HubSpot kliknij Więcej, a następnie przejdź do Marketing > Formularze. Jeśli opcja Więcej się nie pojawia, przejdź bezpośrednio do sekcji Marketing > Formularze.
- Najedź kursorem na formularz i kliknij Edytuj.
- W prawym górnym rogu kliknij „Przejrzyj i zaktualizuj”.
- W prawym panelu, na dole, kliknij „Zaktualizuj”.
- W oknie dialogowym kliknij opcję „Pobierz kod osadzania”.
- Na karcie Kod osadzania kliknij Kopiuj.
- Wklej kod osadzania do modułu HTML na swojej stronie zewnętrznej.
Uzyskaj dostęp do kodu programisty formularza
Wymagana subskrypcja Aby uzyskać dostęp do kodu programisty formularzy, wymagana jest subskrypcja Marketing Hub lub Content Hub w wersji Professional lub Enterprise.
Osadź formularz i dostosuj jego styl za pomocą arkusza stylów CSS w zewnętrznym arkuszu stylów. Dzięki tej metodzie możesz zastąpić domyślne style, zastosować szczegółowe style do konkretnych elementów formularza oraz ustawić globalne reguły zapewniające spójny wygląd wszystkich osadzonych formularzy. Dowiedz się więcej o definiowaniu niestandardowych stylów dla osadzonych formularzy za pomocą CSS.
Aby uzyskać dostęp do kodu programistycznego:
- Na koncie HubSpot kliknij Więcej, a następnie przejdź do Marketing > Formularze. Jeśli opcja Więcej się nie pojawia, przejdź bezpośrednio do sekcji Marketing > Formularze.
- Najedź kursorem na formularz i kliknij Edytuj.
- W prawym górnym rogu kliknij „Przejrzyj i zaktualizuj”.
- W prawym panelu, na dole, kliknij „Zaktualizuj”.
- W oknie dialogowym kliknij opcję „Pobierz kod osadzania”.
- Kliknij kartę „Kod programisty (zaawansowane) ”.
- Aby zaakceptować ryzyko, że zmiany wprowadzone zewnętrznie w CSS lub JavaScript mogą spowodować nieprawidłowe działanie formularza, zaznacz pole wyboru Rozumiem ryzyko, pokaż mi kod.
- Na dole kliknij „Kopiuj”.
- Dodaj kod osadzania formularza do swojej zewnętrznej strony. Po osadzeniu formularza będziesz mógł dostosować jego wygląd w zewnętrznym arkuszu stylów za pomocą CSS.
- Zmienne CSS, które można nadpisać, wymieniono w tym artykule.
- Style globalne zastąpią stylizację najwyższego poziomu we wszystkich osadzonych formularzach. Możesz również stylizować poszczególne elementy formularzy, takie jak wiersz elementów formularza, przyciski przesyłania lub nagłówki formularza.
