Want to make collecting payments on your WordPress site easier, faster, and more user-friendly? With the Multistep payment form in WordPress using Forminator, you can create sleek, interactive forms that guide users step-by-step through the payment process. This is ideal for service-based websites, course enrollments, event bookings, or simple eCommerce needs.
Forminator’s free version comes packed with powerful features like drag and drop fields, dynamic payment methods, and Stripe subscription forms, all while fixing common issues like initial form load fix, calculation errors fix, invalid Stripe key fix, user login form fix, and Google Sheet integration fix.
In this blog, we’ll walk you through how to set up your own multistep payment form in WordPress using Forminator, and highlight key fixes and features to ensure everything runs smoothly.
Why Use Forminator for Payment Forms?
Forminator is a powerful and user-friendly WordPress form builder that makes creating custom payment forms incredibly simple, even for beginners.
With over 600,000 active installs, it’s trusted by site owners across industries for everything from lead generation to online payments and registrations.
What sets Forminator apart is its versatility. It offers a wide range of form types, including payment forms, registration forms, login forms, polls, quizzes, and more.
Most importantly, it comes with built-in support for Stripe and PayPal, making it easy to securely collect one-time payments, subscriptions, or donations directly through your site, without needing additional plugins or complex integrations.
Forminator also excels at building multi-step forms, allowing you to break long or complex forms into smaller, user-friendly steps. This not only improves the user experience but also reduces form abandonment.
With features like conditional logic, visual progress indicators, and calculation fields, you can create advanced payment workflows tailored to your business needs, whether it’s booking services, enrolling in courses, or selling products.
And since it’s a free plugin, you get access to all these robust features without any upfront cost. For businesses looking for an easy, flexible, and modern solution to build payment forms, Forminator is one of the best tools out there.
Compare: Square vs PayPal
Need Help Setting Up a Custom Payment Form?
Let Seahawk’s WordPress experts build and optimize your multistep Forminator forms, fully styled, secure, and tailored to your needs.
Steps to Create a WordPress Payment Form Using Forminator Forms
Creating a seamless payment experience on your WordPress site is easier than ever with Forminator.
Let’s walk through the step-by-step process of setting up a dynamic payment form with advanced features and essential fixes that improve functionality, security, and usability.
Step 1: Install and Activate the Forminator Plugin
First things first, installing the Forminator plugin is quick and straightforward.
- Head to your WordPress dashboard and navigate to Plugins ⟶ Add New.
- In the search bar, type “Forminator”.
- Click Install and then Activate.
Forminator is a free plugin with 600K+ active installs, consistently updated with fixes like the test dashboard fix, settings page fix, and manual activation fix, ensuring stable performance. It’s also equipped with form submission fix and api method fix to support smooth backend processing.
Step 2: Create a New Form from Scratch
Once activated:
- Go to Forminator ⟶ Forms ⟶ Create New.
- Choose Blank Form to start from scratch or use one of the previewing form templates fix options.
Add a title and subtitle directly in the form builder. You can apply custom styling or use correct CSS syntax to enhance its appearance.
Forminator supports advanced forms that include conditionally visible fields (thanks to the conditional logic fix) and various form types like multisite registration form fix and course enrollment form fix.
The form builder now avoids outdated table structure fix and includes numerous accessibility improvements enhancement, ensuring your forms are usable and compliant.
Step 3: Add Product or Service Selection Fields
This step determines how users select what they’re paying for, be it products, plans, or services.
Using the Select Field (for multiple items like sofas): Add a Select Field for product options like Modern Sofa, Classic, or Recliner.
- Enable multiple selections, pricing, and use calculations field formulas fix to automate totals.
- The form now handles number formatting fix, default value fix, and same row fix, perfect for product listings.
Use Case Example: A furniture seller can create multiple forms for different categories and manage product pricing dynamically. These forms avoid issues like form fails fix, not functioning fix, and include payment related features fix.
Using the Radio Button Field with Images (for visual selection): Use the Radio Field to let users select a product visually.
- Upload product images like coffee tables for each option.
- Set a default selection and use conditional logic for dynamic flows.
With the same tab fix and alert box design fix, users now experience a smoother interface. Additionally, the rich edit textarea fix allows for formatted descriptions with product visuals.
Select vs Radio: Use Select for multiple or bulk choices with calculations; choose Radio Buttons when visual selection and single-choice logic matter more.
Forminator’s updated build also addresses issues like pdf payment field fix, paypal billing details fix, connect Google Sheets fix, existing Google Sheet file, and upload file inline validation, making it a robust solution for any online payment scenario.
Stay tuned for the next steps, where we’ll add payment gateways, apply conditional logic, and finalize your payment form with secure secret key encryption fix and vulnerability security fix features.
Want a visual walkthrough? Watch this step-by-step video on creating a multistep payment form using Forminator and see the entire process in action!
Step 4: Collect Customer Details
Once your users have selected the products or services, it’s time to gather their contact and delivery details. For better organization and user flow, insert a Page Break to separate the product selection from personal information.
Recommended Fields to Add:
- Full Name: Use the Name field (not just a basic text field) for structured inputs. This advanced field helps you avoid the common forms fails fix issue seen with improperly formatted name inputs.
- Email Address with Confirmation: Use the built-in email confirmation option. This prevents the invalid or incorrect data fix problem and improves delivery accuracy. Also supports email-based conditional logic fix.
- Phone Number: Add a number field with international validation fix enabled, ensuring country-specific formatting. Be sure to include number formatting fix to avoid data inconsistencies.
- Address: Use a multi-row address field, capturing: Street, city, state, country, ZIP code.
- Delivery Date & Time: Utilize Date and Time Picker fields. These fields benefit from the same row fix and correct CSS syntax error updates to improve layout and UX.
These inputs also support upload file inline validation if users need to attach images (e.g., proof of payment or design references).
Step 5: Set Up Payment Collection
Insert another Page Break to segment the form cleanly before the payment step. This enhances usability and reduces pre-submission errors fix caused by cluttered UI.
Add the Payment Field (PayPal or Stripe): Forminator offers dynamic payment methods, fixing letting you choose between PayPal or Stripe. Add one based on your preference:
- For PayPal, Forminator recently introduced a paypal billing details fix to enhance accuracy.
- For Stripe, the latest secret key encryption fix ensures secure transactions.
Insert Calculation Field: This field dynamically totals the price of all selected products/services. It now supports the calculations field formulas fix, helping avoid broken totals due to incorrect logic.
Consent Checkbox: Always include a checkbox with custom terms and conditions. This field benefits from the default field error messages fix, ensuring users know exactly what’s required.
Connect Payment Account (PayPal or Stripe): Go to Forminator ⟶ Settings ⟶ Payments, and enter: Client ID & Secret Key
Toggle between Sandbox Mode for testing and Live Mode for real payments. The manual activation fix allows you to switch modes safely without re-entering credentials.
Step 6: Setting Up Pricing & Calculations
Now that your product and payment fields are ready, it’s time to assign prices and configure the logic behind your form’s dynamic pricing.
Steps:
Enable Calculations on Product Fields: Go into each field (Select, Radio, or Checkbox), and toggle on “Enable Calculation.” Assign numeric values to each option.
Assign Prices: Add values like:
- Modern Sofa: $500
- Classic Sofa: $350
- Recliner: $600
Configure the Calculation Field: Add a calculation field. Use the formula builder to sum up the selected product prices. You can now prevent incorrect data fix and ajax submission method fix issues through the updated logic editor.
Rename the Field: Give the calculation field a clear label such as Total Amount or Payable Now. Helps prevent user confusion and supports default value fix for empty submissions.
Step 7: Styling and Customization Options
Once your multistep WordPress payment form is functional, it’s time to customize its appearance for a smooth, branded experience.
Under the Forminator appearance settings, choose between layout styles like Material, Default, or Inherit from Theme. You can further tweak the design, customize fonts, widths, and colors to match your branding.
Also, take advantage of security improvements fix and forminator addons security fix to ensure form styling does not compromise performance or safety.
Lastly, behavior settings let you define what happens after form submission, whether it’s a thank you message, a page reload fix, or a redirect to a specific page.
Step 8: Publishing the Multistep Payment Form
After building and customizing your form, publish it by copying the generated shortcode. Paste this into any WordPress page using a Shortcode block. Hit publish and test your form.
Make sure the form transitions smoothly between steps, fields appear properly (especially conditionally visible fields fix), and payments process without delays.
Also, the closing form preview fix ensures preview mode exits cleanly, helping prevent confusion during testing.
Step 9: Additional Tips and Advanced Features
To further enhance your form, consider using conditional logic. For example, show a delivery field only if a specific product is selected, easily managed thanks to the conditionally visible fields fix.
Set up email notifications using the adding multiple recipients fix to notify both the admin and the user. You can track conversions and view submissions in the dashboard, great for usage data tracking fix.
Additionally, integrate Forminator with third-party tools like Mailchimp, Slack, and Google Sheets.
If forms were imported previously but not showing, the import forms fix and is not imported fix ensure they appear correctly. These integrations, coupled with the creation of preset fixes and report page fixes, help monitor and automate workflows.
Step 10: Final Preview and Testing
Before going live, preview the entire multistep form to ensure:
- Smooth transitions between steps
- Visual consistency and responsiveness
- Payment processing works without issues
Pay special attention to sandbox vs. live payment modes, connect your credentials properly and test both environments. Use the upload completed fix to verify that file uploads complete successfully and the removing exceeded files fix and exceeded files fix to manage file size limits efficiently.
Also, ensure users see a clear account registration successful message when relevant, and confirm that multiple forms fix and creates multiple forms fix prevent any duplication or overlap if you’re embedding more than one form on your site.
With the right testing and fixes applied, your WordPress payment form using Forminator will be fully functional, secure, and conversion-optimized.
Learn More: How to Integrate Payment Gateway on Your WordPress Site
Conclusion
Creating a WordPress payment form using Forminator is not only simple but also highly effective. With its intuitive drag-and-drop builder, built-in payment integrations, and dynamic field options, Forminator empowers users to build fully functional multi-step forms without writing a single line of code.
Whether you’re selling a few products, taking service bookings, or collecting event payments, Forminator is a powerful tool that adapts to your needs.
From handling calculations and page breaks to solving common issues like the page reload fix, conditionally visible fields fix, and upload completed fix, this plugin offers a user-friendly way to manage both form creation and performance.
So, if you’re ready to streamline your payment collection process, start experimenting with Forminator today!
Need help with custom form setup or want to explore more WordPress tutorials? Reach out to our expert team at Seahawk and let’s build something powerful together.
