Stylizowanie i osadzanie formularzy HubSpot na stronie zewnętrznej

Korzystaj z formularzy Hub Spot na swojej zewnętrznej stronie internetowej, aby pozyskiwać potencjalnych klientów i automatycznie synchronizować dane kontaktowe z kontem HubSpot. Możesz nadać styl swojemu formularzowi w HubSpot i użyć kodu osadzania formularza, aby dodać go do swojej witryny. Możesz też użyć linku do udostępniania, aby wysłać samodzielny formularz do swoich odbiorców.

Osadzenie formularza zapewnia synchronizację zgłoszeń bezpośrednio z kontem HubSpot, gdzie można zarządzać kontaktami, uruchamiać automatyzację i analizować wydajność. Możesz na przykład dodać formularz HubSpot do strony produktu w witrynie swojej firmy, aby przechwytywać prośby o demo i śledzić je za pomocą automatycznej wiadomości e-mail.

Jeśli formularz został utworzony w starszym edytorze formularzy, dowiedz się, jak skonfigurować i stylizować starszy formularz w witrynie zewnętrznej.

Zanim zaczniesz

Przed rozpoczęciem pracy z tą funkcją zapoznaj się z wymaganiami technicznymi i uwagami dotyczącymi korzystania z formularzy w witrynach zewnętrznych.

Wymagania

• Osadzając formularz HubSpot na zewnętrznej stronie, należy dodać domenę strony do ustawień śledzenia. Zgłoszenia formularzy z domen, które nie zostały dodane, będą oznaczane jako spam.
• Aby śledzić analitykę osadzonego formularza, należy zainstalowaćkod śledzenia HubSpot na stronie zewnętrznej.
  

Ograniczenia i uwagi

• Ustawienie formularza jako surowego formularza HTML nie jest dostępne w zaktualizowanym edytorze formularzy. Tylko formularze utworzone przy użyciu starszego edyt ora formularzy mogą być ustawione jako surowy HTML.
• Dostosowanie kodu osadzania formularza wymaga pomocy programisty, który wie, jak pracować z JavaScript. Bardziej zaawansowane dostosowywanie można wykonać za pomocą niestandardowego formularza i interfejsu API HubSpot Forms.

Styl formularza

Dostosuj tekst, pola wejściowe, przyciski i tło dla swojego formularza i kroków formularza. Dostosowania stylu formularza są stosowane do wszystkich kroków formularza. Nie można osobno stylizować poszczególnych kroków formularza.

1. Na koncie HubSpot przejdź do sekcji Marketing > Formularze.
2. Utwórz nowy formularz lub najedź kursorem na istniejący formularz i kliknij Edytuj.
3. W menu na lewym pasku bocznym kliknij ikonę styles Styling.
4. W panelu Style formularza można dostosować następujące elementy:
   • Pola: dostosowanie pola, w tym tła i obramowania. Możesz także dostosować czcionkę, rozmiar czcionki i kolory etykiet, a także kolory tekstu pomocy, symboli zastępczych i tekstu błędu.
   • Przyciski: dostosuj wysokość przycisku, zaokrąglenie narożników, tło, gradient i dodaj cień do przycisku. Możesz także 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 kroków formularza. Możesz ustawić kolor tła lub użyć obrazu jako tła. Do generowania obrazów można użyć asystentów AI. Możesz także ustawić obramowanie formularza.
   • Pasek postępu: dostosuj pasek postępu w formularzu, w tym kolor linii postępu i czcionkę paska postępu.

Udostępnianie samodzielnej strony formularza

Użyj linku udostępniania, aby wyświetlić formularz na samodzielnej stronie. Każdy, kto posiada łącze udostępniania, może uzyskać dostęp do formularza. Łącza udostępniania nie można ukryć ani uczynić prywatnym.

Aby skopiować łącze udostępniania:

1. Na koncie HubSpot przejdź do sekcji Marketing > Formularze..
2. Najedź kursorem na formularz i kliknij Edytuj.
3. W prawym górnym rogu kliknij opcję Przejrzyj i zaktualizuj.
4. W prawym panelu na dole kliknij Aktualizuj.
5. W oknie dialogowym kliknij opcję Kopiuj łącze udostępniania.
6. Na dole kliknij Kopiuj. Spowoduje to skopiowanie adresu internetowego strony do schowka.
7. W przeglądarce otwórz nowe okno lub kartę i wklej adres URL strony w pasku adresu, aby ją załadować. Możesz także udostępnić adres URL strony formularza bezpośrednio innym osobom, aby dać im dostęp do formularza.

Skopiuj kod osadzania formularza

Osadź swój formularz na stronie zewnętrznej, kopiując kod osadzania formularza i wklejając go na stronie zewnętrznej. Aby śledzić analitykę dla osadzonego formularza, kod śledzenia HubSpot musi być zainstalowany na zewnętrznej stronie, na której osadzasz formularz HubSpot.

Aby skopiować kod osadzania:

1. Na koncie HubSpot przejdź do sekcji Marketing > Formularze..
2. Najedź kursorem na formularz i kliknij Edytuj.
3. W prawym górnym rogu kliknij Przejrzyj i zaktualizuj.
4. W prawym panelu u dołu kliknij Aktualizuj.
5. W oknie dialogowym kliknij Pobierz kod osadzania.
6. Na karcie Kod do osadzenia kliknij Kopiuj.
7. Wklej kod osadzania do modułu HTML na stronie zewnętrznej.

Uzyskaj dostęp do kodu dewelopera formularzy

Osadź swój formularz i dostosuj styl za pomocą CSS w zewnętrznym arkuszu stylów. Dzięki tej metodzie można zastąpić domyślne style, zastosować szczegółową stylizację do określonych elementów formularza i ustawić globalne reguły dla spójnej stylizacji we wszystkich osadzonych formularzach. Dowiedz się więcej o tym, jak zdefiniować niestandardowy styl dla osadzonych formularzy za pomocą CSS.

Aby uzyskać dostęp do kodu deweloperskiego:

1. Na koncie HubSpot przejdź do sekcji Marketing > Formularze..
2. Najedź kursorem na formularz i kliknij Edytuj.
3. W prawym górnym rogu kliknij Przeglądaj i aktualizuj.
4. W prawym panelu na dole kliknij przycisk Aktualizuj.
5. W oknie dialogowym kliknij Pobierz kod osadzania.
6. Kliknij kartę Kod deweloperski (Zaawansowane).
7. Aby zaakceptować ryzyko, że zmiany wprowadzone zewnętrznie w CSS lub JavaScript mogą spowodować uszkodzenie formularza, zaznacz pole wyboru Rozumiem ryzyko, pokaż mi kod.
8. Na dole kliknij przycisk Kopiuj.
9. Dodaj kod osadzania formularza do strony zewnętrznej. Po osadzeniu formularza będziesz mógł nadać mu styl w zewnętrznym arkuszu stylów za pomocą CSS.
   • Zmienne CSS, które można zastąpić, są wymienione w tym artykule.
   • Style globalne zastąpią stylizację najwyższego poziomu we wszystkich osadzonych formularzach. Możesz także kierować reklamy na poszczególne elementy formularzy, takie jak wiersz elementu formularza, przyciski przesyłania lub nagłówki formularzy.