Przejdź do treści
Uwaga: Tłumaczenie tego artykułu jest podane wyłącznie dla wygody. Tłumaczenie jest tworzone automatycznie za pomocą oprogramowania tłumaczącego i mogło nie zostać sprawdzone. W związku z tym, angielska wersja tego artykułu powinna być uważana za wersję obowiązującą, zawierającą najnowsze informacje. Możesz uzyskać do niej dostęp tutaj.
Forms

Konfigurowanie i stylizowanie formularza HubSpot w witrynie zewnętrznej

Data ostatniej aktualizacji: września 15, 2022

Dotyczy:

Wszystkie produkty i plany

Po utworzeniu formularza w HubSpot można dodać go do stron HubSpot lub stron utworzonych poza HubSpot. Formularze można udostępniać na zewnętrznej, niehostowanej przez HubSpot stronie przez:

  • Osadzenie kodu formularza na istniejącej stronie.
  • Tworzenie samodzielnej strony z formularzem, do której można się odnieść.

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:
  • W 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.

  • W 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 również 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 niestandardowy.

Uwaga: motywy i style ustawione w edytorze formularzy będą stosowane tylko do formularzy osadzonych lub samodzielnych stron formularzy. 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:

  • W 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 lub zaktualizuj.

Użyj niestandardowego stylu

Jeśli masz subskrypcjęMarketing Hub Starter, Professional lub Enterprise z kontem HubSpot, możesz również stylizować wbudowane formularze na bardziej granularnym poziomie.

Aby zastosować niestandardowy styl:

  • W 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 sekcję Styl . Tutaj możesz skonfigurować szerokość pola formularza, rodzinę czcionek, rozmiary czcionek, kolory czcionek i przycisk formularza. Te style są ustawiane na podstawie indywidualnego formularza i zastąpią globalne ustawienia stylu formularza.
  • Po dostosowaniu formularzaw prawym górnym rogu kliknij przyciskOpublikuj lub zaktualizuj.



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:

  • W 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 swojej strony zewnętrznej. Jeśli już osadziłeś swój formularz, musisz zastąpić istniejący kod osadzenia tą nową, niestylizowaną wersją. Po osadzeniu swojego formularza:
    • Będziesz mógł nadać formularzowi styl w zewnętrznym arkuszu stylów za pomocą CSS.
    • Możesz również zmodyfikować kod osadzony formularza, aby dokonać dodatkowych dostosowań formularza. Ponieważ formularze HubSpot są zbudowane z JavaScript, a nie HTML, dostosowanie kodu osadzającego formularzwymaga pomocy programisty znającego JavaScript.

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.