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 na zewnętrznej, nie hostowanej przez HubSpot stronie przez:

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

W obu przypadkach zmiany wprowadzone w formularzu w narzędziu formularzy HubSpot zostaną automatycznie odzwierciedlone w formularzu na żywo na zewnętrznej stronie. Po dodaniu formularza możesz nadać styl swojemu formularzowi HubSpot Embed na zewnętrznych stronach w edytorze formularzy lub za pomocą CSS w zewnętrznym arkuszu stylów.

Jeśli pracujesz z WordPressem, dowiedz się , jak wstawić 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 przesyłanie formularza będzie również filtrowane do spamu.

Dodaj kod 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ę dla formularza, kod śledzenia HubSpot musi być zainstalowany na zewnętrznej stronie, na której umieszczasz formularz HubSpot.

Tworzenie samodzielnej strony 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 niezależnej stronie pod własnym adresem URL. Tego linku udostępniania nie można ukryć ani uczynić prywatnym. Każda osoba posiadająca łącze udostępniania będzie mogła 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 swój osadzony formularz za pomocą edytora formularzy HubSpot Embed, 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 (legacy)

Jeśli chcesz nadać styl swojemu starszemu formularzowi bez pisania niestandardowego kodu, możesz zastosować wstępne ustawienia motywów do osadzonego formularza lub samodzielnej strony formularza. Motywy te dodają więcej opcji dostosowywania do formularzy, oprócz wszelkich globalnych ustawień stylu formularza.

Aby stylizować formularz za pomocą motywu:

• 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 poprzedniego domyślnego stylu HubSpot zastosowanego 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żyj stylu niestandardowego

Formularze można również stylizować na bardziej szczegółowym poziomie.

Aby zastosować styl niestandardowy:

• Na koncie HubSpot przejdź do sekcji Marketing > Formularze.
• Najedź kursorem na formularz i kliknij Edytuj.
• Jeśli edytujesz starszy formularz i masz subskrypcję Marketing Hub Starter, Professional lub Enterprise , kliknij kartę Styl i podgląd w edytorze formularzy.
  • W lewym panelu kliknij sekcję Style. 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 stylu formularza.
  • Po dostosowaniu formularza kliknij przycisk Publikuj lub Aktualizuj w prawym górnym rogu.
    
    

• Jeśli korzystasz ze zaktualizowanego edytora formularzy, po lewej stronie kliknij ikonę Stylizacja.
  • Podczas dostosowywania tekstu, pól wprowadzania lub przycisków można wybierać spośród istniejących stylów za pomocą szybkich stylów wprowadzania pól. Możesz też ręcznie dostosować styl dla każdego elementu formularza:
    • Pola: dostosuj pole, w tym tło i obramowanie. Możesz także dostosować czcionkę, rozmiar czcionki i kolory etykiet, a także kolory tekstu pomocy, symboli zastępczych i tekstu błędu.
    • Przyciski: dostosuj wysokość przycisku, zaokrąglenie narożników, tło, gradient i dodaj cień do przycisku. Możesz także dostosować czcionkę, rozmiar czcionki i kolor tekstu przycisku.
    • Akapit (tekst sformatowany): dostosuj czcionkę, rozmiar czcionki i kolor tekstu głównego.
    • Nagłówek : dostosuj czcionkę i kolor tekstu nagłówka. Możesz dodać cień do tekstu nagłówka.
    • Tło: dostosuj tło formularza i kroków formularza. Możesz ustawić kolor tła lub użyć obrazu jako tła. Do generowania obrazów można użyć asystentów AI. Możesz także ustawić obramowanie formularza.
    • Pasek postępu: dostosuj pasek postępu w formularzu, w tym kolor linii postępu i czcionkę paska postępu.

Styl osadzonego formularza za pomocą CSS w zewnętrznym arkuszu stylów (starsze wersje)

Jeśli posiadasz subskrypcję Marketing Hub lub Content Hub Professional lub Enterprise na swoim koncie HubSpot, możesz osadzić swój starszy formularz jako surowy formularz HTML, a następnie stylizować ten osadzony formularz za pomocą CSS w zewnętrznym arkuszu stylów.

Uwaga: starsze formularze można ustawić tylko jako nieprzetworzony HTML.

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 style HubSpot zastosowane do formularza zostaną usunięte.
• W prawym górnym rogu kliknij Publikuj lub Aktualizuj.
• Dodaj kod osadzania 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 Embed są zbudowane z JavaScript, a nie HTML, dostosowanie kodu osadzania formularza wymaga pomocy programisty, który wie, jak pracować z JavaScriptem