StepraEngine Documentation
StepraEngine converts your existing WordPress forms into multi-step wizard experiences without replacing them. Your form builder stays in full control of fields, entries, notifications, spam protection, and submission. StepraEngine adds the guided frontend layer on top.
What StepraEngine does
After your form renders in the browser, StepraEngine reads the structure, splits it into steps automatically or based on headings you've placed, and manages navigation, validation, and progress as the visitor moves through it.
The form builder is never bypassed. When the visitor submits, the submission goes through the builder's own handler — entries, notifications, confirmations, and integrations all work exactly as configured.
Lite vs Pro: Lite supports up to 3 steps across Contact Form 7, WPForms, Elementor Forms, and Forminator. Pro removes the step limit and adds WooCommerce classic checkout, review summaries, builder targeting, numbered progress headings, and priority support.
Requirements
.WordPress: 5.8 or higher
.PHP: 7.4 or higher
.Form builder: One of the supported builders must be installed and active
.WooCommerce checkout (Pro only): WooCommerce classic checkout — not the Checkout BlockThe
WooCommerce Checkout Block uses a different technical structure and is not supported in the current version. StepraEngine Pro works with classic WooCommerce checkout. Supported Elementor checkout layouts work too, as long as they preserve the classic checkout form structure underneath.
Installation
Installing Lite
Add headings for manual step control (recommended)
Open StepraEngine settings
Test on desktop and mobile
Installing Pro
Download Pro from your Freemius account
Upload and activate Pro
Note: If StepraEngine Lite is active, StepraEngine Pro automatically deactivates it to prevent conflicts. If Lite remains installed after Pro is activated, you can safely delete it from Plugins → Installed Plugins.
How Steps Work
StepraEngine supports two setup styles, and you can mix them as needed: automatic splitting for speed, or manual control using headings and sections when you want exact structure.
Manual step control
Add a heading where you want a step to begin. The method depends on the builder:
The heading text becomes the step label — when numbered progress headings are turned on, your progress indicator can show "Your Project" instead of just "Step 2."
Step Navigation Rules
StepraEngine's numbered progress style lets visitors click directly on step indicators to jump around — but not without limits. The exact rule:
Required fields are never optional to skip — if a field is marked required, the visitor must fill it in correctly before the Next button or a forward jump is allowed. This is intentional: it prevents visitors from reaching the end of a form or checkout with missing or invalid information, which would only surface as a problem after they've already gone through the whole flow.
A step only becomes clickable once its required fields have been filled in and validated. Steps you haven’t reached yet stay locked and cannot be skipped to. Once a step is cleared, it stays clickable for the rest of the session — you can freely move between any step you’ve already completed.
The Review Summary is a separate path back
What this looks like in practice
On builders with a Review Summary (Pro), each entered section shows an Edit link. Clicking Edit jumps directly to that specific step — this works independently of the locked/unlocked state described above, since by the time a visitor reaches the summary, every step has already been validated.
Field Validation
StepraEngine validates the fields in the current step before allowing the visitor to continue. If any required field is empty or invalid, the Next button is blocked and the field is marked with an error state and focused for the visitor.
If the builder itself returns a validation error
Ghost Field Bypass & Anti-Spam Protocols
Hidden fields, system metadata, CAPTCHA tokens, honeypots, and builder-internal nonces are automatically bypassed. StepraEngine utilizes targeted exclusion logic to ensure anti-spam fields never falsely block a visitor.
Elementor CAPTCHA Security: The engine surgically protects the user by explicitly hunting for and bypassing .elementor-field-type-recaptcha_v3, .elementor-field-type-honeypot, and Turnstile blocks. Invisible spam tokens will never accidentally trigger a "This field is required" block.
Server-Side Snap-Back: If the backend system returns submission faults (like a Contact Form 7 wpcf7invalid trigger), Stepra reads the error source, overrides progress, and snaps the visitor directly back to the exact step containing the problematic field.
When a supported form or checkout flow returns a server-side validation error after submission, StepraEngine can route the visitor back to the step containing the invalid field, where that's supported by the builder.
Validation Languages
StepraEngine includes built-in validation messages in three languages — no WPML, Polylang, or other translation plugin required for the validation text itself:
.English
.French
.Spanish
Set the validation language in StepraEngine's settings. This controls the wording of messages like "This field is required" or "Invalid email address" — independent of whatever language your form's own labels and field text are in.
This is a built-in setting available in both Lite and Pro — it doesn’t require a separate multilingual plugin to work. If your site already uses WPML or Polylang for full site translation, StepraEngine’s validation language setting works alongside it.
Contact Form 7
Setup: enable Contact Form 7 in StepraEngine's builder targeting, then optionally add H3/H4 headings where you want step breaks.
WPForms
StepraEngine supports standard WPForms forms. It uses WPForms' own field containers to determine step structure automatically.
If WPForms’ native multi-page field is detected on a form, StepraEngine pauses on that form to prevent conflicts. Use one multi-step system per form, not both.
Elementor Forms
Requires the Elementor Forms widget (Elementor Pro). Add HTML fields containing H3/H4 headings to control step breaks manually, or let StepraEngine split automatically.
Forminator
StepraEngine supports the Forminator Form type (not polls or quizzes). Use Section fields to control step breaks manually, or let StepraEngine split automatically.
Calculation Fields Engine Fix: Forminator calculation fields (.forminator-calculation) and currency fields are explicitly treated as usable, visible inputs by StepraEngine, even if Forminator sets them as readonly or disabled. This ensures that forms relying on auto-calculations do not erroneously generate blank steps.
Pro adds a review summary as the final step on every supported builder — Contact Form 7, WPForms, Forminator, Elementor Forms, and WooCommerce checkout. This isn't a WooCommerce-only feature: a CF7 contact form or a WPForms application gets the same summary-before-submit experience as a checkout flow.
What it shows
Every field the visitor filled in, grouped by the step it came from, with the field's actual label — not a raw field name or ID. Choice fields (radio buttons, checkboxes) are summarized by their selected option text, not the underlying value.
Edit links
Each section in the summary has an Edit link that jumps directly back to the step it came from. This works independently of the step-lock rules in Step Navigation Rules — by the time a visitor reaches the summary, every step has already passed validation, so jumping back and forth is always allowed.
Review Summary is a Pro feature. It is not available in Lite, on any builder.
StepraEngine Pro transforms the overwhelming classic WooCommerce checkout layout into a frictionless, multi-step eCommerce funnel. WooCommerce retains 100% control over cart items, totals calculations, shipping endpoints, coupons, payment gateways, and order execution. Stepra simply layers a high-converting step framework over the UI.
WooCommerce checkout support is available in StepraEngine Pro only. See Pro plans →
StepraEngine Pro strictly requires the Classic Checkout shortcode structure. The React-based Checkout Block is structurally incompatible.
AJAX Asynchronous Updates
When WooCommerce executes dynamic background AJAX requests—such as refreshing shipping fees or changing payment fields via the updated_checkout event—Stepra intercepts the event instantly. It compares the live DOM against the stored signature, and if it detects a mismatch, it triggers stepraResetWooForRebuild to reconstruct the steps dynamically on the fly without requiring a page reload.
How Step Count is Calculated (Dynamic Signature)
StepraEngine does not force your store into a rigid, hardcoded template. It deploys a DOM-observer to analyze your live checkout payload and dynamically generates a data-stepra-woo-signature based on active elements:
Example: no shipping needed
A store selling only digital products or local pickup has no shipping address fields in checkout. StepraEngine detects this and never creates a shipping step — the checkout becomes Billing Details, Contact Info, and Order Notes (3 steps), or just Billing Details and Contact Info (2 steps) if notes aren't used either. No setting to find or toggle — it's calculated automatically from what's actually in the page.
Example: minimal checkout
A store that strips checkout down to just billing fields and an order notes box still gets a clean split — Billing Details, Contact Info, and Notes (3 steps) — rather than being left as one long unsegmented page.
Custom checkout fields
StepraEngine automatically detects most custom checkout fields added by WooCommerce extensions or custom code and includes them in the checkout flow. Since these fields are not part of WooCommerce's standard checkout structure, Stepra cannot always determine the logical section they belong to.
By default, Stepra places detected custom fields within the nearest compatible checkout section. This works well for many layouts, but the placement may not always match your intended checkout flow.
For the best results, we recommend using manual step headings to define exactly where each checkout step begins. When you control the step boundaries, custom fields naturally appear within the correct section, giving you complete control over the checkout layout.
This is especially useful for fields such as:
After adding or changing custom checkout fields, always review the checkout on the frontend to ensure the fields appear in the desired step.
Tip: If you install a WooCommerce extension that adds new checkout fields, you usually don’t need to reconfigure StepraEngine. However, if you want those fields to appear in a specific step, add or adjust your manual checkout headings (H3 or H4) or both for headings and subheaddings. to control the layout precisely.
Structure changes are detected automatically
StepraEngine checks the checkout structure every time the page loads. If WooCommerce, your theme, or another plugin adds, removes, or rearranges checkout fields, StepraEngine automatically detects the change and rebuilds the step layout.
Unlike plugins that rely on a one-time snapshot of the checkout, StepraEngine adapts to structural changes without requiring you to recreate your steps or clear stored layouts.
Common examples include:
This keeps your checkout steps synchronized with the current checkout instead of using an outdated layout.
Review summary on checkout
When Review Summary is enabled, StepraEngine adds a final review step before the order is placed. Customers can review their checkout details, including:
Each section includes an Edit link that returns the customer directly to the relevant checkout step without losing their progress.
Settings Dashboard
The StepraEngine Pro dashboard uses a compact, card-based interface divided strictly into the following functional areas.
ENGINE
LABELS & VALIDATION
STYLE
BUTTONS
StepraEngine Pro completely uncouples button styling from the progress bar, allowing you to build high-converting navigation actions with dedicated gradients and hover states:
Form Builder Targeting
Optimize site performance by dictating exactly which plugins StepraEngine is permitted to initialize on. Disabling a builder removes the Stepra layer entirely from that plugin's output, reverting the forms to their native single-page layout.
Note: By default, all installed builders are targeted. Use these toggles to selectively ignore specific form plugins if your site utilizes multiple conflicting ecosystems.
The Pro dashboard includes a real-time Diagnostics panel designed to eliminate guesswork during setup or support requests. It actively reports Plugin Edition and Version, Active Plugins count, Detected Builders currently running on your WordPress environment, and a deployable frontend console script to verify DOM structural states.
Privacy Guarantee: StepraEngine’s Diagnostics panel strictly evaluates architectural DOM nodes and PHP variables. It does not collect, scrape, or log visitor form data, PII, or WooCommerce transaction details.
All steps show at once / Layout flashes: StepraEngine failed to execute its JS lifecycle. Open your browser console (F12) and check for critical red JavaScript errors. Another heavily cached or broken plugin may be halting global script execution.
Next button doesn't advance: Validation is halting the progression. Required fields must be populated and formatted correctly. Check the current step for hidden fields mapped incorrectly by your builder that may have erroneously triggered an error state.
Clicking a step number does nothing: This is the intended behavior if the target step has not been unlocked yet. You cannot skip forward past un-validated steps.
WooCommerce steps aren't appearing: Verify that your Pro license is actively registered, WooCommerce is toggled On in Builder Targeting, and your checkout page utilizes the classic woocommerce_checkout shortcode or elementor checkout rather than the WooCommerce Blocks implementation.
Pro activation blocked: StepraEngine includes automatic conflict protection. If you activate Pro, it will automatically deactivate Lite for you. However, if Lite is Network Activated on a WordPress Multisite, Pro cannot override it. You must network-deactivate Lite first before activating Pro.
Nothing works after a plugin update: Check the Stepra Diagnostics panel to verify the target builder is still detected. If a third-party plugin update completely rewrote their core DOM structure, contact Stepra Support with your Diagnostics report and builder version numbers.
See it on your own checkout.
Try the live demo, or jump straight to pricing — Pro starts at $34/year for one site.
