Wil je het innen van betalingen op je WordPress-website eenvoudiger, sneller en gebruiksvriendelijker maken? Met het Multistep-betaalformulier in WordPress, gemaakt met Forminator, creëer je stijlvolle, interactieve formulieren die gebruikers stap voor stap door het betalingsproces leiden. Dit is ideaal voor websites met diensten, cursusinschrijvingen, evenementboekingen of eenvoudige e-commerce-toepassingen.
De gratis versie van Forminator zit boordevol krachtige functies zoals velden slepen en neerzetten, dynamische betaalmethoden en Stripe-abonnementsformulieren, en lost tegelijkertijd veelvoorkomende problemen op zoals problemen met het laden van formulieren bij de eerste keer laden, rekenfouten, ongeldige Stripe-sleutels, inlogformulieren voor gebruikers en integratie met Google Sheets.
In deze blog leggen we uit hoe je met Forminator je eigen betaalformulier met meerdere stappen in WordPress kunt opzetten. We belichten ook belangrijke oplossingen en functies om ervoor te zorgen dat alles soepel verloopt.
Waarom Forminator gebruiken voor betaalformulieren?
Forminator is een krachtige en gebruiksvriendelijke WordPress-formulierbouwer waarmee het maken van aangepaste betaalformulieren ongelooflijk eenvoudig is, zelfs voor beginners.
Met meer dan 600.000 actieve installaties wordt het door website-eigenaren in diverse sectoren gebruikt voor alles, van leadgeneratie tot online betalingen en registraties.
Wat Forminator onderscheidt, is de veelzijdigheid. Het biedt een breed scala aan formuliertypen, waaronder betaalformulieren, registratieformulieren, inlogformulieren, enquêtes, quizzen en meer.
Het belangrijkste is dat het ingebouwde ondersteuning biedt voor Stripe en PayPal , waardoor het eenvoudig is om veilig eenmalige betalingen, abonnementen of donaties rechtstreeks via uw website te innen, zonder dat u extra plug-ins of complexe integraties nodig hebt.
Forminator blinkt ook uit in het maken van formulieren met meerdere stappen, waardoor je lange of complexe formulieren kunt opsplitsen in kleinere, gebruiksvriendelijke stappen. Dit verbetert niet alleen de gebruikerservaring, maar vermindert ook het aantal afgebroken formulierinzendingen.
Met functies zoals voorwaardelijke logica, visuele voortgangsindicatoren en berekeningsvelden kunt u geavanceerde betalingsworkflows creëren die zijn afgestemd op de behoeften van uw bedrijf, of het nu gaat om het boeken van diensten, het inschrijven voor cursussen of het verkopen van producten.
En omdat het een gratis plugin is, krijg je toegang tot al deze krachtige functies zonder voorafgaande kosten. Voor bedrijven die op zoek zijn naar een eenvoudige, flexibele en moderne oplossing voor het bouwen van betaalformulieren, is Forminator een van de beste tools die er zijn.
Vergelijk : Square versus PayPal
Heeft u hulp nodig bij het instellen van een aangepast betaalformulier?
Laat de WordPress-experts van Seahawk uw Forminator-formulieren met meerdere stappen bouwen en optimaliseren, volledig gestyled, beveiligd en afgestemd op uw behoeften.
Stappen om een WordPress-betaalformulier te maken met Forminator Forms
Met Forminator is het creëren van een naadloze betaalervaring op je WordPress-website eenvoudiger dan ooit.
Laten we stap voor stap bekijken hoe u een dynamisch betaalformulier kunt instellen met geavanceerde functies en essentiële verbeteringen die de functionaliteit, beveiliging en gebruiksvriendelijkheid verhogen.
Stap 1: Installeer en activeer de Forminator-plug-in
Om te beginnen is het installeren van de Forminator-plugin snel en eenvoudig.
- Ga naar je WordPress-dashboard en navigeer naar Plugins ⟶ Nieuwe toevoegen .
- Typ in de zoekbalk ' Forminator '.
- Klik op Installeren en vervolgens op Activeren .
Forminator is een gratis plugin met meer dan 600.000 actieve installaties. De plugin wordt regelmatig bijgewerkt met bugfixes, zoals de fix voor het testdashboard, de fix voor de instellingenpagina en de fix voor handmatige activering, waardoor stabiele prestaties gegarandeerd zijn. Daarnaast bevat de plugin fixes voor het verzenden van formulieren en API-methoden om een soepele verwerking aan de backend te ondersteunen.
Stap 2: Maak een nieuw formulier helemaal zelf aan
Eenmaal geactiveerd:
- Ga naar Forminator ⟶ Formulieren ⟶ Nieuw formulier maken .
- Kies 'Leeg formulier' om helemaal opnieuw te beginnen of gebruik een van de voorbeeldformuliersjablonen om het formulier aan te passen.
Voeg direct in de formulierbouwer een titel en ondertitel toe. Je kunt aangepaste opmaak toepassen of de juiste CSS-syntaxis gebruiken om het uiterlijk te verbeteren.
Forminator ondersteunt geavanceerde formulieren met velden die voorwaardelijk zichtbaar zijn (dankzij de oplossing voor de voorwaardelijke logica) en diverse formuliertypen, zoals een oplossing voor registratieformulieren voor meerdere locaties en een oplossing voor inschrijvingsformulieren voor cursussen.
De formulierbouwer voorkomt nu problemen met verouderde tabelstructuren en bevat talrijke verbeteringen op het gebied van toegankelijkheid, waardoor uw formulieren bruikbaar en conform de geldende normen zijn.
Stap 3: Voeg velden voor product- of serviceselectie toe
Deze stap bepaalt hoe gebruikers selecteren waarvoor ze betalen, of het nu gaat om producten, abonnementen of diensten.
Het selectieveld gebruiken (voor meerdere artikelen zoals banken) : Voeg een selectieveld toe voor productopties zoals Moderne bank, Klassieke bank of Relaxfauteuil.
- Schakel meerdere selecties, prijsbepaling en het gebruik van formules in om totalen automatisch te berekenen.
- Het formulier biedt nu mogelijkheden voor het corrigeren van getalopmaak, standaardwaarden en gelijke rijen, perfect voor productoverzichten.
Gebruiksvoorbeeld : Een meubelverkoper kan meerdere formulieren aanmaken voor verschillende categorieën en de productprijzen dynamisch beheren. Deze formulieren voorkomen problemen zoals formulierfouten, niet-functionerende formulieren en bevatten functionaliteiten voor betalingen.
Het keuzerondjesveld met afbeeldingen gebruiken (voor visuele selectie) : Gebruik het keuzerondjesveld om gebruikers een product visueel te laten selecteren.
- Upload productafbeeldingen, zoals salontafels, voor elke optie.
- Stel een standaardselectie in en gebruik voorwaardelijke logica voor dynamische workflows.
Dankzij dezelfde aanpassingen aan het tabblad en het ontwerp van de waarschuwingsbox ervaren gebruikers nu een soepelere interface. Bovendien maakt de aanpassing aan het rich-edit-tekstveld het mogelijk om opgemaakte beschrijvingen met productafbeeldingen te gebruiken.
Selecteren versus keuzerondjes : Gebruik 'Selecteren' voor meerdere of grote aantallen keuzes met berekeningen; kies keuzerondjes wanneer visuele selectie en logica voor één enkele keuze belangrijker zijn.
De bijgewerkte versie van Forminator pakt ook problemen aan zoals het oplossen van problemen met pdf-betaalvelden, PayPal-factuurgegevens, de koppeling met Google Sheets, bestaande Google Sheets-bestanden en inline validatie van geüploade bestanden, waardoor het een robuuste oplossing is voor elk online betalingsscenario.
Blijf op de hoogte voor de volgende stappen, waarin we betaalgateways toevoegen, voorwaardelijke logica toepassen en uw betaalformulier afronden met een oplossing voor beveiligde versleuteling met geheime sleutel en beveiligingslekken.
Wil je een visuele handleiding? Bekijk dan deze stapsgewijze video over het maken van een betaalformulier met meerdere stappen 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 leveringsgegevens te verzamelen. Voor een betere organisatie en gebruikerservaring kunt u een pagina-einde invoegen om de productselectie te scheiden van de persoonlijke gegevens.
Aanbevolen velden om toe te voegen:
- Volledige naam: Gebruik het naamveld (niet zomaar een standaard tekstveld) voor gestructureerde invoer. Dit geavanceerde veld helpt u de veelvoorkomende fouten in formulieren te voorkomen die ontstaan door onjuist opgemaakte naamvelden.
- E-mailadres met bevestiging: Gebruik de ingebouwde e-mailbevestigingsoptie. Dit voorkomt problemen met ongeldige of onjuiste gegevens en verbetert de nauwkeurigheid van de levering. Ondersteunt ook voorwaardelijke logica voor e-mailcorrectie.
- Telefoonnummer: Voeg een nummerveld toe met een internationale validatiecorrectie ingeschakeld, zodat de juiste landspecifieke opmaak wordt gegarandeerd. Zorg ervoor dat u de nummeropmaakcorrectie toepast om inconsistenties in de gegevens te voorkomen.
- Adres: Gebruik een adresveld met meerdere regels, waarin de volgende gegevens worden vastgelegd: straat, plaats, provincie/staat, land, postcode.
- Leveringsdatum en -tijd: Gebruik de datum- en tijdkiezer. Deze velden profiteren van dezelfde rijcorrectie en updates voor het corrigeren van CSS-syntaxfouten om de lay-out en de gebruikerservaring te verbeteren.
Deze invoervelden ondersteunen ook inline validatie van geüploade bestanden, mocht de gebruiker afbeeldingen moeten bijvoegen (bijvoorbeeld een betalingsbewijs of ontwerpvoorbeelden).
Stap 5: Betalingsinning instellen
Voeg een extra pagina-einde in om het formulier overzichtelijk te segmenteren vóór de betaalstap. Dit verbetert de gebruiksvriendelijkheid en vermindert fouten die vóór het verzenden van het formulier ontstaan door een rommelige gebruikersinterface.
Voeg het betaalveld toe (PayPal of Stripe): Forminator biedt dynamische betaalmethoden, waardoor u kunt kiezen tussen PayPal of Stripe. Voeg er een toe op basis van uw voorkeur:
- voor de factuurgegevens van PayPal om de nauwkeurigheid te verbeteren.
- bij Stripe voor veilige transacties.
Berekeningsveld invoegen : Dit veld telt dynamisch de prijs van alle geselecteerde producten/diensten op. Het ondersteunt nu de correctie voor formules in berekeningsvelden, waardoor onjuiste totalen als gevolg van verkeerde logica worden voorkomen.
Toestemmingsselectievakje: Voeg altijd een selectievakje toe met aangepaste algemene voorwaarden. Dit veld profiteert van de standaardfoutmeldingen, waardoor gebruikers precies weten wat er van hen wordt verwacht.
Betaalaccount koppelen (PayPal of Stripe) : Ga naar Forminator ⟶ Instellingen ⟶ Betalingen en voer de klant-ID en geheime sleutel in.
Schakel tussen de Sandbox-modus voor testen en de Live-modus voor echte betalingen. De handmatige activeringsoptie maakt het mogelijk om veilig tussen modi te wisselen zonder opnieuw inloggegevens in te voeren.
Stap 6: Prijzen en berekeningen instellen
Nu uw product- en betaalvelden gereed zijn, is het tijd om prijzen toe te wijzen en de logica achter de dynamische prijsstelling van uw formulier te configureren.
Stappen:
Berekeningen inschakelen voor productvelden: Ga naar elk veld (Selectie, Keuzerondje of Aankruisvakje) 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
Het berekeningsveld configureren : Voeg een berekeningsveld toe. Gebruik de formulebouwer om de prijzen van de geselecteerde producten op te tellen. U kunt nu problemen met onjuiste gegevenscorrectie en de Ajax-verzending voorkomen via de bijgewerkte logica-editor.
Het veld hernoemen: Geef het berekeningsveld een duidelijke naam, zoals 'Totaalbedrag' of 'Nu te betalen'. Dit voorkomt verwarring bij de gebruiker en ondersteunt het corrigeren van de standaardwaarde voor lege inzendingen.
Stap 7: Stijl- en aanpassingsopties
Zodra uw WordPress-betaalformulier met meerdere stappen functioneel is, is het tijd om het uiterlijk aan te passen voor een soepele, merkgerichte gebruikerservaring.
Kies in de Forminator-instellingen voor het uiterlijk uit verschillende lay-outstijlen, zoals Materiaal, Standaard of Overnemen van thema. Je kunt het ontwerp verder aanpassen, zoals lettertypen, breedtes en kleuren, zodat het perfect aansluit bij je huisstijl.
Profiteer bovendien van de beveiligingsverbeteringen en de beveiligingsupdates voor de Forminator-add-ons om ervoor te zorgen dat de vormgeving van formulieren de prestaties of de veiligheid niet in gevaar brengt.
Tot slot kunt u met de gedragsinstellingen bepalen wat er gebeurt na het verzenden van het formulier, of het nu een bedankbericht is, een paginaverversing om het probleem op te lossen, of een doorverwijzing naar een specifieke pagina.
Stap 8: Het meerstappenbetalingsformulier publiceren
Nadat je je formulier hebt gemaakt en aangepast, publiceer je het door de gegenereerde shortcode te kopiëren. Plak deze shortcode in een willekeurige WordPress-pagina met behulp van een shortcodeblok. Klik op 'Publiceren' en test je formulier.
Zorg ervoor dat het formulier soepel overgaat van stap naar stap, dat de velden correct worden weergegeven (met name velden die voorwaardelijk zichtbaar moeten zijn, moeten correct worden weergegeven) en dat betalingen zonder vertraging worden verwerkt.
De oplossing voor het probleem met de voorbeeldweergave bij het afsluiten van het formulier zorgt er bovendien voor dat de voorbeeldmodus netjes wordt afgesloten, wat verwarring tijdens het testen helpt voorkomen.
Stap 9: Extra tips en geavanceerde functies
Om uw formulier verder te verbeteren, kunt u voorwaardelijke logica gebruiken. U kunt bijvoorbeeld een leveringsveld alleen weergeven als een specifiek product is geselecteerd. Dit is eenvoudig te beheren dankzij de fix voor voorwaardelijk zichtbare velden.
Stel e-mailmeldingen in met de optie om meerdere ontvangers toe te voegen, zodat zowel de beheerder als de gebruiker op de hoogte worden gesteld. Je kunt conversies volgen en inzendingen bekijken in het dashboard, ideaal voor het bijhouden van gebruiksgegevens.
Integreer Forminator bovendien met tools van derden zoals Mailchimp , Slack en Google Sheets.
Als formulieren eerder zijn geïmporteerd maar niet worden weergegeven, zorgen de oplossingen voor het niet correct importeren van formulieren ervoor dat ze wel correct verschijnen. Deze integraties, in combinatie met het aanmaken van vooraf ingestelde oplossingen en oplossingen voor rapportpagina's, helpen bij het bewaken en automatiseren van workflows.
Stap 10: Laatste preview en testen
Voordat u het formulier live zet, bekijk eerst het volledige meerstappenformulier om er zeker van te zijn dat:
- Vloeiende overgangen tussen de stappen
- Visuele consistentie en responsiviteit
- De betalingsverwerking werkt probleemloos
Besteed speciale aandacht aan de verschillen tussen de sandbox- en de live-betaalmodus, koppel uw inloggegevens correct en test beide omgevingen. Gebruik de 'upload completed'-oplossing om te controleren of bestandsuploads succesvol worden voltooid en de 'removing exceeded files'-oplossing om de bestandsgroottebeperkingen efficiënt te beheren.
Zorg er bovendien voor dat gebruikers een duidelijke melding zien dat de accountregistratie is geslaagd, indien relevant, en controleer of de functie voor het oplossen van problemen met meerdere formulieren en het aanmaken van meerdere formulieren duplicatie of overlapping voorkomt als u meer dan één formulier op uw site plaatst.
Met de juiste tests en aanpassingen is uw WordPress-betaalformulier, gemaakt met Forminator, volledig functioneel, veilig en conversiegeoptimaliseerd.
Meer informatie : Hoe integreer je een betaalgateway in je WordPress-website?
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 betaalintegraties en dynamische veldopties kunnen gebruikers met Forminator volledig functionele formulieren met meerdere stappen bouwen zonder ook maar één regel code te schrijven.
Of je nu een paar producten verkoopt, serviceboekingen aanneemt of betalingen voor evenementen incasseert, Forminator is een krachtige tool die zich aanpast aan jouw behoeften.
Van het afhandelen van berekeningen en pagina-einden tot het oplossen van veelvoorkomende problemen zoals het opnieuw laden van pagina's, het oplossen van problemen met voorwaardelijk zichtbare velden en het oplossen van problemen met voltooide uploads: deze plugin biedt een gebruiksvriendelijke manier om zowel het maken van formulieren als de prestaties ervan te beheren.
Bent u klaar om uw incassoproces te stroomlijnen? Begin dan vandaag nog met experimenteren met Forminator!
Heeft u hulp nodig bij het instellen van een aangepast formulier of wilt u meer WordPress-tutorials bekijken? Neem contact op met ons expertteam bij Seahawk en laten we samen iets krachtigs bouwen.
