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
Motyw
Jeśli chcesz stylizować swoje formularze bez pisania niestandardowego kodu, możesz zastosować predefiniowane motywy do swojego formularza osadzonego lub samodzielnej strony formularza. Motywy dodają więcej opcji dostosowywania do twoich formularzy, oprócz wszelkich globalnych ustawień stylu formularzy.
- Kliknij nazwę formularza.
- W edytorze formularzy kliknij zakładkę Styl i podgląd .
- W lewym panelu, w sekcji Motyw, usuń zaznaczenie pola wyboru Zachowaj stary motyw .
Uwaga: usunięcie zaznaczenia pola wyboru Zachowaj stary motyw spowoduje 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 czterech motywów.
Styl(tylkoMarketing Hub Starter, Professional, Enterprise lub Legacy Marketing Hub Basic)
Oprócz motywów można stylizować formularze osadzone na bardziej szczegółowym poziomie.
- Kliknijnazwę formularza.
- W edytorze formularzy kliknij kartę Styl i podgląd .
- W lewym panelu kliknij sekcję > Styl , aby ją rozwinąć. Można tu stylizować szerokość pola formularza, rodzinę czcionek, rozmiary czcionek, kolory czcionek i przycisk formularza.
Te style 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 formularzy osadzonych lub samodzielnych stron formularzy. Formularze na stronach HubSpot mogą być stylizowane tylko za pomocą opcji stylu modułu formularzy w edytorze treści.
Za pomocą CSS w zewnętrznym arkuszu stylów (Marketing Hub Professional, Enterprise lub Legacy Marketing Hub Tylko Basic )
- Kliknij nazwę formularza.
- 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 surowy element HTML na stronie zewnętrznej, a nie w ramce iframe, a wszelkie domyślne stylizacje HubSpot zastosowane do formularza zostaną usunięte.
- W prawym górnym rogu kliknij przycisk Udostępnij.
- W oknie dialogowym kliknij przycisk Kopiuj, aby skopiować kod osadzenia formularza.
- Dodaj kod osadzenia formularza do swojej strony zewnętrznej. Jeśli formularz został już osadzony, musisz zastąpić istniejący kod osadzenia nową, niestylizowaną wersją.
- Po osadzeniu formularza możesz go stylizować w swoim zewnętrznym arkuszu stylów za pomocą CSS.
- Alternatywnie można zmodyfikować kod osadz enia formularza, aby dokonać dodatkowych dostosowań formularza. Ponieważ formularze HubSpot są zbudowane w języku JavaScript, a nie HTML, dostosowanie kodu osadzenia formularza wymaga pomocy programisty, który wie, jak pracować z JavaScript.