Budowanie formularza

W kreatorze decydujesz, o co pyta formularz zgłoszeniowy. Dodajesz pola, grupujesz je w wiersze, dzielisz formularz na strony i konfigurujesz każde pole. Podgląd pośrodku pokazuje formularz tak, jak widzą go kupujący w Twoim sklepie.

Notatka

Aby otworzyć kreator, przejdź do Forms w Sami B2B Onboarding i kliknij Edit obok formularza lub kliknij nazwę formularza. Tylko pracownicy z rolą administratora mogą edytować formularze.

Kreator w skrócie

Obszar	Gdzie	Do czego służy
Pasek sekcji	Skrajnie po lewej	Przełącza między Elements, Appearance, After submit, Email i Integrations. Collapse zwija go do samych ikon.
Panel Elements	Po lewej	Struktura formularza: na górze Header, następnie Content, każda strona z polami i wierszami, Add page i na dole Footer.
Podgląd	Pośrodku	Formularz tak, jak widzą go kupujący. Kliknij pole, nagłówek strony, nagłówek lub przyciski, aby je zaznaczyć.
Panel ustawień	Po prawej	Otwiera się po zaznaczeniu elementu i pokazuje jego ustawienia. Kliknij × (Close), aby go zamknąć.
Pasek narzędzi	Nad podglądem	Pole Form name, plakietka Active lub Draft, … (More actions), Language, przyciski podglądu na komputerze i telefonie, przycisk inspektora oraz Preview.

Panel Elements wyświetla każdą stronę, wiersz i pole w kolejności, w jakiej napotykają je kupujący.

Pozostałe sekcje paska mają własne strony:

Sekcja	Co tam ustawiasz	Więcej informacji
Appearance	Układ, szerokość, czcionkę, styl pól i kolory.	Projektowanie formularza
After submit	Komunikat z podziękowaniem lub stronę, na którą kierowani są kupujący.	Po wysłaniu formularza przez kupującego
Email	Kto dowiaduje się o tym formularzu oraz wersja każdego e-maila przypisana do tego formularza.	Edycja szablonów e-maili i Wybierz, kto otrzymuje powiadomienia
Integrations	Gdzie w Shopify trafiają odpowiedzi, a także Klaviyo, webhooki, autouzupełnianie adresów i captcha.	Mapowanie odpowiedzi do Shopify

Dodaj pole

1. Otwórz listę pól

   Użyj tego, co jest najbliżej:

   • W panelu Elements kliknij + (Add field) obok nazwy strony lub Add field na końcu strony. Wewnątrz wiersza kliknij Add element, aby dodać pole do tego wiersza.
   • W podglądzie kliknij Add a field na końcu strony.
   • W podglądzie wskaż krawędź pola i kliknij +, który się pojawi. Jego podpowiedź brzmi Add field above, Add field below, Add field to the left lub Add field to the right. Lewa i prawa strona umieszczają nowe pole obok tego w jednym wierszu.

2. Znajdź pole

   Przewiń listę lub wpisz tekst w polu Search fields, aby ją zawęzić.

   

   Pola są pogrupowane według rodzaju, a Add all przy bloku adresu dodaje cały adres jednym kliknięciem.

3. Dodaj je

   Kliknij pole. Zostanie dodane do strony i zaznaczone, a jego ustawienia otworzą się po prawej. Nadaj mu etykietę i skonfiguruj je (zobacz Ustawienia pola).

Uwaga

Każdy formularz zachowuje jedno pole Email i jedno pole zapisane jako nazwa firmy. Pola Email nie można usunąć ani ukryć, a Save zostanie odrzucone z komunikatem Map a field to Company · Name., jeśli żadne pole nie jest zapisane jako nazwa firmy.

Pola, które możesz dodać

Grupa	Pole	Co dostaje kupujący
Basic fields	Short text	Jednowierszowe pole tekstowe.
	Long text	Pole tekstowe na kilka wierszy.
	Number	Pole przyjmujące tylko liczby.
	Email	Pole sprawdzające, czy odpowiedź wygląda jak adres e-mail.
	Phone	Pole numeru telefonu z opcjonalną flagą kraju, numerem kierunkowym i sprawdzaniem numeru.
	Country	Lista krajów.
	State / province	Lista stanów lub prowincji kraju wybranego w polu Country znajdującym się przed nim na stronie. Wyświetla się, gdy kupujący wybierze kraj, który ma stany, a gdy przed nim nie ma pola Country, jest zwykłym polem tekstowym.
	Dropdown	Lista do wyboru jednej opcji lub kilku, po włączeniu Allow multiple choices.
	Checkbox	Pojedyncze pole wyboru, na przykład „I agree to the terms”. Gdy jest wymagane, kupujący musi je zaznaczyć.
	Checkboxes	Lista opcji, z których kupujący może zaznaczyć dowolną liczbę.
	Radio buttons	Lista do wyboru jednej opcji, z opcjonalną opcją Other, którą kupujący wpisuje samodzielnie.
	Date and time	Selektor daty, godziny lub obu.
	File upload	Pole przesyłania plików. Domyślnie przyjmuje pliki PDF, JPG, JPEG i PNG do 10 MB.
Company fields	Company name	Pole tekstowe zapisywane jako nazwa firmy.
	Tax ID	Pole tekstowe na numer podatkowy lub VAT firmy. Sprawdzanie numeru podatkowego w aplikacji odczytuje to pole.
	Website	Pole tekstowe na stronę internetową firmy.
Document fields	Business license, Tax certificate, Tax registration, Reseller certificate	Pole przesyłania plików. Plik jest przechowywany ze zgłoszeniem jako dokument tego typu. Zobacz Dokumenty.
Static text	Heading	Tytuł z opcjonalnym podpisem pod nim.
	Paragraph	Sformatowany tekst, na przykład instrukcje.
	HTML	Twój własny kod HTML.
	Divider	Pozioma linia.
Address blocks	Shipping address	Dziesięć pól w jednym wierszu: Recipient / department, First name, Last name, Phone, Address line 1, Address line 2, City, Country, State / province i ZIP / postal code. Kliknij Add all.
	Billing address	Pole wyboru Same as shipping address, a następnie dziesięć pól rozliczeniowych (Department / attention, Billing first name i tak dalej) w wierszu, który jest ukryty, gdy pole jest zaznaczone. Kliknij Add all.
Layout	Row	Pusty wiersz na pola. Zobacz Grupuj pola w wiersze.

Aby dodać pojedyncze pole adresu zamiast całego bloku, kliknij Show the individual address fields w sekcji Address blocks. Pola dodane przez blok adresu nie są zapisywane w Shopify, dopóki ich nie zmapujesz. Zobacz Mapowanie odpowiedzi do Shopify.

Ustawienia pola

Kliknij pole w podglądzie lub w panelu Elements. Jego ustawienia otworzą się po prawej w sekcjach. Widzisz tylko te sekcje, które dotyczą danego rodzaju pola.

Sekcja	Ustawienia
Content	Label, czyli pytanie, które czyta kupujący. Placeholder, czyli blady tekst w pustym polu. Help text, wyświetlany pod polem. Default, czyli odpowiedź wypełniona po otwarciu formularza (dla pojedynczego Checkbox: Ticked by default).
Options	Dla Dropdown, Checkboxes i Radio buttons. Kliknij Add option lub Change, aby edytować opcje: wpisz Label każdej opcji, przeciągnij, aby zmienić kolejność, Add another option lub Bulk add jedna opcja w wierszu. Customer tags są dodawane do klienta Shopify, gdy zatwierdzony zostanie kupujący, który wybrał tę opcję (do 40 znaków każdy). Wyłącz Use the label as the value, aby zapisywać coś innego niż to, co czyta kupujący. Dropdown ma też Allow multiple choices. Radio buttons mają także Other option, Other label i Other placeholder.
Upload	Dla File upload i pól dokumentów. Accepted: Only certain file types (następnie wypisz je w File types) lub Any file type. Max size: od 1 do 20 MB. Allow more than one file.
Phone number	Show country flag and dial code. Po włączeniu: Check the number is valid i Default country (From the buyer’s browser, chyba że wybierzesz inny).
Date and time	Asks for: Date, Time lub Date and time. Date format, Time format, Other language dla selektora daty oraz Limit the range z Earliest i Latest.
Validation	Required. Po włączeniu: Error message, wyświetlany, gdy pole pozostaje puste; wpisz {{ label }}, aby uwzględnić etykietę pola. Limit characters z Min characters i Max characters, dla Short text, Long text, Email, Phone i Tax ID. Pozostaw limit pusty, aby go nie ustawiać.
Layout	Icon, rysowana na początku pola (nie dla Checkbox, Checkboxes, Radio buttons ani przesyłania plików). Hide label z Keep the label’s space i Still show the required mark. Column width, od 1 do 12. Number of options per line, od 1 do 5, dla Checkboxes i Radio buttons.
Visibility	Conditional display: pokaż, ukryj, wymagaj lub wyłącz pole na podstawie wcześniejszych odpowiedzi. Zobacz Pokazywanie, wymaganie lub wyłączanie pól za pomocą reguł.
Custom CSS	Custom CSS class, czyli nazwa klasy, którą możesz stylizować własnym CSS motywu. Zachowywane są tylko zwykłe nazwy klas.

Dla Dropdown, Country i State / province tekst zastępczy jest pierwszym wierszem listy, domyślnie Select…. Jeśli go opróżnisz, Select… wróci.

Tekst statyczny ma mniej ustawień. Heading ma swój tekst w Label, a także Caption i Heading tag (Heading 1 do Heading 6). Paragraph ma Text, a HTML ma Markup. Ich Label to tylko nazwa widoczna w panelu Elements. Cały tekst statyczny ma też Column width, Visibility i Custom CSS.

Ustawienia pola są pogrupowane w sekcje, od tego, co czyta kupujący, do tego, kiedy pole się wyświetla.

Rozmieść pola

Przenieś pole

• W panelu Elements: przeciągnij pole za uchwyt. Upuść je na innym polu, aby umieścić je powyżej lub poniżej, na nazwie strony, aby przenieść je na koniec tej strony, lub na nazwie wiersza, aby umieścić je w tym wierszu.
• W podglądzie: kliknij pole, a następnie przeciągnij je za uchwyt po lewej stronie jego paska narzędzi (Drag to move this field). Upuść je na górnej lub dolnej krawędzi innego pola, aby umieścić je powyżej lub poniżej. Upuść je na lewej lub prawej krawędzi, aby umieścić oba obok siebie w wierszu.

Ustaw szerokości kolumn

Szerokości liczy się w 12 kolumnach, a każde nowe pole zaczyna od 12, czyli pełnej szerokości. Pola następujące po sobie dzielą wiersz, gdy ich szerokości się mieszczą, więc dwa pola po 6 stoją obok siebie, a trzy po 4 tworzą trzy kolumny.

• Przeciągnij Layout › Column width w ustawieniach pola lub
• kliknij Change width na pasku narzędzi zaznaczonego pola w podglądzie. Przełącza ono między jedną trzecią, połową i pełną szerokością.

Gdy formularz jest węższy niż 480 pikseli, na przykład na telefonie, każde pole zajmuje cały wiersz.

Grupuj pola w wiersze

Wiersz utrzymuje pola razem i może je otwierać nagłówkiem: etykietą i opisem nad polami. Możesz pokazać, ukryć lub przenieść cały wiersz naraz.

Aby utworzyć wiersz, zrób jedno z poniższych:

• Otwórz listę pól i kliknij Row w sekcji Layout. W panelu Elements pojawi się pusty wiersz. Kliknij w nim Add element, aby dodać pola.
• Otwórz listę pól i kliknij Select fields (widoczne, gdy strona ma dwa lub więcej pól poza wierszami). Zaznacz pola w panelu Elements, a następnie kliknij Group into row.
• Dodaj pole po lewej lub prawej stronie innego albo upuść jedno obok drugiego w podglądzie.

Kliknij nazwę wiersza w panelu Elements, aby otworzyć jego ustawienia:

Ustawienie	Co robi
Label	Tytuł wiersza. Kupujący widzą go nad polami wiersza.
Hide the heading block	Ukrywa etykietę i opis przed kupującymi. Są zachowane i wracają po wyłączeniu tej opcji.
Description	Tekst wyświetlany pod etykietą.
Icon	Ikona obok etykiety.
Conditional display	Pokaż lub ukryj cały wiersz na podstawie wcześniejszych odpowiedzi. Zobacz Pokazywanie, wymaganie lub wyłączanie pól za pomocą reguł.
Ungroup row	Rozbija wiersz. Jego pola pozostają na stronie.

W panelu Elements ikona oka wiersza ukrywa wszystkie jego pola, a Duplicate row go kopiuje. Aby wyjąć jedno pole z wiersza, zaznacz je i kliknij Remove from row.

Formularz Wholesale application używa wierszy z ukrytym blokiem nagłówka, ponieważ każda sekcja zaczyna się już od pola Heading.

Użyj kilku stron

1. Dodaj stronę

   Kliknij Add page na dole panelu Elements. Zostanie dodana strona o nazwie Untitled page 2 i otworzą się jej ustawienia. Wpisz nową Page name i naciśnij Enter.

2. Zamień strony w kroki

   Kliknij Content w panelu Elements i włącz Show step progress bar. Wybierz Step labels: Name and number, Name only lub Number only.

   Kupujący widzą teraz jedną stronę naraz z paskiem kroków u góry. Każda strona kończy się przyciskiem Continue, który sprawdza odpowiedzi na stronie przed przejściem dalej, a ostatnia strona kończy się przyciskiem wysyłania. Bez paska kroków wszystkie strony wyświetlają się jedna po drugiej w jednym formularzu.

3. Zdecyduj, czy kupujący mogą się cofać

   Każdy krok po pierwszym ma przycisk Back, ponieważ Let buyers go back a step jest domyślnie włączone. Aby to zmienić, kliknij Footer w panelu Elements. Wyłącz Let buyers go back a step, aby usunąć przycisk, lub zmień Back label. Te ustawienia są widoczne tylko wtedy, gdy pasek kroków jest włączony, a formularz ma dwie lub więcej stron.

Kliknij nazwę strony w panelu Elements, aby zobaczyć jej ustawienia:

Ustawienie	Co robi
Page name	Nazwa strony w kreatorze i na pasku kroków.
Hide the heading block	Zaczyna stronę od jej pierwszego pola. Nagłówek i opis są zachowane na później.
Heading i Description	Wyświetlane na górze strony.
Continue button label	Tekst przycisku Continue na stronie. Nie jest wyświetlany na ostatniej stronie.
Icon	Zastępuje numer tego kroku na pasku kroków. Widoczne tylko przy włączonym pasku kroków.
Header and footer	Use custom header i Use custom footer nadają temu krokowi własny tekst nagłówka i notatkę. Gdy kupujący mogą się cofać, własna stopka ma też Show Back button on this step. Widoczne tylko przy włączonym pasku kroków.
Visibility	Pokaż lub ukryj całą stronę na podstawie odpowiedzi ze wcześniejszych stron.
Delete page	Usuwa stronę i jej pola. Formularz potrzebuje co najmniej jednej strony, a strony z polem Email nie można usunąć, dopóki nie przeniesiesz tego pola.

Nagłówek i stopka

Kliknij Header na górze panelu Elements lub nagłówek w podglądzie:

• Show store logo, następnie Upload image: plik .jpg, .png lub .svg do 1 MB, około 200×60 pikseli.
• Heading i Subheading na górze formularza.
• Show this block, aby pokazać lub ukryć cały nagłówek.

Kliknij Footer na dole panelu Elements lub przyciski w podglądzie:

• Submit label, czyli tekst przycisku wysyłania.
• Reset button i Reset label, czyli przycisk czyszczący formularz.
• Full-width buttons lub Alignment: Left, Center lub Right.
• Note, czyli tekst wyświetlany przy przyciskach, oraz Put the note above the buttons.

Ukryj, skopiuj lub usuń pole

• Hide this block (ikona oka w panelu Elements lub na pasku narzędzi pola) usuwa pole z formularza dla kupujących, ale zachowuje je wraz z ustawieniami w kreatorze. Pole znika z podglądu i jest wyszarzone w panelu Elements. Kliknij tam jego oko, aby je przywrócić.
• Duplicate field umieszcza kopię zaraz po polu i zaznacza ją.
• Remove field (na pasku narzędzi lub na dole panelu ustawień) usuwa pole po zapisaniu.

Podgląd formularza

• Desktop preview i Mobile preview przełączają szerokość podglądu.
• Przycisk inspektora (ikona celownika) przełącza między edycją a testowaniem. Inspektor jest włączony po otwarciu kreatora, a przycisk ma napis Deactivate inspector: kliknięcie zaznacza elementy do edycji, a reguły nie działają, więc pole, które reguła by ukryła, nadal się wyświetla. Kliknij go, aby wyłączyć inspektora i wypełnić podgląd jak kupujący: reguły działają, a Continue i przycisk wysyłania sprawdzają odpowiedzi. Nic nie jest wysyłane. Kliknij go ponownie (Activate inspector), aby wrócić do edycji. Skrót to ⌘ Shift I na Macu lub Ctrl Shift I w systemie Windows.
• Language pokazuje formularz w języku, na który został przetłumaczony. Słowa jeszcze nieprzetłumaczone wyświetlają się po angielsku. Aby przetłumaczyć, wybierz Translate this form z … (More actions), co otwiera Translate.
• Preview (ikona oka) otwiera stronę formularza w Twoim sklepie w nowej karcie. Działa po zapisaniu i opublikowaniu formularza.

Zapisz zmiany

Kliknij Save na pasku zapisu. Pojawi się komunikat Form saved, a jeśli formularz jest Active, kupujący od razu otrzymują nową wersję. Discard odrzuca wszystko od ostatniego zapisu.

Jeśli coś wymaga poprawy, zapis zostaje odrzucony, a baner u góry podglądu wymienia każdy problem, na przykład Enter a form name lub dwa pola zapisane w tym samym polu Shopify. Jeśli wiersz kończy się przyciskiem ze strzałką, kliknij go, aby przejść od razu do pola lub ustawienia.

Kolejne kroki

• Pokazywanie, wymaganie lub wyłączanie pól za pomocą reguł – zadaj pytanie tylko wtedy, gdy wymaga tego wcześniejsza odpowiedź.
• Mapowanie odpowiedzi do Shopify – wybierz, gdzie każda odpowiedź jest zapisywana po zatwierdzeniu.
• Projektowanie formularza – dopasuj formularz do wyglądu sklepu.
• Tworzenie i publikowanie formularza – opublikuj formularz i sprawdź go w sklepie.