Hur man stylar Stripe-betalningsformulär i WordPress

Har du någonsin skapat den perfekta webbplatsen där färgerna är precis rätt, typsnitten är vackra, bara för att upptäcka att ditt betalningsformulär ser… malplacerat ut?

Jag har varit där. Du lägger all denna tid på att få din webbplats att se professionell och pålitlig ut, men den generiska knappen "Betala nu" eller standardfältens stilar matchar helt enkelt inte ditt varumärke. Det kan få det sista, viktigaste steget för att få betalt att känna sig frånkopplat från resten av kundens upplevelse.

Det var då jag lärde mig hur kraftfulla några enkla stiljusteringar kan vara. Och med rätt betalningsplugin behöver du inte anlita en utvecklare eller gräva igenom komplicerade temafiler för att få det gjort.

Oroade du dig för att detta blir för tekniskt? Det behöver du inte vara. Här krävs ingen kodningserfarenhet. Jag kommer att hålla mig till enkla, steg-för-steg-instruktioner, och för de mest kraftfulla anpassningarna handlar det egentligen bara om att veta vad man ska kopiera och var man ska klistra in det.

I den här guiden visar jag dig nybörjarvänliga sätt att anpassa dina Stripe-betalningsformulär. Jag kommer att täcka allt från visuella justeringar utan kod till användning av anpassad CSS för fullständig kontroll över designen.

Anpassa Stripe-betalningsformulär i WordPress

Varför styla dina Stripe-betalningsformulär?

Det sista steget i varje försäljning är betalningen, och utformningen av ditt betalningsformulär spelar en stor roll i det ögonblicket. Ett formulär som ser rent, professionellt och konsekvent ut med resten av din webbplats bygger förtroende och försäkrar kunderna om att deras information är säker.

Tänk på det som en fysisk butik; en sammanhängande, välvarumärkt kassa känns säkrare än en generisk. Dessa små designdetaljer skapar en sömlös upplevelse som direkt kan påverka dina konverteringsgrader.

Lyckligtvis behöver du inte vara designer för att göra meningsfulla förbättringar.

Styling med inbyggda inställningar

Jag använder WP Simple Pay hela tiden för att skapa Stripe-betalningsformulär eftersom det inte kräver ytterligare plugins eller ens att skapa ett komplicerat kassasystem.

Det innehåller också några inbyggda alternativ som hjälper dig att anpassa dina formulär med bara ett par klick.

Innan vi börjar är det bra att ha WP Simple Pay installerat på din webbplats. Om du inte har använt det ännu, här är ett par nybörjarvänliga handledningar som hjälper dig att komma igång:

• Hur man lägger till ett betalningsformulär på en sida i WordPress (utan kod)
• Hur man lägger till en "Köp nu"-knapp på din WordPress-webbplats

När du har skapat ett Stripe-betalningsformulär med WP Simple Pay är du redo att styla det. Låt oss börja med hur du gör det direkt från din WordPress-instrumentpanel.

Hur man anpassar betalningsknappen med WP Simple Pay

Den mest framträdande delen av ditt formulär är betalningsknappen. För att ge den en snabb stiljustering kan du välja mellan två utseenden direkt i formulärinställningarna.

WP Simple Pay låter dig ändra stilarna för knappen för utcheckning, betalningsknappen och knappen för att lägga till kupong i individuella formulärinställningar.

Besök helt enkelt betalningsformuläret du vill redigera och justera knappstilen i fältinställningarna.

Navigera först till fliken Betalningsformulär och klicka på det betalningsformulär du vill styla.

Klicka sedan på fliken Formulärfält. Här kan du välja mellan Stripe-blå eller Standard för betalningsknappen.

Här är en snabb titt på de stylade betalningsknapparna:

Huvudströmbrytaren: "Åsiktsfulla stilar"

För att säkerställa att dina formulär ser bra ut från början, inkluderar WP Simple Pay en inbyggd stilmall.

Den kallas "Åsiktsfulla stilar" eftersom den tillämpar en standarddesign på formulärets layout, marginaler och responsiva beteende.

För de flesta användare är det bäst att ha den påslagen.

WP Simple Pays stilar är utformade för att se bra ut direkt utan ansträngning. Men om du känner dig säker och vill ha en tom duk för att låta ditt temas egna stilar ta över, har du absolut den möjligheten!

Du kan stänga av våra stilar genom att gå till WP Simple Pay → Inställningar → Allmänt → Avancerat och ställa in Åsiktsfulla stilar till Inaktiverad.

Nu när du vet hur de inbyggda inställningarna för WP Simple Pay fungerar, låt oss utforska hur du kan ta full kontroll över ditt formulärs design.

Det anpassade sättet – Styla ditt formulär med CSS

Medan de inbyggda inställningarna är bra för snabba ändringar, kanske du vill att ditt betalningsformulär ska matcha din webbplats unika varumärke perfekt. Det är där CSS (Cascading Style Sheets) kommer in. Det är språket som webbläsare använder för att styla webbsidor, och du kan använda det för att ta full kontroll över ditt formulärs design.

Är du orolig för att detta blir för tekniskt? Var inte det. För de flesta ändringar är det lika enkelt som att kopiera och klistra in ett litet textavsnitt på rätt ställe. Jag ska visa dig exakt hur.

Nästa steg beror på vilken typ av tema du använder, antingen ett klassisk tema eller ett blocktema.

Klassiska teman använder det äldre anpassningsverktyget och förlitar sig ofta på widgets och sidmallar. Blockteman, å andra sidan, använder den nyare webbplatsredigeraren, som låter dig designa hela din webbplats med block.

Låt oss börja med klassiska teman.

Lägga till anpassad CSS på din WordPress-webbplats med anpassningsverktyget

Det säkraste och enklaste stället att lägga till anpassad CSS på din WordPress-webbplats är Temaanpassaren. På så sätt kommer dina ändringar inte att gå förlorade när du uppdaterar ditt tema.

1. Från din WordPress-instrumentpanel, navigera till Utseende → Anpassa.
2. En ny panel öppnas till vänster, som visar en liveförhandsgranskning av din webbplats till höger.
3. Klicka på fliken "Ytterligare CSS" längst ner i panelen.

En textruta visas där du kan klistra in koden. Till exempel,

simpay-checkout-btn

{bakgrundsfärg:

#800080!important; /* Detta är en standardlila *}

Denna specifika kod ändrar färgen på betalknapparna på alla dina WP Simple Payment-formulär på webbplatsen till lila.

All CSS-kod du lägger till här kommer att tillämpas på din webbplats, vilket gör att du kan åsidosätta ditt temas standardstilar. Medan du skriver ser du en förhandsgranskning av dina ändringar till höger.

Ett annat exempel är att skapa ett CSS-kodrecept för att lägga till en ljusgrå bakgrund och rundade hörn till fälten i betalningsformuläret. Du kan klistra in detta direkt i rutan "Ytterligare CSS" i WordPress Customizer.

Använda AI för att skapa CSS-recept

Vill du inte skriva CSS från grunden? Det behöver du inte. Du kan använda en AI-assistent som Gemini Pro för att generera anpassade recept åt dig. Beskriv bara vad du vill uppnå på enkel svenska. Du kan till exempel fråga:

‘Skriv CSS-kod för att ge WP Simple Pay-knappen en subtil gradientbakgrund och göra texten fet.’

AI är en kraftfull partner för att skapa anpassade stilar och ger dig en bra utgångspunkt som du sedan kan testa och finjustera på din webbplats.”

Lägga till anpassad CSS med blockredigeraren

Om din webbplats använder ett blocktema hanterar du din design med den fullständiga webbplatsredigeraren istället för Customizer.

Gå först till Utseende → Redigerare i din WordPress-instrumentpanel.

I sidofältet till vänster klickar du på ikonen Sidor. Hitta sedan sidan som innehåller WP Simple Pay-betalningsformuläret.

Du ser nu WordPress-redigeraren. Klicka på Ytterligare CSS längst ner till höger på skärmen för att öppna rutan.

Det fina med att använda Blockredigeraren är att den ger en specifik plats på varje sida eller inlägg för att lägga till CSS som *endast* gäller för den enskilda sidan.

Detta är utmärkt för engångsändringar. Du kan till exempel enkelt ändra färgen på titeln i betalningsformuläret.

Detta är bara ett av sätten du kan använda Blockredigeraren för att anpassa ditt betalningsformulär på din webbplats.

Kom ihåg att du inte behöver vara utvecklare eller skriva koden från grunden. Prova Gemini Pro eller välj ett annat AI-verktyg för att hjälpa dig att ta fram recept.

Lägga till anpassad CSS med kodavsnitt

Medan Customizer och Blockredigeraren båda är mycket användbara för snabba justeringar, är ett kraftfullare och mer organiserat tillvägagångssätt att använda ett dedikerat plugin som WPCode, vilket håller dina stilar säkra och separerade från ditt tema.

WPCode är ett lättviktigt och gratis plugin som låter dig säkert lägga till anpassade kodavsnitt – som CSS, HTML eller JavaScript – utan att någonsin behöva redigera dina temafiler direkt.

Det är ett utmärkt sätt att hålla dina anpassningar organiserade och oberoende av ditt tema, så att du aldrig förlorar dem under en uppdatering.

När du har installerat och aktiverat WPCode, gå till Kodavsnitt → Lägg till avsnitt i din WordPress-instrumentpanel.

Klicka på rutan som säger Lägg till din anpassade kod (Nytt avsnitt) och ge ditt avsnitt ett namn, som WP Simple Pay Form Styling.

Under Code Type, välj CSS Snippet från rullgardinsmenyn.

Klistra in din CSS i kodrutan. Klicka sedan på Save Snippet och växla omkopplaren högst upp till Active.

Det var allt! Dina anpassade stilar är nu aktiva på dina WP Simple Pay-betalningsformulär, och du kan när som helst återgå till detta kodavsnitt för att göra ändringar.

Min favoritdel med att använda WPCode är att du enkelt kan experimentera och prova olika recept för att få dina formulär att se ut som du vill. Du kan använda pluginet för att tillämpa helt olika "teman" på ditt formulär med bara en kopia och klistra in.

Här är ett exempel, men kom ihåg att du har möjlighet att skapa obegränsade anpassningar för dina formulär med WPCode.

Det "moderna svävande kortet"

Den här stilen ger formuläret en premiumkänsla, vilket får det att se ut att sväva från sidan med en mjuk skugga och en subtil gradientbakgrund. Det är ett mycket populärt utseende i moderna webbappar.

Vad den gör:

✅ Använder rena, enkla fältstilar som passar den moderna estetiken.

✅ Omsluter formuläret i en behållare med rundade hörn och en mjuk skugga.

✅ Applicerar en mild, tvåfärgad grå gradient på bakgrunden.

Kopiera och klistra bara in det medföljande receptet i rutan och klicka på Update.

WPCode sköter resten. Du kan gå till betalningssidan för att förhandsgranska ditt formulär.

Redo att anpassa dina WordPress-betalningsformulär?

Du är nu utrustad med alla verktyg och tekniker du behöver för att omvandla dina betalningsformulär.

Vi har rest från enkla, inbyggda inställningar till den kraftfulla och flexibla kontrollen av anpassad CSS.

Du har lärt dig hur du med ett kraftfullt plugin som WPCode kan skapa ett pålitligt och organiserat hem för alla dina designjusteringar.

Om du vill skapa anpassade Stripe-betalningsformulär för din WordPress-webbplats är det bästa sättet att använda WP Simple Pay och WPCode.

Vill du ha fler tips om hur du skapar högkonverterande Stripe-betalningsformulär och varumärkta landningssidor utan kod? Jag rekommenderar följande guider:

• Skapa en landningssida för Stripe-betalningar i WordPress
• Hur du skapar perfekta betalningsformulär i WordPress (9 enkla tips)
• Hur man använder mallar för betalningsformulär i WordPress för att öka försäljningen
• Hur man skapar formulärspecifika e-postbekräftelsemeddelanden i WordPress

Vad väntar du på? Kom igång med WP Simple Pay idag!

För att läsa fler artiklar som denna, följ oss på X.