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: października 18, 2021

Dotyczy:

Wszystkie produkty i plany

Dzięki narzędziu do tworzenia formularzy możesz zbierać informacje od odwiedzających Twoją witrynę, co pozwoli Ci prowadzić działania marketingowe, sprzedaż i obsługę tych użytkowników, którzy angażują się w Twoją działalność. Podczas tworzenia formularza w HubSpot, można dodaj go do stron HubSpot lub stron utworzonych poza HubSpot. Formularze mogą być udostępniane na dwa sposoby na zewnętrznej, nieobsługiwanej przez HubSpot witrynie: poprzez osadzenie kodu formularza na istniejącej stronie lub poprzez utworzenie samodzielnej strony z formularzem, do której można dodać link.

W obu metodach zmiany wprowadzone do formularza w narzędziu formularzy HubSpot zostaną automatycznie odzwierciedlone w formularzu na żywo w Twojej zewnętrznej witrynie.

Jeśli pracujesz z WordPressem, dowiedz się, jak wstawić formularz do swojego postu lub strony WordPressa.

Dodaj kod osadzenia formularza

Uwaga: jeśli skojarzysz kampanię Salesforce ze swoim formularzem, kod osadzenia formularza zostanie zmieniony. W takim przypadku musiszponownie dodać kod osadzenia do swojej zewnętrznej strony.

  • W koncie HubSpot przejdź do Marketing > Przechwytywanie leadów > Formularze.
  • Utwórz nowy formularzlub najedź kursorem na istniejącyformularz, kliknijmenu rozwijaneAkcje i wybierzEdytuj formularz.
  • Kliknij zakładkęOpcje, aby wybrać, co stanie się po wysłaniu formularza przez odwiedzającego. Możesz przekierować odwiedzających na stronę z podziękowaniem lub wyświetlić wiadomość z podziękowaniem w linii po wysłaniu formularza.
  • W edytorze formularzy, w prawym górnym rogu, kliknij przycisk Udostępnij.
  • W oknie dialogowym, jeśli chcesz dodać kontakty, które przesłały formularz, do kampanii Salesforce, kliknij menu rozwijane Dodaj kontakty do kampanii Salesforcei wybierz kampanię.
  • Kliknij przyciskKopiuj.
    forms-editor-share-form-copy-form-embed
  • W prawym górnym rogu kliknij przycisk Publish.
  • Wklej kod osadzenia do modułu HTML na swojej stronie zewnętrznej. Aby śledzić analitykę dla swojego formularza, kod śledzenia HubSpot musi być zainstalowany na stronie zewnętrznej, na której umieszczasz formularz HubSpot. HubSpot będzie zbierał zgłoszenia formularzy bez zainstalowanego kodu śledzenia HubSpot, ale nie będą rejestrowane dane analityczne.

Jeśli pracujesz z WordPressem, dowiedz się, jak wstawić formularz do swojego postu lub strony WordPress.

Tworzenie samodzielnej strony formularza

Możesz udostępnić swój formularz poprzez stronę formularza, dzięki czemu będzie on istniał na swojej własnej stronie pod własnym adresem URL.

  • W koncie HubSpot przejdź do Marketing > Przechwytywanie leadów > Formularze.
  • Utwórz nowy formularzlub najedź kursorem na istniejącyformularz, kliknijmenu rozwijaneAkcje i wybierzEdytuj formularz.
  • W prawym górnym rogu kliknij przycisk Share (Udostępnij).
  • W oknie dialogowym kliknij zakładkęUdostępnij łącze.
  • Kliknij przycisk Kopiuj, aby skopiować adres URL strony formularza do schowka.

share-form-own-page

  • W prawym górnym rogu kliknij przyciskPublish.
  • W przeglądarce, otwórz nowe okno lub kartę i wklej adres URL strony formularza w pasku adresu, aby go załadować. Możesz również udostępnić adres URL strony formularza bezpośrednio innym osobom, aby dać im dostęp do formularza.
Jeśli osadzasz formularz na swojej witrynie WordPress, być może będziesz musiał zastosować dodatkowe deklaracje CSS w zewnętrznym arkuszu stylów, aby formularz był responsywny.

Jeśli zauważysz, że Twój formularz nie działa w WordPressie lub kod osadzania jest zmieniany podczas wyświetlania strony na żywo, być może będziesz musiał wstawić formularz za pomocą wtyczki, aby upewnić się, że kod osadzania pozostaje nienaruszony. Jeśli używasz najnowszej wersji Gutenberga, która usuwa inline JavaScript, użyj wtyczki Inline JS Block for Gutenberg, aby osadzić formularze i CTA na swojej stronie.

Styl osadzonego formularza na zewnętrznych stronach

Styl osadzonego formularza HubSpot na stronach zewnętrznych można nadać na dwa sposoby w edytorze formularzy lub za pomocą CSS w zewnętrznym arkuszu stylów.

W edytorze formularzy

Temat

Jeśli chcesz stylizować swoje formularze bez pisania niestandardowego kodu, możesz zastosować predefiniowane motywy dowbudowanego formularza lubsamodzielnej strony z formularzem. Motywy dodają więcej opcji dostosowywania do twoich formularzy, opróczglobalnych ustawień stylu formularza.

  • Na swoim koncie HubSpot przejdź doMarketing>Lead Capture>Forms.
  • Kliknąćnazwęformularza.
  • W edytorze formularzy kliknij zakładkęStyl i podgląd.
  • W lewym panelu, w sekcjiMotyw, usuń zaznaczenie pola wyboruZachowaj stary motyw.

Uwaga:usunięcie zaznaczenia pola wyboruZachowaj stary motywspowoduje usunięcie poprzedniej domyślnej stylizacji HubSpot zastosowanej do tego formularza. Wszelkie niestandardowe elementy CSS lub JavaScript dodane do formularza nie będą już działać. To pole wyboru jest dostępne tylko dla starszych formularzy i nie będzie dostępne w żadnych nowych formularzach utworzonych na koncie użytkownika.

  • Wybierz jeden z czterechtematów.

Styl(tylkoMarketing HubStarter,Professional,Enterprise lubLegacyMarketing HubBasic)

Oprócz motywów, możesz stylizować wbudowane formularze na bardziej szczegółowym poziomie.

  • Na swoim koncie HubSpot przejdź doMarketing>Lead Capture>Forms.
  • Kliknąćnazwęformularza.
  • W edytorze formularzy kliknij zakładkęStyl i podgląd.
  • W lewym okienku kliknij sekcję>Styl, aby ją rozwinąć. Tutaj możesz stylizować szerokość pola formularza, rodzinę czcionek, rozmiary czcionek, kolory czcionek i przycisk formularza.

Style te są ustawiane na podstawie indywidualnych formularzy i zastępująglobalne ustawienia stylów formularzy.

Uwaga:motywy i style ustawione w edytorze formularzy będą miały zastosowanie tylko do formularzyosadzonychlubsamodzielnych stron z formularzami.Formularze na stronach HubSpot możnastylizowaćtylkoza pomocą opcji stylu modułu formularzyw edytorze treści.

Nadaj formularzowi styl za pomocą CSS w zewnętrznym arkuszu stylów (Marketing Hub oraz CMS Hub Tylko wersjeProfessional, EnterpriselubLegacy Marketing Hub Basic)

  • Na swoim koncie HubSpot przejdź doMarketing>Lead Capture>Forms.
  • Kliknąćnazwęformularza.
  • W edytorze formularzy kliknij zakładkęStyl i 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.

options-unstyled-form

  • W prawym górnym rogu kliknij przyciskShare (Udostępnij).
  • W oknie dialogowym kliknijKopiuj, aby skopiować kod osadzony formularza.
  • Dodaj kod osadzenia formularzado swojej strony zewnętrznej. Jeśli już osadziłeś swój formularz, musiszzastąpićistniejący kod osadzenia tą nową, niestylizowaną wersją.
  • Po osadzeniu formularza, możesz go stylizować w swoim zewnętrznym arkuszu stylów za pomocą CSS.
  • Alternatywnie możnazmodyfikować kod osadzony formularza, aby dokonać dodatkowych dostosowań formularza. Ponieważformularze HubSpot są zbudowane z JavaScript, a nie HTML, dostosowanie kodu osadzonego formularzawymaga pomocy programisty znającego JavaScript.