Cum să-ți stilizezi formularele de plată cu Stilul Formularului

Prezentare generală

WP Simple Pay include o funcție încorporată Stilul Formularului care vă permite să personalizați aspectul formularelor de plată de pe site-ul dvs. — nu este necesar CSS personalizat. Alegeți dintre 8 presetări de temă pre-proiectate sau ajustați culorile individuale, tipografia și setările de aspect pentru a se potrivi mărcii dvs.

Setările Stilului Formularului sunt configurate per formular, astfel încât puteți stiliza fiecare formular de plată independent.

Notă: Stilurile formularelor se aplică numai formularelor de plată de pe site (tipuri de afișare încorporate și overlay). Dacă formularul dvs. utilizează Stripe Checkout (în afara site-ului), aceste setări nu vor intra în vigoare. Pentru a utiliza stilurile formularelor, comutați tipul formularului la „Formular de plată pe site” în fila de setări Generale.

Cerințe preliminare

• WP Simple Pay Pro cu o licență Plus sau superioară
• Un formular de plată care utilizează tipul de formular pe site (Integrat sau Overlay)

Accesarea filei Stil formular

1. Navigați la WP Simple Pay > Formulare de plată în administratorul WordPress.
2. Faceți clic pe un formular existent pentru a-l edita sau creați un formular nou.
3. Faceți clic pe fila Stil formular din editorul de formulare.

Fila Stil formular conține patru sub-tab-uri: Teme, Culori, Tipografie și Design și aspect.

Alegerea unei presetări de temă

Presetările de temă aplică instantaneu un set complet și coordonat de stiluri formularului dvs. După aplicarea unei teme, puteți personaliza în continuare setările individuale în celelalte file.

1. În fila Stil formular, selectați sub-tab-ul Teme (selectat implicit).
2. Răsfoiți temele disponibile. Fiecare card de temă afișează o previzualizare a paletei de culori și o mini-previzualizare a formularului.
3. Faceți clic pe un card de temă pentru a-l selecta.
4. Faceți clic pe Publicare sau Actualizare pentru a salva.

Următoarele teme sunt disponibile:

Temă	Descriere	Culoare primară
Implicit	Stilizarea implicită WP Simple Pay	Turcoaz
Apuserit	Accente roșii calde cu fundal deschis	Roșu
Pădure	Temă verde proaspătă cu fundal curat	Verde
Ocean	Paletă albastră calmantă	Albastru
Monocrom	Temă simplă alb-negru	Negru
Soare	Accente galbene luminoase și vesele	Galben
Coral	Paletă caldă de portocaliu	Portocaliu
Minimal	Design curat, minimalist	Gri

Important: Selectarea unei teme actualizează toate setările de culoare și stil la valorile temei. Orice modificări personalizate pe care le-ați făcut la setările individuale vor fi suprascrise.

Personalizarea culorilor

Faceți clic pe sub-fila Culori pentru a ajusta setările individuale de culoare. Culorile sunt organizate pe secțiuni.

Culori de fundal

• Fundal formular — Culoarea de fundal a întregului container al formularului.
• Fundal câmpuri de introducere — Culoarea de fundal a câmpurilor de introducere, selectărilor și listelor derulante.

Culori text

• Culoare text generală — Culoarea implicită pentru toate elementele de text din formular.
• Culoare text etichetă — Culoarea etichetelor câmpurilor. Suprascrie culoarea textului generală doar pentru etichete.
• Culoare text câmpuri de introducere — Culoarea textului din interiorul câmpurilor de introducere. Suprascrie culoarea textului generală doar pentru câmpurile de introducere.

Culori titlu și descriere

• Culoare titlu — Culoarea titlului formularului. Revine la culoarea textului generală dacă nu este setată.
• Culoare descriere — Culoarea descrierii formularului. Revine la culoarea textului generală dacă nu este setată.

Culori accent și bordură

• Culoare primară (accent) — Folosită pentru stări de focalizare, evidențieri și alte elemente de accent.
• Culoare bordură — Culoarea bordurii pentru câmpurile de introducere și alte elemente cu bordură.

Culori stare eroare

• Culoare bordură eroare — Culoarea bordurii aplicată câmpurilor cu erori de validare.
• Culoare text eroare — Culoarea textului pentru mesajele de eroare.

Culori butoane

• Fundal buton — Culoarea de fundal a butonului de trimitere.
• Text buton — Culoarea textului butonului de trimitere.
• Fundal la hover buton — Culoarea de fundal la trecerea cursorului peste butonul de trimitere.

Toate câmpurile de culoare acceptă culori hex (de ex., #0f8569) și culori rgba cu transparență (de ex., rgba(15, 133, 105, 0.8)). Faceți clic pe eșantionul de culoare de lângă orice câmp pentru a deschide selectorul de culori.

Personalizarea tipografiei

Faceți clic pe sub-tabul Tipografie pentru a ajusta dimensiunile și greutatea fonturilor.

Tipografie etichetă

• Dimensiune font etichetă — Dimensiunea etichetelor câmpurilor în pixeli. Implicit: 14px.
• Greutate font etichetă — Greutatea etichetelor câmpurilor. Opțiuni: Normal, Bold sau valori numerice (100–900).

Tipografie câmp de introducere

• Dimensiune font câmp de introducere — Dimensiunea textului din interiorul câmpurilor de introducere în pixeli. Implicit: 16px.

Tipografie titlu și descriere

• Dimensiune font titlu — Dimensiunea titlului formularului în pixeli. Implicit: 24px.
• Greutate font titlu — Greutatea titlului formularului. Opțiuni: Normal, Bold sau valori numerice (100–900).
• Dimensiune font descriere — Dimensiunea descrierii formularului în pixeli. Implicit: 16px.
• Greutate font descriere — Greutatea descrierii formularului. Opțiuni: Normal, Bold sau valori numerice (100–900).

Personalizarea designului și a aspectului

Faceți clic pe sub-tabul Design și aspect pentru a ajusta setările de spațiere și raza colțurilor.

Raza colțurilor

• Raza colțurilor formularului — Controlează cât de rotunjite sunt colțurile containerului formularului, în pixeli. Setați la 0 pentru colțuri pătrate.
• Raza colțurilor câmpurilor de introducere și a butoanelor — Controlează cât de rotunjite sunt colțurile câmpurilor de introducere și ale butoanelor, în pixeli.

O previzualizare live lângă fiecare setare arată efectul valorii curente.

Spațiere

• Spațiere formular — Controlează spațierea internă (padding) a containerului formularului, în pixeli.

Resetarea stilurilor la valorile implicite

Pentru a reseta toate setările de stil la valorile lor implicite:

1. În tabul Stil formular, derulați până la sfârșitul oricărui sub-tab.
2. Faceți clic pe butonul Resetare stiluri.
3. Confirmați resetarea când vi se solicită.
4. Faceți clic pe Publicare sau Actualizare pentru a salva formularul.

Aceasta resetează toate setările de culoare, tipografie și aspect. Nu modifică tema selectată.

Întrebări Frecvente

De ce nu văd fila Stil formular?

Fila Stil formular necesită o licență Plus sau superioară. Dacă aveți o licență Personal, veți vedea în schimb o solicitare de upgrade.

De ce există un avertisment despre formularele externe?

Stilurile formularelor se aplică numai formularelor de plată de pe site. Dacă formularul este setat să utilizeze Stripe Checkout (extern), setările Stil formular nu vor intra în vigoare. Schimbați tipul formularului în „Formular de plată pe site” din fila General a editorului de formulare.

Pot folosi stiluri diferite pentru fiecare formular?

Da. Setările Stil formular sunt salvate per formular, astfel încât fiecare formular de plată poate avea propriul stil unic.

Stilurile formularelor funcționează cu formularele de tip overlay (modal)?

Da. Stilurile formularelor se aplică atât formularelor încorporate, cât și formularelor overlay/modale. Pentru formularele overlay, culoarea de fundal a formularului controlează fundalul zonei de conținut modal.

Pot folosi în continuare CSS personalizat alături de Stil formular?

Da. CSS-ul personalizat va fi aplicat peste setările Stil formular.

Stilurile formularelor afectează previzualizarea blocului Gutenberg?

Da. Când inserați un formular de plată folosind blocul WP Simple Pay în editorul de blocuri, previzualizarea blocului reflectă setările curente de stil ale formularului.

Ce se întâmplă dacă las un câmp de culoare necompletat?

Câmpurile necompletate preiau valori implicite rezonabile. De exemplu, culorile textului etichetei și al intrării revin la culoarea generală a textului. Culorile butoanelor revin la culoarea primară a temei.

Ce urmează?

• Referință setări Stil formular – Referință completă a fiecărei setări și a valorii sale implicite
• Tipuri de afișare a metodei de plată – Alegeți între aspectele Tab și Acordeon