Hoe u een meerstapsbetalingsformulier in WordPress maakt met Forminator

Geschreven door: avatar van de auteur Zeehavik
Voormaker

Wilt u het innen van betalingen op uw WordPress-site eenvoudiger, sneller en gebruiksvriendelijker maken? Met het Multistep-betaalformulier in WordPress met Forminator kunt u strakke, interactieve formulieren maken die gebruikers stap voor stap door het betaalproces leiden. Dit is ideaal voor servicegerichte websites, cursusinschrijvingen, evenementboekingen of eenvoudige e-commercedoeleinden.

De gratis versie van Forminator zit boordevol krachtige functies, zoals slepen en neerzetten , dynamische betaalmethoden en Stripe-abonnementsformulieren. Tegelijkertijd worden veelvoorkomende problemen opgelost, zoals het oplossen van problemen met het voor het eerst laden van een formulier, fouten in de berekeningen, ongeldige Stripe-toetsen, het oplossen van het aanmeldformulier voor gebruikers en de integratie met Google Sheets.

In deze blog leggen we je uit hoe je met behulp van Forminator een betalingsformulier met meerdere stappen in WordPress kunt opzetten. Ook lichten we de belangrijkste oplossingen en functies toe om ervoor te zorgen dat alles soepel verloopt.

Waarom Forminator gebruiken voor betalingsformulieren?

Forminator is een krachtige en gebruiksvriendelijke WordPress-formulierbouwer waarmee u heel eenvoudig aangepaste betalingsformulieren kunt maken, zelfs voor beginners.

Voormaker

Met meer dan 600.000 actieve installaties wordt het door website-eigenaren in verschillende sectoren vertrouwd voor alles van leadgeneratie tot online betalingen en registraties.

Wat Forminator onderscheidt, is zijn veelzijdigheid. Het biedt een breed scala aan formuliertypen, waaronder betaalformulieren, registratieformulieren, inlogformulieren, polls, quizzen en meer.

Het belangrijkste is dat het ingebouwde ondersteuning biedt voor Stripe en PayPal , waardoor u eenvoudig en veilig eenmalige betalingen, abonnementen of donaties rechtstreeks via uw site kunt innen, zonder dat u extra plug-ins of complexe integraties nodig hebt.

Forminator blinkt ook uit in het bouwen van meerstapsformulieren, waardoor u lange of complexe formulieren kunt opsplitsen in kleinere, gebruiksvriendelijke stappen. Dit verbetert niet alleen de gebruikerservaring, maar vermindert ook het aantal afgebroken formulieren.

Met functies zoals voorwaardelijke logica, visuele voortgangsindicatoren en berekeningsvelden kunt u geavanceerde betalingsworkflows maken die zijn afgestemd op uw zakelijke behoeften, of het nu gaat om het boeken van diensten, inschrijven voor cursussen of het verkopen van producten.

En omdat het een gratis plugin is, krijg je toegang tot al deze robuuste functies zonder voorafgaande kosten. Voor bedrijven die op zoek zijn naar een eenvoudige, flexibele en moderne oplossing om betaalformulieren te bouwen, is Forminator een van de beste tools die er zijn.

Vergelijk : Square vs PayPal

Hulp nodig bij het instellen van een aangepast betalingsformulier?

Laat de WordPress-experts van Seahawk uw meerstaps Forminator-formulieren bouwen en optimaliseren, volledig gestyled, veilig en afgestemd op uw behoeften.

Stappen voor het maken van een WordPress-betalingsformulier met Forminator Forms

Met Forminator is het eenvoudiger dan ooit om een naadloze betaalervaring op uw WordPress-site te creëren.

Laten we stap voor stap door het proces lopen voor het instellen van een dynamisch betalingsformulier met geavanceerde functies en essentiële oplossingen die de functionaliteit, beveiliging en bruikbaarheid verbeteren.

Stap 1: Installeer en activeer de Forminator-plug-in

Laten we beginnen met het eerste: de Forminator-plug-in installeren is snel en eenvoudig.

  • Forminator " in de zoekbalk
  • Klik op Installeren en vervolgens op Activeren .

Forminator is een gratis plugin met meer dan 600.000 actieve installaties, die voortdurend wordt bijgewerkt met oplossingen zoals de testdashboard-oplossing, de instellingenpagina-oplossing en de handmatige activeringsoplossing, wat zorgt voor stabiele prestaties. Het is ook uitgerust met een oplossing voor het indienen van formulieren en een oplossing voor API-methoden ter ondersteuning van soepele backendverwerking.

Stap 2: Maak een nieuw formulier vanaf nul

Eenmaal geactiveerd:

  • Ga naar ForminatorFormulierenNieuw maken .
  • Kies Leeg formulier om helemaal opnieuw te beginnen of gebruik een van de opties voor het oplossen van problemen met de voorbeeldformuliersjablonen.

Voeg een titel en ondertitel rechtstreeks in de formulierbouwer toe. Je kunt aangepaste styling toepassen of de juiste CSS-syntaxis gebruiken om de weergave te verbeteren.

Forminator ondersteunt geavanceerde formulieren met voorwaardelijk zichtbare velden (dankzij de fix voor voorwaardelijke logica) en verschillende formuliertypen, zoals fixes voor multisite-registratieformulieren en fixes voor cursusinschrijvingsformulieren.

De formulierbouwer heeft nu geen last meer van verouderde tabelstructuren en bevat diverse verbeteringen op het gebied van toegankelijkheid. Zo zijn uw formulieren bruikbaar en aan de eisen voldoen.

Stap 3: Voeg product- of serviceselectievelden toe

Deze stap bepaalt hoe gebruikers selecteren waarvoor ze betalen, of het nu gaat om producten, abonnementen of services.

Gebruik het selectieveld (voor meerdere items, zoals banken) : voeg een selectieveld toe voor productopties, zoals Moderne bank, Klassiek of Relaxfauteuil.

  • Maak meerdere selecties, prijzen en berekeningen mogelijk en gebruik veldformules om totalen te automatiseren.
  • Het formulier ondersteunt nu de volgende opties: nummeropmaak, standaardwaarde en dezelfde rij, ideaal voor productvermeldingen.

Gebruiksvoorbeeld : Een meubelverkoper kan meerdere formulieren voor verschillende categorieën aanmaken en de productprijzen dynamisch beheren. Deze formulieren voorkomen problemen zoals een oplossing voor formulierfouten, een oplossing voor niet-functionerende formulieren en bevatten oplossingen voor betalingsgerelateerde functies.

Het keuzerondje gebruiken met afbeeldingen (voor visuele selectie) : met het keuzerondje kunnen gebruikers visueel een product selecteren.

  • Upload productafbeeldingen, zoals salontafels, voor elke optie.
  • Stel een standaardselectie in en gebruik voorwaardelijke logica voor dynamische stromen.

Met dezelfde correctie voor tabbladen en waarschuwingsvensters ervaren gebruikers nu een soepelere interface. Bovendien maakt de correctie voor het uitgebreide tekstvak het mogelijk om opgemaakte beschrijvingen met productafbeeldingen te gebruiken.

Selecteren versus Keuzerondje : Gebruik Selecteren voor meerdere of bulkkeuzes met berekeningen. Kies Keuzerondjes als visuele selectie en logica voor één keuze belangrijker zijn.

De bijgewerkte versie van Forminator biedt ook oplossingen voor problemen zoals het PDF-betalingsveld, de PayPal-factuurgegevens, het verbinden met Google Sheets, de validatie van bestaande Google Sheets en het inline uploaden van bestanden. Daarmee is het een robuuste oplossing voor elk scenario met online betalingen.

Blijf op de hoogte van de volgende stappen, waarin we betalingsgateways toevoegen, voorwaardelijke logica toepassen en uw betalingsformulier afronden met oplossingen voor veilige encryptie met geheime sleutels en beveiligingskwetsbaarheden.

Wilt u een visuele handleiding? Bekijk deze stapsgewijze video over het maken van een meerstappenbetalingsformulier met Forminator en zie het hele proces in actie!

Stap 4: Klantgegevens verzamelen

Zodra uw gebruikers de producten of diensten hebben geselecteerd, is het tijd om hun contact- en bezorggegevens te verzamelen. Voor een betere organisatie en gebruikersstroom kunt u een pagina-einde invoegen om de productselectie te scheiden van persoonlijke informatie.

Aanbevolen velden om toe te voegen:

  • Volledige naam: Gebruik het veld Naam (niet zomaar een standaard tekstveld) voor gestructureerde invoer. Dit geavanceerde veld helpt u de veelvoorkomende problemen met foutopsporing bij formulieren te voorkomen die optreden bij onjuist opgemaakte naaminvoer.
  • E-mailadres met bevestiging: Gebruik de ingebouwde e-mailbevestigingsoptie. Dit voorkomt het probleem met ongeldige of onjuiste gegevens en verbetert de nauwkeurigheid van de bezorging. Ondersteunt ook e-mailgebaseerde voorwaardelijke logica.
  • Telefoonnummer: Voeg een nummerveld toe met de internationale validatiefix ingeschakeld, zodat de opmaak landspecifiek is. Zorg ervoor dat u de nummeropmaakfix gebruikt om inconsistenties in de gegevens te voorkomen.
  • Adres: Gebruik een adresveld met meerdere rijen, waarin het volgende wordt vastgelegd: straat, plaats, staat, land en postcode.
  • Leverdatum en -tijd: Gebruik de velden voor datum- en tijdselectie. Deze velden profiteren van dezelfde rijcorrectie en updates voor het corrigeren van CSS-syntaxisfouten om de lay-out en gebruikerservaring te verbeteren.

Deze invoer ondersteunt ook inline-validatie van geüploade bestanden, mocht u afbeeldingen willen bijvoegen (bijvoorbeeld een betalingsbewijs of ontwerpreferenties).

Stap 5: Betalingsincasso instellen

Voeg een extra pagina-einde toe om het formulier overzichtelijk te segmenteren vóór de betaalstap. Dit verbetert de bruikbaarheid en vermindert het aantal fouten vóór indiening, veroorzaakt door een rommelige gebruikersinterface.

Voeg het betaalveld toe (PayPal of Stripe): Forminator biedt dynamische betaalmethoden, zodat je kunt kiezen tussen PayPal of Stripe. Voeg er een toe op basis van je voorkeur:

  • Voor PayPal heeft Forminator onlangs een oplossing geïntroduceerd voor de nauwkeurigheid van PayPal-factuurgegevens.
  • Voor Stripe zorgt de nieuwste oplossing voor geheime sleutelversleuteling voor veilige transacties.

Berekeningsveld invoegen : Dit veld telt dynamisch de prijs van alle geselecteerde producten/diensten op. Het ondersteunt nu de fix voor berekeningsveldformules, waardoor onjuiste totalen door onjuiste logica worden voorkomen.

Selectievakje voor toestemming: Voeg altijd een selectievakje toe met aangepaste voorwaarden. Dit veld profiteert van de standaardfoutmeldingen, zodat gebruikers precies weten wat er vereist is.

Betaalrekening verbinden (PayPal of Stripe) : Ga naar Forminator ⟶ Instellingen ⟶ Betalingen en voer het volgende in: Client-ID en geheime sleutel

Schakel tussen de sandboxmodus voor testen en de livemodus voor echte betalingen. Dankzij de handmatige activeringsoplossing kunt u veilig van modus wisselen zonder uw inloggegevens opnieuw in te voeren.

Stap 6: Prijzen en berekeningen instellen

Nu uw product- en betalingsvelden gereed zijn, is het tijd om prijzen toe te wijzen en de logica achter de dynamische prijzen van uw formulier te configureren.

Prijzen

Stappen:

Berekeningen inschakelen voor productvelden: Ga naar elk veld (Selectie, Keuzerondje of Selectievakje) en schakel 'Berekening inschakelen' in. Wijs numerieke waarden toe aan elke optie.

Prijzen toewijzen: Voeg waarden toe zoals:

  • Moderne bank: $500
  • Klassieke bank: $350
  • Relaxfauteuil: $600
Hierbij wordt gebruikgemaakt van de geavanceerde formulierfunctie van Forminator, die is verbeterd door de codeverbeteringen en de stabiliteitsverbetering voor het post-gegevensveld.

Configureer het berekeningsveld : voeg een berekeningsveld toe. Gebruik de formulebouwer om de geselecteerde productprijzen op te tellen. U kunt nu problemen met onjuiste gegevens en de Ajax-inzendingsmethode voorkomen via de bijgewerkte logica-editor.

Veldnaam wijzigen: Geef het berekeningsveld een duidelijk label, zoals Totaalbedrag of Nu te betalen. Dit helpt verwarring bij de gebruiker te voorkomen en ondersteunt een standaardwaarde voor lege inzendingen.

Stap 7: Styling- en aanpassingsopties

Zodra uw WordPress-betaalformulier met meerdere stappen functioneel is, is het tijd om het uiterlijk ervan aan te passen voor een soepele, gepersonaliseerde ervaring.

Onder de weergave-instellingen van Forminator kun je kiezen uit lay-outstijlen zoals Materiaal, Standaard of Overnemen van thema. Je kunt het ontwerp verder verfijnen en lettertypen, breedtes en kleuren aanpassen aan je huisstijl.

Profiteer ook van de verbeteringen op het gebied van beveiliging en de beveiligingsfix voor Forminator-add-ons om ervoor te zorgen dat de vormgeving van formulieren geen gevolgen heeft voor de prestaties of veiligheid.

Tot slot kunt u met gedragsinstellingen bepalen wat er gebeurt nadat het formulier is verzonden. Denk bijvoorbeeld aan een bedankbericht, een oplossing voor het opnieuw laden van de pagina of een omleiding naar een specifieke pagina.

Stap 8: Het meerstappenbetalingsformulier publiceren

Nadat je je formulier hebt gebouwd en aangepast, publiceer je het door de gegenereerde shortcode te kopiëren. Plak deze in een WordPress-pagina met behulp van een shortcodeblok. Klik op 'Publiceren' en test je formulier.

Zorg ervoor dat de formulierstappen soepel verlopen, dat velden goed worden weergegeven (vooral de voorwaardelijk zichtbare velden worden gecorrigeerd) en dat betalingen zonder vertraging worden verwerkt.

Bovendien zorgt de oplossing voor het voorvertoning van het afsluitende formulier ervoor dat de voorvertoningsmodus netjes wordt afgesloten, zodat verwarring tijdens het testen wordt voorkomen.

Stap 9: Extra tips en geavanceerde functies

Om uw formulier verder te verbeteren, kunt u voorwaardelijke logica gebruiken. Toon bijvoorbeeld een leveringsveld alleen als een specifiek product is geselecteerd. Dit is eenvoudig te beheren dankzij de fix voor voorwaardelijk zichtbare velden.

Stel e-mailmeldingen in met behulp van de functie voor het toevoegen van meerdere ontvangers om zowel de beheerder als de gebruiker op de hoogte te stellen. Je kunt conversies volgen en inzendingen bekijken in het dashboard, ideaal voor het bijhouden van gebruiksgegevens.

Integreer Forminator bovendien met hulpmiddelen van derden, zoals Mailchimp , Slack en Google Sheets.

Als formulieren eerder zijn geïmporteerd maar niet worden weergegeven, worden ze door de importformulieren hersteld en niet geïmporteerd. Deze integraties, in combinatie met de aanmaak van vooraf ingestelde oplossingen en oplossingen voor rapportpagina's, helpen bij het monitoren en automatiseren van workflows.

Stap 10: Laatste preview en testen

Bekijk een voorbeeld van het volledige meerstappenformulier voordat u het live zet, om het volgende te controleren:

  • Soepele overgangen tussen stappen
  • Visuele consistentie en responsiviteit
  • Betalingsverwerking verloopt zonder problemen

Besteed speciale aandacht aan sandbox- versus live-betaalmodi, koppel uw inloggegevens correct en test beide omgevingen. Gebruik de fix 'upload voltooid' om te controleren of het uploaden van bestanden succesvol is voltooid en de fix 'verwijderen van overschrijdingen van de toegestane bestandsgrootte' en de fix 'overschrijdingen van de toegestane bestandsgrootte' om de bestandsgroottelimieten efficiënt te beheren.

Zorg er ook voor dat gebruikers een duidelijk bericht zien dat de accountregistratie is gelukt, indien relevant. Controleer of er meerdere formulieren zijn en of er meerdere formulieren zijn gemaakt. Voorkom duplicatie of overlapping als u meer dan één formulier op uw site insluit.

Met de juiste tests en oplossingen wordt uw WordPress-betaalformulier met Forminator volledig functioneel, veilig en geoptimaliseerd voor conversie.

Meer informatie : Hoe u een betalingsgateway op uw WordPress-site integreert

Conclusie

Het maken van een WordPress-betaalformulier met Forminator is niet alleen eenvoudig, maar ook zeer effectief. Dankzij de intuïtieve drag-and-drop-builder, ingebouwde betalingsintegraties en dynamische veldopties stelt Forminator gebruikers in staat om volledig functionele meerstapsformulieren te bouwen zonder ook maar één regel code te schrijven.

Of u nu een paar producten verkoopt, boekingen voor diensten aanneemt of betalingen voor evenementen int, Forminator is een krachtig hulpmiddel dat zich aanpast aan uw behoeften.

Deze plugin biedt een gebruiksvriendelijke manier om zowel het maken als de prestaties van formulieren te beheren, van het verwerken van berekeningen en pagina-einden tot het oplossen van veelvoorkomende problemen zoals het opnieuw laden van de pagina, het oplossen van voorwaardelijk zichtbare velden en het oplossen van voltooide uploads.

Bent u klaar om uw betalingsincassoproces te stroomlijnen? Experimenteer dan vandaag nog met Forminator!

Heb je hulp nodig met het opzetten van een aangepast formulier of wil je meer WordPress-tutorials bekijken? Neem contact op met ons deskundige team bij Seahawk en laten we samen iets krachtigs bouwen.

Gerelateerde berichten

Hoe u Notion naar een WordPress-website kunt converteren: een eenvoudige handleiding

Overweegt u uw notie te transformeren in een Dynamic WordPress -website? Je bent aan de rechterkant

Hoe u kapotte links kunt herstellen na een WordPress-migratie

Hoe u kapotte links kunt herstellen na een WordPress-migratie: snelle tips

Na het migreren van een WordPress -site is een van de meest voorkomende en frustrerende problemen om te gaan

WordPress-onderhoud voor restaurants

WordPress-onderhouds- en zorgpakketten voor websites van restaurants en horecagelegenheden

WordPress-onderhoud is meer dan alleen updates uitvoeren. Het gaat om het beschermen van de website van je restaurant of hotel.

Ga aan de slag met Seahawk

Meld u aan in onze app om onze prijzen te bekijken en kortingen te krijgen.