Konfiguracja i stylizacja formularza HubSpot na stronie zewnętrznej

Po utworzeniu formularza w HubSpot można dodać go do stron HubSpot lub stron utworzonych poza HubSpot. Formularze mogą być udostępniane w zewnętrznej witrynie, która nie jest hostowana przez HubSpot:

• Osadzenie kodu formularza na istniejącej stronie.
• Utworzenie samodzielnej strony z formularzem, do której można utworzyć link.

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żesz nadać styl osadzonemu formularzowi HubSpot na zewnętrznych stronach w edytorze formularzy lub za pomocą CSS w zewnętrznym arkuszu stylów.

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

Uwaga: od 16 maja 2024 r. podczas dodawania kodu osadzania formularza na stronie zewnętrznej domena strony musi być dodana jako domena witryny, aby była traktowana jako zaufana domena. W przeciwnym razie zgłoszenia do formularza będą również filtrowane do zgłoszeń spamu.

Dodawanie kodu osadzania formularza

• Na koncie HubSpot przejdź do sekcji Marketing > Formularze..
• Najedź kursorem 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 z formularzem, kod osadzania formularza zostanie zmieniony. W takim przypadku należy ponownie dodać kod osadzania do zewnętrznej witryny.
• Kliknij Kopiuj.
• Wklej kod osadzania do modułu HTML na stronie zewnętrznej. Aby śledzić analitykę formularza, kod śledzenia HubSpot musi być zainstalowany na zewnętrznej stronie, na której umieszczasz formularz HubSpot.

Utwórz samodzielną stronę formularza

Możesz również udostępnić swój formularz za pomocą linku Udostępnij. W linku udostępniania formularz będzie wyświetlany na samodzielnej stronie pod własnym adresem URL. Tego linku udostępniania nie można ukryć ani uczynić prywatnym. Każdy, kto posiada łącze udostępniania, będzie mógł uzyskać dostęp do formularza.

• Na koncie HubSpot przejdź do sekcji Marketing > Formularze.
• Najedź kursorem na formularz i kliknij Akcje > Udostępnij.
• W oknie dialogowym kliknij kartę Udostępnij łącze .
• Kliknij 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 go załadować. Możesz także udostępnić adres URL strony formularza bezpośrednio innym osobom, aby dać im dostęp do formularza.
  
  

Styl osadzonego formularza w edytorze formularzy

Stylizując osadzony formularz za pomocą edytora formularzy HubSpot, możesz użyć motywu lub zastosować własny niestandardowy styl.

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

Stylizacja formularza za pomocą motywu

Jeśli chcesz stylizować swoje formularze bez pisania niestandardowego kodu, możesz zastosować wstępnie ustawione motywy do osadzonego formularza lub samodzielnej strony formularza. Motywy te dodają więcej opcji dostosowywania do formularzy, oprócz wszelkich globalnych ustawień stylu formularza.

Aby zmienić styl formularza za pomocą szablonu:

• Na koncie HubSpot przejdź do sekcji Marketing > Formularze..
• Najedź kursorem na formularz i kliknij Edytuj.
• W edytorze formularzy kliknij kartę Styl i podgląd .
• Jeśli edytujesz starszy formularz, w lewym panelu usuń zaznaczenie pola wyboru Zachowaj 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.
• Wybierz szablon.
• W prawym górnym rogu kliknij przycisk Opublikuj lub Aktualizuj.

Używanie stylu niestandardowego

Jeśli posiadasz subskrypcję Marketing Hub Starter, Professional lub Enterprise na swoim koncie HubSpot, możesz również stylizować osadzone formularze na bardziej szczegółowym poziomie.

Aby zastosować styl niestandardowy:

• Na koncie HubSpot przejdź do sekcji Marketing > Formularze..
• Najedź kursorem na formularz i kliknij Edytuj.
• W edytorze formularzy kliknij kartę Styl i podgląd .
• W lewym panelu kliknij sekcjęStyl. W tym miejscu można 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 stylu formularza.
• Po dostosowaniu formularza w prawym górnym rogu kliknij przycisk Opublikuj lub Aktualizuj.
  
  

Stylizacja osadzonego formularza za pomocą CSS w zewnętrznym arkuszu stylów

Jeśli posiadasz subskrypcję Marketing Hub lub Content Hub Professional lub Enterprise na swoim koncie 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 nadać styl osadzonemu formularzowi za pomocą CSS:

• Na koncie HubSpot przejdź do sekcji Marketing > Formularze..
• Najedź kursorem na formularz i kliknij Edytuj.
• W edytorze formularzy kliknij kartę Styl i podgląd .
• Kliknij, aby włączyć przełącznik Ustaw jako surowy formularz HTML . Formularz będzie renderowany jako nieprzetworzony element HTML na zewnętrznej stronie, a nie wewnątrz ramki iframe, a wszelkie domyślne stylizacje HubSpot zastosowane do formularza zostaną usunięte.
• W prawym górnym rogu kliknij Publikuj lub Aktualizuj.
• Dodaj kod osadzenia formularza do strony zewnętrznej. Jeśli formularz został już osadzony, należy zastąpić istniejący kod osadzania nową, niestylizowaną wersją. Po osadzeniu formularza:
  
  • Będziesz mógł stylizować formularz w zewnętrznym arkuszu stylów za pomocą CSS.
  • Możesz także zmodyfikować kod osadzania formularza, aby wprowadzić dodatkowe dostosowania formularza. Ponieważ formularze HubSpot są zbudowane z JavaScript, a nie HTML, dostosowanie kodu osadzania formularza wymaga pomocy programisty, który wie, jak pracować z JavaScriptem