Hur du stylar dina betalningsformulär med Form Style

Översikt

WP Simple Pay inkluderar en inbyggd funktion för formulärstilar som låter dig anpassa utseendet på dina betalningsformulär på webbplatsen – ingen anpassad CSS krävs. Välj bland 8 fördesignade temamallar eller finjustera enskilda färger, typografi och layoutinställningar för att matcha ditt varumärke.

Form Style-inställningar konfigureras per formulär, så du kan styla varje betalningsformulär oberoende.

Obs: Formulärstilar gäller endast för betalningsformulär på webbplatsen (inbäddade och overlay-visningstyper). Om ditt formulär använder Stripe Checkout (utanför webbplatsen) kommer dessa inställningar inte att träda i kraft. För att använda formulärstilar, byt formulärtyp till "Betalningsformulär på webbplatsen" i fliken Allmänna inställningar.

Förutsättningar

• WP Simple Pay Pro med en Plus-licens eller högre
• Ett betalningsformulär som använder formulärtypen på plats (inbäddad eller overlay)

Åtkomst till fliken Form Style

1. Navigera till WP Simple Pay > Betalningsformulär i din WordPress-admin.
2. Klicka på ett befintligt formulär för att redigera det, eller skapa ett nytt formulär.
3. Klicka på fliken Form Style i formulärredigeraren.

Fliken Form Style innehåller fyra underflikar: Teman, Färger, Typografi och Design & Layout.

Välja en temamall

Temamallar tillämpar omedelbart en komplett, samordnad uppsättning stilar på ditt formulär. Efter att ha tillämpat ett tema kan du ytterligare anpassa enskilda inställningar på de andra flikarna.

1. På fliken Form Style, välj underfliken Teman (vald som standard).
2. Bläddra bland de tillgängliga temana. Varje temakort visar en förhandsgranskning av färgpaletten och en miniformulärförhandsgranskning.
3. Klicka på ett temakort för att välja det.
4. Klicka på Publicera eller Uppdatera för att spara.

Följande teman är tillgängliga:

Tema	Beskrivning	Primär färg
Standard	WP Simple Pays standardutformning	Smaragdgrön
Solnedgång	Varma röda accenter med ljus bakgrund	Röd
Skog	Fräscht grönt tema med ren bakgrund	Grön
Hav	Lugnande blå palett	Blå
Monokrom	Enkelt svartvitt tema	Svart
Solsken	Ljusa och glada gula accenter	Gul
Korall	Varm orange palett	Orange
Minimal	Ren, minimalistisk design	Grå

Viktigt: Att välja ett tema uppdaterar alla färg- och stilinställningar till tematets värden. Alla anpassade ändringar du har gjort i enskilda inställningar kommer att skrivas över.

Anpassa färger

Klicka på underfliken Färger för att finjustera enskilda färginställningar. Färger är organiserade i sektioner.

Bakgrundsfärger

• Formulärbakgrund – Bakgrundsfärg för hela formulärbehållaren.
• Inmatningsbakgrund – Bakgrundsfärg för inmatningsfält, select och dropdowns.

Textfärger

• Allmän textfärg – Standardfärg för alla textelement i formuläret.
• Etiketttextfärg – Färg för fälteetiketter. Åsidosätter den allmänna textfärgen endast för etiketter.
• Inmatningstextfärg – Färg för text inuti inmatningsfält. Åsidosätter den allmänna textfärgen endast för inmatningar.

Titel- & beskrivningsfärger

• Titel färg – Färg för formulärets titel. Faller tillbaka till allmän textfärg om den inte är inställd.
• Beskrivningsfärg – Färg för formulärets beskrivning. Faller tillbaka till allmän textfärg om den inte är inställd.

Accent- & kantfärger

• Primär (accent) färg – Används för fokuslägen, markeringar och andra accentelement.
• Kantfärg – Kantfärg för inmatningsfält och andra kantade element.

Färger för felstatus

• Felkantfärg – Kantfärg som appliceras på fält med valideringsfel.
• Feltextfärg — Textfärg för felmeddelanden.

Knappfärger

• Knappbakgrund — Bakgrundsfärg för inskickningsknappen.
• Knapptext — Textfärg för inskickningsknappen.
• Knappbakgrund vid hovring — Bakgrundsfärg när du för muspekaren över inskickningsknappen.

Alla färfält stöder hexfärger (t.ex. #0f8569) och rgba-färger med transparens (t.ex. rgba(15, 133, 105, 0.8)). Klicka på färgprovet bredvid ett fält för att öppna färgväljaren.

Anpassa typografi

Klicka på underfliken Typografi för att justera teckenstorlekar och vikter.

Etiketttypografi

• Etikettstorlek — Storlek på fältetiketter i pixlar. Standard: 14px.
• Etikettvikt — Vikt på fältetiketter. Alternativ: Normal, Fetstil eller numeriska värden (100–900).

Inmatningstypografi

• Inmatningsstorlek — Storlek på text inuti inmatningsfält i pixlar. Standard: 16px.

Titel- och beskrivningstypografi

• Titelstorlek — Storlek på formulärstiteln i pixlar. Standard: 24px.
• Titelvikt — Vikt på formulärstiteln. Alternativ: Normal, Fetstil eller numeriska värden (100–900).
• Beskrivningsstorlek — Storlek på formulärbeskrivningen i pixlar. Standard: 16px.
• Beskrivningsvikt — Vikt på formulärbeskrivningen. Alternativ: Normal, Fetstil eller numeriska värden (100–900).

Anpassa design och layout

Klicka på underfliken Design & Layout för att justera inställningar för avstånd och kantradie.

Kantradie

• Formulär kantradie — Styr hur rundade hörnen på formulärbehållaren är, i pixlar. Ställ in på 0 för fyrkantiga hörn.
• Inmatnings- och knappkantradie — Styr hur rundade hörnen på inmatningsfält och knappar är, i pixlar.

En förhandsgranskning i realtid bredvid varje inställning visar effekten av det aktuella värdet.

Avstånd

• Formulär stoppning — Styr det interna avståndet (stoppningen) i formulärbehållaren, i pixlar.

Återställa stilar till standard

För att återställa alla stilinställningar till deras standardvärden:

1. I fliken Form Style, scrolla till botten av valfri underflik.
2. Klicka på knappen Återställ stilar.
3. Bekräfta återställningen när du uppmanas.
4. Klicka på Publicera eller Uppdatera för att spara formuläret.

Detta återställer alla färg-, typografi- och layoutinställningar. Det ändrar inte det valda temat.

Vanliga frågor

Varför ser jag inte fliken Form Style?

Fliken Form Style kräver en Plus-licens eller högre. Om du har en Personal-licens ser du en uppmaning att uppgradera istället.

Varför finns det en varning om formulär utanför webbplatsen?

Formulärstilar gäller endast för betalningsformulär på webbplatsen. Om ditt formulär är inställt att använda Stripe Checkout (utanför webbplatsen) kommer inställningarna för Form Style inte att träda i kraft. Ändra formulärtypen till "Betalningsformulär på webbplatsen" under fliken Allmänt i formulärredigeraren.

Kan jag använda olika stilar för varje formulär?

Ja. Inställningar för Form Style sparas per formulär, så varje betalningsformulär kan ha sin egen unika stil.

Fungerar formulärstilar med overlay (modal) formulär?

Ja. Formulärstilar gäller för både inbäddade formulär och overlay/modal-formulär. För overlay-formulär styr formulärets bakgrundsfärg bakgrunden för modal-innehållsområdet.

Kan jag fortfarande använda anpassad CSS vid sidan av Form Style?

Ja. Anpassad CSS kommer att tillämpas ovanpå Form Style-inställningarna.

Påverkar formulärstilar förhandsgranskningen av Gutenberg-blocket?

Ja. När du infogar ett betalningsformulär med WP Simple Pay-blocket i blockredigeraren återspeglar blockets förhandsgranskning formulärets aktuella stilinställningar.

Vad händer om jag lämnar ett färfält tomt?

Tomma fält ärver förnuftiga standardvärden. Till exempel återgår färger för etikett- och inmatningstext till den allmänna textfärgen. Knappfärger återgår till temat primärfärg.

Vad händer härnäst?

• Referens för Form Style-inställningar – Komplett referens för varje inställning och dess standardvärde
• Visningstyper för betalningsmetod – Välj mellan flikar och dragspelslayouter