Projektowanie formularza

Ustawienia Appearance w Sami B2B Onboarding zmieniają wygląd całego formularza: jego czcionkę, rozmiar, szerokość, styl pól i kolory. Dotyczą jednego formularza, więc każdy z Twoich formularzy może mieć własny wygląd, i nigdy nie zmieniają Twojego motywu.

Otwórz ustawienia Appearance

1. Otwórz formularz

   Przejdź do Forms i kliknij Edit obok formularza. Otworzy się kreator.

2. Otwórz Appearance

   Na pasku po lewej kliknij Appearance. Panel wyświetla wszystkie poniższe ustawienia, a podgląd pośrodku zmienia się wraz z ich zmianą.

   

   Każde ustawienie Appearance od razu zmienia podgląd.

3. Zapisz

   Gdy formularz wygląda dobrze, kliknij Save na pasku zapisu. Jeśli formularz jest opublikowany, kupujący zobaczą nowy wygląd przy następnym otwarciu.

Ustawienia Appearance

Ustawienie	Co zmienia	Domyślnie
Font	Krój pisma całego formularza. Otwiera panel Select font.	Theme default
Font size scale	Rozmiar całego tekstu formularza, od 80% do 130% rozmiaru motywu, w krokach co 5%.	100%
Width	Największa szerokość formularza w px (od 320 do 1200) lub w % miejsca, w którym się znajduje (od 30 do 100). Formularz jest wyśrodkowany i zwęża się na małych ekranach.	640 px
Layout	Default umieszcza pola bezpośrednio na stronie. Boxed umieszcza formularz we własnej karcie z marginesem wewnętrznym i obramowaniem.	Default
Style	Wygląd każdego pola. Zobacz Style pól.	Classic
Field spacing	Odstęp między polami: Comfortable lub Compact.	Comfortable
Color scheme	Kolory tła, tekstu i przycisków formularza. Zobacz Kolory.	Default
CSS class	Dodaje do formularza Twoją własną nazwę klasy, aby style w motywie mogły się do niego odwoływać, na przykład wholesale-form.	Puste

Po przełączeniu Width między px a % wartość zaczyna się od nowa od 640 px lub 100%.

Wybierz czcionkę

1. Otwórz listę czcionek

   W Appearance kliknij pole Font. Otworzy się panel Select font.

2. Znajdź czcionkę

   Wpisz tekst w polu Search lub przewiń listę. Lista ma dwie grupy:

   • System fonts: Theme default, czyli czcionka, której Twój motyw już używa, a następnie System UI, Helvetica, Arial, Georgia, Times New Roman i Monospace. Dla nich nic dodatkowego się nie ładuje.
   • Other fonts: prawie 1000 czcionek internetowych. Każda jest pokazana własnym krojem. Ładują się z Google Fonts w Twoim sklepie, co może nieco spowolnić ładowanie strony.

3. Wybierz ją i jej grubość

   Kliknij czcionkę. Podgląd zmieni się od razu. Jeśli czcionka występuje w kilku grubościach, wybierz jedną na liście Weight na dole panelu, na przykład Regular, Bold lub Italic. Kliknij Done.

   Notatka pod Font potwierdza wybór, na przykład Bold. Loads from Google Fonts on the storefront.

Style pól

Kliknij pole Style, aby zobaczyć wszystkie osiem stylów, każdy narysowany jako przykładowe pole Company name. Kliknij jeden, aby zastosować go do każdego pola w formularzu.

Styl	Jak wygląda pole
Material filled	Szare pole z etykietą wewnątrz, u góry.
Material outlined	Pole z obramowaniem i etykietą na jego górnej krawędzi.
Classic	Miękkie szare pole z lekkim cieniem i zaokrąglonymi rogami. Ustawienie domyślne.
Classic rounded	Classic z całkowicie zaokrąglonymi polami jednowierszowymi.
Flat	Szare pole z kwadratowymi rogami i bez cienia.
Flat rounded	Flat z całkowicie zaokrąglonymi polami jednowierszowymi.
Line	Tylko linia pod odpowiedzią.
Line rounded	Wygląda tak samo jak Line: podkreślenie nie ma rogów do zaokrąglenia.

W stylach zaokrąglonych pola zawierające kilka wierszy, takie jak Long text, zachowują lekko zaokrąglone rogi zamiast być całkowicie okrągłe.

Każda karta pokazuje, jak pole wygląda w danym stylu.

Kolory

Wiersz Color scheme pokazuje dziesięć gotowych schematów: Default, Forest Light, Cool Ocean, Matcha Calm, Warm Sand, Blush, Slate, Charcoal, Forest Dark i Midnight. Każda próbka pokazuje kolory tła, tekstu i przycisku. Kliknij jedną, aby jej użyć.

• Default przejmuje kolory samej strony, więc formularz pasuje do motywu. Aby zmienić te kolory, zmień ustawienia motywu.
• Każdy inny schemat maluje za formularzem jego własne tło. Przyciski i znaczniki kroków przyjmują kolor przycisku z schematu.

Utwórz własne kolory

1. Otwórz schemat

   Pod próbkami kliknij Edit scheme. Otworzy się panel Editing dla wybranego schematu, na przykład Editing Warm Sand.

2. Zmień kolory

   Kliknij kolor, aby otworzyć selektor kolorów. Przeciągaj w kwadracie i na paskach kolorów, wpisz kod szesnastkowy lub użyj zakraplacza, aby wybrać kolor z ekranu, jeśli przeglądarka to umożliwia. Kolory, które możesz ustawić:

   Kolor	Co maluje
   Background	Tło za formularzem.
   Text	Etykiety, nagłówki i odpowiedzi.
   Solid button background	Główne przyciski, takie jak Submit application, i znaczniki kroków.
   Solid button label	Tekst na tych przyciskach.
   Outline button	Obramowanie przycisków konturowych, takich jak Back.

   Background, Text i Outline button mogą mieć wartość Theme color, co oznacza, że formularz używa w tym miejscu koloru z motywu.

   Gdy tylko zmienisz kolor, schemat zmienia się na Custom, a w wierszu pojawia się próbka Custom. Te kolory dotyczą tylko tego formularza. Własne schematy kolorów motywu nie zmieniają się.

   

   Zmień dowolny kolor, a formularz otrzyma własny schemat Custom.

3. Zamknij lub zresetuj

   Zamknij panel, aby zachować kolory. Aby wrócić do kolorów motywu, kliknij Remove color scheme na dole panelu: formularz wróci do Default.

Dodaj logo

Logo znajduje się w nagłówku formularza, nad jego tytułem.

1. Otwórz nagłówek

   Na pasku kliknij Elements, a następnie kliknij Header na górze listy.

2. Prześlij logo

   Włącz Show store logo, następnie kliknij Upload image i wybierz plik. Musi to być obraz .jpg, .png lub .svg o rozmiarze do 1 MB. Najlepiej pasuje rozmiar około 200×60 px.

   Aby zmienić go później, kliknij Replace image. Aby go usunąć, kliknij Remove.

3. Zapisz

   Kliknij Save na pasku zapisu.

Sprawdź projekt

Podgląd w kreatorze rysuje formularz tym samym kodem, którego używa Twój sklep, więc układ, styl pól, odstępy i schemat, które widzisz, to to, co dostają kupujący.

• Użyj przycisków Desktop preview i Mobile preview nad podglądem, aby sprawdzić oba rozmiary ekranu.
• Ustawienia pozostawione motywowi, czyli Theme default dla czcionki i Default dla kolorów, przejmują w sklepie czcionkę i kolory motywu. Aby je zobaczyć, kliknij Preview (przycisk oka) na pasku narzędzi. Otworzy on stronę formularza w Twoim sklepie w nowej karcie, w stanie z ostatniego zapisu.

Kolejne kroki

• Budowanie formularza – ustaw szerokość, etykietę i tekst zastępczy każdego pola.
• Po wysłaniu formularza przez kupującego – napisz ekran z podziękowaniem, który kupujący zobaczą po tym formularzu.
• Dodaj formularz do sklepu – umieść gotowy formularz na stronie, w sekcji motywu lub gdziekolwiek, gdzie można użyć HTML.