Jak używać niestandardowego bloku HTML w formularzach rejestracyjnych

Czego się dowiesz?

Dowiedz się, jak używać niestandardowego bloku HTML, aby dodać własny kod do formularzy rejestracyjnych Klaviyo — poza blokami dostępnymi w edytorze formularzy. Blok HTML daje szczegółową kontrolę nad treścią i układem — niestandardowe nagłówki, sformatowany tekst, listy, tabele, obrazy i linki — dzięki czemu formularze mogą dokładnie pasować do Twojej marki i komunikacji.

Ze względów bezpieczeństwa blok HTML obsługuje tylko określony zestaw znaczników i atrybutów. Wszystko spoza tego zestawu jest automatycznie usuwane podczas renderowania formularza, więc nie cały napisany HTML będzie widoczny na stronie. W sekcjach poniżej wymieniono, które znaczniki i atrybuty są obsługiwane, a które są zawsze usuwane.

Kilka słów na początek

Przed użyciem niestandardowego kodu HTML zwróć uwagę na poniższe informacje:

• Niestandardowy blok HTML jest dostępny tylko w płatnych planach Klaviyo. Ta funkcja jest wdrażana stopniowo, więc możesz jeszcze jej nie widzieć na swoim koncie.
• Twój kod HTML jest automatycznie oczyszczany ze względów bezpieczeństwa. Blok HTML zachowuje tylko obsługiwane znaczniki i atrybuty, a usuwa całą resztę — w tym skrypty i procedury obsługi zdarzeń — podczas renderowania formularza. To chroni osoby odwiedzające Twoją stronę przed złośliwym kodem. W rezultacie część napisanego kodu HTML może nie wyświetlać się na stronie, jeśli nie jest obsługiwana. Zapoznaj się z listą obsługiwanych znaczników poniżej.
• Niestandardowy blok HTML dodaje tylko nową treść. Blok HTML umożliwia dodawanie własnych elementów do formularza. Nie można go użyć do edytowania kodu HTML istniejących bloków w formularzu.
• Zespół wsparcia Klaviyo nie może rozwiązywać problemów z kodem niestandardowym. Problemy spowodowane niestandardowym HTML (np. uszkodzone układy, treści, które się nie renderują, problemy ze stylami) musisz samodzielnie zdiagnozować i naprawić. Jeśli formularz z niestandardowym HTML nie wyświetla się lub nie działa prawidłowo, najpierw usuń blok HTML, aby sprawdzić, czy przyczyną jest Twój kod.
• Przetestuj przed opublikowaniem. Niestandardowy kod HTML może wpłynąć na układ i użyteczność formularza. Zawsze wyświetl podgląd i przetestuj formularz zarówno na komputerze, jak i na urządzeniu mobilnym przed opublikowaniem.

Dodaj blok HTML do formularza

Aby dodać niestandardowy kod HTML do formularza:

1. Przejdź do Formularzy rejestracyjnych i otwórz formularz w edytorze.
2. W panelu bloków znajdź blok HTML i przeciągnij go do formularza w miejscu, w którym ma się pojawić niestandardowa treść.

3. Wybierz blok HTML, aby otworzyć jego ustawienia. Edytor kodu pojawi się na pasku bocznym bloku.

Blok HTML działa jak każdy inny blok w edytorze formularzy — można dodać więcej niż jeden, zmieniać ich położenie i usuwać je. Niestandardowy kod HTML jest zawarty w swoim bloku, więc nie wpływa na strukturę pozostałej części formularza.

Napisz HTML

Edytor kodu uruchamia się pusty. Wprowadź HTML bezpośrednio, używając tylko obsługiwanych znaczników i atrybutów. Nieobsługiwane znaczniki i atrybuty są automatycznie usuwane podczas renderowania formularza.

Przykład

<h2 class="promo-heading">Join our list</h2>
<p>Sign up for <strong>15% off</strong> your first order, plus:</p>
<ul>
  <li>Early access to new drops</li>
  <li>Members-only offers</li>
</ul>
<p><a href="https://www.example.com/terms" target="_blank">See terms and conditions</a></p>

Aby nadać styl swojemu HTML, dodaj własne nazwy class do elementów i kieruj je za pomocą niestandardowego CSS. Na przykład ustaw class="promo-heading" w nagłówku, a następnie nadaj styl .promo-heading w edytorze niestandardowego CSS. Zobacz Jak używać niestandardowego CSS w formularzu rejestracyjnym, aby dowiedzieć się, jak włączyć i pisać niestandardowy CSS.

Obsługiwane znaczniki HTML i atrybuty

Ze względów bezpieczeństwa blok HTML obsługuje następujące znaczniki i atrybuty. Każdy znacznik lub atrybut, którego nie ma na tej liście, jest usuwany podczas renderowania formularza.

Atrybuty globalne — są dozwolone w każdym obsługiwanym znaczniku: id, class, dir, lang, role i aria-* (atrybuty ułatwień dostępu).

Poniższe tabele zawierają listę dodatkowych atrybutów dozwolonych w przypadku określonych znaczników, poza atrybutami globalnymi wymienionymi powyżej.

Tekst i formatowanie

Nagłówki

Listy

Tabele

Multimedia i linki

Dozwolone schematy URL

Linki (href) i źródła obrazów (src) mogą używać tylko następujących schematów adresów URL: http, https, mailto, tel oraz ścieżek względnych lub kotwic #fragment. Adresy URL używające innego schematu (np. javascript: lub data:) zostaną usunięte. Gdy link używa target="_blank", rel="noopener noreferrer" jest stosowane automatycznie, aby zachować bezpieczeństwo linku.

Znacznik i atrybuty usunięte ze względów bezpieczeństwa

Aby chronić Twoją witrynę i odwiedzających, blok HTML automatycznie usuwa wszystko, co mogłoby uruchamiać kod lub przejąć kontrolę nad formularzem — jest to rodzaj ataku znany jako cross-site scripting (XSS). Poniższe elementy są zawsze usuwane, mimo że są powszechne w HTML:

• Skrypty: <script> i <noscript>
• Atrybuty procedury obsługi zdarzeń: każdy atrybut, którego nazwa zaczyna się od on (na przykład onclick, onload, onerror, onmouseover)
• Ramki i osadzanie: <iframe>, <frame>, <frameset>, <object>, <embed>, <applet>, <portal>
• Znaczniki wektorowe i języka znaczników: <svg>, <math>
• Znaczniki dokumentu i zasobów: <base>, <meta>, <link> oraz znacznik <style>
• Niebezpieczne schematy adresów URL w linkach lub źródłach: javascript:, vbscript:, data:, filesystem:
• Atrybuty zastępujące przesyłanie formularza: formaction, formmethod, formtarget, formenctype
• Starsze lub wycofane znaczniki: <marquee>, <bgsound>, <keygen>, <isindex>, <xmp>, <listing>, <plaintext>, <template>, <noembed>

Jeśli część kodu znika podczas renderowania formularza, najprawdopodobniej użyto znacznika lub atrybutu, którego nie ma na obsługiwanej liście powyżej.

Wyświetl podgląd i opublikuj

Po napisaniu kodu HTML:

1. Użyj podglądu w edytorze, aby sprawdzić wygląd formularza.
2. Zweryfikuj formularz zarówno na komputerze, jak i na urządzeniu mobilnym, ponieważ niestandardowy kod HTML może wpływać na każdy z nich w inny sposób.
3. Opublikuj formularz na stronie niewidocznej dla odwiedzających, aby sprawdzić, jak wyświetla się na stronie.
4. Wyślij testowe zgłoszenie rejestracji w opublikowanym formularzu, aby potwierdzić, że wszystkie pola i przyciski nadal działają.
5. Opublikuj formularz publicznie.

Edytuj lub usuń niestandardowy kod HTML

Aby edytować HTML, wybierz blok HTML i zaktualizuj kod w jego ustawieniach.

Aby usunąć niestandardowy HTML, wybierz blok HTML i usuń go. Spowoduje to usunięcie bloku i jego zawartości z formularza; pozostała część formularza pozostanie bez zmian. Usunięcie bloku to także najszybszy sposób, aby sprawdzić, czy problem z wyświetlaniem jest spowodowany przez niestandardowy kod.

Rozwiązywanie problemów

Część mojego HTML nie jest wyświetlana.
Blok HTML usuwa wszystkie znaczniki lub atrybuty, które nie są obsługiwane, gdy formularz jest renderowany. Porównaj kod z obsługiwanymi znacznikami i atrybutami powyżej oraz potwierdź, że nie używasz znacznika lub atrybutu usuwanego ze względów bezpieczeństwa.

Mój formularz wygląda na uszkodzony.
Sprawdź HTML pod kątem niezamkniętych lub niepasujących znaczników oraz reguł układu, które zmieniają położenie lub powodują nakładanie się innych bloków. Ponieważ kod znajduje się w osobnym bloku, możesz usunąć blok HTML, aby potwierdzić, że to on jest przyczyną, a następnie dodać go ponownie i przetestować mniejsze zmiany.

Moje style nie stosują się do mojego kodu HTML.
Upewnij się, że nazwy class w HTML pasują do selektorów w niestandardowym CSS, że niestandardowy CSS jest włączony oraz że opublikowano najnowszą wersję formularza. Zobacz Jak używać niestandardowego CSS w formularzach rejestracyjnych.

Nie widzę bloku HTML.
Niestandardowy kod HTML jest dostępny tylko w płatnych planach i jest wdrażany stopniowo. Jeśli masz płatny plan i nadal go nie widzisz, sprawdź ponownie wkrótce.

Często zadawane pytania

Czy mogę edytować HTML istniejących bloków w moim formularzu?
Nie. Blok HTML umożliwia dodanie nowej, niestandardowej treści do formularza. Nie zmienia HTML istniejących bloków formularza.

Dlaczego część mojego kodu została usunięta?
Ze względów bezpieczeństwa blok HTML zachowuje tylko obsługiwane znaczniki i atrybuty, a wszystko pozostałe — takie jak skrypty i procedury obsługi zdarzeń — usuwa, aby zapobiec uruchamianiu złośliwego kodu w witrynie. Zobacz powyżej listę znaczników i atrybutów usuniętych ze względów bezpieczeństwa.

Czy mogę dodać do formularza <script> lub inny kod JavaScript?
Nie. Skrypty i atrybuty obsługi zdarzeń są zawsze usuwane, aby chronić odwiedzających Twoją witrynę. Nie można tego wyłączyć.

Czy mogę stylizować swój blok HTML?
Tak. Dodaj własne nazwy class do elementów HTML i kieruj je za pomocą niestandardowego CSS. Zobacz Jak używać niestandardowego CSS w formularzach rejestracyjnych.

Czy zespół Klaviyo Support pomoże napisać lub poprawić mój kod HTML?
Nie. Klaviyo Support nie może pisać, weryfikować ani rozwiązywać problemów z niestandardowym kodem. Jeśli formularz z niestandardowym kodem HTML ma problem, poprosimy o usunięcie bloku HTML, aby go wykluczyć, zanim Support będzie mógł zbadać sprawę dalej.