Vill du göra det enklare, snabbare och mer användarvänligt att samla in betalningar på din WordPress-webbplats? Med Multistep-betalningsformuläret i WordPress med hjälp av Forminator kan du skapa snygga, interaktiva formulär som vägleder användarna steg för steg genom betalningsprocessen. Detta är idealiskt för tjänstebaserade webbplatser, kursregistreringar, evenemangsbokningar eller enkla e-handelsbehov.
Forminators gratisversion är fullpackad med kraftfulla funktioner som dra-och-släpp-fält, dynamiska betalningsmetoder och Stripe-prenumerationsformulär, samtidigt som den åtgärdar vanliga problem som att lösa inläsningen av formuläret initialt, beräkningsfel, ogiltiga Stripe-nycklar, användarinloggningsformulär och integration med Google Sheet.
I den här bloggen går vi igenom hur du konfigurerar ditt eget flerstegsbetalningsformulär i WordPress med Forminator, och lyfter fram viktiga korrigeringar och funktioner för att säkerställa att allt går smidigt.
Varför använda Forminator för betalningsformulär?
Forminator är en kraftfull och användarvänlig formulärbyggare för WordPress som gör det otroligt enkelt att skapa anpassade betalningsformulär, även för nybörjare.
Med över 600 000 aktiva installationer är den betrodd av webbplatsägare inom olika branscher för allt från leadgenerering till onlinebetalningar och registreringar.
Det som skiljer Forminator från mängden är dess mångsidighet. Den erbjuder ett brett utbud av formulärtyper, inklusive betalningsformulär, registreringsformulär, inloggningsformulär, omröstningar, frågesporter och mer.
Viktigast av allt är att det har inbyggt stöd för Stripe och PayPal, vilket gör det enkelt att säkert samla in engångsbetalningar, prenumerationer eller donationer direkt via din webbplats, utan att behöva ytterligare plugins eller komplexa integrationer.
Forminator är också utmärkt på att bygga formulär i flera steg, vilket gör att du kan dela upp långa eller komplexa formulär i mindre, användarvänliga steg. Detta förbättrar inte bara användarupplevelsen utan minskar även antalet övergivna formulär.
Med funktioner som villkorlig logik, visuella förloppsindikatorer och beräkningsfält kan du skapa avancerade betalningsarbetsflöden skräddarsydda efter dina affärsbehov, oavsett om det gäller att boka tjänster, registrera sig för kurser eller sälja produkter.
Och eftersom det är ett gratis plugin får du tillgång till alla dessa robusta funktioner utan någon initial kostnad. För företag som letar efter en enkel, flexibel och modern lösning för att skapa betalningsformulär är Forminator ett av de bästa verktygen som finns.
Jämför: Square vs PayPal
Behöver du hjälp med att skapa ett anpassat betalningsformulär?
Låt Seahawks WordPress-experter bygga och optimera dina flerstegsformulär i Forminator, helt utformade, säkra och skräddarsydda efter dina behov.
Steg för att skapa ett WordPress-betalningsformulär med Forminator Forms
Att skapa en smidig betalningsupplevelse på din WordPress-webbplats är enklare än någonsin med Forminator.
Låt oss gå igenom steg-för-steg-processen för att konfigurera ett dynamiskt betalningsformulär med avancerade funktioner och viktiga korrigeringar som förbättrar funktionalitet, säkerhet och användbarhet.
Steg 1: Installera och aktivera Forminator-pluginet
Först och främst är installationen av Forminator-pluginet snabb och enkel.
- Gå till din WordPress-instrumentpanel och navigera till Plugins ⟶ Lägg till nytt.
- i sökfältetForminator”
- Klicka på Installera och sedan Aktivera.
Forminator är ett gratis plugin med över 600 000 aktiva installationer, som regelbundet uppdateras med korrigeringar som testinstrumentpanelens korrigering, inställningssidans korrigering och manuell aktivering, vilket säkerställer stabil prestanda. Det är också utrustat med korrigeringar för formulärinlämning och API-metoden för att stödja smidig backend-bearbetning.
Steg 2: Skapa ett nytt formulär från grunden
När den är aktiverad:
- Gå till Forminator ⟶ Formulär ⟶ Skapa ny.
- Välj Tomt formulär för att börja från början eller använd ett av alternativen för att korrigera förhandsgranskning av formulärmallar.
Lägg till en titel och underrubrik direkt i formulärbyggaren. Du kan använda anpassad stil eller använda korrekt CSS-syntax för att förbättra utseendet.
Forminator stöder avancerade formulär som inkluderar villkorligt synliga fält (tack vare den villkorliga logikfixen) och olika formulärtyper som korrigering av registreringsformulär för flera webbplatser och korrigering av kursinskrivningsformulär.
Formulärbyggaren undviker nu föråldrade tabellstrukturer och inkluderar ett flertal förbättringar av tillgängligheten, vilket säkerställer att dina formulär är användbara och kompatibla.
Steg 3: Lägg till fält för produkt- eller tjänsteval
Det här steget avgör hur användare väljer vad de betalar för, vare sig det är produkter, abonnemang eller tjänster.
Använda valfältet (för flera artiklar som soffor): Lägg till ett valfält för produktalternativ som Modern soffa, Klassisk eller Fåtölj.
- Aktivera flera val, prissättning och använd formler för beräkningsfält för att automatisera totaler.
- Formuläret hanterar nu korrigeringar för talformatering, korrigeringar för standardvärden och korrigeringar för samma rad, perfekt för produktlistningar.
Exempel på användningsfall: En möbelförsäljare kan skapa flera formulär för olika kategorier och hantera produktprissättning dynamiskt. Dessa formulär undviker problem som att formuläret misslyckas, inte fungerar och inkluderar betalningsrelaterade funktioner.
Använda radioknappsfältet med bilder (för visuellt val): Använd radioknappsfältet för att låta användare välja en produkt visuellt.
- Ladda upp produktbilder som soffbord för varje alternativ.
- Ange ett standardval och använd villkorlig logik för dynamiska flöden.
Med samma flikfix och designfix för varningsrutor upplever användarna nu ett smidigare gränssnitt. Dessutom möjliggör den redigerade textyarea-fixen formaterade beskrivningar med produktvisuella element.
Välj kontra Radio: Använd Välj för flera eller massval med beräkningar; välj Radioknappar när visuellt val och logik med ett enda val är viktigare.
Forminators uppdaterade version åtgärdar även problem som åtgärd för PDF-betalningsfält, åtgärd för PayPal-faktureringsuppgifter, åtgärd för Google Sheets-anslutning, validering av befintliga Google Sheets-filer och uppladdning av filer via inline, vilket gör den till en robust lösning för alla onlinebetalningsscenarier.
Håll utkik efter nästa steg, där vi lägger till betalningsgateways, tillämpar villkorlig logik och slutför ditt betalningsformulär med säker hemlig nyckelkryptering och säkerhetsåtgärder för sårbarheter.
Vill du ha en visuell genomgång? Se den här steg-för-steg-videon om hur du skapar ett flerstegsbetalningsformulär med Forminator och se hela processen i aktion!
Steg 4: Samla in kunduppgifter
När dina användare har valt produkterna eller tjänsterna är det dags att samla in deras kontakt- och leveransuppgifter. För bättre organisation och användarflöde, infoga en sidbrytning för att separera produktvalet från personlig information.
Rekommenderade fält att lägga till:
- Fullständigt namn: Använd namnfältet (inte bara ett vanligt textfält) för strukturerade inmatningar. Detta avancerade fält hjälper dig att undvika vanliga formulärfel som uppstår vid felaktigt formaterade namninmatningar.
- E-postadress med bekräftelse: Använd det inbyggda alternativet för e-postbekräftelse. Detta förhindrar problemet med ogiltiga eller felaktiga data och förbättrar leveransnoggrannheten. Stöder även e-postbaserad villkorlig logik.
- Telefonnummer: Lägg till ett nummerfält med internationell validering aktiverad, vilket säkerställer landsspecifik formatering. Se till att inkludera en korrigering för nummerformatering för att undvika datainkonsekvenser.
- Adress: Använd ett adressfält med flera rader och registrera: Gata, stad, delstat, land, postnummer.
- Leveransdatum och tid: Använd fält för datum- och tidsväljare. Dessa fält drar nytta av samma radkorrigering och korrigering av CSS-syntaxfel för att förbättra layout och användarupplevelse.
Dessa indata stöder även inline-validering av uppladdning av filer om användare behöver bifoga bilder (t.ex. betalningsbevis eller designreferenser).
Steg 5: Konfigurera betalningsinkasso
Infoga ytterligare en sidbrytning för att segmentera formuläret tydligt före betalningssteget. Detta förbättrar användbarheten och minskar risken för felkorrigering före inlämning orsakad av rörigt användargränssnitt.
Lägg till betalningsfältet (PayPal eller Stripe): Forminator erbjuder dynamiska betalningsmetoder, vilket gör att du kan välja mellan PayPal eller Stripe. Lägg till en baserat på dina önskemål:
- För PayPalintroducerade Forminator nyligen en korrigering av PayPals faktureringsuppgifter för att förbättra noggrannheten.
- För Stripesäkerställer den senaste lösningen för kryptering av hemliga nycklar säkra transaktioner.
Infoga beräkningsfält: Det här fältet summerar dynamiskt priset för alla valda produkter/tjänster. Det stöder nu korrigering av beräkningsfältets formler, vilket hjälper till att undvika trasiga totaler på grund av felaktig logik.
Kryssruta för samtycke: Inkludera alltid en kryssruta med anpassade villkor. Det här fältet drar nytta av standardfelmeddelandena i fältet, vilket säkerställer att användarna vet exakt vad som krävs.
Anslut betalkonto (PayPal eller Stripe): Gå till Forminator ⟶ Inställningar ⟶ Betalningar och ange: Klient-ID och hemlig nyckel
Växla mellan sandlådeläge för testning och liveläge för riktiga betalningar. Den manuella aktiveringsåtgärden låter dig växla lägen säkert utan att ange inloggningsuppgifter igen.
Steg 6: Ställa in prissättning och beräkningar
Nu när dina produkt- och betalningsfält är klara är det dags att tilldela priser och konfigurera logiken bakom formulärets dynamiska prissättning.
Steg:
Aktivera beräkningar på produktfält: Gå in i varje fält (Välj, Alternativ eller Kryssruta) och aktivera "Aktivera beräkning". Tilldela numeriska värden till varje alternativ.
Tilldela priser: Lägg till värden som:
- Modern soffa: $500
- Klassisk soffa: $350
- Vilstol: $600
Konfigurera beräkningsfältet: Lägg till ett beräkningsfält. Använd formelbyggaren för att summera de valda produktpriserna. Du kan nu förhindra felaktiga datakorrigeringar och problem med Ajax-inlämningsmetoder genom den uppdaterade logikredigeraren.
Byt namn på fältet: Ge beräkningsfältet en tydlig etikett, till exempel Totalbelopp eller Att betalas nu. Hjälper till att förhindra förvirring hos användarna och stöder standardvärdeskorrigering för tomma inlämningar.
Steg 7: Styling- och anpassningsalternativ
När ditt flerstegsbetalningsformulär i WordPress fungerar är det dags att anpassa dess utseende för en smidig och varumärkesvänlig upplevelse.
Under Forminators utseendeinställningar kan du välja mellan layoutstilar som Material, Standard eller Ärva från tema. Du kan ytterligare justera designen, anpassa teckensnitt, bredder och färger för att matcha ditt varumärke.
Dra även nytta av säkerhetsförbättringar och säkerhetsfixar för forminator-tillägg för att säkerställa att formulärstilen inte äventyrar prestanda eller säkerhet.
Slutligen låter beteendeinställningarna dig definiera vad som händer efter att formuläret skickats in, oavsett om det är ett tackmeddelande, en korrigering av sidans omladdning eller en omdirigering till en specifik sida.
Steg 8: Publicera flerstegsbetalningsformuläret
När du har skapat och anpassat ditt formulär publicerar du det genom att kopiera den genererade shortcoden. Klistra in den på valfri WordPress-sida med hjälp av ett shortcode-block. Tryck på publicera och testa ditt formulär.
Se till att formuläret övergår smidigt mellan stegen, att fälten visas korrekt (särskilt fel på villkorligt synliga fält) och att betalningarna behandlas utan förseningar.
Dessutom säkerställer korrigeringen av förhandsgranskningen av stängningsformuläret att förhandsgranskningsläget avslutas utan problem, vilket hjälper till att förhindra förvirring under testning.
Steg 9: Ytterligare tips och avancerade funktioner
För att ytterligare förbättra ditt formulär kan du överväga att använda villkorlig logik. Visa till exempel bara ett leveransfält om en specifik produkt är vald, vilket är enkelt att hantera tack vare korrigeringen av villkorligt synliga fält.
Konfigurera e-postmeddelanden med hjälp av lösningen för att lägga till flera mottagare för att meddela både administratören och användaren. Du kan spåra konverteringar och visa inskickade meddelanden i instrumentpanelen, vilket är bra för att spåra användningsdata.
Integrera dessutom Forminator med tredjepartsverktyg som Mailchimp, Slackoch Google Sheets.
Om formulär importerades tidigare men inte visas, säkerställer åtgärden "Importera formulär" och "Importeras inte" att de visas korrekt. Dessa integrationer, i kombination med skapandet av förinställda korrigeringar och korrigeringar för rapportsidor, hjälper till att övervaka och automatisera arbetsflöden.
Steg 10: Slutlig förhandsvisning och testning
Innan du publicerar, förhandsgranska hela flerstegsformuläret för att säkerställa:
- Smidiga övergångar mellan stegen
- Visuell konsistens och responsivitet
- Betalningshanteringen fungerar utan problem
Var särskilt uppmärksam på sandbox- kontra livebetalningslägen, anslut dina inloggningsuppgifter korrekt och testa båda miljöerna. Använd åtgärden för slutförd uppladdning för att verifiera att filuppladdningar slutförs korrekt och åtgärden för borttagning av överskridna filer och överskridna filer för att hantera filstorleksgränser effektivt.
Se också till att användarna ser ett tydligt meddelande om att kontoregistreringen lyckades när det är relevant, och bekräfta att åtgärden "multipla formulars fix" och "creating multiple forms fix" förhindrar dubbelarbete eller överlappning om du bäddar in mer än ett formulär på din webbplats.
Med rätt tester och korrigeringar kommer ditt WordPress-betalningsformulär med Forminator att vara fullt funktionellt, säkert och konverteringsoptimerat.
Läs mer: Hur man integrerar en betalningsgateway på din WordPress-webbplats
Slutsats
Att skapa ett WordPress-betalningsformulär med Forminator är inte bara enkelt utan också mycket effektivt. Med sin intuitiva dra-och-släpp-byggare, inbyggda betalningsintegrationer och dynamiska fältalternativ ger Forminator användare möjlighet att bygga fullt fungerande flerstegsformulär utan att skriva en enda rad kod.
Oavsett om du säljer ett fåtal produkter, tar emot bokningar av tjänster eller samlar in betalningar för evenemang, är Forminator ett kraftfullt verktyg som anpassar sig efter dina behov.
Från att hantera beräkningar och sidbrytningar till att lösa vanliga problem som att åtgärda sidladdning, åtgärda villkorligt synliga fält och åtgärda slutförda uppladdningar, erbjuder detta plugin ett användarvänligt sätt att hantera både formulärskapande och prestanda.
Så om du är redo att effektivisera din betalningsindrivningsprocess, börja experimentera med Forminator idag!
Behöver du hjälp med att konfigurera anpassade formulär eller vill utforska fler WordPress-handledningar? Kontakta vårt expertteam på Seahawk så låt oss bygga något kraftfullt tillsammans.
