Konfigurowanie i stylizowanie formularza HubSpot w witrynie zewnętrznej
Data ostatniej aktualizacji: marca 27, 2023
Dostępne z każdą z następujących podpisów, z wyjątkiem miejsc, w których zaznaczono:
|
Po utworzeniu formularza w HubSpot, możesz dodać go do stron HubSpot lub stron utworzonych poza HubSpot. Formularze mogą być udostępniane na zewnętrznej, niehostowanej przez HubSpot stronie poprzez:
- Osadzenie kodu formularza na istniejącej stronie.
- Utworzenie samodzielnej strony z formularzem, do której można zamieścić łącze.
W przypadku obu metod zmiany wprowadzone w formularzu w narzędziu formularzy HubSpot zostaną automatycznie odzwierciedlone w formularzu na żywo w witrynie zewnętrznej. Po dodaniu formularza możeszstylizować swój osadzony formularz HubSpot na swoich stronach zewnętrznych w edytorze formularzy lub za pomocą CSS w zewnętrznym arkuszu stylów.
Jeśli pracujesz z WordPressem, dowiedz się, jak wstawić formularz do postu lub strony WordPress.
Dodaj kod osadzenia formularza
Aby uzyskać dostęp do kodu osadzenia formularza:- Na koncie HubSpot przejdź do Marketing > Przechwytywanie leadów > Formularze.
- Najedź na formularz i kliknij Akcje > Udostępnij.
- W oknie dialogowym, jeśli chcesz dodać kontakty, które przesyłają formularz, do kampanii Salesforce, kliknij menu rozwijane Dodaj kontakty do kampanii Salesforce i wybierz kampanię. Jeśli skojarzysz kampanię Salesforce ze swoim formularzem, kod osadzenia formularza zostanie zmieniony. W takim przypadku musisz ponownie dodać kod osadzenia do swojej zewnętrznej witryny.
- Kliknij przycisk Kopiuj.
- Wklej kod osadzenia do modułu HTML na swojej stronie zewnętrznej. Aby śledzić analitykę dla swojego formularza, kod śle dzenia HubSpot musi być zainstalowany na stronie zewnętrznej, na której umieszczasz formularz HubSpot.
Tworzenie samodzielnej strony z formularzem
Możesz również udostępnić swój formularz za pomocą linku Udostępnij. W łączu udostępniania formularz będzie wyświetlany na samodzielnej stronie pod własnym adresem URL. Ten link udostępniania nie może być ukryty lub uczyniony prywatnym. Każdy, kto ma link udostępniania, będzie mógł uzyskać dostęp do formularza.
- Na koncie HubSpot przejdź do Marketing > Przechwytywanie leadów > Formularze.
- Najedź kursorem na formularz i kliknij Akcje > Udostępnij.
- W oknie dialogowym kliknij kartę Łącze udostępniania.
- Kliknij przycisk Kopiuj, aby skopiować adres URL strony formularza do schowka.
- W przeglądarce otwórz nowe okno lub kartę i wklej adres URL strony formularza 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.
Stylowanie wbudowanego formularza w edytorze formularzy
Podczas stylizacji wbudowanego formularza za pomocą edytora formularzy HubSpot można użyć motywu lub zastosować własny styl.
Uwaga: motywy i style ustawione w edytorze formularzy będą miały zastosowanie tylko do formularzy osadzonych lub samodzielnych stron z formularzami. Formularze na stronach HubSpot można stylizować tylkoza pomocą opcji stylu modułu formularza w edytorze treści.
Stylowanie formularza za pomocą motywu
Jeśli chcesz stylizować swoje formularze bez pisania niestandardowego kodu, możesz zastosować wstępnie ustawione motywy do wbudowanego formularza lub samodzielnej strony formularza. Te motywy dodają więcej opcji dostosowywania do formularzy, oprócz wszelkich globalnych ustawień stylu formularza.
Aby stylizować swój formularz za pomocą motywu:
- Na koncie HubSpot przejdź do Marketing > Przechwytywanie leadów > Formularze.
- Najedź kursorem na formularz i kliknij Edytuj.
- W edytorze formularzy kliknij kartę Styli podgląd.
- Jeśli edytujesz starszy formularz, w lewym okienku usuń zaznaczenie pola wyboruZachowaj stary motyw. Spowoduje to usunięcie poprzedniej domyślnej stylizacji HubSpot zastosowanej do tego formularza. Wszelkie niestandardowe CSS lub JavaScript dodane do formularza nie będą już działać. To pole wyboru nie ma zastosowania do żadnych nowych formularzy utworzonych na koncie użytkownika.
- Wybierz motyw.
- W prawym górnym rogu kliknij przyciskOpublikuj lubzaktualizuj.
Użyj niestandardowego stylu
Jeśli masz subskrypcjęMarketing HubStarter,Professional lub Enterprise z kontem HubSpot, możesz również stylizować wbudowane formularze na bardziej granularnym poziomie.
Aby zastosować niestandardowy styl:
- Na koncie HubSpot przejdź do Marketing > Przechwytywanie leadów > Formularze.
- Najedź na formularz i kliknij przycisk Edytuj.
- W edytorze formularzy kliknij kartęStyl i podgląd.
- W lewym okienku kliknij przyciskStyl. Tutaj możesz skonfigurować szerokość pola formularza, rodzinę czcionek, rozmiary czcionek, kolory czcionek i przycisk formularza. Style te są ustawiane indywidualnie dla każdego formularza i zastępują globalne ustawienia stylów formularza.
- Po dostosowaniu formularza, wprawym górnym rogu, kliknijPublikuj lubAktualizuj.

Stylowanie wbudowanego formularza za pomocą CSS w zewnętrznym arkuszu stylów
Jeśli masz subskrypcję Marketing Hub lub CMS Hub Professional lub Enterprise z kontem HubSpot, możesz osadzić swój formularz jako surowy formularz HTML, a następnie stylizować ten osadzony formularz za pomocą CSS w zewnętrznym arkuszu stylów.
Aby stylizować swój osadzony formularz za pomocą CSS:
- Na koncie HubSpot przejdź do Marketing > Przechwytywanie leadów > Formularze.
- Najedź na formularz i kliknij Edytuj.
- W edytorze formularzy kliknij zakładkę Styli podgląd.
- Kliknij, aby włączyć przełącznikUstaw jako surowy formularz HTML. Formularz będzie renderowany jako surowy element HTML na stronie zewnętrznej, a nie wewnątrz ramki iframe, a wszelkie domyślne stylizacje HubSpot zastosowane do formularza zostaną usunięte.
- W prawym górnym rogu kliknij przycisk Opublikuj lub zaktualizuj .
- Dodaj kod osadzenia formularza do strony zewnętrznej. Jeśli już osadziłeś swój formularz, musiszzastąpić istniejący kod osadzenia nową, niestylizowaną wersją. Po osadzeniu swojego formularza:
- Będziesz mógł stylizować formularz w swoim zewnętrznym arkuszu stylów za pomocą CSS.
- Możesz takżezmodyfikować kod osadzenia formularza, aby dokonać dodatkowych dostosowań formularza. Ponieważformularze HubSpot są zbudowane z JavaScript, a nie HTML, dostosowaniekodu osadzenia formularzawymaga pomocy programisty, który wie, jak pracować z JavaScriptem.
Powiązana treść
-
Eksportuj swoją zawartość i dane
Dowiedz się, jak eksportować zawartość i dane HubSpot z konta, takie jak strony, kontakty i pliki. Uwaga:...
Baza wiedzy -
Tworzenie formularzy
Użyj formularzy, aby zebrać ważne informacje o swoich odwiedzających i kontaktach. W HubSpot możesz łatwo...
Baza wiedzy -
Domeny zablokowane przed wysłaniem formularza
Aby zablokować zgłoszenia formularzy, które zawierają adres e-mail z domeną jednorazową, możesz włączyć ...
Baza wiedzy