Konfigurowanie i stylizowanie formularza HubSpot w witrynie zewnętrznej

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

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