Jak korzystać z niestandardowych CSS w formularzu rejestracyjnym

Naucz się, jak używać niestandardowych CSS, aby stylizować Klaviyo formularz rejestracyjny poza to, co jest dostępne w edytorze formularzy. Niestandardowy CSS zapewnia ścisłą kontrolę nad właściwościami takimi jak wysokość wierszy, odstępy między literami i odstępy elementów, dzięki czemu Twoje formularze mogą być dokładnie dopasowane do potrzeb Twojej marki.

Kilka słów na początek

Przed użyciem niestandardowego CSS pamiętaj o następujących kwestiach:

• Niestandardowe CSS są dostępne tylko w płatnych planach Klaviyo. Te funkcje są rozwijane stopniowo, więc możesz nie widzieć go jeszcze na swoim koncie.
• Zespół Klaviyo Support nie może rozwiązywać problemów z kodem niestandardowym. Problemy spowodowane niestandardowym stylem CSS (np. niedziałający układ, ukryte pola, problemy z renderowaniem) znajdują się w gestii Ciebie, które zdebugujesz i naprawisz. Jeśli formularz z niestandardowym kodem CSS nie wyświetla się lub nie działa poprawnie, najpierw wyłącz niestandardowy kod CSS i sprawdź, czy powodem jest Twój kod.
• Niestandardowy CSS stosuje tylko styl. Przy pomocy tej funkcji nie możesz dodawać ani edytować kodu HTML formularza ani jego bloków.
• Przetestuj przed opublikowaniem. Niestandardowy CSS może wpłynąć na użyteczność formularza (np. przypadkowe ukrycie wymaganego pola może uniemożliwić rejestracje). Zawsze wyświetlaj podgląd i testuj formularz przed jego opublikowaniem.

Włącz niestandardowy CSS

Aby włączyć niestandardowy CSS w formularzu:

1. Przejdź do formularzy rejestracyjnych i w edytorze otwórz swój formularz.
2. Wybierz kartę Style.
3. Przewiń do sekcji Niestandardowy CSS na dole panelu.
4. Włącz niestandardowy CSS.
5. Zapoznaj się z komunikatem ostrzegawczym. Włączając niestandardowy CSS, przyjmujesz do wiadomości, że zespół Klaviyo ds. pomocy nie jest w stanie udzielać pomocy w przypadku problemów spowodowanych przez niestandardowy kod.

Po włączeniu pojawi się edytor CSS, w którym można napisać niestandardowy CSS dla formularza. Niestandardowy CSS jest włączony dla formularza; włączenie jej na jednym formularzu nie ma wpływu na pozostałe formularze.

Nadawanie nazw klasom elementom formularza

Gdy włączony jest niestandardowy CSS, każdy element formularza otrzymuje pole klasy CSS, które będzie widoczne u dołu paska bocznego danego elementu, gdy go wybierzesz. Domyślna nazwa klasy jest nazwą komponentu i dla łatwiejszego dostępu można zastąpić ją własną nazwą.

Użyj tych nazw klas jako selektorów w arkuszu CSS. Ustawianie własnych nazw klas to najbardziej niezawodny sposób targetowania elementów formularza, ponieważ zachowują one stabilność i czytelność.

Jeśli później wyłączysz niestandardowy CSS, nazwy zajęć zostaną zachowane i pojawią się ponownie po ponownym włączeniu.

Napisz swój CSS

Edytor CSS zaczyna się pusty – nie wyświetlają się w nim bieżące style formularza, ponieważ są one generowane podczas renderowania formularza na stronie. Aby targetować elementy, użyj jednej z tych metod:

• Użyj nazw swoich zajęć. Odwołaj się do nazw klas ustawionych w elementach formularza (zalecane).
• Sprawdź aktywny formularz. Otwórz opublikowany formularz na swojej stronie, a następnie użyj narzędzi dla programistów w przeglądarce (kliknij prawym przyciskiem myszy > Zbadaj), aby wybrać selektory, na które chcesz kierować reklamy.

Unikaj targetowania automatycznie generowanych nazw zajęć Klaviyo. Są to wartości wewnętrzne, które mogą zawierać wartości zaszyfrowane i mogą ulec zmianie bez powiadomienia, co dyskretnie zakłóciłoby Twój CSS. Zamiast tego użyj własnych nazw zajęć.

Przykład

Załóżmy, że ustawisz nazwę klasy form-headline dla bloku nagłówka i email-input dla bloku pola wprowadzania adresu e-mail:

.form-headline {
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.email-input {
  margin-bottom: 12px;
}

Niestandardowy CSS odblokowuje również style, które nie są dostępne w edytorze, takie jak tekst pisany od prawej do lewej:

.form-headline {
  direction: rtl;
  text-align: right;
}

Wyświetl podgląd i opublikuj

Po napisaniu kodu CSS:

1. Użyj podglądu edytora, aby sprawdzić wygląd formularza.
2. Zweryfikuj formularz zarówno na komputerach, jak i urządzeniach mobilnych, ponieważ niestandardowe CSS może wpływać na każdy z nich w inny sposób.
3. Opublikuj formularz na niepublicznej stronie docelowej, aby sprawdzić, jak wygląda na stronie.
4. W opublikowanym formularzu prześlij testową rejestrację, aby potwierdzić, że wszystkie pola wejściowe i przyciski nadal działają.
5. Opublikuj formularz publicznie.

Wyłącz niestandardowy CSS

Aby usunąć niestandardowe style, wyłącz niestandardowy CSS na karcie Style. Twój formularz natychmiast powróci do standardowego stylu edytora. Jest to również najszybszy sposób na sprawdzenie, czy problem z wyświetlaniem nie wynika z kodu niestandardowego. Twój poprzedni kod CSS zostanie zapisany na początku, jeśli zdecydujesz się ponownie włączyć niestandardowy kod CSS.

Rozwiązywanie problemów

Mój CSS nie stosuje się.
Upewnij się, że niestandardowy CSS jest włączony, selektory są zgodne z nazwami klas ustawionymi w komponentach i że opublikowana została najnowsza wersja formularza. Style na stronie również mogą kolidować ze stylami formularzy lub je zastępować. użyj narzędzi dla deweloperów przeglądarki, aby sprawdzić, które reguły są najlepsze.

Mój formularz wygląda na uszkodzony lub przestał zbierać rejestracje.
Wyłącz niestandardowy CSS, aby potwierdzić przyczynę, a następnie sprawdź swój kod. Zaznacz to szczególnie w przypadku reguł, które ukrywają lub zmieniają położenie danych wejściowych i przycisków.

Nie widzę sekcji Niestandardowy CSS.
Niestandardowe usługi CSS są dostępne tylko w planach płatnych i są wdrażane stopniowo. Jeśli korzystasz z płatnego planu, ale jeszcze go nie widzisz, sprawdź ponownie za jakiś czas.

Style typografii w klasach niestandardowych nie są stosowane.

Jeśli style układu, takie jak margin, działają, ale style tekstu, takie jak letter-spacing lub line-height, nie działają, klasa niestandardowa prawdopodobnie jest dołączona do zewnętrznego wrappera, podczas gdy widoczny tekst jest renderowany w zagnieżdżonym elemencie potomnym. W takim przypadku kieruj reguły również do elementów potomnych, na przykład: .form-headline, .form-headline * { ... }.

Często zadawane pytania

Czy mogę dodać do formularza niestandardowy kod HTML?
Nie. Do formularza nie można dodawać elementów HTML ani edytować kodu HTML istniejących bloków. Niestandardowy CSS zmienia styl tylko istniejących komponentów formularza.

Czy niestandardowy CSS działa ze wszystkimi moimi formularzami?
Niestandardowy CSS jest włączony dla poszczególnych formularzy wyświetlanych na stronie. Włącz ją osobno w każdym formularzu, który chcesz dostosować.

Czy zespół Klaviyo Support pomoże mi w pisaniu lub naprawianiu CSS?
Nie. Zespół Klaviyo Support nie może redagować, weryfikować ani rozwiązywać problemów z kodem niestandardowym. Jeśli formularz z niestandardowym stylem CSS wykaże problem, zanim zespół zajmie się dokładniejszym zbadaniem problemu, pojawi się komunikat z prośbą o wyłączenie niestandardowego CSS.

Co stanie się z moim CSS, jeśli wyłączę funkcje?
Przywrócono standardowy styl formularza. Nazwy klas komponentów zostaną zapisane i przywrócone, jeśli ponownie włączysz niestandardowy CSS.