Skonfiguruj i dostosuj formularz typu „legacy” na stronie zewnętrznej

Po utworzeniu formularza w HubSpot możesz dodać go do stron w HubSpot lub do stron utworzonych poza platformą HubSpot. Formularze można udostępniać na zewnętrznej witrynie, która nie jest hostowana przez HubSpot, w jeden z następujących sposobów:

• Osadzenie kodu formularza na istniejącej stronie.
• Utworzenie osobnej strony z formularzem, do której można umieścić link.

Niezależnie od wybranej metody zmiany wprowadzone w formularzu w narzędziu do tworzenia formularzy HubSpot zostaną automatycznie odzwierciedlone w formularzu działającym na Twojej zewnętrznej witrynie. Po dodaniu formularza możesz dostosować wygląd osadzonego formularza HubSpot na stronach zewnętrznych w edytorze formularzy lub za pomocą arkusza stylów CSS w zewnętrznym arkuszu stylów. Jeśli korzystasz z WordPressa, dowiedz się, jak wstawić formularz do wpisu lub strony w WordPressie.

Uwaga: ten artykuł dotyczy wyłącznie istniejących formularzy utworzonych w starszej wersji edytora. Do tworzenia formularzy i zarządzania nimi zaleca się korzystanie z zaktualizowanego edytora formularzy. Dowiedz się, jak dostosować wygląd i osadzić formularze na stronie zewnętrznej.

Zanim zaczniesz

Podczas umieszczania kodu osadzającego formularz na stronie zewnętrznej domena tej strony musi zostać dodana jako domena witryny, aby była traktowana jako domena zaufana. W przeciwnym razie zgłoszenia przesłane za pośrednictwem formularza również trafią do folderu ze spamem.

Uzyskaj dostęp do kodu osadzania formularza

1. Na koncie HubSpot kliknij Więcej, a następnie przejdź do Marketing > Formularze. Jeśli opcja Więcej się nie pojawia, przejdź bezpośrednio do sekcji Marketing > Formularze.
2. Najedź kursorem na formularz i kliknij opcję Działania > Udostępnij.
3. W oknie dialogowym, jeśli chcesz dodać osoby, które wypełnią formularz, do kampanii w Salesforce, kliknij menu rozwijane „Dodaj kontakty do kampanii w Salesforce ” i wybierz kampanię. Jeśli powiążesz formularz z kampanią w Salesforce, kod osadzania formularza ulegnie zmianie. W takim przypadku musisz ponownie dodać kod osadzania do swojej strony zewnętrznej.
4. Kliknij „Kopiuj”.
5. Wklej kod osadzania do modułu HTML na swojej stronie zewnętrznej. Aby śledzić statystyki dotyczące formularza, na stronie zewnętrznej, na której umieszczasz formularz HubSpot, musi być zainstalowany kod śledzenia HubSpot.

Utwórz samodzielną stronę formularza

Możesz również udostępnić formularz za pomocą linku udostępniającego. W przypadku linku udostępniającego formularz będzie wyświetlany na samodzielnej stronie pod własnym adresem URL. Tego linku udostępniającego nie można ukryć ani ustawić jako prywatnego. Każdy, kto posiada link udostępniający, będzie miał dostęp do formularza.

1. Na koncie HubSpot kliknij Więcej, a następnie przejdź do Marketing > Formularze. Jeśli opcja Więcej się nie pojawia, przejdź bezpośrednio do sekcji Marketing > Formularze.
2. Najedź kursorem na formularz i kliknij opcję Działania > Udostępnij.
3. W oknie dialogowym kliknij kartę „Link do udostępnienia ”.
4. Kliknij „Kopiuj”, aby skopiować adres URL strony formularza do schowka.
5. W przeglądarce otwórz nowe okno lub kartę i wklej adres URL strony formularza w pasku adresu, aby ją załadować. Możesz również udostępnić adres URL strony formularza bezpośrednio innym osobom, aby zapewnić im dostęp do formularza.
   
   

Dostosuj wygląd osadzonego formularza w edytorze formularzy

Podczas dostosowywania wyglądu osadzonego formularza za pomocą edytora formularzy HubSpot możesz skorzystać z gotowego motywu lub zastosować własny, niestandardowy styl.

Uwaga: motywy i style ustawione w edytorze formularzy będą miały zastosowanie wyłącznie do formularzy osadzonych lub samodzielnych stron formularzy. Formularze na stronach HubSpot można stylizować wyłącznieza pomocą opcji stylów modułu formularza dostępnych w edytorze treści.

Stylizuj formularz za pomocą motywu

Jeśli chcesz dostosować wygląd starszego formularza bez pisania własnego kodu, możesz zastosować gotowe motywy do osadzonego formularza lub samodzielnej strony formularza. Motywy te zapewniają dodatkowe opcje dostosowywania formularzy, oprócz ogólnych ustawień stylu formularza.

Aby dostosować wygląd formularza za pomocą motywu:

1. Na koncie HubSpot kliknij Więcej, a następnie przejdź do Marketing > Formularze. Jeśli opcja Więcej się nie pojawia, przejdź bezpośrednio do sekcji Marketing > Formularze.
2. Najedź kursorem na formularz i kliknij Edytuj.
3. W edytorze formularza kliknij kartę „Styl i podgląd ”.
4. Jeśli edytujesz starszy formularz, w lewym panelu odznacz pole wyboru „Zachowaj stary motyw ”. Spowoduje to usunięcie poprzedniej domyślnej stylizacji HubSpot zastosowanej w tym formularzu. Wszelkie niestandardowe kody CSS lub JavaScript dodane do formularza przestaną działać. To pole wyboru nie dotyczy nowych formularzy tworzonych na Twoim koncie.
5. Wybierz motyw.
6. W prawym górnym rogu kliknij „Opublikuj ” lub „Zaktualizuj”.

Użyj stylu niestandardowego

Możesz również dostosowywać styl formularzy na bardziej szczegółowym poziomie.

Aby zastosować niestandardowy styl:

1. Na koncie HubSpot kliknij Więcej, a następnie przejdź do Marketing > Formularze. Jeśli opcja Więcej się nie pojawia, przejdź bezpośrednio do sekcji Marketing > Formularze.
2. Najedź kursorem na formularz i kliknij Edytuj.
3. W edytorze formularza kliknij kartę „Styl i podgląd ”.
   • W lewym panelu kliknij sekcję„Styl ”. Tutaj możesz skonfigurować szerokość pól formularza, rodzinę czcionek, rozmiary czcionek, kolory czcionek oraz przycisk formularza. Style te są ustawiane indywidualnie dla każdego formularza i mają pierwszeństwo przed globalnymi ustawieniami stylu formularza.
   • Po dostosowaniu formularza w prawym górnym rogu kliknij „Opublikuj ” lub „Zaktualizuj”.

Dostosuj wygląd osadzonego formularza za pomocą CSS w zewnętrznym arkuszu stylów (starsza metoda)

Jeśli korzystasz z formularza starszego typu, możesz osadzić go jako formularz w postaci surowego kodu HTML. Następnie możesz dostosować wygląd tego osadzonego formularza za pomocą CSS w zewnętrznym arkuszu stylów.

Uwaga: tylko formularze starszego typu można ustawić jako surowy kod HTML. Dowiedz się więcej o stylizowaniu osadzonego formularza za pomocą CSS w zaktualizowanym edytorze formularzy.

Aby dostosować wygląd osadzonego formularza za pomocą CSS:

1. Na koncie HubSpot kliknij Więcej, a następnie przejdź do Marketing > Formularze. Jeśli opcja Więcej się nie pojawia, przejdź bezpośrednio do sekcji Marketing > Formularze.
2. Najedź kursorem na formularz i kliknij Edytuj.
3. W edytorze formularza kliknij kartę „Styl i podgląd ”.
4. Kliknij, aby włączyć przełącznik „Ustaw jako surowy element HTML ”. Formularz zostanie wyświetlony jako surowy element HTML na Twojej zewnętrznej stronie, a nie wewnątrz ramki iframe. Wszelkie domyślne style HubSpot zastosowane do formularza zostaną usunięte.
5. W prawym górnym rogu kliknij „Opublikuj ” lub „Zaktualizuj”.
6. Dodaj kod osadzania formularza do swojej strony zewnętrznej. Jeśli formularz został już osadzony, musisz zastąpić istniejący kod osadzania tą nową, pozbawioną stylów wersją. Po osadzeniu formularza:
   
   • Będziesz mógł dostosować wygląd formularza w zewnętrznym arkuszu stylów za pomocą CSS.
   • Możesz również zmodyfikować kod osadzania formularza, aby wprowadzić dodatkowe dostosowania. Ponieważ formularze HubSpot są tworzone w JavaScript, a nie w HTML, dostosowanie kodu osadzania formularza wymaga pomocy programisty znającego się na JavaScript.