Tworzenie standardowego formularza

Ta strona przeprowadza przez cały formularz, w kolejności, w jakiej przedstawia go edytor.

1. Otwórz edytor Customize

   Przejdź do Quote settings. Na stronie Request a Quote znajdź kartę Customize i kliknij Customize. Edytor otworzy się na pełnym ekranie.

2. Otwórz kartę Quote form

   Edytor ma cztery karty – Button & widget, Quote form, Quote cart page i Success message. Otwórz Quote form.

3. Zacznij od szablonu

   Form template pokazuje szablon, na którym zbudowano Twój formularz, wraz z krótkim opisem, dla kogo jest przeznaczony.

   Kliknij Change. Otworzy się selektor z nagłówkiem Choose a form template i komunikatem „Select a starting point. The form fields will change only after you confirm.” Dostępne są trzy szablony:

   Szablon	Jak opisuje go aplikacja	Oznaczenie
   Simple quote form	„Best for most stores. Includes login autofill, contact details, company, quantity, request message, and file upload.”	Fast setup · 7 fields
   Detailed quote form	„For custom orders, delivery, installation, or project-based quotes. Includes login autofill guidance.”	More details · 14 fields
   B2B customer form	„For wholesale or business buyers who need company, shipping, billing, and payment term information”	B2B

   Wybierz ten, którego opis odpowiada pracy, dla której wyceniasz, a następnie kliknij Use this template, aby potwierdzić. Cancel pozostawia bieżący formularz bez zmian. Zrób to teraz, zanim zaczniesz edytować pola.

   

   Zacznij od szablonu, a nie od pustego formularza.

   Uwaga

   Wybranie innego szablonu zastępuje bieżącą listę pól. Sekcje i pola widoczne na ekranie zostają zamienione na własne pola nowego szablonu, więc każda dodana sekcja, każde zmienione pole i wszystko, co usunięto, znika razem z nimi. Najpierw wybierz szablon, potem dostosowuj.

4. Zdecyduj, czy formularz ma się pokazywać na stronach produktów

   W sekcji Product page form display – „Show the quote form directly on product pages” – zaznacz Enable product page form display, jeśli chcesz, aby klienci wypełniali formularz bez opuszczania produktu.

   Po zaznaczeniu pojawia się Form position on product page, lista rozwijana z trzema opcjami:

   Pozycja	Gdzie ląduje formularz
   Below Add to Cart button	Wysoko na stronie, tuż pod przyciskami zakupu – najbardziej widoczna opcja.
   Below product description	Po opisie sprzedażowym, dla kupującego, który go przeczytał.
   Below product information	Na końcu bloku informacji o produkcie.

   

   Wyłącz to ustawienie, jeśli wolisz, aby klienci najpierw zbudowali koszyk oferty.

5. Przejdź przez Form builder

   Form builder – „Manage sections, rows, fields, and validation with the visual form builder” – zawiera Twoje pytania, pogrupowane w sekcje. To, które sekcje tam są, zależy od właśnie wybranego szablonu:

   Szablon	Sekcje w kreatorze
   Simple quote form	Contact information · Extra info
   Detailed quote form	Contact information · Shipping address · Extra info
   B2B customer form	Contact information · Company information · Shipping address · Billing address · Payment terms · Extra info

   Z sekcją możesz zrobić trzy rzeczy:

   • Włączyć lub wyłączyć ją. Otwórz ustawienia sekcji i zaznacz lub odznacz Enable. Wyłączona sekcja nie jest pokazywana klientowi, bez względu na to, ile zawiera pól.
   • Zmienić jej nazwę. Ten sam panel ustawień ma pole Label – zmień je na to, jak nazwaliby ją Twoi kupujący.
   • Przenieść ją. Przeciągnij sekcję za uchwyt, aby zmienić kolejność w formularzu.

   Rozwiń sekcję strzałką, aby zobaczyć jej pola, i użyj Add element, aby dodać kolejne pole do tej sekcji.

   Pola kontaktowe i adresowe opisano w Pola informacji o kliencie, a firmę, rozliczenia i warunki płatności w Tworzenie formularza B2B.

   Notatka

   Wyszarzone elementy kreatora z linią z kłódką o treści „🔐 This feature is available on …” oznaczają, że funkcja należy do wyższego planu. Nic się nie zepsuło – otwórz Pricing plans w aplikacji, aby zobaczyć, co obejmuje Twój plan.

6. Edytuj pole

   Kliknij dowolne pole w kreatorze, a otworzą się jego własne ustawienia z nagłówkiem zawierającym nazwę pola i tekst „Customize how this field appears on the form.”

   Ustawienie	Co robi
   Label	Tekst, który czyta klient. To ustawienie, które sprzedawcy zmieniają najczęściej.
   Hide label	Zachowuje pole, ale usuwa etykietę nad nim.
   Placeholder	Szary przykładowy tekst w pustym polu. Użyj go do pokazania pożądanego formatu – „e.g. 500 units” jest lepsze niż puste pole.
   Help text	Linia pod polem, na wszystko, co jest zbyt długie na tekst zastępczy.
   Type	Jakiego rodzaju jest to pole i co klient może w nim wpisać.
   Required	Formularz nie zostanie wysłany bez tego pola. Wymagaj jak najmniejszej liczby pól, bez których możesz się obejść.
   Options / Add option	Wybory w polu wyboru, grupie przycisków radio lub grupie pól wyboru.
   Choose default value	Wartość, z jaką pole startuje po załadowaniu formularza.
   Limit characters	Włącza Min characters i Max characters.
   Column width	Jaką część wiersza zajmuje pole, aby dwa krótkie pola mogły stać obok siebie.
   Custom HTML class	Nazwa klasy dla własnego CSS – zobacz Dodawanie własnego CSS.
   Remove	Usuwa pole. Dotyczy tylko Twoich własnych pól: wbudowane pola kontaktowe i adresowe są chronione i nie mają opcji Remove.

   

   Kliknij każdy element i skonfiguruj go dalej (jeśli trzeba)

   Zakończ przyciskiem Save changes w panelu pola lub Cancel, aby odrzucić edycję.

   Uwaga

   Limit characters jest walidowane podczas pisania: Min characters i Max characters muszą być liczbami całkowitymi równymi 0 lub większymi, a minimum nie może być większe od maksimum. Jeśli się pomylisz, edytor zablokuje zapis.

7. Ułóż pola w odpowiedniej kolejności

   Kolejność pól zmienia się przez przeciąganie. Chwyć pole za uchwyt przeciągania na lewym końcu jego wiersza i upuść tam, gdzie chcesz. Sekcje mają własny uchwyt przeciągania i przenosi się je tak samo.

   Kolejność ma większe znaczenie, niż się wydaje: formularz, który pyta o kod pocztowy dostawy przed imieniem i nazwiskiem, brzmi jak baza danych, a nie rozmowa.

   

   Przeciągnij i upuść element, aby zmienić jego pozycję/kolejność w formularzu oferty

8. Dodaj własne pytania

   Extra info zaczyna się od tego, co umieszcza tam szablon, i różni się to w zależności od szablonu. Simple quote form ma Quantity i Upload files; Detailed quote form ma Project detail i Delivery service; B2B customer form ma Message.

   Użyj Add element, aby dodać wszystko inne, czego potrzebujesz – czas realizacji, datę dostawy, numer referencyjny projektu.

   Jeśli grupa pytań łączy się ze sobą i nie pasuje do istniejącej sekcji, użyj Add section, aby utworzyć nową.

   Ważne

   Jedno pole nie jest opcjonalne: formularz musi zawierać element, którego name zawiera słowo email. Aplikacja blokuje zapis i informuje o tym – Add an element whose name contains “email”. Otherwise, customers won’t receive the quote email. Bez niego nic, co wycenisz, nigdy nie dotrze do klienta.

   

   Kliknij Add element, aby dodać kolejne własne pola do formularza oferty

   

9. Nadaj formularzowi styl

   Style pokazuje ustawienie wstępne używane przez formularz, z przyciskiem Change, który otwiera pozostałe. Dostępne ustawienia to Material filled, Classic, Flat, Flat round, Classic round, Line, Line round i Material outlined – każde pokazane jako mały obrazek pola, więc wybieraj na oko, a nie po nazwie.

   Obok jest Match theme styling if possible. Zaznacz je, a formularz zapożyczy czcionki i pola z Twojego motywu, co zwykle jest najkrótszą drogą do formularza, który nie wygląda na doklejony. Aplikacja zaznacza, że „Theme styling applies on your storefront and is not shown in this preview”, więc oceniaj to w sklepie, a nie tutaj.

   Customize text ustawia Font style, Title bar font size i Title bar font weight. Customize form color ustawia poszczególne kolory – Title bar color, Title bar background, Color, Background color, Border color, Button color, Button background color, Button border i Quote popup primary color.

   

   Szczegóły: Dopasowanie stylu do motywu.

10. Sprawdź formularz w Preview

    Panel Preview znajduje się obok edytora i odświeża się w trakcie pracy. Warto użyć dwóch kontrolek na jego pasku narzędzi, zanim zapiszesz:

    • Przycisk stanu klienta, który przełącza podgląd między Guest a Logged-in – widzą oni różne formularze.
    • Przełącznik widoku komputerowego i mobilnego, ponieważ długi formularz na telefonie to zupełnie co innego.

11. Zapisz i przetestuj samodzielnie

    Zmień cokolwiek, a pojawi się pasek zapisu Shopify z przyciskami Save i Discard changes. Kliknij Save. Jeśli jakieś pole nadal ma błąd walidacji, edytor odmówi i wyświetli „Please resolve validation errors before saving.” – popraw wskazane pole i zapisz ponownie.

    Następnie przejdź do sklepu i wyślij prawdziwe zapytanie testowe. Sprawdź, czy trafiło do Quote list ze wszystkim, czego oczekiwano.

    

    Formularz w sklepie, z opcją Quote form appearance ustawioną na Multiple step.

Notatka

Szablon wyznacza punkt wyjścia, a nie granicę. Wszystko, co wnosi szablon, można edytować lub usunąć, a wszystko, czego nie ma, można dodać przez Add element lub Add section. Pamiętaj tylko, że późniejsza zmiana szablonu to nowy start, a nie edycja – zastępuje listę pól, którą zbudowano.

Uwaga

Zawsze wyślij jedno zapytanie testowe samodzielnie, zanim uruchomisz formularz. To jedyny sposób, aby potwierdzić, że pola, e-mail i rekord oferty do siebie pasują.

Gdzie znajdują się pozostałe ustawienia

Karta Quote form to tylko pytania. Kilka rzeczy, których sprzedawcy tu szukają, znajduje się na innych kartach tego samego edytora:

Czego chcesz	Karta	Co znajdziesz
Formularz jako jedna strona lub w krokach	Quote cart page	Quote form appearance – „Controls how the quote form looks on the quote cart page” – ustawiane na Multiple step lub Single page.
Co pokazują wiersze produktów	Quote cart page	Product list columns – „The product details shown as columns in the customer's quote cart” – zobacz Grupa produktów w ofercie.
Umożliwienie klientom grupowania produktów	Quote cart page	Enable Quote Sections – „Lets customers group the products in their quote cart into named sections” – zobacz Grupa produktów w ofercie.
Tekst i umiejscowienie przycisku	Button & widget	Tekst przycisku, akcja po kliknięciu, pozycja przycisku i to, kto go widzi.
Co dzieje się po wysłaniu	Success message	Tekst podziękowania i Redirect to custom URL.

Notatka

Sam edytor ostrzega o tym, jeśli spróbujesz przejść między kartami w trakcie edycji: „Save your changes before switching tabs to avoid losing them.”

Następne kroki

• Pola informacji o kliencie – dopracuj to, o co pytasz
• Grupa produktów w ofercie – kolumny produktów i sekcje oferty na stronie koszyka oferty
• Dodawanie reCAPTCHA – chroń formularz przed spamem
• Tworzenie formularza B2B – szablon dla kupujących biznesowych