Jak stylizować formularze płatności za pomocą Stylu formularza

Przegląd

WP Simple Pay zawiera wbudowaną funkcję Styl Formularza, która pozwala dostosować wygląd formularzy płatności na Twojej stronie – bez potrzeby pisania własnego kodu CSS. Wybieraj spośród 8 gotowych motywów lub dostosuj poszczególne kolory, typografię i ustawienia układu, aby pasowały do Twojej marki.

Ustawienia Stylu Formularza są konfigurowane dla każdego formularza z osobna, dzięki czemu możesz stylizować każdy formularz płatności niezależnie.

Uwaga: Style formularzy dotyczą tylko formularzy płatności na stronie (typy wyświetlania: osadzony i wyskakujący). Jeśli Twój formularz korzysta z Stripe Checkout (poza stroną), te ustawienia nie będą miały zastosowania. Aby używać stylów formularzy, przełącz typ formularza na „Formularz płatności na stronie” w zakładce ustawień Ogólne.

Wymagania wstępne

• WP Simple Pay Pro z licencją Plus lub wyższą
• Formularz płatności korzystający z typu formularza na stronie (osadzony lub wyskakujący)

Dostęp do zakładki Styl Formularza

1. Przejdź do WP Simple Pay > Formularze Płatności w panelu administracyjnym WordPress.
2. Kliknij istniejący formularz, aby go edytować, lub utwórz nowy formularz.
3. Kliknij zakładkę Styl Formularza w edytorze formularza.

Zakładka Styl Formularza zawiera cztery podzakładki: Motywy, Kolory, Typografia i Projekt i Układ.

Wybór gotowego motywu

Gotowe motywy natychmiast stosują kompletny, skoordynowany zestaw stylów do Twojego formularza. Po zastosowaniu motywu możesz dalej dostosowywać poszczególne ustawienia w innych zakładkach.

1. W zakładce Styl Formularza wybierz podzakładkę Motywy (domyślnie zaznaczona).
2. Przeglądaj dostępne motywy. Każda karta motywu pokazuje podgląd palety kolorów i miniaturowy podgląd formularza.
3. Kliknij kartę motywu, aby ją wybrać.
4. Kliknij Opublikuj lub Zaktualizuj, aby zapisać.

Dostępne są następujące motywy:

Motyw	Opis	Kolor podstawowy
Domyślny	Domyślne style WP Simple Pay	Turkusowy
Zachód słońca	Ciepłe czerwone akcenty z jasnym tłem	Czerwony
Las	Świeży zielony motyw z czystym tłem	Zielony
Ocean	Uspokajająca niebieska paleta	Niebieski
Monochromatyczny	Prosty czarno-biały motyw	Czarny
Słońce	Jasne i radosne żółte akcenty	Żółty
Koralowy	Ciepła pomarańczowa paleta	Pomarańczowy
Minimalny	Czysty, minimalistyczny design	Szary

Ważne: Wybranie motywu aktualizuje wszystkie ustawienia kolorów i stylu do wartości motywu. Wszelkie niestandardowe zmiany dokonane w poszczególnych ustawieniach zostaną nadpisane.

Dostosowywanie kolorów

Kliknij podzakładkę Kolory, aby dostroić poszczególne ustawienia kolorów. Kolory są zorganizowane w sekcje.

Kolory tła

• Tło formularza — Kolor tła całego kontenera formularza.
• Tło pól wprowadzania — Kolor tła pól wprowadzania, selektorów i list rozwijanych.

Kolory tekstu

• Ogólny kolor tekstu — Domyślny kolor wszystkich elementów tekstowych w formularzu.
• Kolor tekstu etykiety — Kolor etykiet pól. Nadpisuje ogólny kolor tekstu tylko dla etykiet.
• Kolor tekstu pola wprowadzania — Kolor tekstu wewnątrz pól wprowadzania. Nadpisuje ogólny kolor tekstu tylko dla pól wprowadzania.

Kolory tytułu i opisu

• Kolor tytułu — Kolor tytułu formularza. W przypadku braku ustawienia używa ogólnego koloru tekstu.
• Kolor opisu — Kolor opisu formularza. Jeśli nie ustawiono, używany jest ogólny kolor tekstu.

Akcent i kolory obramowania

• Kolor podstawowy (akcent) — Używany do stanów fokusu, podświetleń i innych elementów akcentujących.
• Kolor obramowania — Kolor obramowania pól wprowadzania i innych elementów z obramowaniem.

Kolory stanu błędu

• Kolor obramowania błędu — Kolor obramowania stosowany do pól z błędami walidacji.
• Kolor tekstu błędu — Kolor tekstu komunikatów o błędach.

Kolory przycisków

• Tło przycisku — Kolor tła przycisku wysyłania.
• Tekst przycisku — Kolor tekstu przycisku wysyłania.
• Tło przycisku po najechaniu — Kolor tła po najechaniu kursorem na przycisk wysyłania.

Wszystkie pola kolorów obsługują kolory hex (np. #0f8569) i kolory rgba z przezroczystością (np. rgba(15, 133, 105, 0.8)). Kliknij próbkę koloru obok dowolnego pola, aby otworzyć selektor kolorów.

Dostosowywanie typografii

Kliknij podzakładkę Typografia, aby dostosować rozmiary i kroje czcionek.

Typografia etykiet

• Rozmiar czcionki etykiety — Rozmiar etykiet pól w pikselach. Domyślnie: 14px.
• Krój czcionki etykiety — Krój etykiet pól. Opcje: Normalny, Pogrubiony lub wartości numeryczne (100–900).

Typografia pól wprowadzania

• Rozmiar czcionki pola wprowadzania — Rozmiar tekstu w polach wprowadzania w pikselach. Domyślnie: 16px.

Typografia tytułu i opisu

• Rozmiar czcionki tytułu — Rozmiar tytułu formularza w pikselach. Domyślnie: 24px.
• Krój czcionki tytułu — Krój tytułu formularza. Opcje: Normalny, Pogrubiony lub wartości numeryczne (100–900).
• Rozmiar czcionki opisu — Rozmiar opisu formularza w pikselach. Domyślnie: 16px.
• Krój czcionki opisu — Krój opisu formularza. Opcje: Normalny, Pogrubiony lub wartości numeryczne (100–900).

Dostosowywanie projektu i układu

Kliknij podzakładkę Projekt i układ, aby dostosować ustawienia odstępów i promienia zaokrąglenia.

Promień zaokrąglenia

• Promień zaokrąglenia formularza — Kontroluje zaokrąglenie rogów kontenera formularza w pikselach. Ustaw na 0 dla kwadratowych rogów.
• Promień zaokrąglenia pól wprowadzania i przycisków — Kontroluje zaokrąglenie rogów pól wprowadzania i przycisków w pikselach.

Podgląd na żywo obok każdego ustawienia pokazuje efekt bieżącej wartości.

Odstępy

• Wypełnienie formularza — Kontroluje wewnętrzne odstępy (wypełnienie) kontenera formularza w pikselach.

Przywracanie stylów do domyślnych

Aby przywrócić wszystkie ustawienia stylu do wartości domyślnych:

1. W zakładce Styl formularza przewiń na dół dowolnej podzakładki.
2. Kliknij przycisk Resetuj style.
3. Potwierdź resetowanie, gdy zostaniesz o to poproszony.
4. Kliknij Opublikuj lub Zaktualizuj, aby zapisać formularz.

To resetuje wszystkie ustawienia kolorów, typografii i układu. Nie zmienia wybranego motywu.

Często zadawane pytania

Dlaczego nie widzę zakładki Styl formularza?

Zakładka Styl formularza wymaga licencji Plus lub wyższej. Jeśli masz licencję Personal, zamiast tego zobaczysz monit o uaktualnienie.

Dlaczego istnieje ostrzeżenie o formularzach poza witryną?

Style formularza dotyczą tylko formularzy płatności na stronie. Jeśli formularz jest ustawiony na używanie Stripe Checkout (poza witryną), ustawienia stylu formularza nie będą miały zastosowania. Zmień typ formularza na „Formularz płatności na stronie” w zakładce Ogólne edytora formularza.

Czy mogę używać różnych stylów dla każdego formularza?

Tak. Ustawienia stylu formularza są zapisywane dla każdego formularza, więc każdy formularz płatności może mieć swój własny, unikalny styl.

Czy style formularzy działają z formularzami nakładkowymi (modalnymi)?

Tak. Style formularzy mają zastosowanie zarówno do formularzy osadzonych, jak i formularzy nakładkowych/modalnych. W przypadku formularzy nakładkowych kolor tła formularza kontroluje tło obszaru zawartości modala.

Czy mogę nadal używać niestandardowego CSS wraz ze Stylem formularza?

Tak. Niestandardowy CSS będzie stosowany na ustawieniach stylu formularza.

Czy style formularzy wpływają na podgląd bloku Gutenberg?

Tak. Po wstawieniu formularza płatności za pomocą bloku WP Simple Pay w edytorze bloków, podgląd bloku odzwierciedla aktualne ustawienia stylu formularza.

Co się stanie, jeśli pole koloru pozostawię puste?

Puste pola dziedziczą rozsądne wartości domyślne. Na przykład kolory tekstu etykiety i pola wprowadzania powracają do ogólnego koloru tekstu. Kolory przycisków powracają do koloru podstawowego motywu.

Co dalej?

• Referencje ustawień stylu formularza – Kompletne odniesienie do każdego ustawienia i jego wartości domyślnej
• Typy wyświetlania metod płatności – Wybierz między układami zakładek i akordeonu