Tworzenie i edytowanie formularzy przy użyciu nowego edytora formularzy (BETA)

Twórz i korzystaj z formularzy za pomocą nowego edytora formularzy, aby zbierać informacje o odwiedzających i przechowywać je w HubSpot CRM. Korzystając z nowego edytora formularzy, można tworzyć formularze wieloetapowe. Następnie nadaj swojemu formularzowi styl odzwierciedlający tożsamość i branding Twojej firmy.

Po utworzeniu formularza możesz dodać go do swoich stron HubSpot za pomocą modułu formularza HubSpot, zewnętrznej witryny za pomocą kodu osadzania formularza lub udostępnić go jako samodzielną stronę z linkiem do udostępniania.

Utwórz nowy formularz

Aby utworzyć nowy formularz:

• W prawym górnym rogu kliknij przycisk Utwórz formularz.
• Aby powiązać formularz z jednostką biznesową, kliknij menu rozwijane Wybierz jednostkę biznesową i wybierz jednostkę biznesową, z którą chcesz powiązać ten formularz.
• Wybierz nowy edytor formularzy.
• W prawym górnym rogu kliknij przycisk Dalej.
• U góry kliknij ikonę ołówka edit, aby edytować nazwę formularza. Aby zastosować zmianę nazwy, należy opublikować formularz.

Dodawanie i edytowanie pól formularzy

Dodaj pola formularzy, aby zbierać informacje od odwiedzających witrynę i kontaktów. Każde pole formularza musi być powiązane z właściwością HubSpot. Aby dodać pole formularza:

• Na swoim koncie HubSpot przejdź do Marketing > Lead Capture > Forms.
• Utwórz nowy formularz lub najedź kursorem na istniejący formularz i kliknij Edytuj.
• W lewym górnym rogu kliknij ikonę + plus.
• W lewym panelu kliknij i przeciągnij typ pola na podgląd formularza po prawej stronie, aby umieścić je w formularzu. Pola można umieszczać powyżej, poniżej lub obok innych pól.
• W prawym panelu kliknij i wprowadź etykietę pola. Po wprowadzeniu etykiety pola pojawi się lista podobnych istniejących właściwości.
  • W oknie dialogowym Połącz pole z właściwością kliknij sugerowaną właściwość.
  • Aby połączyć pole formularza z inną właściwością, kliknij opcję Wyszukaj właściwości.

• Aby dodać połączoną właściwość, w lewym panelu kliknij, aby rozwinąć sekcję Connected property. Kliknij właściwość , którą chcesz połączyć z polem formularza.
• Aby użyć istniejącej właściwości jako połączonej właściwości z polem w formularzu, użyj paska wyszukiwania , aby wyszukać istniejącą właściwość. Typ obiektu dodanego pola może określać, czy przesłanie formularza pojawi się na osi czasu aktywności powiązanych rekordów.

• Aby utworzyć nową właściwość i użyć jej jako właściwości połączonej z polem w formularzu, kliknij przycisk Utwórz nową.
  • Wybierz typ pola formularza.
  • W prawym panelu skonfiguruj pole formularza.
  • Przejrzyj reguły właściwości, a następnie kliknij przycisk Utwórz. Domyślnie wybrana zostanie opcja Pokaż w formularzach, formularzach wyskakujących i botach . Po utworzeniu nowej właściwości zostanie ona automatycznie powiązana z polem formularza. Dowiedz się, jak zarządzać właściwościami.

• Po dodaniu pola formularza, aby edytować opcje pola:
  • W prawym panelu kliknij pole w podglądzie formularza. 
  • W lewym panelu kliknij, aby rozwinąć sekcję Opcje pola. Opcje tutaj mogą się różnić w zależności od typu właściwości pola, dowiedz się więcej o dodatkowych dostępnych opcjach dostosowywania pola.
    
    • Tekst pomocy: tekst informacyjny poniżej etykiety pola, aby pomóc użytkownikowi wypełnić pole.
    • Tekst zastępczy: tekst, który pojawia się w polu wprowadzania dla pola. Tekst zniknie, gdy odwiedzający wprowadzi wartość w polu i nie zostanie przesłany, nawet jeśli pole pozostanie puste.
    • Wartość domyślna : wartość, która zostanie domyślnie przesłana dla pola, chyba że zostanie zmieniona przez odwiedzającego.
    • Ukryte pole: gdy ta opcja jest włączona, pole będzie miało ustawioną wartość podczas przesyłania formularza, ale pole nie będzie wyświetlane odwiedzającemu. Po włączeniu ustawienia należy ustawić wartość domyślną, która zostanie przekazana do właściwości po przesłaniu formularza.
    • Pole wymagane: gdy ta opcja jest włączona, pole musi zostać wypełnione, aby przesłać formularz. Jeśli pole formularza zostało ustawione jako wymagane, nie można go ustawić jako ukrytego.

Dodaj dodatkowe elementy formularza

Dodaj dodatkowy tekst i multimedia lub bezpieczeństwo i prywatność do swojego formularza. Podobnie jak w przypadku pól formularza, elementy te można umieszczać nad, pod lub obok innych pól. W wersji beta niektóre elementy mogą być niedostępne.

• Utwórz nowy formularz lub najedź kursorem na istniejący formularz i kliknij Edytuj.
• W lewym górnym rogu kliknij ikonę + plus.
• W lewym panelu kliknij opcję Inne.
• Kliknij i przeciągnij elementy na podgląd formularza po prawej stronie, aby umieścić je w formularzu.
  
  
  

Dodawanie logiki warunkowej do formularzy( tylkoContent Hub lub Marketing Hub Professional i Enterprise )

Po dodaniu pól formularza można skonfigurować logikę warunkową, aby ukryć lub pokazać odpowiednie pola lub przekierować odwiedzających na inne strony HubSpot na podstawie ich poprzednich odpowiedzi.

Dla każdego formularza można dodać do 30 reguł z 10 warunkami na regułę.

Aby skonfigurować logikę warunkową w formularzu:

• Utwórz nowy formularz lub najedź kursorem na istniejący formularz i kliknij Edytuj.
• W lewym górnym rogu kliknij ikonę logiki githubBranch.
• W lewym panelu kliknij przycisk Dodaj logikę.
• W sekcji logiki skonfiguruj warunkowe reguły logiczne. Na przykład, jeśli filtrujesz według miasta i wybierzesz dowolne z Dublina , warunkowa reguła logiczna będzie miała zastosowanie tylko do rekordów z wartością Dublin.
  
• Aby usunąć filtr, kliknij ikonę usuwania deletee.
• Aby sklonować filtr, kliknij ikonę klonowaniaduplicate .
• Aby dodać dodatkowe filtry do reguły, kliknij add Dodaj filtr do tej grupy.
• Aby dodać dodatkową grupę do reguły, kliknij add Dodaj grupę.
• Jeśli do reguły dodano wiele filtrów lub grup, kliknij menu rozwijane ORAZ LUB pomiędzy filtrami i grupami, aby zastosować logikę ORAZ lub LUB:
  • AND: Wszystkie filtry w regule muszą być prawdziwe, aby reguła została wyzwolona.
  • OR: Tylko jeden filtr w grupie musi być prawdziwy, aby reguła została wyzwolona. Dowiedz się więcej o logice AND lub OR.

• W sekcji Następnie kliknij menu rozwijane, aby wybrać akcje na formularzu. Do wyboru są następujące opcje:
  • Pokaż pole: jeśli odpowiedzi użytkownika spełniają kryteria określone w regułach, pokaż określone pole.
  • Ukryj pole: jeśli odpowiedzi użytkownika spełniają kryteria określone w regułach, pokaż określone pole.
  • Przejdź do kroku: jeśli odpowiedzi użytkownika spełniają kryteria określone w regułach, przejdź do określonego kroku. Aby użyć tej opcji, formularz musi mieć co najmniej trzy kroki. Dowiedz się więcej o dodawaniu kroków formularza.
  • Przekieruj do: jeśli odpowiedzi użytkownika spełniają kryteria określone w regułach, przekieruj go na stronę HubSpot lub zewnętrzny adres URL. Użytkownicy konta Sales Hub Enterprise lub Service Hub Enterprise mogą przekierowywać formularze do linku do spotkania na stronie planowania.

• W zależności od wybranej akcji wypełnij wymagane pola.
• Aby zastosować logikę warunkową, kliknij Zapisz i aktywuj.

Zarządzanie regułami logiki warunkowej

• Utwórz nowy formularz lub najedź kursorem na istniejący formularz i kliknij Edytuj.
• W lewym górnym rogu kliknij ikonę logiki githubBranch.
• Aby dodać kolejną regułę, kliknij przycisk Dodaj logikę.
• Aby edytować regułę, kliknij menu rozwijane Akcje i wybierz opcję Edytuj.
• Aby usunąć regułę, kliknij menu rozwijane Akcje i wybierz Usuń.

Dodawanie i edytowanie kroków formularza

Uwaga: ta funkcja jest dostępna tylko dla Marketing Hub, Sales Hub lub Service Hub Starter, Professional i Enterprise lub Content Hub Enterprise.

Twórz wieloetapowe formularze, aby zachęcić użytkowników do wypełniania wielu segmentów formularza zamiast jednego długiego formularza. Aby dodać krok formularza w formularzu wieloetapowym:

• Na swoim koncie HubSpot przejdź do Marketing > Lead Capture > Forms.
• Utwórz nowy formularz lub najedź kursorem na istniejący formularz i kliknij Edytuj.
• W prawym panelu najedź kursorem na dwa istniejące kroki i kliknij ikonę + dodaj. Pojawi się nowa sekcja kroku, w której można skonfigurować pola formularza i dodatkowe elementy formularza w panelu kroku.
  

• Aby zmienić kolejność kroku, najedź na niego kursorem. Następnie w lewym górnym rogu kroku kliknij i przeciągnij krok [x] , aby zmienić jego położenie.
• Aby usunąć krok, najedź na niego kursorem i kliknijikonę usuwania delete .
• Pasek postępu wizualnie wskazuje, jaka część formularza została wypełniona przez użytkownika, poprawiając wskaźniki wypełniania formularzy. Aby edytować pasek postępu:
  • Najedź kursorem na pasek postępu i kliknij ikonę ołówka edit .

• • W lewym panelu można edytować pasek postępu i włączać go lub wyłączać:

• • • Pasek postępu jest domyślnie dodawany do wszystkich formularzy. Aby wyłączyć pasek postępu, wyłącz przełącznik Pasek postępu. Spowoduje to usunięcie paska postępu ze wszystkich kroków formularza.
    • W sekcji Format wybierz sposób wyświetlania tekstu na pasku postępu. Do wyboru są następujące opcje: Pokaż procent ukończenia, Pokaż liczbę kroków lub Nie pokazuj tekstu.

Edytuj układ kroku i baner tła

Wybieraj spośród predefiniowanych układów kroków za pomocą szybkiego przełącznika układów i dostosuj baner tła formularza.

• Utwórz nowy formularz lub najedź kursorem na istniejący formularz i kliknij Edytuj.
• Najedź kursorem na krok formularza i kliknij ikonę ołówka edit w prawym górnym rogu.
• W lewym panelu wybierz układ kroków.
• Aby usunąć układ, kliknij przycisk Usuń układ w prawym górnym rogu.

• Kliknij tło banera, aby rozwinąć sekcję:
  
  • Przełączprzełącznik Kolor tła , aby dostosować baner tła formularza.

• • Wybierz kolor i krycie.
  • Kliknij menu rozwijane Gradient , aby dodać gradient.
  • Użyj obrazu jako tła banera. Możesz przesłać obraz z plików HubSpot, przeglądać obrazy z dysku twardego komputera lub użyć asystentów AI do generowania obrazów.

Styl formularza

Dostosuj tekst, pola wprowadzania, przycisk i tło dla formularza i kroków formularza. Opcje stylu skonfigurowane na karcie Globalny styl zostaną zastosowane do wszystkich kroków formularza. Nie można osobno stylizować poszczególnych kroków formularza.

Aby stylizować formularz:

• .
• Utwórz nowy formularz lub najedź kursorem na istniejący formularz i kliknij Edytuj.
• W lewym górnym rogu kliknij ikonę stylu.

• Podczas dostosowywania tekstu, pól wprowadzania lub przycisków można wybrać jeden z istniejących stylów za pomocą Szybkich stylów wprowadzania pól. Alternatywnie można ręcznie dostosować styl dla każdego elementu formularza:
  • Tekst: dostosuj czcionkę, rozmiar czcionki i kolor tekstu nagłówka i treści. Możesz dodać cień do tekstu nagłówka lub podświetlić tekst główny.

• • Pola wejściowe: 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.
  • Przycisk: 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.
  • 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.

Dostosowywanie ustawień formularza

Skonfiguruj ustawienia formularza, w tym to, co dzieje się z odpowiednim kontaktem po przesłaniu formularza, ustawienia powiadomień użytkownika i domyślny język formularza. Możesz ustawić status marketingowy kontaktu, etap cyklu życia i inne. Niektóre opcje mogą nie być wyświetlane w zależności od subskrypcji HubSpot.

• Utwórz nowy formularz lub najedź kursorem na istniejący formularz i kliknij Edytuj.
• W lewym panelu kliknij ikonę ustawień settings.
• Na karcie Ogólne skonfiguruj następujące ogólne ustawienia formularza:
  
  • Zawsze twórz kontakt z nieznanego adresu e-mail: wybierz tę opcję, aby utworzyć nowy rekord kontaktu dla każdego zgłoszenia z unikalnym adresem e-mail. Jeśli przesłany adres e-mail pasuje do istniejącego rekordu kontaktu w bazie danych, szczegóły istniejącego rekordu zostaną zaktualizowane.
    • Jeśli ta opcja jest wyłączona, HubSpot najpierw spróbuje powiązać zgłoszenie z istniejącym kontaktem z przesłanym adresem e-mail. Jeśli pod tym adresem e-mail nie istnieje żaden kontakt, HubSpot rozpozna i zaktualizuje kontakty na podstawie plików cookie w ich przeglądarkach. Może to spowodować nadpisanie kontaktów, jeśli ten sam formularz zostanie przesłany wielokrotnie z tego samego urządzenia.
    • Jeśli ta opcja jest włączona, gdy kontakt prześle formularz przy użyciu innego adresu e-mail w przeglądarce, w której jest już plik cookie, wyświetlenia dla tego kontaktu nie będą śledzone. Opcja Wstępnie wypełnij pola kontaktu znanymi wartościami również zostanie automatycznie wyłączona.
  • Ustaw kontakty utworzone jako kontakty marketingowe: jeśli Twoje konto HubSpot ma dostęp do kontaktów marketingowych, możesz automatycznie ustawić wszystkie kontakty, które przesłały ten formularz jako marketingowe. Dotyczy to zarówno nowych, jak i istniejących kontaktów.
  • Wstępne wypełnianie pól dla powracających użytkowników: jeśli kontakt wcześniej odwiedził Twoją witrynę i przesłał formularz, a HubSpot był w stanie przechowywać i śledzić jego pliki cookie, wszelkie znane wartości pól mogą zostać wstępnie wypełnione w formularzu. Ta opcja jest domyślnie włączona, dowiedz się więcej o wstępnie wypełnionych polach formularza.
    
  • Dodaj do kampanii marketingowej: jeśli posiadasz subskrypcję Marketing Hub Professional lub Enterprise, możesz powiązać formularz z kampanią:
    • Aby powiązać formularz z istniejącą kampanią, kliknij menu rozwijane Kampania i wybierz kampanię.
    • Aby powiązać formularz z nową kampanią, kliknij menu rozwijane Kampania i kliknij opcję Utwórz kampanię. Następnie kontynuuj konfigurowanie kampanii.

• • Po przesłaniu zaktualizuj etap cyklu życia kontaktu i firmy: kliknij menu rozwijane Ustaw stan cyklu życia na i wybierz etap cyklu życia. Gdyodwiedzający prześlą formularz, wszelkie nowe lub istniejące rekordy zostaną ustawione na wybranym etapie cyklu życia.
    • Nie można przenieść etapu cyklu życia rekordu wstecz. Jeśli istniejący kontakt lub firma z późniejszym etapem cyklu życia prześle formularz, etap cyklu życia nie zostanie zaktualizowany.
    • Etap cyklu życia ustawiony w formularzu zastąpi domyślny etap cyklu życia skonfigurowany w ustawieniach HubSpot.

• Aby dostosować ustawienia przesyłania, w lewym panelu kliknijkartę Ustawienia przesyłania . Dostosuj następujące ustawienia przesyłania formularza:

  • Powiadomienia e-mail dla odwiedzających: zaznacz pole wyboru Wyślij powiadomienia e-mail o przesłaniu do właściciela kontaktu, aby automatycznie wysłać powiadomienie do właściciela kontaktu. Jeśli kontakt nie ma właściciela, powiadomienia nie będą wysyłane. Dowiedz się więcej o własności obiektów w HubSpot.

  • Powiadomienia e-mail o zgłoszeniach: kliknijmenu rozwijane Wyślij powiadomienia e-mail o zgłoszeniach, aby wybrać domyślne zespoły lub osoby, do których mają być wysyłane powiadomienia e-mail o zgłoszeniach, niezależnie od właściciela kontaktu. Odbiorcy ustawieni tutaj zostaną nadpisani przez odbiorców ustawionych w opcjach formularza na stronach HubSpot.

• Aby dostosować ustawienia języka formularza, kliknij kartę Język i region. Kliknij menu rozwijane Primary language, a następnie wybierz domyślny język formularza. Komunikaty o błędach, etykiety domyślnych właściwości, tekst pomocy, tekst zastępczy i wartości domyślne zostaną przetłumaczone na ten język.
• Aby utworzyć tłumaczenie AI formularza( tylkoMarketing Hub lub Content Hub Professional i Enterprise ):
  • Włącz przełącznik Enabled AI translations for all form content AI.
  • W menu rozwijanym Primary language wybierz język, na który chcesz przetłumaczyć formularz. Komunikaty o błędach, etykiety właściwości domyślnych, tekst pomocy, tekst zastępczy, wartości domyślne, etykiety niestandardowe, tekst sformatowany i tekst zgody zostaną automatycznie przetłumaczone na ten język.
  • Jeśli formularz został zaktualizowany od czasu poprzedniego tłumaczenia, kliknij przycisk Przetłumacz ponownie teraz, aby zaktualizować tłumaczenie.

Zarządzanie walidacją na żywo w polach formularzy

Jeśli ustawiłeś reguły walidacji dla właściwości, reguły te będą miały zastosowanie do pól formularzy, a odwiedzający muszą spełnić te wymagania, aby przesłać formularz. Walidacja na żywo w polach formularzy daje odwiedzającym natychmiastową informację zwrotną na temat ich danych wejściowych, ułatwiając poprawianie błędów i dokładne wypełnianie formularzy.

Na przykład, jeśli ustawiłeś regułę walidacji dla właściwości Order Number, aby zawierała tylko wartości liczbowe, odwiedzający otrzymają informację zwrotną, aby poprawić wszelkie wpisy nienumeryczne.

Domyślnie walidacja na żywo w formularzach jest włączona. Aby włączyć/wyłączyć walidację na żywo w polach formularzy:

• W menu na lewym pasku bocznym przejdź do Marketing > Formularze.

• Kliknij kartę Ustawienia przesyłania.
• Włączanie/wyłączanie opcji Enable live validation of form fields.
• W lewym dolnym rogu kliknij przycisk Zapisz.

Publikowanie lub udostępnianie formularza

Po utworzeniu nowego formularza lub dokonaniu jego aktualizacji, opublikuj formularz, aby wprowadzić zmiany na żywo. Następnie dodaj go do treści HubSpot, użyj kodu osadzania formularza, aby dodać go do zewnętrznej strony lub udostępnij go jako samodzielną stronę z linkiem do udostępniania.

• Na swoim koncie HubSpot przejdź do Marketing > Lead Capture > Forms.
• Utwórz nowy formularz lub najedź kursorem na istniejący formularz i kliknij Edytuj.
• W prawym górnym rogu kliknij przycisk Opublikuj , aby opublikować aktualizacje formularza.
• Aby osadzić formularz na stronie HubSpot, przejdź do treści, a następnie dodaj moduł formularza i wybierz formularz.
• Aby udostępnić formularz lub osadzić go w zewnętrznej witrynie, w prawym górnym rogu kliknij opcję Udostępnij, a następnie wybierz jedną z poniższych opcji:
  • Pobierz kod osadzania: użyj kodu osadzania, aby dodać formularz na zewnętrznie hostowanej stronie. Aby śledzić analitykę formularza na stronie zewnętrznej, kod śledzenia HubSpot musi być zainstalowany na stronie. Dowiedz się więcej o dodawaniu formularza HubSpot do strony zewnętrznej.
    • W dolnej części strony kliknij przycisk Kopiuj.
    • Wklej kod osadzania do modułu HTML na swojej stronie.
  • Skopiuj link udostępniania: użyj adresu URL, aby udostępnić formularz jako samodzielną stronę.

• • • 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 również udostępnić adres URL strony formularza bezpośrednio innym osobom, aby dać im dostęp do formularza.